Claude CodeをVSCodeで使う方法を徹底解説！料金や始め方も紹介

Claude Code（クロードコード）は、Anthropic（アンソロピック）社が提供するAIコーディング支援ツールです。

VSCode（Visual Studio Code）の拡張機能として導入すれば、エディタ上でAIにコードの生成・修正・デバッグを直接依頼できるようになります。

しかし、「VSCodeでの始め方がわからない」「料金はいくらかかるの？」と疑問を感じている方も多いのではないでしょうか。

本記事では、Claude CodeをVSCodeで使うためのインストール手順や料金プラン、基本操作から注意点まで解説します。

VSCodeでClaude Codeを活用して、業務効率化にぜひお役立てください。

SHIFT AIでは、ChatGPTやGeminiなどの生成AIを活用して、副業で収入を得たり、昇進・転職などに役立つスキルを学んだりするためのセミナーを開催しています。

また、参加者限定で、「今日から使えるプロンプト100選」「新時代のAI×デザイン活用ガイド」「Nano Banana Pro 徹底解説」など、全12個の資料を無料で配布しています。

「これからAIを学び始めたい」「AIを使って副業収入を得たい」「AIで業務を効率化したい」という方は、ぜひ以下のボタンからセミナーに参加してみてください。

VSCodeでClaude Codeを使うときの料金プラン

Claude CodeをVSCodeで利用するには、有料プランへの加入またはAPI従量課金の設定が必要です。

VSCode拡張機能のインストール自体は無料ですが、AI機能を使うにはPro（月額$20）以上のサブスクリプション、もしくはAPIキーの登録が求められます。

無料のFreeプランではClaude Codeを利用できないため、この点は事前に把握しておきましょう。

料金体系は大きく以下の2つに分かれています。

• Claudeの料金プラン（サブスクリプション）
• APIの料金体系（従量課金）

それぞれ詳しく解説します。

Claudeの料金プラン

Claude Codeを個人で使う場合、選択肢となるのはPro・Max 5x・Max 20xの3つのプランです。

それぞれ月額料金や使用量が異なるため、自分の開発スタイルに合ったプランを選びましょう。

以下の表で、各プランの違いを確認してください。

プラン	月額料金（USD）	使用量の目安	優先アクセス	向いている人
Pro	$20/月 （年払い：$200一括＝約$17/月）	Freeの5倍	・ピーク時の優先アクセス ・新機能への早期アクセス	プログラミング学習・個人の小規模開発
Max 5x	$100/月 （月払いのみ）	Proの5倍	新モデル・新機能への早期アクセス	日常的にClaude Codeを使うヘビーユーザー
Max 20x	$200/月 （月払いのみ）	Proの20倍	新モデル・新機能への早期アクセス	フルタイムでAIコーディングを活用する開発者

なお、Proプランは年払い（$200一括）にすると月あたり約$3の節約になるため、長期利用を前提とするなら年払いプランがお得です。

まずはProで試し、使用量の上限に不満があれば、Maxへのアップグレードを検討しましょう。

APIの料金体系

サブスクリプション以外にも、APIキーを使った従量課金方式でClaude Codeを利用可能です。

この方式では、実際に使ったトークン（AIが処理するテキストの最小単位）の量に応じて料金が発生します。

Claudeの主要モデルのAPI料金は、以下のとおりです。

モデル	入力（USD/MTok）	出力（USD/MTok）	特徴
Claude Opus 4.6	$5	$25	最高性能・高度な推論とコーディング向け
Claude Sonnet 4.6	$3	$15	速度と性能のバランス型
Claude Haiku 4.5	$1	$5	高速・低コスト・軽量タスク向け

なお、日常的なコード生成や修正であればSonnet 4.6を、複雑なリファクタリングや設計判断にはOpus 4.6を選ぶなどの使い分けが効果的です。

まずは低コストなHaikuやSonnetで試し、必要に応じてOpusに切り替えましょう。

【3ステップ】VSCodeでClaude Codeを始める手順

VSCodeでClaude Codeを使い始めるまでの手順は、わずか3ステップで完了します。具体的には、以下の手順です。

1. VSCodeに拡張機能をインストールする
2. Anthropicアカウントで認証する
3. CLAUDE.mdを作成する

それぞれ詳しく解説します。

