Visual Studio CodeでClaude Codeを利用する方法【Windows】【初心者向け】

導入・設定

2026-04-242026-04-25

目次

この記事で扱う内容
前提
1. 前提知識・前提スキル
2. 前提環境
Visual Studio CodeでClaude Codeを利用する方法
1. Visual Studio Codeで「Claude Code」拡張機能をインストールする
2. Visual Studio CodeのClaudeのチャットに指示（プロンプト）を試し打ちする
おすすめの関連記事
参考

この記事で扱う内容

この記事では、Visual Studio CodeでClaude Codeを利用する方法についてご紹介します。

前提

前提知識・前提スキル

Windows OS の基本操作ができる人
ブラウザの基本操作ができる人

ブラウザとは、インターネット上のWebサイトを表示・操作するためのアプリケーションです。

以下が代表的なブラウザです。

Microsoft Edge
Safari
Google Chrome
Mozilla FireFox

前提環境

使用PC
- OS が Windows 11であること
- Visual Studio Codeバージョン1.98.0以上がインストールされていること
- Visual Studio CodeでClaude Code拡張機能をインストールしても良いこと

Visual Studio Codeのダウンロード・インストール方法【日本語化も】【Windows】【初心者向け】

この記事で扱う内容この記事では、Visual Studio Codeのダウンロード・インストール方法についてご紹介します。また、Visual Studio Codeを日本語化する方法も併せてご紹介します。前提前提知識・前提スキルWindow...

その他
- Claudeアカウントを作成済みであること
- ClaudeアカウントのサブスクリプションプランがClaude Codeを利用可能であること

Claudeアカウント作成方法【初心者向け】【無料】

この記事で扱う内容この記事では、Claudeアカウントを作成する方法についてご紹介します。前提前提知識・前提スキルブラウザの基本操作ができる人前提環境PCその他18歳以上であること年齢制限については、Anthropicヘルプセンターに以下の...

Claudeで自分のチャット内容を学習させないようにする方法【初心者向け】【AI学習】【AIトレーニング】【オプトアウト】

この記事で扱う内容この記事では、Claudeで自分のチャット内容を学習させないようにする方法についてご紹介します。前提前提知識・前提スキルブラウザの基本操作ができる人前提環境PCClaudeアカウントの作成が完了していることClaudeアカ...

Claude Codeは、Claudeのサブスクリプションプランが以下の場合に利用可能。

個人向け
- Pro
- Max
チーム・法人向け
- Team
- Enterprise

以下のプランは利用できません。

個人向け
- Free

Visual Studio CodeでClaude Codeを利用する方法

Visual Studio CodeでClaude Codeを利用する方法のアイキャッチ画像

この例では、ブラウザは「Google Chrome」を使用しています。

Visual Studio Codeで「Claude Code」拡張機能をインストールする

Visual Studio Codeを起動する

スタートメニューで「visual studio code」を検索後、「Visual Studio Code」を選択し起動する

スタートメニューで「visual studio code」を検索後、「Visual Studio Code」を選択し起動する操作の画面キャプチャ

Visual Studio Codeが起動するため、左サイドメニューの「Extensions（拡張機能）」のボタンを押す

Visual Studio Codeが起動するため、左サイドメニューの「Extensions（拡張機能）」のボタンを押す操作の画面キャプチャ

「拡張機能」の画面が表示されるため、上部にある検索テキストボックスに「claude code」と入力し、表示された「Claude Code for VS Code」という拡張機能の「インストール」ボタンを押す

「拡張機能」の画面が表示されるため、上部にある検索テキストボックスに「claude code」と入力し、表示された「Claude Code for VS Code」という拡張機能の「インストール」ボタンを押す操作の画面キャプチャ

発行元の信頼性を確認するメッセージが表示された場合は、メッセージの内容を確認し、問題なければ「発行元を信頼してインストールする」ボタンを押す

発行元の信頼性を確認するメッセージが表示された場合は、メッセージの内容を確認し、問題なければ「発行元を信頼してインストールする」ボタンを押す操作の画面キャプチャ

「Claude Code for VS Code」の画面が表示され、すぐにインストールが完了し、右上辺り「Claudeのアイコン」ボタンが表示されるため、そのボタンを押す

「Claude Code for VS Code」の画面が表示され、すぐにインストールが完了し、右上辺り「Claudeのアイコン」ボタンが表示されるため、そのボタンを押す操作の画面キャプチャ

右側にClaudeのサイドバーが表示されるため、「Claude.ai Subscription」ボタンを押す

右側にClaudeのサイドバーが表示されるため、「Claude.ai Subscription」ボタンを押す操作の画面キャプチャ

外部のWebサイトを開くための確認メッセージが表示されるため、URLを確認し、問題なければ「開く」ボタンを押す

外部のWebサイトを開くための確認メッセージが表示されるため、URLを確認し、問題なければ「開く」ボタンを押す操作の画面キャプチャ

ブラウザが自動で起動しログイン画面が表示されるため、Claudeアカウントでログインする

※今回は、メールアドレスでログインします。

ブラウザが自動で起動しログイン画面が表示されるため、Claudeアカウントでログインする操作の画面キャプチャ1

ブラウザが自動で起動しログイン画面が表示されるため、Claudeアカウントでログインする操作の画面キャプチャ2

登録してあるメールアドレスにメールが送られてくるため、「Claude.aiにサインイン」ボタンを押す

登録してあるメールアドレスにメールが送られてくるため、「Claude.aiにサインイン」ボタンを押す操作の画面キャプチャ

使用PCのClaude Codeに対するClaudeアカウント接続承認画面が表示されるため、対象のアカウントを確認し、「承認する」ボタンを押す

使用PCのClaude Codeに対するClaudeアカウント接続承認画面が表示されるため、対象のアカウントを確認し、「承認する」ボタンを押す操作の画面キャプチャ

承認完了画面が表示されるため、このウィンドウを閉じる

承認完了画面が表示されるため、このウィンドウを閉じる操作の画面キャプチャ

Claude Codeのサイドバーでチャットが使えるようになる

Claude Codeのサイドバーでチャットが使えるようになる操作の画面キャプチャ

Visual Studio CodeのClaudeのチャットに指示（プロンプト）を試し打ちする

Visual Studio Codeの右上辺りに追加された「Claudeのアイコン」ボタンを押す

Visual Studio Codeの右上辺りに追加された「Claudeのアイコン」ボタンを押す操作の画面キャプチャ

右側にClaudeのサイドバーが表示される

右側にClaudeのサイドバーの画面の画面キャプチャ

Claudeのサイドバーの下部にあるテキストエリアに任意のプロンプトを入力し、Enterキーを押すか、右下辺りにある「送信する」ボタンを押す

以下は例で、「あなたは何ができますか？」という入力と、その結果です。

Claudeのサイドバーの下部にあるテキストエリアに任意のプロンプトを入力し、Enterキーを押すか、右下辺りにある「送信する」ボタンを押す操作の画面キャプチャ

おすすめの関連記事

参考

タイトルとURLをコピーしました