Claude Code VSCode拡張の使い方｜黒い画面なし

「Claude Codeを使ってみたいけれど、あの黒い画面が怖い」「AIに勝手にファイルを書き換えられたらどうしよう」。

そう感じて、導入の一歩目で止まっている方は少なくありません。

紹介記事の多くはコマンドの入力から始まるため、最初の画面で手が止まってしまいがちです。

ただ、VS Code向けの拡張機能を使えば、コマンドを一度も打たずにClaude Codeを始められます。

しかも、AIがやろうとした変更は元の内容と並べて表示され、1つずつ目で見て承認できます。

この記事では、拡張機能の導入から画面の見方、変更を承認する流れ、任せる範囲の決め方までを順番に解説します。

Claude Code VSCode拡張とは？ターミナル版との3つの違い

Claude Code VSCode拡張とは、VS Codeの中にClaude Codeのチャットパネルを追加する拡張機能です。

正式な名称は「Claude Code」。発行元はAnthropic、拡張IDは anthropic.claude-code です。

いつも使っているエディタの右側（または左側）にパネルが1つ増えるだけ、と考えると分かりやすいはずです。

拡張版とターミナル版は何が違うのか（入力・確認・履歴の3点）

違いは大きく3つです。

比べる点	ターミナル版（CLI）	VSCode拡張
入力する場所	黒い画面にコマンドを打つ	エディタ内のパネルに書く
変更の確認	文字の羅列で差分を読む	元の内容と変更案が左右に並ぶ
会話の履歴	コマンドで呼び出す	一覧から検索して開ける

とくに効くのが2つめの「変更の確認」です。

何が書き換わるのかを画面で見てから、許可するかどうかを決められます。

「黒い画面なし」で使える範囲と、ターミナルが必要になる場面

ここは正直に線を引いておきます。

拡張機能は自前のCLIを内蔵しているため、パネルで使う分にはコマンド入力もインストール作業も発生しません。

ただし、次の2つだけは別途CLIの導入が必要です。

• ターミナルで claude と打って起動したい場合
• claude mcp add で外部ツール（MCPサーバー）を追加する場合

拡張機能はPATHに claude を追加しないため、この2つは拡張機能だけでは完結しません。

逆に言えば、それ以外の使い方はすべてパネルの中で完結します。

拡張とターミナル版、どちらを選べばいいか

選び方はシンプルです。

• 画面を見ながら1つずつ承認したい・コマンドを覚えたくない→ VSCode拡張
• タブ補完など、CLIだけの操作感が必要 → ターミナル版
• 迷うなら両方入れてよい（会話の履歴は共有されます）

両方入れた場合、ターミナルで claude --resume と打てば、パネルで進めた会話の続きを開けます。

そもそもClaude Codeが何をするものかから知りたい方は、Claude Codeとは？の入門記事を先に読むと理解が早くなります。

Claude Code VSCode拡張の導入手順【4ステップ】Windows・Mac共通

ここからが実際の導入です。手順は4つ、いずれもクリックと検索だけで終わります。

事前に必要なもの（VS Code 1.94.0以上・有料のClaudeプラン）

先に2つだけ確認してください。

• VS Code 1.94.0以上（メニューのHelp → Aboutでバージョンを確認できます）
• 有料のClaudeプラン（Pro・Max・Team・Enterprise）またはClaude Consoleアカウント

APIキーの購入や貼り付けは不要です。サインインはブラウザで完結します。

プランの料金は変わることがあるため、最新の料金は公式サイトでご確認ください。

1. 拡張機能ビューを開いて「Claude Code」を検索する

VS Codeを開き、拡張機能ビューを表示します。

• Windows・Linux：Ctrl+Shift+X
• Mac：Cmd+Shift+X

左側に検索欄が出るので、「Claude Code」と入力します。

2. インストールする（拡張ID anthropic.claude-code・発行元Anthropic）

検索結果には名前の似た拡張機能が並ぶことがあります。

押す前に、次の2点を必ず確認してください。