VSCodeに拡張機能をインストールする

まず、VSCode（Visual Studio Code）のバージョンが1.98.0以上であることを確認してください。バージョンが古いとClaude Code拡張機能をインストールできません。

なお、バージョンはVSCodeのメニューから「Help → About」で確認できます。

バージョンに問題がなければ、Ctrl+Shift+X（Macの場合はCmd+Shift+X）を押して拡張機能ビューを開きましょう。

検索バーに「Claude Code」と入力すると、拡張機能が表示されます。「Install」をクリックしてインストールしましょう。

Installボタンをクリックすると、「Anthropicを信頼しますか？」というポップアップが表示されます。

問題がなければ、「Trust Publisher ＆Install」ボタンをクリックしてください。

インストール後、右側上部にClaudeのロゴマークが表示されるので、クリックしたらClaude Codeが立ち上がります。

Anthropicアカウントで認証する

拡張機能をインストールしたら、次はAnthropicアカウントでの認証を行いましょう。

Claude Codeを立ち上げ、「Claude.ai Subscription」ボタンからアカウントの認証を行ってください。

なお、Claude CodeのAI機能を利用するには、Proプラン以上のサブスクリプションが前提となります。

また、API従量課金で利用する方は「Anthropic Console」を選んでください。

CLAUDE.mdを作成する

CLAUDE.md（クロードエムディー）とは、プロジェクト固有のルールや前提情報をClaude Codeに参照させるためのファイルです。

プロジェクトのルートディレクトリ（フォルダの最上位階層）に配置すると、AIがその内容を踏まえてコード生成や修正を行いやすくなります。

プロジェクトを新規で立ち上げる際は、最初に設定しておくとよいでしょう。

まず、VSCodeの左サイドバーにあるエクスプローラー（ファイル一覧）を開きます。

プロジェクトのルートフォルダ（一番上の階層）にマウスカーソルを合わせ、ファイル追加をクリックします。

ファイル名を「CLAUDE.md」と入力し、Enterキーを押せばファイルが完成します。

なお、CLAUDE.mdには、以下のような情報を記載するとよいでしょう。

記載項目	具体的な内容の例
技術スタック	「フロントエンド：React + TypeScript」 「バックエンド：Python / FastAPI」
コーディング規約	「インデントは半角スペース2つ」 「変数名はキャメルケースを使用」
よく使うコマンド	「ビルド：npm run build」 「テスト：npm test」
注意事項	「.envファイルはGit管理に含めない」 「本番環境のAPIキーをコードに記載しない」

CLAUDE.mdを整備しておくと、毎回同じ前提条件をプロンプト（AIへの指示文）で伝える手間が省け、回答の質も安定しやすくなります。

VSCodeでのClaude Codeの使い方

ここからは、VSCodeでClaude Codeを実際に使いこなすための操作方法を解説します。

画面構成の把握やチャットパネルでの基本操作、効率化コマンドの3つに分けて見ていきましょう。

• VSCodeの画面構成
• チャットパネルからコード生成やリファクタリングを依頼する方法
• スラッシュコマンドやファイル参照で作業を効率化する方法

VSCodeの画面構成

Claude Codeをインストールすると、VSCode画面にいくつかの新しいUI要素が追加されます（以下画像参照）。

主要なUIパーツとその役割は以下のとおりです。

UIパーツ	場所	役割
Sparkアイコン	エディタ右上のClaudeロゴアイコン	クリックするとClaude Codeのチャットパネルが開く。ファイルを開いている状態で表示される
チャットパネル	画面右側	Claude Codeとのやり取りを行うメインの対話画面。プロンプト入力・応答表示・コード生成結果などが表示される
チャット入力欄	チャットパネル下部	AIへの指示文（プロンプト）を入力するエリア。「Ctrl+Esc」でエディタとの間でフォーカスを切り替えられる
インラインdiff（差分表示）	エディタ内	Claudeが提案したコード変更を色分け表示。緑が追加部分、赤が削除部分。承認/拒否ボタンで操作する
コマンドパレット	Ctrl+Shift+P（Mac：Cmd+Shift+P）	「Claude Code」と入力すると、利用可能な全コマンドが表示される

なお、チャットパネルはドラッグ操作で好きな場所に配置できます。

