このページの内容
要点
- 拡張機能をインストールし、Sparkアイコンで開いて、サインインします。
- チャットパネル、インラインdiff、ファイルのメンション、チェックポイントが使えます。
- 拡張機能とターミナルは、同じエンジンを使っています。
Claude Codeの拡張機能とは？
私たちはソフトウェア会社のRocketLauncherで、毎日Claude Codeを使って開発しています。VS Codeの拡張機能は、Claude Codeを画面上で使う方法です。ターミナルに入力する代わりに、コードの横のパネルでClaudeと話します。Claudeはプロジェクトを読み、ファイルを編集し、コマンドを実行できます。変更は、確認してから確定します。
事前に必要なもの
- VS Code 1.94.0以降。
- 有料のClaudeプラン（Pro、Max、Team、Enterprise）か、Claude Consoleアカウント。無料のClaudeプランにはClaude Codeが含まれません。選択肢は、Claude Codeを無料で使う方法をご覧ください。
- 作業用のプロジェクトフォルダ。
インストール方法
- VS Codeを開きます。
Ctrl+Shift+X（WindowsとLinux）またはCmd+Shift+X（Mac）で、拡張機能ビューを開きます。- Claude Codeを検索し、Anthropicの拡張機能をインストールします。
Ctrl+Shift+PまたはCmd+Shift+Pで、コマンドパレットを開きます。- Claude Codeと入力し、Open in New Tab を選びます。
- 求められたら、ClaudeアカウントかConsoleアカウントでサインインします。
Cursorを使っていますか？ 同じ拡張機能をそちらにもインストールできます。
最初の実行
- File, Open Folder でプロジェクトフォルダを開きます。
- ファイルを開きます。すると、エディタの右上のツールバーにSparkアイコンが表示されます。クリックしてClaudeを開きます。
- 小さくて明確なタスクを入力します。例：「このプロジェクトが何をするものか説明して、主なファイルを一覧にして。」
- 答えを読みます。次に変更を頼みます。例：「実行方法についての短いREADMEのセクションを追加して。」
- Claudeは編集をdiffとして提案します。ひとつずつ承認または却下します。
最初は読み取りだけの質問から始めてください。変更が入る前に、Claudeがプロジェクトをどう見ているか分かります。
主な機能
インラインdiffと計画のレビュー
Claudeは変更をエディタ上のdiffで見せます。先に計画を立ててもらうこともできます。計画を読み、手直ししてから、Claudeに実行させます。
@メンション
@ を入力すると、Claudeにファイルを指定できます。コードの行を選択すると、Claudeは選択範囲を自動で認識します。Alt+K（WindowsとLinux）または Option+K（Mac）を押すと、ファイルと行範囲への参照を挿入できます。
ターミナルの出力
@terminal:name でターミナルの出力を参照できます。nameはターミナルのタイトルです。エラーを貼り付けなくても、Claudeが読み取ります。
チェックポイント
Claudeは、自分が行ったファイル編集を記録しています。メッセージにカーソルを合わせると巻き戻しボタンがあり、その時点までコードを戻せます。
タブと履歴
複数の会話を、別々のタブやウィンドウで開けます。それぞれが自分の履歴を持ちます。Sparkアイコンの色付きの点は、そのタブが許可待ちか、完了したかを知らせます。
覚えておきたいショートカット
| 操作 | WindowsとLinux | Mac |
|---|---|---|
| エディタとClaudeのフォーカスを切り替える | Ctrl+Esc | Cmd+Esc |
| 新しい会話をタブで開く | Ctrl+Shift+Esc | Cmd+Shift+Esc |
| 選択範囲の@メンションを挿入する | Alt+K | Option+K |
最近のmacOSでは、Cmd+Esc がシステムのショートカットに使われていることがあります。反応しない場合は、システムの設定を変更してください。
時間を節約するコツ
- プロジェクトのルートに
CLAUDE.mdファイルを置き、ルールとコマンドを書きます。Claudeはセッションの開始時に読み込みます。 - gitを使います。大きなタスクの前にコミットしておけば、いつでも戻せます。
- 1つの会話では1つのタスクにします。次のタスクは新しいタブで開きます。
- 変更のあとは、テストやビルドを実行するようClaudeに頼みます。
- 繰り返す作業にはスキルを追加します。
- Claudeに本物のアプリを使わせたいときは、MCPでツールをつなぎます。まずは非開発者向けのMCPガイドから始めてください。
うまく動かないとき
- Sparkアイコンが表示されない。 エディタでファイルを開いているときだけ表示されます。ファイルをひとつ開いて、右上を見てください。
- 拡張機能が読み込まれない。 VS Codeが1.94.0以降か確認し、再起動します。
- サインインできない。 お使いのプランにClaude Codeが含まれているか確認します。無料のClaudeプランには含まれません。
- Claudeが違うフォルダを編集する。 親フォルダではなく、対象のプロジェクトフォルダそのものをVS Codeで開いてください。
拡張機能とターミナル、どちらを使う？
どちらも同じClaude Codeのエンジンで動きます。CLAUDE.md、設定、MCPサーバーは両方で使えます。パネルやdiff、クリック操作が好きなら拡張機能を選びます。速さやスクリプトが好きならターミナルを選びます。両方を使う人も多いです。
GoHighLevelでサービスにする
VS Codeに慣れたら、地元の事業者向けに実際のものを作れます。よくあるのは、ランディングページ、リードフォーム、自動化のセットです。Claude Codeがファイルを書き、GoHighLevelが裏でCRM、メッセージ、予約を動かします。ClaudeをGoHighLevelのアカウントにつなぐこともできます。ClaudeをGoHighLevelにつなぐ方法をご覧ください。Claude Code + GoHighLevelキットでは、1つのプロジェクトを最初から最後まで進めます。ほかのキットでは、受付、Webサイト、リード獲得を扱います。収入は約束しません。結果は、あなたの仕事とお客様しだいです。