対象読者： VSCodeを使い慣れているが、Claude Codeをまだ使ったことがない方
所要時間： セットアップ約5分、記事読了約15分
はじめに
「AIにコードを書いてもらう」と聞くと、ブラウザでChatGPTを開いてコピペ…というイメージがあるかもしれません。でも Claude Code を使えば、VSCode上で直接AIと対話しながらコードを書けます。差分確認・ファイル編集・Gitコミットまで、エディタから一切離れずにこなせるのが最大の魅力です。
この記事では、インストールから基本的な使い方・便利なショートカットまで、初心者が最初につまずきやすいポイントを丁寧に解説します。
目次
- Claude Codeとは？
- インストール手順
- 画面の見方・基本操作
- 実際に使ってみよう：基本ワークフロー
- 覚えておきたいショートカット一覧
- 便利な機能：ファイル参照・ターミナル連携
- 権限モードの使い分け
- 初心者が陥りがちな失敗と対策
- まとめ
1. Claude Codeとは？
Claude CodeはAnthropicが開発したAIコーディングアシスタントです。VSCode拡張機能として提供されており、エディタ内でAIとチャット形式で会話しながら：
- コードの説明・解説を受ける
- バグ修正や機能追加をAIに依頼する
- リファクタリングの提案・実行を受ける
- Gitコミットメッセージの生成やPRの作成を自動化する
といった作業が可能になります。
ほかのAIツールとの違い
| 項目 | ブラウザ版Claude/ChatGPT | Claude Code（VSCode拡張） |
|---|---|---|
| 操作の場所 | ブラウザ ↔ エディタを行き来 | VSCode内で完結 |
| ファイル参照 | コピペが必要 | @ファイル名 で直接参照 |
| 差分確認 | テキスト表示のみ | インライン差分ビューアで見やすく確認 |
| 変更の適用 | 手動コピペ | ワンクリックで適用 |
| Git連携 | なし | コミット・PR作成まで対応 |
2. インストール手順
前提条件
- VSCode バージョン 1.98.0 以上
- Anthropicアカウント（無料で作成可能。初回起動時にサインイン）
インストール方法
方法A：拡張機能マーケットプレイスから（推奨）
- VSCodeを開く
- Cmd+Shift+X（Mac）/ Ctrl+Shift+X（Windows/Linux）で拡張機能ビューを開く
- 検索ボックスに Claude Code と入力
- Anthropic 製のものを選び、「インストール」 をクリック
方法B：コマンドパレットから
- Cmd+Shift+P（Mac）/ Ctrl+Shift+P（Windows/Linux）でコマンドパレットを開く
- Extensions: Install Extensions を検索・実行
- 「Claude Code」を検索してインストール
インストール後の確認
インストールが完了すると、以下の場所に Spark（✱）アイコン が表示されます：
- エディタ右上（ファイルを開いているとき）
- 左サイドバーのアクティビティバー
- 画面下部のステータスバー（右下）
アイコンが表示されない場合： Cmd+Shift+P → Developer: Reload Window でウィンドウを再読み込みしてください。 それでも表示されない場合は、ClineやContinueなど他のAI拡張機能が競合している可能性があります。
初回サインイン
初回起動時にAnthropicアカウントでのサインインを求められます。画面の指示に従ってブラウザ認証を完了してください。
3. 画面の見方・基本操作
Claude Codeを開くと、右サイドバー（またはタブ）にチャットパネルが表示されます。
┌─────────────────────────────────────┐ │ ✱ Claude Code [新規] [設定] │ ← タイトルバー ├─────────────────────────────────────┤ │ │ │ (会話履歴がここに表示される) │ ← 会話エリア │ │ ├─────────────────────────────────────┤ │ [選択中: 3行] モード: Default │ ← コンテキスト表示 │ ┌─────────────────────────────┐ │ │ │ ここにメッセージを入力... │ │ ← 入力ボックス │ └─────────────────────────────┘ │ │ [/] [@ ファイル] [コンテキスト使用率] │ └─────────────────────────────────────┘
主要なUI要素
| 要素 | 説明 |
|---|---|
| 入力ボックス | Claudeへのメッセージを入力する場所。Enterで送信、Shift+Enterで改行 |
| / ボタン | コマンドメニューを開く（モデル切替、設定など） |
| @ 参照 | ファイルや行範囲を会話に含める |
| コンテキスト使用率 | 現在のトークン使用量。満杯に近づいたら/compactで整理 |
| モード表示 | 現在の権限モード（後述）。Shift+Tabで切り替え |
4. 実際に使ってみよう：基本ワークフロー
Step 1：Claude Codeを開く
以下のいずれかの方法でパネルを開きます：
- エディタ右上の ✱アイコン をクリック
- ステータスバー右下の 「✱ Claude Code」 をクリック
- Cmd+Shift+P → Claude Code: Open を実行
Step 2：コードを選択して質問する
Claude Codeの特徴的な機能として、エディタで選択したコードが自動的にコンテキストとして含まれます。
② Claude Codeの入力ボックスに「このコードを説明してください」と入力
③ Enter で送信
コピペ不要で、選択範囲がそのままClaudeに伝わります。
Step 3：変更の確認と適用
Claudeがコードの変更を提案すると、インライン差分ビューア が表示されます。
─────────────────────────────
– const result = data.map(x => x * 2)
+ const result = data.map((item) => item * 2)
- 「承認」 → ファイルに変更が適用される
- 「拒否」 → 変更を却下
- フィードバック入力 → 「もう少し変数名を分かりやすくして」など追加指示が可能
Step 4：繰り返し対話する
一度の指示で完璧な結果が得られないことも多いです。自然な言葉で「もっと〜してほしい」「この部分は変えないで」などと指示しながら、対話的に改善していきましょう。
5. 覚えておきたいショートカット一覧
必須ショートカット
| アクション | Mac | Windows/Linux |
|---|---|---|
| Claudeとエディタのフォーカス切り替え | Cmd+Esc | Ctrl+Esc |
| ファイル参照を挿入（@ファイル名#行番号） | Option+K | Alt+K |
| 新しい会話を開始 | Cmd+N（Claudeにフォーカス時） | Ctrl+N |
| 会話を新しいタブで開く | Cmd+Shift+Esc | Ctrl+Shift+Esc |
| 権限モードを切り替え | Shift+Tab | Shift+Tab |
チャットパネル内のショートカット
| アクション | ショートカット |
|---|---|
| メッセージ送信 | Enter |
| 改行（送信しない） | Shift+Enter |
| 入力をキャンセル | Escape |
| モデルを選択 | Cmd+P（Mac）/ Meta+P |
| 拡張思考モードのオン/オフ | Cmd+T（Mac）/ Meta+T |
| 最後の操作を元に戻す | Ctrl+_ |
| 会話履歴を検索 | Ctrl+R |
パネルの位置はカスタマイズ可能
Claude Codeのパネルはドラッグで好きな場所に移動できます：
- 右サイドバー：コードを見ながら並行してAIと会話したい場合に最適
- 下部パネル：ターミナルと並べて使いたい場合に便利
- エディタタブ：フルスクリーンでAIに集中したい場合
6. 便利な機能：ファイル参照・ターミナル連携
ファイル参照（@-mention）
入力中に @ を入力するとファイル候補が表示されます。ファジーマッチに対応しているので、@auth と打つだけで auth.js・AuthService.ts などが候補として表示されます。
@auth.ts#45-60 → 45〜60行目だけを参照（トークン節約に有効）
@src/components/ → フォルダ全体を参照
実用例：
バリデーション関数を使うようにリファクタリングしてください」
ターミナル連携
VSCodeの統合ターミナルで claude コマンドを実行すると、CLIモードでClaude Codeを使えます。また、ターミナルの出力をそのままClaudeに読み込ませることもできます。
活用例：
「さっきのビルドエラーを修正してほしい」
→ エラーログをそのままClaudeが参照して修正案を提示
会話履歴の管理
過去の会話は自動で保存されます。
- パネル上部のドロップダウンをクリック
- キーワード検索 or 日時（今日・昨日・過去7日）でフィルタ
- 会話をクリックして再開
7. 権限モードの使い分け
Claude Codeには3つの動作モードがあります。Shift+Tab で切り替えられます。
Default モード（推奨：初心者）
AIが何をしようとしているかを把握しながら進めたい初心者に最適です。「やっぱりやめて」と言えば即座に止められます。
Plan モード
複雑な変更（複数ファイルにまたがるリファクタリングなど）を行う前に、全体像を把握したいときに便利です。計画段階でフィードバックを入れることもできます。
Auto-Accept モード
信頼できる単純な作業（テストのフォーマット統一など）に使います。ただし慣れるまでは使わないことを強く推奨します。予期しない変更が積み重なってしまうことがあります。
8. 初心者が陥りがちな失敗と対策
失敗1：指示が曖昧すぎる
OK: 「この関数は処理に500msかかっています。
パフォーマンスを改善してください。
データ量は最大1万件を想定しています」
背景・制約・目標を明示することで、的確な回答が得られます。
失敗2：大きな変更を一度に依頼する
OK: 手順を分けて依頼する
①「ログインエンドポイントを作ってください」
②「パスワードのハッシュ化を実装してください」
③「セッション管理を追加してください」
ステップを分けることで、各変更を確認しながら安全に進められます。
失敗3：コンテキストが溢れたまま使い続ける
パネル下部のコンテキスト使用率が高くなると、回答の品質が下がることがあります。
または: 新しいトピックは 新規会話（Cmd+N）で始める
失敗4：差分を確認せずに承認する
Auto-Acceptモードや素早い承認で「意図しない変更が混ざっていた」というケースがあります。
– 初心者はDefaultモードを使う
– 変更前後の差分を必ず一読してから承認する
– git commitを小まめに打っておき、問題があれば revert できるようにしておく
失敗5：エラーが出たら同じ指示を繰り返す
同じ指示を繰り返しても同じ結果になりがちです。
「このエラーの原因と修正方法を教えてください」と聞く
9. まとめ
Claude CodeのVSCode拡張を使いこなすためのポイントをまとめます：
クイックスタートチェックリスト
- [ ] VSCode 1.98.0以上にアップデート
- [ ] 拡張機能マーケットプレイスから「Claude Code」をインストール
- [ ] Anthropicアカウントでサインイン
- [ ] ✱アイコンをクリックしてパネルを開く
- [ ] コードを選択して「このコードを説明して」と試してみる
- [ ] Shift+Tab でモードを切り替えてみる
- [ ] Option+K（Mac）でファイル参照を試してみる
最初の1週間でやること
- コード解説 → 理解できていないコードを選択して「説明して」と聞く
- バグ修正 → エラーメッセージをそのまま貼り付けて原因を聞く
- リファクタリング → 「このコードをより読みやすくして」と依頼する
- コミットメッセージ生成 → 「この変更に適したコミットメッセージを作って」と依頼する
さらに学ぶには
- コマンドパレットから Claude Code: Open Walkthrough を実行するとガイドツアーが利用できます
- / を入力するとコマンド一覧が表示され、利用可能な機能を探索できます
- 困ったときは「このエラーの意味を教えて」とClaudeに直接聞くのが最も手軽です
AIと協力してコードを書くのは、最初は少し戸惑うかもしれませんが、慣れると思考を中断せずに実装に集中できるという体験が得られます。まずは小さなタスクから試してみてください。
*最終更新: 2026年3月*
＜過去の記事＞
Playwright Codegenで爆速テスト作成体験！もうセレクタ探しに時間は使わない
【入門】Playwrightインストール完全ガイド｜Windows/Macの導入手順と動作確認まとめ
単体テスト完全ガイド｜基礎から設計・実装までソフトウェア品質を支えるやり方
アジャイル開発のテスト戦略｜品質を落とさないテスト自動化とベンダー活用の実践例
はじめてのテストアウトソーシング入門｜開発会社が失敗しない外部委託の進め方