チャットパネルからコード生成やリファクタリングを依頼する方法

Claude Codeの基本操作は、チャットパネルにプロンプト（指示文）を入力してAIに作業を依頼するシンプルな流れです。

ここでは、パネルの開き方から具体的なプロンプト例、コード変更の確認方法まで解説します。

チャットパネルの開き方は、以下3つの方法があります。

• Sparkアイコン：エディタ右上のClaudeロゴアイコンをクリック（ファイルを開いている場合のみ表示）
• コマンドパレット：Ctrl+Shift+P → 「Claude Code」と入力 → 「Open in New Tab」を選択
• ステータスバー：画面右下の「✱ Claude Code」をクリック

パネルが開いたら、入力欄にプロンプトを入力してEnterキーで送信します。

以下に、よく使われるプロンプト例をまとめました。

目的	プロンプト例	ポイント
コード解説	この関数の処理内容をステップごとに説明して	コードを選択した状態で送ると、選択範囲が自動で認識される
デバッグ	@app.ts のgetUserData関数でTypeErrorが出る原因を調べて修正して	ファイル名を@メンションで指定すると精度が上がる
新機能の生成	ユーザー認証機能をJWT（JSON Web Token）で実装して	要件を具体的に書くほど、生成コードの品質が上がる
リファクタリング	@utils.ts を読みやすく整理して、重複処理を関数に切り出して	リファクタリング＝動作を変えずにコード構造を改善すること

なお、エディタ上でコードをドラッグ選択した状態でプロンプトを送ると、Claude Codeが選択範囲を自動で認識します。「この部分だけ直してほしい」という場合に便利です。

また、Claudeがコードを変更する際は、元のコードと変更後のコードがインラインdiff（差分表示）で並べて表示されます（以下画像参照）。

赤い行が削除部分、緑の行が追加部分です。右パネルに「Yes」「Yes, allow all edits this session」「No」の3つの選択肢が表示されるので、内容を確認してから承認・拒否を選んでください。

一度の操作でセッション中の全変更をまとめて許可したい場合は「Yes, allow all edits this session」を選ぶと便利です。

スラッシュコマンドやファイル参照で作業を効率化する方法

Claude Code拡張機能には、作業効率を大幅に高める便利機能がいくつも用意されています。ここでは、以下4つの便利機能を紹介します。

• スラッシュコマンド
• @メンション
• キーボードショートカット
• その他の便利機能

作業効率を高めるうえで重要な知識です。ぜひ取り入れてみてください。

スラッシュコマンド

チャットパネルで「/」と入力すると、上の画像のようにコマンドメニューが表示されます。よく使うコマンドは以下の表にまとめているので、ぜひ参考にしてみてください。

コマンド	機能
/model	使用するAIモデルを切り替える（Opus・Sonnet・Haikuなど）
/usage	現在のプラン使用状況を確認する
/compact	会話のコンテキスト（文脈情報）を圧縮して、トークン消費を節約する
/clear	会話履歴をクリアして新しいセッションを開始する
/review	コードレビューを依頼する
/config	Claude Codeの各種設定を開く（言語・許可モードなど）

なお、AIが会話の中で記憶できる情報量には上限があり、使用量が40〜50%を超えると応答の質が低下する場合があります。

会話が長くなってきたら、タスクの区切りで/compact（圧縮）か/clear（リセット）を実行して整理しましょう。

Claude Codeのコマンドについては、以下の関連記事をご覧ください。

@メンション

プロンプト内で「@ファイル名」と入力すると、そのファイルの内容をClaude Codeに直接読み込ませられます。

また、あいまい一致にも対応しているため、ファイル名の一部だけ入力しても候補を表示してくれます。

なお、フォルダを指定したい場合は、末尾にスラッシュを付けて「@src/components/」のように入力しましょう。

キーボードショートカット

頻繁に使うショートカットキーを覚えておくと、マウス操作が減って作業スピードが上がります。

便利なショートカットキーは、以下にまとめました。

ショートカット	機能
Ctrl+Esc（Mac：Cmd+Esc）	エディタとClaude Codeパネル間でフォーカスを切り替える
Ctrl+Shift+Esc（Mac：Cmd+Shift+Esc）	新しい会話をエディタタブとして開く
Ctrl+N（Mac：Cmd+N）	新しい会話を開始する（Claude Codeにフォーカスがある状態で）
Alt+K（Mac：Option+K）	現在のファイルと選択範囲の@メンション参照を挿入する