• 発行元がAnthropicであること
• 拡張IDが anthropic.claude-code であること

確認できたら「インストール」を押します。ここまでで、いわゆる導入作業は終わりです。

3. パネルを開く（4つの入口から好きなものを使う）

起動の入口は4つ用意されています。どれを使っても開くものは同じです。

• エディタ右上のSparkアイコン（ファイルを開いている時だけ表示）
• アクティビティバーのSparkアイコン（常に表示・過去のセッション一覧が開く）
• コマンドパレット（Cmd+Shift+P／Ctrl+Shift+P で「Claude Code」）
• ステータスバー右下の「✱ Claude Code」（ファイルを開いていなくても押せる）

パネルはドラッグで移動でき、右サイドバー・左サイドバー・エディタタブのどこにでも置けます。

4. ブラウザでサインインする（APIキーは不要）

初回はサインイン画面が出ます。ボタンを押すとブラウザが開くので、そこで承認するだけです。

キーの文字列をコピーして設定ファイルに貼り付ける、といった作業は一切ありません。

インストールしたのにアイコンが出ないときの対処

アイコンが見当たらない時は、上から順に試してください。

• ファイルを1つ開く（フォルダを開いただけでは、エディタ右上には表示されません）
• VS Codeが1.94.0以上か確認する
• コマンドパレットから「Developer: Reload Window」を実行する
• 他のAI系拡張機能を一時的に無効にする
• ワークスペースの信頼を確認する（制限モードでは動きません）

ターミナルからの導入手順も知りたい方は、Claude Code 使い方【非エンジニア向け】完全ガイドで解説しています。

ここまでは、早ければ10分ほどで終わります。

ただ、実際に手が止まるのはこの先の「何をどう頼むか」です。入れただけでは何も起きません。

Claude Code VSCodeの使い方｜画面の見方と最初の指示【3ステップ】

まずパネルのどこに何があるかを押さえます。

• 中央下の入力欄：日本語でやりたいことを打ち込む場所
• 入力欄の下のモード表示：任せる範囲を切り替える
• 上部のSession historyボタン：過去の会話を探す
• 残りのコンテキスト量の表示：1回の会話でどれだけ話せるかの目安

1. パネルに日本語でやりたいことを書く（改行はShift+Enter）

難しい書き方は要りません。やってほしいことをそのまま書きます。

• 「このフォルダのPDFをまとめてテキストにして」
• 「この表から月ごとの合計を出して」
• 「このファイルの中で使われていない項目を洗い出して」

Enterで送信されます。改行したい時はShift+Enterです。

途中で送信されてしまうのが嫌な方は、設定の useCtrlEnterToSend をONにしてください。

Ctrl／Cmd+Enterでの送信に変わり、Enterは改行になります。

指示の書き方そのものでつまずく場合は、AIプロンプトの書き方を参考にしてください。

2. 気になる行を選んで渡す（Option+K／Alt+K）

エディタで選択したテキストは、そのままClaudeから見えています。

入力欄の下に、いま何行選んでいるかが表示されます。

行番号まで指定して渡したい時は、Option+K（Mac）／Alt+K（Windows・Linux）を押します。

@app.ts#5-10 のような参照が入力欄に差し込まれます。

@ に続けてファイル名やフォルダ名を打つ形でも指定でき、部分一致で候補が出ます。

3. 会話を分ける・前の会話に戻る（Session history）

パネル上部の「Session history」から、過去の会話をキーワードや期間で探して再開できます。

新しい会話には自動でタイトルが付くため、後から探しやすくなっています。

別件を並行して進めたい時は、Open in New Tab（Cmd+Shift+Esc／Ctrl+Shift+Esc）で分けてください。

1つの会話に話題が混ざると、指示の精度が落ちます。

変更は承認・却下・指示し直しの3択｜勝手に書き換えられない仕組み

ここが、この記事でいちばんお伝えしたい部分です。

AIが勝手にファイルを書き換えることはありません。編集の前に、必ず許可を求められます。

元の内容と変更案が左右に並んで出る

