Claudeの基本的な使い方

Claude Codeを使って、AIと一緒にプログラミングする方法を学びましょう。

Claude Codeとは？

Claude Codeは、VS Code上でClaude（AI）と対話しながらプログラミングできる拡張機能です。

2つのインターフェース

Claude Codeには2つの使い方があります：

このワークショップでは主にチャットUIを使います。

• 中央のClaudeアイコン: ターミナルを開くアイコン
• 右下のアイコン: Claude CodeのチャットUIを開くアイコン

ターミナルでの起動方法（参考）:

claude

ターミナルで claude と入力するとClaude Codeが起動します。

注意: /compact や /clear などのスラッシュコマンドは、ターミナルでのみ使用可能です。チャットUIでは、新しいチャットを開始するには「+」ボタンを使用します。

あなたがやること

• 自然言語で「何を作りたいか」を伝える
• 出来上がったものを確認する
• 修正や追加をお願いする

Claudeがやること

• コードを書く
• ファイルを作成・編集する
• エラーを修正する
• わからないことを説明する

基本の流れ

1. Claude Codeを開く

1. VS Codeでプロジェクトフォルダを開く
2. 左サイドバーの Claudeアイコン をクリック
3. チャットパネルが表示される

2. 作りたいものを伝える

チャット欄に入力してEnter：

今日の日付を表示するプログラムを作って

3. Claudeが作業する

Claudeがコードを書き、ファイルを作成します。 作業内容は画面に表示されるので、何をしているか確認できます。

4. 確認して、必要なら修正を依頼

時刻も一緒に表示して
フォーマットを YYYY年MM月DD日 にして

承認（許可）の判断

Claudeがファイルの作成・編集・コマンド実行をするとき、あなたの許可を求めてきます。

許可が必要な操作

• ファイルの作成・編集
• コマンドの実行（プログラムの実行など）
• ファイルの削除

判断のポイント

迷ったら

このコマンドは何をするの？

と聞いてから判断すればOKです。許可を間違えても、後から修正できます。

一括許可のオプション

同じ種類の操作を何度も許可するのが面倒な場合、「Allow for this session」などのオプションで、セッション中は自動許可にすることもできます。

使用量の制限について

Claude Codeには使用量の制限があります。上限に達すると一時的に使えなくなります。

制限の種類

制限に近づいたら

• 画面に警告が表示されます
• 制限に達すると、指定された時間まで待つ必要があります（「Today ○○にリセット」と表示されます）
• Maxプランへの切り替え: メンターに声をかけてください（会社負担で対応します）

使用量を節約するコツ

• 不要に長い会話を続けない
• 新しいトピックは新規チャット（「+」ボタン）で始める
• 一度で完璧を目指さず、小さく試す

会話が長くなったときの対処

Claudeとの会話が長くなると、動作が遅くなったり、古い内容を忘れたりすることがあります。 これは Quota（使用量制限）とは別の問題 です。

対処法

チャットUI（VS Code）の場合:

• 「+」ボタンで新しいチャットを開始するのが効果的です

ターミナルの場合:

• /compact コマンドで会話履歴を圧縮できます

こんなときに新しいチャットを

• 会話が長くなってきたとき
• 「さっき言ったことを忘れてる？」と感じたとき
• 新しい作業を始めるとき

話しかけ方のコツ

良い例

「CSVファイルを読み込んで、売上の合計を計算するツールを作って」
「ボタンを押したらメッセージが表示されるWebページを作って」
「このエラーを直して」
「このコードが何をしているか説明して」

より良い例（具体的に伝える）

「CSVファイル（1列目が日付、2列目が商品名、3列目が金額）を読み込んで、
金額の合計を計算するPythonスクリプトを作って」

「入力欄とボタンがあって、ボタンを押すと入力した名前に
『こんにちは、○○さん！』と表示するWebページを作って。HTMLとJavaScriptで。」

ポイント

1. 何を作りたいか を明確に
2. どんな入力/出力か を具体的に
3. 使う技術 の希望があれば伝える（Python、JavaScript など）

わからなければ、ざっくり伝えてOK。Claudeが質問してくれます。

便利な機能

@メンションでファイルを参照させる

特定のファイルについて質問したいとき、@ を使ってファイルを指定できます。

@index.html を見て、ボタンの色を青に変えて

@data.csv の内容を分析して、売上のトレンドを教えて

使い方:

1. チャット欄で @ を入力
2. ファイル名の候補が表示される
3. 選択してメッセージを続ける

Claudeがファイルの中身を読んで、的確に対応してくれます。

