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（プロジェクト設定ファイル）

プロジェクトのルートに CLAUDE.md ファイルを作成すると、Claudeがそのプロジェクトのルールや文脈を自動的に理解します。

CLAUDE.mdに書く内容の例:

# プロジェクト概要
 
このプロジェクトは社内の経費精算システムです。
 
## 技術スタック
- フロントエンド: React + TypeScript
- バックエンド: Python (FastAPI)
- データベース: PostgreSQL
 
## コーディング規約
- 変数名は日本語コメントで説明を付ける
- エラーメッセージは日本語で表示する
- テストは必ず書く
 
## 注意点
- 本番環境のデータは扱わない
- APIキーは .env ファイルに保存する

効果:

• 毎回「このプロジェクトは…」と説明しなくて済む
• プロジェクトのルールに沿ったコードを生成してくれる
• チーム全員が同じ設定でClaudeを使える

配置場所と使い分け:

グローバル設定はすべてのプロジェクトに適用されます。プロジェクト用の設定がある場合は、両方が読み込まれます。

MCPサーバー（外部サービス連携）

MCP（Model Context Protocol） を使うと、Claudeが外部サービスと連携できるようになります。

MCPとは？

Claudeの能力を拡張する仕組みです。例えば：

• Slackのメッセージを読み書きする
• Shopifyの商品データを取得する
• データベースに直接クエリを実行する
• ファイルシステムを操作する

設定方法

VS Codeの設定（settings.json）でMCPサーバーを追加します。

設定ファイルの開き方:

1. Cmd + Shift + P でコマンドパレットを開く
2. 「Preferences: Open User Settings (JSON)」を選択

設定例（Slack MCP）:

{
  "claude.mcpServers": {
    "slack": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-your-token-here",
        "SLACK_TEAM_ID": "T0123456789"
      }
    }
  }
}

MCPサーバーの種類

MCPサーバーは提供するものによって3つのタイプに分類できます：

例: Shopify関連のMCPの違い

よく使うMCPサーバー

情報・ドキュメント提供型（参照用、認証不要が多い）

データ提供型（実データアクセス、認証が必要）

ツール・アクション型（操作を実行）

詳細は MCP公式リポジトリ や Awesome MCP Servers を参照してください。

Shopify Dev MCP

Shopifyアプリ開発時に便利なMCPサーバーです。認証不要でローカルで動作します。

タイプ: 情報・ドキュメント提供型（実データへのアクセスはなし）

できること:

• Shopify APIドキュメントの検索
• Admin GraphQL APIのスキーマ探索
• Polaris、Hydrogen、Storefront Web Componentsの情報取得
• Shopify Functionsの開発支援

設定例:

{
  "claude.mcpServers": {
    "shopify-dev": {
      "command": "npx",
      "args": ["-y", "@shopify/dev-mcp"]
    }
  }
}

Shopify MCP（データ提供型）

Shopifyストアの実データにアクセスするMCPサーバーです。認証が必要です。

タイプ: データ提供型（実際の商品・在庫・注文にアクセス）

活用例:

ECサイト運営で以下のようなことができます：

在庫が10個以下の商品を一覧にして

先週の売上トップ10を集計して

商品「サマーTシャツ」の価格を2,980円に更新して

Slack連携の活用

SlackのMCPサーバーを設定すると、Claudeから直接Slackを操作できます。

できること

情報収集:

#general チャンネルの今日のメッセージを要約して

@田中さん からの未読メンションを確認して

投稿作成:

#dev-team に今週の進捗報告を投稿して。内容は以下:
- 機能Aを実装完了
- 機能Bはテスト中

分析:

#support チャンネルの過去1週間の問い合わせを分析して、
よくある質問をまとめて

設定に必要なもの

1. Slack Bot Token: Slackワークスペースで作成
2. Team ID: Slackの設定から取得
3. 必要な権限: channels:read, chat:write など

詳しい設定方法はメンターに相談してください。

サブエージェント（自動タスク分割）

Claudeは複雑なタスクを自動的に小さなタスクに分割して、並列で処理することがあります。これをサブエージェントと呼びます。

どんなとき使われる？

• 複数ファイルを同時に検索・編集するとき
• 大きなリファクタリングを行うとき
• テストを並列実行するとき

例

プロジェクト内のすべてのJavaScriptファイルで、
var を let または const に置き換えて

→ Claudeが自動的に:

1. 対象ファイルを探すエージェント
2. 各ファイルを修正するエージェント
3. 変更を検証するエージェント

を起動して、効率的に処理します。

確認方法

サブエージェントが動いているとき、チャットに「Agent」などの表示が出ることがあります。 複数の処理が同時に進むので、単純なタスクより結果が出るまで時間がかかる場合があります。

Agent Teams（チーム機能）

Agent Teamsは、サブエージェントをさらに発展させた機能です。ユーザーが役割を定義したエージェントチームを作成し、協調して作業させることができます。

サブエージェントとの違い

役割の例

Agent Teamsでは、以下のような専門家を定義できます:

• QAエキスパート: テスト作成、品質チェック担当
• フロントエンド担当: UI/UX、React/Vue等の実装
• バックエンド担当: API、データベース、サーバー処理
• セキュリティ担当: 脆弱性チェック、セキュリティレビュー
• ドキュメント担当: README、API仕様書の作成

使用例

このプロジェクトにQAチームとして参加して、
テストカバレッジを改善してください

→ QAエキスパートとしての視点で、テスト戦略を提案し、テストコードを作成します。

現在の状況

Agent Teamsは実験的機能として提供されています。基本的なサブエージェント機能は自動的に使われますが、詳細なチーム定義機能は今後さらに発展していく予定です。

まずはサブエージェントの自動分割機能を活用し、必要に応じてAgent Teamsの設定を検討してください。

困ったときは

エラーが出たとき

エラーメッセージをそのまま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と一緒に作っていきます。