Claudeがファイルを編集しようとすると、画面に差分が表示されます。

左に元の内容、右に変更案。どの行がどう変わるのかが色付きで並びます。

そこで選べるのは3択です。

• 承認する：そのまま反映する
• 却下する：反映せずに取りやめる
• 別の指示を出す：「ここは触らないで」と伝え直す

コードが読めなくても、「何行変わるのか」「どのファイルが対象か」は目で見て判断できます。

差分の画面で自分で直してから承認する

変更案が惜しい時は、その画面で自分の手で直してから承認することもできます。

手を入れた場合、編集した事実はClaudeにも伝わります。

元の提案のまま進んでいると思い込まれず、続きの作業に反映されます。

承認したあとに間違いに気づいたら｜3つの巻き戻し

「承認してしまったが、やっぱり違った」。これも戻せます。

パネルのメッセージにマウスを乗せると巻き戻しのボタンが出て、3つから選べます。

• 会話をここから分岐させる：コードは残したまま、指示だけやり直す
• コードをここまで戻す：会話は残したまま、ファイルだけ元に戻す
• 両方戻す：完全にその時点の状態へ戻る

1回承認したら後戻りできない、という仕組みではありません。

【弊社の実例】この形で作って動かしているもの

弊社では、弊社で作ったツールでSNSのAPIに接続し、投稿ごとの表示回数や反応のデータを自動で取得・蓄積しています。

毎回スクリーンショットを撮って集計する作業がなくなり、「数字を集める作業」がゼロになりました。

集まったデータの週次分析も、そのままAIに任せています。

作る過程は特別なことをしていません。日本語で頼み、出てきた変更を画面で見て承認する。その繰り返しです。

ただし、画面の上で1つずつ確認できても、「何を作らせるか」を決めるのは人の仕事として残ります。

どのデータを集めれば判断に使えるのか。ここは指示を出す側が決める必要があります。

任せる範囲を決める権限モード3つ｜Manual・Plan・Edit automatically

「毎回確認するのは面倒」「でも全部任せるのは不安」。その調整が権限モードです。

入力欄の下にあるモード表示をクリックすると、その場で切り替えられます。

Manual｜ファイルの編集前に毎回確認する

ファイルの編集と、ほとんどのコマンドの実行前に、毎回許可を求められるモードです。

確認の回数は増えますが、知らないうちに何かが変わることがありません。

始めたばかりのうちは、これで十分です。

Plan｜先に計画を出させて、読んでから承認する

何をするかの計画を先に出し、承認を待つモードです。

計画はMarkdownの文書として開くので、そこにコメントを書き込んで「ここはこうして」と返せます。

手順が複数にまたがる作業を頼む時に向いています。

Edit automatically｜確認なしで編集させる

確認を挟まずに編集が進むモードです。速い反面、何が変わったかを後から追う必要があります。

出所の分からないコードやファイルを扱う時は使わず、VS Codeの制限モードと手動での承認を併用してください。

最初はどれを選ぶか・初期値を変える設定

順番としては、不安なうちはManual、任せ方が分かってきたらPlanがおすすめです。

Edit automaticallyは、内容を自分で判断できるようになってからで十分間に合います。

新しい会話の初期値は、設定の claudeCode.initialPermissionMode で変更できます。

VSCode拡張を仕事で使う4つの場面｜画面を見ながら任せられること

プログラムを書く用途以外でも、日々の作業に使えます。

共通しているのは、実行前に何が起きるかを画面で確認できるという点です。

1. フォルダの中のファイルを整理する

ファイル名の付け直し、形式の変換、不要ファイルの洗い出しなどを頼めます。

実行前に対象の一覧が画面に出るので、消してほしくないものはその場で却下できます。

2. CSVを読ませて集計する

@ でCSVファイルを指定し、「月ごとの合計を出して」と頼むだけです。

関数の書き方を調べる時間がなくなり、集計そのものに集中できます。

3. 作ったものをその場で開いて確認する

作られたファイルはエディタのタブでそのまま開きます。