画像を見せる

スクリーンショットやデザイン画像をClaudeに見せることができます。

使い方:

• チャット欄に画像を ドラッグ&ドロップ
• または ペースト（Cmd + V）

活用例:

[スクリーンショットを貼り付けて]
このエラー画面の意味を教えて

[デザイン画像を貼り付けて]
この画面と同じようなレイアウトをHTMLで作って

[手書きのスケッチを貼り付けて]
このUIを実装して

コードを選択して質問する

VS Codeでコードを選択して、直接Claudeに質問できます。

使い方:

1. VS Codeのエディタでコードを 選択（ドラッグ）
2. 右クリック → 「Claude: Add to Chat」
3. 選択したコードがチャットに追加される
4. 質問を入力

活用例:

[コードを選択して追加]
この部分が何をしているか説明して

[コードを選択して追加]
ここにバグがありそう。確認して

プロジェクト全体を理解させる

新しいプロジェクトで作業を始めるとき、まず全体像を把握させると効果的です。

このプロジェクトの構成を説明して

このプロジェクトで使っている技術スタックを教えて

主要なファイルと役割を一覧にして

Claudeがフォルダ構造やファイルを読んで、プロジェクトを理解します。

効果的に進めるコツ

小さく始めて、少しずつ追加する

一度に完璧なものを作ろうとせず、最小限から始めましょう。

良い進め方:

1. まず「Hello World」だけ表示するページを作って
2. 次に入力フォームを追加して
3. 次にボタンを押したら挨拶を表示するようにして
4. 次にデザインを整えて

避けたい進め方:

入力フォームとボタンがあって、押したら挨拶が表示されて、
デザインも綺麗で、バリデーションもあって、
エラーハンドリングもあって、レスポンシブ対応もして...

一度に全部伝えると、Claudeも混乱しやすくなります。

うまくいかないときはリセットする

会話が長くなったり、Claudeが混乱してそうなときは、最初からやり直すのが効果的です。

リセットのサイン:

• 同じエラーを何度も直せない
• 以前言ったことを忘れている
• 提案がどんどん複雑になる

リセット方法:

1. チャットパネル上部の「+」ボタンで新しいチャットを開始（ターミナルでは /clear）
2. やりたいことをシンプルに伝え直す
3. 最小限の機能から再スタート

遠回りに見えますが、結果的に早く進むことが多いです。

よく使う操作

新しいチャットを始める

チャットパネル上部の「+」ボタンをクリックします。 新しい話題を始めるときに使います。

直前の変更を取り消す

Claudeが作った変更を元に戻したいとき：

さっきの変更を元に戻して

または、Claudeの回答の横にある「Undo」ボタンでも戻せます。

ターミナルで使えるコマンド（参考）

ターミナルでClaude Codeを使う場合は、以下のスラッシュコマンドが使えます：

注意: これらのコマンドはチャットUIでは使用できません。

Claudeを使いこなすテクニック

基本操作に慣れてきたら、CLAUDE.md、MCPサーバー、サブエージェントなどの上級機能を活用しましょう。詳しくはClaudeを使いこなすテクニックを参照してください。

困ったときは

エラーが出たとき

エラーメッセージをそのままClaudeに見せてください：

このエラーが出た。直して

Claudeがエラーメッセージを読んで、原因を説明し、修正してくれます。

何を聞けばいいかわからないとき

○○がしたいんだけど、どうすればいい？
○○って何？
このプロジェクトで次に何をすればいいと思う？

遠慮なく質問してください。Claudeは説明が得意です。

Claudeの提案がよくわからないとき

もう少し詳しく説明して
初心者向けに説明して
なぜそうするの？

実践: 最初の一歩

環境構築が終わったら、以下を試してみましょう。

練習1: 簡単な計算

VS Codeで my-first-app フォルダを開き、Claudeパネルで：

1から100までの合計を計算するPythonプログラムを作って、実行して

→ Claudeがファイルを作成・実行します。許可を求められたらAllowしましょう。

練習2: ファイル操作

fruits.txt というファイルを作って、りんご、バナナ、オレンジ を1行ずつ書いて

続けて：

fruits.txt を読み込んで、全部大文字にして表示するプログラムを作って

練習3: Webページ

シンプルな自己紹介ページをHTMLで作って。名前と趣味を表示して

続けて：

作ったHTMLファイルをブラウザで開いて

次のステップ

基本操作に慣れたら、議事録要約ツールのチュートリアルに挑戦しましょう。

実際に業務で使えるツールを、Claudeと一緒に作っていきます。