はじめに
こんにちは、KUDs です。
この記事では、VS Code に Claude Code を導入して、日本語で指示するだけで開発できる環境を作ります。
所要時間は20分ほど、費用はかかりません（Claude のプラン料金以外に、追加の支払いは発生しません）。
先に朗報をお伝えしておくと、この回はとっても簡単です。
Claude Code というと「ターミナルで動く AI」というイメージがあるかもしれませんが、VS Code の拡張機能は本体を同梱しているため、コマンドのインストールは一切不要です。
VS Code を入れて、拡張機能を入れて、ログインする。それだけです。
この記事について
この記事は、AWS を初めて触る方向けのシリーズの1本です。
シリーズ全体の地図と読む順番は、ロードマップにまとめてあります。
この記事は、前回の「Homebrew の導入」が終わっていることが前提です。まだの方はこちらもどうぞ（使わない手順も併記してあります）。
なお、Claude の Pro プラン以上への加入が必要です（Pro / Max / Team / Enterprise のいずれか）。
現在のプランは Usage 画面からご確認いただけます。
なぜターミナルではなく VS Code なのか
Claude Code は、ターミナルでも、デスクトップアプリでも、ブラウザでも使えます。
そのなかで、学習目的なら VS Code の拡張機能がいちばんおすすめです。
理由は3つあります。
1. AI が書いたコードが目の前に開かれる
ターミナルだけだと「何かやってくれたらしい」で終わりがちですが、VS Code ならファイルがそのままエディタに表示されます。
2. 変更前と変更後の差分がその場で見える
承認する前に「何がどう変わるのか」を確認できます。これが学習効率に一番効きます。
3. 実務で使われているツールそのもの
VS Code はエンジニアの現場で標準的に使われているエディタです。ここで慣れておけば、そのまま仕事や副業に持っていけます。
「AI に丸投げして完成品だけ受け取る」のは楽ですが、何も身につきません。
副業や資格取得を考えている方ほど、コードとファイルが見える環境で進めてください。
手順1: VS Code をインストールする
ターミナルで1行です。
brew install --cask visual-studio-code
--cask が付いているのは、VS Code が「画面のあるアプリ」だからです（ターミナルで使うコマンドは --cask なしで入ります）。
インストールが終わると、アプリケーションフォルダに VS Code が入っています。
Homebrew を使わない場合
Homebrew を入れていない方は、公式サイトからでも入れられます。
- 公式サイトから Mac 版をダウンロードします
- ダウンロードした zip を解凍すると
Visual Studio Code.appが出てきます - これをアプリケーションフォルダにドラッグ＆ドロップして完了です
すでに入っている方はバージョンを確認してください
Claude Code の拡張機能には、VS Code 1.94.0 以上が必要です。
メニューの「Code」→「Visual Studio Code について」で確認できます。
古い場合は「Code」→「更新の確認」から更新してください。
コマンドでも可能ですよ。
code --version
手順2: Claude Code 拡張機能をインストールする
- VS Code を起動し、
Cmd + Shift + Xを押して拡張機能ビューを開く - 検索窓に「Claude Code」と入力
- 「Claude Code for VS Code」を選択
- 発行元が Anthropic であることを確認して「Install」をクリック
発行元の確認は必ず行ってください。 人気のある拡張機能には、名前を似せた別物が存在することがあります。
インストール後にアイコンが出てこない場合は、VS Code を再起動してください。
コマンドのインストールは不要です
ここが、この回がラクな理由です。
VS Code の拡張機能は、Claude Code 本体（CLI）を同梱しています。
そのため、claude コマンドを別途インストールする必要はありません。
つまり、Homebrew も Node.js も不要です。
「環境構築は前提ツールのインストールで詰まる」という定番の苦労を、まるごと回避できます。
（VS Code のターミナルから claude と直接打ちたい場合だけ、別途インストールが必要になります。このシリーズでは不要です）
詳細は公式ドキュメントにまとまっています。
Windows をお使いの方へ
手順はほぼ同じです。
- VS Code は公式サイトから Windows 版のインストーラーをダウンロードして実行
- 拡張機能の手順は同じ（ショートカットは、
Cmd→Ctrl、Option→Altに読み替えてください） - 拡張機能ビューは
Ctrl + Shift + X、コマンドパレットはCtrl + Shift + P Option + KはAlt + Kです
WSL2 は不要です。 Windows のまま進められます。
手順3: Claude アカウントでサインインする
- VS Code で何かファイルを1つ開きます（何でもかまいません）
- エディタ右上のスパークアイコンをクリックすると、Claude Code のパネルが開きます
- 初回はサインイン画面が出るので「Sign in」をクリック
- ブラウザが開くので、Claude のアカウントで認証します
API キーの入力は不要です。 Pro プラン以上に加入していれば、それがそのまま使えます。
パネルが見つからないときの開き方
スパークアイコンはファイルを開いていないと表示されません。
見当たらない場合は、以下のいずれでも開けます。
| 場所 | 操作 |
|---|---|
| アクティビティバー（左端） | スパークアイコンをクリック。常に表示されています |
| ステータスバー（右下） | 「✱ Claude Code」をクリック。ファイルを開いていなくても使えます |
| コマンドパレット | Cmd + Shift + P →「Claude Code」と入力 |
サインインが終わると「Learn Claude Code」というチェックリストが表示されます。
一通り触ってみたい方は、これに沿って進めてみてください。不要なら X で閉じられます。
それでも表示されない場合、制限モードになっている場合があります。
画面上部の「管理」をクリックし、「信頼する」をクリックしてください。
(もしくは、Cmd + Shift + P → 「config.security.workspace.trust」)
手順4: 基本的な使い方を覚える
本格的に使うのは次回以降ですが、最低限これだけ知っておくと迷いませんという点をまとめます。
VS Code: 作業用フォルダを作って開く
VS Code は起動時にウェルカムページを表示してくれます。
ここから「開く(Open…)」を押して、作業したいフォルダを選択して「開く」を押します。
今回は、以下のように作業してみましょう。
- 画面左の「🏠<ユーザー名>」をクリック (ホームディレクトリと言います。)
- 「新規フォルダ」で、「aws-claude-practice」という名前で作成
- 「aws-claude-practice」を選択して「開く」をクリック
- 画面左上に、「AWS-CLAUDE-PRACTICE」と表示されていれば OK です。
もしくは、ターミナルで以下を実行しても同じことができます。
mkdir ~/aws-claude-practice/ ## ホームディレクトリ(~/)に"aws-claude-practice"というディレクトリを作成(mkdir)する
code ~/aws-claude-practice/ ## VS Code を選択したディレクトリで開く
VS Code: ターミナルを開く
VS Code を開いて、Command + J (Windows の場合は Control + J)でターミナルを開けます。
今後は VS Code 上で使用しましょう。
Claude Code: /switch でモデル変更
画面下部の「/」をクリックしてもいいし、/switch と入力しても構いません。
現時点では大した作業はしないので、 Haiku 等の軽量なモデルを選択しておくといいでしょう。
Claude Code: @メンション でファイルを指定する
@ を入力するとファイル名を検索できます。
「このファイルについて聞きたい」というときは @ でファイルを指定すると、Claude がその中身を読んでくれます。
エディタでテキストを選択している場合、その部分は自動的に Claude から見えています。
選択範囲をファイル名つきで明示的に渡したいときは Option + K を押します。
Claude Code: 権限モードの確認
入力欄の下に、現在の権限モードが表示されています。
ここをクリックすると切り替えられます。
学習時は Manual モード（毎回確認を求めるモード）で進めてください。
面倒に感じるかもしれませんが、そこで表示されるコマンドを読むことが、いちばんの勉強になります。
権限まわりの設定は、ステップ6の記事でじっくり扱います。ここでは「そういう表示がある」とだけ覚えておいてください。
Claude Code: 会話履歴の確認
パネル上部の「Session history」から過去の会話を呼び出せます。
「昨日の続きから」ができるので、作業を中断しても大丈夫です。
うまくいかないときは
Q. スパークアイコンが表示されません
A. まずファイルを1つ開いてください。エディタ右上のアイコンは、ファイルを開いていないと出ません。それでも出ない場合は Cmd + Shift + P で「Developer: Reload Window」を実行してください。VS Code のバージョンが 1.94.0 未満でも表示されません。
Q. サインイン画面が何度も出てきます
A. 「Developer: Reload Window」を試してください。それでも直らない場合は、ターミナルから code . で VS Code を起動すると解決することがあります。
Q. Pro プランに入っているのに使えません
A. サインインに使ったアカウントが、Pro プランに加入しているアカウントと同じか確認してください。複数の Claude アカウントをお持ちの場合、取り違えていることがあります。
Q. 拡張機能が見つかりません / インストールできません
A. VS Code のバージョンが古い可能性があります。1.94.0 以上に更新してください。
よくある質問
Q. Claude の無料プランでは使えませんか？
A. 使えません。Pro プラン以上が必要です。
Q. AI の利用料が AWS に請求されませんか？
A. されません。モデルを動かしているのは Anthropic 側で、料金は Claude のプランに含まれています。AWS に請求されるのは、あなたが AWS 上に作ったリソースの分だけです。
Q. Cursor など他のエディタでも使えますか？
A. VS Code 系のエディタであれば同じ拡張機能が使えます。ただしこのシリーズでは VS Code を前提に進めます。
Q. ターミナルの画面のほうが好きなのですが
A. 拡張機能の設定で「Use Terminal」にチェックを入れると、CLI 風の表示に切り替えられます。ただし差分が見える利点が失われるので、慣れるまではグラフィカルなパネルをおすすめします。
Q. 会話の内容はどこかに保存されますか？
A. セッション履歴としてローカルに保存され、パネルから呼び出せます。
Q. 複数の会話を同時に進められますか？
A. できます。コマンドパレットの「Open in New Tab」で、別の会話をタブとして開けます。
さいごに
VS Code に Claude Code を導入し、AWS とつながっていることを確認するところまでを解説しました。
やったことは5つです。
- VS Code をインストールする（1.94.0 以上）
- Claude Code 拡張機能をインストールする（コマンドのインストールは不要）
- Claude アカウントでサインインする（API キー不要）
- パネルの基本的な使い方を覚える
次はいよいよ、AWS をコマンドから操作できるようにします。
AWS CLI が Claude が AWS 開発をするために必須のツールになりますので、頑張りましょう！
シリーズの全体像は、ロードマップから確認できます。
KUDs のサービス
KUDs では、実際に AWS 上で動く Web サービスを公開しています。
ご質問やご指摘は contact@kuds.jp までお寄せください。
「ここで詰まった」という報告は、記事を良くするうえでいちばんありがたいフィードバックです。
コメント