別のソフトに移らずに中身を見て、気になる箇所をその場で直せます。

統合ターミナルに出た内容も @terminal:名前 の形で渡せます。

4. 外部のツールに繋ぐ（MCPの追加だけはターミナルが必要）

MCPを使うと、社内で使っている他のツールとClaudeを繋げられます。

ただしMCPサーバーの追加だけは統合ターミナルで claude mcp add を使うため、ここは別途CLIの導入が必要です。

追加したあとの管理は、パネルで /mcp と打てば行えます。

弊社ではClaude Codeでツールを作ることで、LINE公式アカウントの運用ツールであるエルメの簡単な設定などをAIでできるようにしています。

MCP連携ができるため、メッセージの作成まわりやデータの取得が可能です（2026年6月現在）。

データ取得はAIがそのまま引っ張ってきてくれるので、取得した数字を使った分析までひと続きで任せられます。

ここまで読んで、作業自体は任せられそうだと感じた方も多いはずです。

ただ、AIに任せられるのは手を動かす部分だけです。どの業務を切り出すか、LINE公式アカウント側とどう繋ぐかを決めるのは、人の仕事として残ります。

切り出す業務の選び方は、AI業務効率化の始め方【5ステップ】にまとめています。

よくある質問｜Claude Code VSCode拡張の使い方

Q. プログラミングの知識がなくても使えますか？

使えます。指示は日本語で書けるため、知識ゼロからでも始められます。

ただし「何をさせたいか」を具体的に伝える力は必要です。

まずはファイルの整理や集計など、結果を目で確かめられる小さい作業から試してください。

Q. 料金はかかりますか？無料で使えますか？

有料のClaudeプラン（Pro・Max・Team・Enterprise）またはClaude Consoleアカウントが前提です。

APIキーの購入や設定は不要です。金額は改定されることがあるため、最新の料金は公式サイトでご確認ください。

プランの選び方を含めた全体像はClaude Code 使い方【非エンジニア向け】完全ガイドで解説しています。

Q. ターミナル版（CLI）も入れる必要がありますか？

パネルで使う分には不要です。

ターミナルで claude と打ちたい場合と、MCPを追加する場合だけ別途CLIの導入が必要になります。

両方入れると会話の履歴は共有され、ターミナルで claude --resume から続きを開けます。

Q. Cursorなど他のエディタでも使えますか？

VS Codeのフォークにも導入できます（Open VSXレジストリ経由）。

手順は同じで、エディタ側の拡張機能ビューで「Claude Code」を検索してインストールします。

Q. AIが勝手にファイルを消してしまうことはありませんか？

Manualモードなら、編集の前に毎回確認が入ります。

承認したあとも、チェックポイントからコードだけを元に戻せます。

出所の分からないコードを扱う時は、VS Codeの制限モードを併用してください。

まとめ｜黒い画面を触らずにClaude Codeを始める

要点を整理します。

• 拡張機能はVS Codeの中にパネルが増えるだけ。CLIは内蔵されている
• 導入は4ステップで、コマンド入力は発生しない
• 変更は承認・却下・指示し直しの3択から選べる
• 権限モード（Manual・Plan・Edit automatically）で任せる範囲を決められる
• 戻したい時はチェックポイントで会話・コード・両方から選んで巻き戻せる
• ターミナルが要るのは claude コマンドとMCPの追加だけ

黒い画面が不安で止まっていたのなら、その理由はもう消えています。

一方で、手を動かす部分を任せられても、どの業務から切り出すかは自社で決める必要があります。

とくにLINE公式アカウントのように、お客様と直接つながる仕組みと繋ぎ込む場合は、設計の順番を間違えると配信事故につながります。

ここは一人で組むより、実際に構築してきた相手と一緒に決めたほうが早く進みます。

お問い合わせ

LINE構築/運用代行に関するご相談など以下から可能です

LINEで問い合わせをする

 

メールでのお問い合わせ希望の方は以下からお願いします

※営業メール・相互リンクなどLINE構築代行に関係のないお問い合わせはご遠慮ください