ここからは実際に手を動かす。VSCode本体のインストール、Claude Code拡張機能の追加、初回のサインインまでを順に進める。やることは3つだけで、この章が終わると自分のパソコンでClaude Codeが使える状態になる。

目次

章タイトル
1環境構築の3ステップ
2事前に必要なもの
3ステップ1:VSCodeをインストールする
4ステップ2:拡張機能を追加する
5ステップ3:サインインする
6動作を確認する
7うまくいかないときは

1. 環境構築の3ステップ

やることは3つだけである。

┌─────────────────────────────────────┐
│ ステップ1:VSCodeをインストールする    │  約5分
│   ファイルを編集するアプリを入れる      │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│ ステップ2:拡張機能を追加する          │  約2分
│   VSCodeの中にClaude Codeを組み込む   │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│ ステップ3:サインインする              │  約3分
│   自分のアカウントと紐づける           │
└─────────────────────────────────────┘
                ↓
           使える状態になる

全部で10分程度を見ておけばよい。難しい設定や、専門用語を打ち込む場面は出てこない。

すでにVSCodeを使っている場合は、ステップ1を飛ばしてよい。

2. 事前に必要なもの

作業を始める前に、2つ確認しておく。

有料プランの契約が必要

Claude Codeは、無料プランでは使えない。 ここが最初の関門になる。

必要なのは、次のいずれかのアカウントである。

種類補足
Claude Pro個人向け。最も一般的
Claude MaxProより多く使える上位プラン
Claude Team / Enterprise組織向け
Claude Console従量課金のアカウント

普段 claude.ai を無料で使っている場合は、契約の切り替えが先になる。

なお、APIキーの取得は必要ない。「AIツールを使うにはAPIキーが要る」という話を聞いたことがあるかもしれないが、VSCode拡張版はブラウザでのサインインだけで済む。キーを発行したり、どこかに貼り付けたりする作業は発生しない。

3. ステップ1:VSCodeをインストールする

「開発環境 — ターミナルとVSCode拡張機能、どちらで進めるか」で触れた通り、VSCodeはMicrosoftが無料で配布しているファイル編集アプリである。まずこれを入れる。

すでにVSCodeが入っている場合は、この節を飛ばして4章「ステップ2:拡張機能を追加する」へ進む。

手順

  1. ブラウザで VSCodeの公式サイト を開く
  2. 中央の青いダウンロードボタンを押す(自分のOSに合ったものが自動で選ばれる)
  3. ダウンロードされたファイルを開く
  4. 画面の指示に沿って進める

画像は準備中VSCode公式サイトのトップで、中央にダウンロードボタンが表示されている画面

インストーラーの選択肢は、すべて初期設定のままでよい。判断が必要な箇所は出てこない。

起動を確認する

インストールが終わったらVSCodeを開く。次のような画面が出れば成功である。

画像は準備中インストール直後のVSCodeで、左端にアイコン列が並んでいる初期画面

日本語表示にしたい場合は、この時点で日本語化の拡張機能を入れておくとよい。手順は4章「ステップ2:拡張機能を追加する」と同じで、検索する名前が Japanese Language Pack になるだけである。

4. ステップ2:拡張機能を追加する

VSCodeの中にClaude Codeを組み込む。ここが本題になる。

手順

  1. VSCodeの左端に並ぶアイコンから、四角が4つ並んだアイコンを押す(拡張機能の一覧)
  2. 上部の検索欄に Claude Code と入力する
  3. 提供元が Anthropic のものを選ぶ
  4. Install ボタンを押す

画像は準備中拡張機能の検索結果で、提供元がAnthropicと表示されている画面

キーボードで開く場合は Ctrl + Shift + X(Macは Cmd + Shift + X)でも同じ画面に行ける。

追加されたことを確認する

インストールが終わると、左端のアイコン列にClaude Codeのアイコンが増える。これが表示されていれば成功である。

なお、別途ソフトを入れる必要はない。この拡張機能は、動作に必要なものを自分で持っている。「Claude Code本体を先に入れる」といった前準備は要らない。

5. ステップ3:サインインする

最後に、自分のアカウントと紐づける。

手順

  1. 左端のClaude Codeアイコンを押して、パネルを開く
  2. Sign in ボタンが表示されるので押す
  3. ブラウザが自動で開く
  4. 契約しているアカウントでログインし、認可を許可する
  5. VSCodeに戻る

画像は準備中Claude CodeパネルにSign inボタンが表示されている、サインイン前の画面

パスワードをVSCodeに入力する場面は無い。認証はブラウザ側で完結し、終わるとVSCodeが自動で認識する。

この作業は最初の1回だけである。次回以降は、パネルを開けばすぐ使える。

初回のチェックリストについて

サインイン後、Learn Claude Code という案内が表示される場合がある。基本操作を順に体験させてくれるものだが、次の「基本操作 — 指示を出し、変更を確認して承認する」で同じ内容を扱うため、ここでは閉じてよい。右上の × で消せる。

6. 動作を確認する

きちんと動いているかを確かめる。

Claude Codeのパネルに、次のように日本語で打ち込んでみる。

こんにちは。今なにができますか?

返答が返ってくれば、環境構築は完了である。

この時点ではまだファイルを操作しなくてよい。「指示が届き、返事が返ってくる」ことだけを確認できればよい。実際にファイルを読ませたり書き換えさせたりするのは、次の「基本操作 — 指示を出し、変更を確認して承認する」で扱う。

7. うまくいかないときは

つまずきやすい箇所と対処をまとめる。

症状対処
拡張機能を入れたのにアイコンが出ないVSCodeを再起動する。それでも出なければ、コマンドパレット(Ctrl + Shift + P)で Developer: Reload Window を実行する
Sign in を押してもブラウザが開かない手動でブラウザを開き、claude.ai にログインしてから、もう一度Sign inを押す
サインインしたのに「Not logged in」と出る一度VSCodeのウィンドウを再読み込みする(上記と同じ手順)
検索しても拡張機能が見つからないVSCodeのバージョンが古い可能性がある。ヘルプメニューから更新を確認する
「無料プランでは使えない」旨が表示される2章「事前に必要なもの」の通り、有料プランの契約が必要になる

検索欄に似た名前の拡張機能が複数出てくる場合は、提供元が Anthropic であることを必ず確認する。名前が近い別物が並ぶことがある。

次のページ

これでClaude Codeが動く状態になった。ここからが本番である。

次の「基本操作 — 指示を出し、変更を確認して承認する」では、実際にファイルを渡して作業させてみる。指示の出し方、AIがファイルを読み書きする流れ、そして提示された変更内容を確認して承認するという一連の型を扱う。人間の担当は、出てきた結果を確認することになる。その確認を実際にどう行うのかが分かる章になる。

← ② 開発環境 ｜ 次:④ 基本操作 →