まずは「Ctrl+Esc」と「Alt+K」の2つを覚えるだけでも、日常のコーディング作業の効率が格段に向上するはずです。

その他の便利機能

Claude CodeをVSCodeで使う際は、先述した機能以外にも便利な機能が用意されています。以下を参考に、業務の効率化に活かしてください。

機能	説明
拡張思考（Extended Thinking）	複雑な問題に対してClaude Codeがより深く推論してから回答するモード。コマンドメニュー（/）の「Thinking」からオン・オフを切り替えられる
@browser	Chrome拡張機能と連携し、WebアプリのテストやコンソールログをVSCodeから直接確認できる
@terminal	ターミナルの出力内容をClaude Codeに参照させ、エラーログの分析などを依頼できる

これらの機能を組み合わせると、コード生成からテスト・デバッグまでのワークフローをVSCode内で完結させられます。

自分の作業スタイルに合った機能から、少しずつ取り入れてみましょう。

SHIFT AIでは、ChatGPTやGeminiなどの生成AIを活用して、副業で収入を得たり、昇進・転職などに役立つスキルを学んだりするためのセミナーを開催しています。

また、参加者限定で、「今日から使えるプロンプト100選」「新時代のAI×デザイン活用ガイド」「Nano Banana Pro 徹底解説」など、全12個の資料を無料で配布しています。

「これからAIを学び始めたい」「AIを使って副業収入を得たい」「AIで業務を効率化したい」という方は、ぜひ以下のボタンからセミナーに参加してみてください。

VSCodeでClaude Codeを使うときの注意点

Claude CodeをVSCodeで活用する際には、セキュリティとトラブル対策の2点をとくに意識しておく必要があります。

具体的には、以下2つの注意点を押さえておきましょう。

• 個人情報の入力や許可モードの変更に注意する
• エラー発生時はバージョンとレート制限を確認する

それぞれ詳しく解説します。

個人情報の入力や許可モードの変更に注意する

Claude Codeに入力したプロンプトは、AnthropicのAPIサーバーに送信されて処理されます。そのため、個人情報・パスワード・APIキーなどの機密情報をプロンプトに含めないようにしましょう。

また、Claude Codeには「許可モード」という設定があり、AIがファイル変更やコマンド実行をどの程度自動で行うかをコントロールできます。

2026年3月時点で利用できる主な許可モードは以下のとおりです。

許可モード	動作	リスクと推奨事項
default（推奨）	各アクション前にユーザーへ許可を求める	もっとも安全。初心者はこのモードの使用を推奨
plan	分析のみ行い、変更前に承認を待つ	実行前にAIの計画を確認できるため、安全性が高い
acceptEdits	ファイル編集をセッション中は自動承認する	意図しないファイル変更が発生するリスクがあるため、内容をよく確認する必要がある
bypassPermissions	ほぼすべての許可プロンプトをスキップする	コンテナやVM（仮想環境）など隔離された環境でのみ使用すること。通常の開発環境では絶対に使わない

とくにacceptEditsやbypassPermissionsに安易に変更すると、AIがファイルの変更やコマンドの実行を自動で行ってしまうため注意が必要です。

基本的にはdefaultモードのまま運用し、必要な場面だけplanモードに切り替える使い方が安全といえるでしょう。

また、Claude Codeが生成したコードは必ず内容を確認してから本番環境に適用してください。

AIが生成したコードには誤りが含まれる可能性があるため、テストの実施も欠かせません。

以下の記事では、AIに入力した情報を学習させない方法などを解説しています。ぜひ参考にしてみてください。

エラー発生時はバージョンとレート制限を確認する

Claude Codeが正常に動作しない場合、主な原因はVSCodeのバージョン不足とレート制限の2つです。

まず、Claude Code拡張機能はVSCode 1.98.0以上でのみ動作します。

バージョンが古いと、インストール自体ができなかったり、インストール後に起動エラーが発生したりするケースがあるため注意してください。

現在のバージョンは、「Help → About」で確認できます。1.98.0未満であればVSCodeを最新版にアップデートしてください。

