Back Claude Code

08.VS CodeでClaude Codeを使えるようにする手順【インストールからログインまで】

2026.06.23 1 min read
ARTICLE HERO

前回の記事では、VS Code拡張機能版がローカルでClaude Codeを動かす最強の環境である理由をまとめました。今回はその続編として、実際にVS CodeへClaude Codeをインストールして、使えるようにするまでの手順を一つずつ解説します。

ひとつ大事な前提をおさらいしておきます。VS Code拡張機能版は、以前の記事でPowerShellを使ってインストールしたClaude Code本体（CLI）が土台になっています。拡張機能だけを入れても動きません。CLI版のインストールをまだ終えていない場合は、先にそちらを済ませておいてください。

Step 1：VS Codeで拡張機能を検索・インストールする

  1. VS Codeを起動します。
  2. 画面左側のサイドバーにある「拡張機能」アイコン（4つの四角が並んだアイコン）をクリックします。または、ショートカットキー（Windows: Ctrl+Shift+X / Mac: Cmd+Shift+X）でも開けます。
  3. 上部の検索欄に「Claude Code」と入力します。
  4. 検索結果の中から、発行元（Publisher）が「Anthropic」となっている公式の「Claude Code」を選択します。
  5. ⚠️ 似た名前の非公式拡張機能も存在するため、必ず発行元が「Anthropic」になっていることを確認してください。「Anthropic」以外のものは選ばないでください。
  6. 「インストール」ボタンをクリックします。
  7. 「発行元の “Anthropic” を信頼しますか？」という確認画面が出た場合は、「発行元を信頼してインストールする」をクリックしてください。

数秒でインストールが完了します。

インストール後に表示されるアイコンについて

インストールが完了すると、VS Codeのあちこちに「Spark icon（スパークアイコン）」と呼ばれる閃光のような形のアイコンが追加されます。

このアイコンは、次の2か所に表示されます。

  • 左側のサイドバー（Activity Bar） … 常時表示されています。クリックするとセッションリストが開き、新規会話を始めたり過去の会話を再開できます。
  • エディタ右上（Editor Toolbar） … ファイルを開いているときだけ表示されます。公式ドキュメントでは「最もすばやくClaudeを開く方法」として案内されているのがこちらです。

「紫色のアイコンを探す」のではなく、この「スパークアイコン（⚡のような形）」を目印にしてください。

Step 2：Claudeアカウントと連携（初回ログイン）する

インストール直後は、あなたが誰かを認識させるための認証が必要です。

  1. スパークアイコン（左サイドバーまたはエディタ右上）をクリックして、Claude Codeのパネルを開きます。
  2. 初回はパネルにサインイン画面が自動的に表示されます。「Sign in」ボタンをクリックします。
  3. ログイン方法の選択画面が表示されます。「Claude.ai Subscription」を選択してください。（「Console / API」のほうは選ばないでください。こちらを選ぶとAPIの従量課金が適用されます。）
  4. 「外部サイトを開く」という確認が出たら、「開く」をクリックします。
  5. 自動的にWebブラウザが立ち上がり、Anthropicのログイン画面が表示されます。
  6. 有料プラン（Pro / Max / Team / Enterpriseのいずれか）を契約しているアカウントでログインします。
  7. 「Claude CodeがClaude accountへの接続を希望しています」という画面が出たら、「Authorize（承認する）」をクリックします。
  8. ブラウザに認証完了のメッセージが表示されたら、ブラウザを閉じてVS Codeの画面に戻ります。

（※ブラウザに表示されるメッセージの文言はバージョンによって変わることがあります。何らかの完了メッセージが出ていれば認証は成功しています。）

VS Codeに戻ると、Claude Codeのチャットパネルが使える状態になっています。

ログイン後に出てくる「Learn Claude Code」チェックリストについて

サインインが完了すると、パネルに「Learn Claude Code（チェックリスト）」が表示されることがあります。これはClaude Codeの基本的な使い方を案内するチュートリアルです。

  • 各項目の「Show me」をクリックすると、その機能の使い方を実際に見ながら学べます。
  • 「×」を押せば、いつでも閉じられます。
  • 後から再表示したい場合は、VS Codeの「設定 → 拡張機能 → Claude Code → Hide Onboarding のチェックを外す」で再表示できます。

急ぎの場合は閉じてしまっても問題ありませんが、初めて使う方はここを一通り確認しておくと、基本的な操作を短時間で把握できます。

Step 3：権限モードを確認して、使い始める

Claude Codeには、AIにどこまで自由に操作を任せるかを決める「権限モード」が3種類あります。パネル下部のモード表示をクリックすると切り替えられます。

  • 通常モード（Normal） … AIがファイルを変更する前に、毎回「実行してよいですか？」と確認してきます。初心者にはこのモードを強くおすすめします。
  • Planモード（Plan） … AIがまず「これからこういう手順でやります」という計画を先に提示し、あなたが承認してから実行します。実行前に計画を見直したい場合に向いています。
  • 自動承認モード（Auto-accept） … AIが確認なしに編集を実行します。操作に慣れてから使うモードです。

最初のうちは通常モード（Normal）のまま使うことを強くおすすめします。意図しないファイルの変更や削除を防ぐための、大事な安全弁です。

準備完了です

ここまで来れば、VS Code拡張機能版のClaude Codeがすぐ使える状態です。

試しに、チャットパネルに次のように話しかけてみてください。

こんにちは。このプロジェクトのフォルダ構成を教えてください。

左側にエディタ（ファイルの中身）、右側にClaude Codeのチャットパネルを並べた状態で会話できれば、セットアップは完璧です。

もし途中で見慣れない画面が出た場合は、その画面の内容をそのまま教えてください。一緒に確認します。