【初心者向け】Claude CodeをVSCodeで使う方法｜インストールから初期設定まで解説

最近話題のAI開発支援ツール「Claude Code」。

ChatGPTのようにチャットで質問するだけでなく、実際にコードの作成や修正、リファクタリングまでサポートしてくれるため、Web制作やプログラミング学習に役立ちます。

この記事では、私が実際に行ったClaude Codeの導入方法と、VSCodeで使う方法を紹介します。

Claude Codeとは？
Claude Codeをインストールする
1. Macの場合
2. このままターミナルで使用する場合・・・
VSCodeでClaude Codeを利用する
Claude Codeが正常にインストールされているか確認する方法
Claude Codeを使おうとしたらエラーになった場合
Claude Codeでできること
利用中のモデルを確認する方法
Claude CodeとClaude Designの連携
VSCodeで一緒に入れておきたい拡張機能
まとめ

Claude Codeとは？

Claude Codeは、Anthropicが提供するAIコーディング支援ツールです。

VSCodeと組み合わせることで、

コードの作成
エラーの修正
コードの解説
ファイルの編集提案
リファクタリング

などを効率よく行えます。

特にプログラミング初心者の場合、

「このエラーはなぜ発生しているの？」

「どのファイルを直したらいいの？」

といった初歩的な質問にも答えてくれるため、効率が大きく向上します！

無料では使用できないので、使用したい場合は月額4000円弱（変動あり）のProプランを契約してください。

Claude Codeをインストールする

まずはClaude Code本体をインストールします。

VSCodeのターミナルを開きます。

（Macなら「ターミナル」と検索して出るやつでもOK）

Macの場合

PowerShellまたはターミナルでインストールコマンドを実行します。

npm install -g @anthropic-ai/claude-code

実行後下記内容のようなものが出てきますが合っています！

added 9 packages in 19s
npm notice
npm notice New minor version ・・・

added 9 packages in 19s　はインストール成功のサインです！

インストール完了後、以下のコマンドを実行します。

claude

初回起動時はログイン画面が表示されるため、Anthropicアカウントで認証を行います。

このままターミナルで使用する場合・・・

作業したいディレクトリに移動

cd ~/Desktop/myproject

Claudeを起動

claude

日本語で指示すればOK

> このコードのバグを修正して
> READMEファイルを作成して

VSCodeでClaude Codeを利用する

私は導入時にVSCode側にもClaude関連の拡張機能をインストールしました。

VSCodeの拡張機能画面を開き、

「Claude」

で検索します。

Claude Code for VS Code というのが拡張機能になります！

インストール後は右上のオレンジのマークからClaudeを利用できるようになります。

Claude Codeが正常にインストールされているか確認する方法

VSCodeのターミナルで以下を実行します。

claude --version

バージョン番号が表示されれば正常にインストールされています。

エラーが表示される場合は、

インストールが完了していない
PATHが通っていない

などの可能性があります。

Claude Codeを使おうとしたらエラーになった場合

インストールしたのにエラーになった場合は、下記記事にある対処法をやってみるといいと思います。

【Claude Code】ターミナルで起動できない時の対処法

はじめにClaude Code をターミナルから使おうとしたところ、エラーが発生して起動できなくなっていました。（普段は「claude」と入力するだけで使用することができます）以前は問題なく使えていたのに、ある日突然動かなくなったケースです…

Claude Codeでできること

私がよく利用している機能は以下の通りです。

コード生成

「お問い合わせフォームを作ってください」

などの指示でコードを作成できます。

エラーの修正

エラーメッセージを貼り付けるだけで原因を説明してくれます。

デザイン修正

LP制作やWebサイト制作時に、

「余白を整えてください」

「モバイル表示を改善してください」

といった相談もできます。

コードの解説

初心者が理解しにくいコードもわかりやすく説明してくれます。

利用中のモデルを確認する方法

Claude Codeでは複数のモデルが利用できます。

現在使用しているモデルを確認したい場合は、以下の記事をご覧ください。

【Claude Code】VScode拡張機能で使用中のモデルを確認・変更する方法

はじめにVSCode の Claude Code 拡張機能を使っていて、「今どのモデルが使われているの？」と気になったことはありませんか？チャットのところになにも書いていないので困りました。モデルによって消費量も異なるようなので、切り替えは…

Claude CodeとClaude Designの連携

Claude Codeを有料契約している方は、Claude Designも使用することができます。

Claude Designで作成したデザインは、Claude Codeに簡単に反映させることができます！

やり方は下記記事にあるのでご参照ください！

Claude CodeとClaude Designを使いこなす！設定からデザインHandoffまで完全ガイド

「AIにコードを書かせたい」「デザインをそのままコードに変換したい」——そんな夢を叶えるのが、AnthropicのClaude CodeとClaude Designです。この記事では、MacBookでゼロからセットアップし、Claude D…

VSCodeで一緒に入れておきたい拡張機能

Claude Codeとあわせて導入しておくと便利な拡張機能があります。

Prettier
Git Graph
PHP Server
Minify
Print

など、詳しくは以下の記事で紹介しています。

VSCode（Visual Studio Code）は拡張機能を追加することで、より便利に利用できます。しかし初心者の方は、何を入れればいいかわからないおすすめの拡張機能を知りたいWeb制作向けの拡張機能が知りたいという方も多いと思います。…

まとめ

Claude Codeを導入すると、プログラミング学習やWeb制作の効率が大きく向上します。

導入手順は以下の通りです。

Claude Codeをインストール
Anthropicアカウントでログイン
VSCodeで利用する
必要に応じて拡張機能を追加する

私自身もWebサイト制作やLP制作で利用していますが、コードの作成速度や問題解決のスピードが大きく改善しました。

これからClaude Codeを導入する方の参考になれば幸いです。