また、サブスクリプションプランでは、使用量の上限に達するとAIからの応答が遅くなったり、一時的に利用できなくなったりすることがあります。

レート制限（一定時間内の使用量上限）に近い状態かどうかは、以下の方法で確認してみてください。

• チャットパネルで/usageコマンドを実行して使用状況を確認する
• /compactコマンドでコンテキストを圧縮し、トークン消費を抑える
• /clearコマンドで会話履歴をリセットし、新しいセッションを開始する

上記の対処を試しても解消しない場合は、上位プランへの変更やExtra Usage（従量課金モード）の有効化を検討してみてください。

VSCodeでClaude Codeを活用してタスクを自動化しよう

本記事では、Claude CodeをVSCodeで使うためのインストール手順や基本操作、料金体系、注意点を解説しました。

まずはClaudeのProプランに加入して拡張機能をインストールし、簡単なコード生成やデバッグから試してみてください。

使い慣れてくれば、リファクタリングやテスト自動化といった高度なタスクにもClaude Codeを活用でき、日々の開発ワークフローが大きく変わるはずです。

SHIFT AIでは、ChatGPTやGeminiなどの生成AIを活用して、副業で収入を得たり、キャリアアップで年収を高めたりするノウハウをお伝えする無料セミナーを開催しています。

セミナーでは、主に以下の内容を学習できます。

• AIを使った副業の始め方・収入を得るまでのロードマップ
• おすすめの副業案件と獲得方法
• AIスキルを高めて昇進・転職などに役立てる方法
• 実際に成果を出しているロールモデルの紹介
• これから使うべきおすすめのAIツール

無料セミナーは、AI初心者〜中級者の方を対象としています。

「これからAIを学習したいけど、何から始めていいのか分からない」「AIの独学に限界を感じてきた」という方にとくにおすすめです。

また、参加者限定で、「初心者が使うべきAIツール20選」や「AI副業案件集」「ChatGPTの教科書」など全12個の資料を無料で配布しています。

完全無料で参加できるため、ご興味のある方は、ぜひセミナーに申し込んでみてください。

本記事で使われている専門用語一覧

記事内で使用した専門用語を、以下の表にまとめました。わからない用語があった場合に、辞書代わりとして活用してみてください。

用語	意味
VSCode（Visual Studio Code）	Microsoftが提供する無料のコードエディタ。拡張機能を追加することで、さまざまな開発言語やツールに対応できる
拡張機能（エクステンション）	VSCodeに追加できるプラグイン。機能を自由に拡張できる仕組み
CLI	コマンドラインインターフェースの略称。ターミナルで文字を入力してパソコンを操作する方式
ディレクトリ	フォルダのこと。ファイルを分類・整理するための入れ物
リポジトリ	Gitで管理されるプロジェクトの保管場所。コードの変更履歴が記録される
Git / GitHub	Gitはバージョン管理システム。GitHubはGitを使ったクラウドベースの開発プラットフォーム
API / APIキー	APIは外部サービスと連携するための仕組み。APIキーはその認証に使う鍵のようなもの
トークン	AIが処理するテキストの最小単位。日本語では1文字が1〜3トークン程度に相当する
プロンプト	AIへの指示文。「この関数を修正して」などのテキスト入力のこと
インラインdiff	コードの変更前後を色分けして並べて表示する機能。緑が追加、赤が削除を示す
コマンドパレット	VSCode内でコマンドを検索・実行するためのUI。Ctrl+Shift+P（Mac：Cmd+Shift+P）で開く
コンテキスト	AIが会話中に記憶・参照できる情報の範囲。会話が長くなるほどコンテキストが増え、トークン消費も増加する
リファクタリング	動作を変えずにコードの構造や読みやすさを改善すること
.env	環境変数（APIキーやデータベース接続情報など）を格納する設定ファイル。Git管理に含めないのが一般的
.gitignore	Gitの管理対象外にするファイルやフォルダを指定する設定ファイル
レート制限	一定時間内にAIを利用できる回数やトークン量の上限。上限に達すると一時的に利用が制限される

上記の用語を押さえておくと、Claude Codeの公式ドキュメントや技術記事もスムーズに読み進められるようになります。

不明な用語が出てきた際は、このリストを参照してみてください。