Geminiに聞きながら開発していて、こう思いませんでしたか？
前回の記事では、GeminiをAIアシスタントとして使いながらWebアプリを開発する流れをお伝えしました。
でも実際にやってみると、こんな手間がありませんでしたか？
- Geminiが出してくれたコードをコピーして、ファイルを開いて、貼り付ける
- エラーが出たら、エラー文をコピーして、Geminiに貼り付けて、また回答をコピーして…
- 「このファイルのこの部分を直して」と伝えるためにコードをまるごとコピーする
これが Claude Code を使うと、ほぼすべて自動でやってくれます。しかも、いつも使っている VS Code（エディタ）の中でです。
Claude Codeとは何か
Claude Code は、Anthropic（AIの研究会社）が開発したAIツールです。
VS Codeの拡張機能としてインストールすると、エディタのサイドバーにチャット画面が現れます。そこに日本語で話しかけるだけで、AIがあなたのプロジェクトのファイルを直接読み書きしてくれます。
つまり——
- 「このファイルを修正して」と言えば、ファイルを開いて・修正して・保存するまでやってくれる
- 「エラーが出た」と言えば、エラーの原因を探して・コードを直して・確認するまでやってくれる
- 「新しいページを追加して」と言えば、必要なファイルを作って・コードを書いて・既存ファイルとの連携までやってくれる
GeminiやChatGPTが「アドバイスをくれる人」だとすれば、Claude Codeは「一緒に手を動かしてくれる人」です。
Geminiとの違いを具体的に比べると
たとえば「ボタンの色を青から赤に変えたい」という修正をする場合を考えます。
Geminiを使う場合
- 該当のコードをコピーしてGeminiに貼り付ける
- 「この部分を赤に変えてください」と伝える
- Geminiが修正後のコードを出してくれる
- 自分でファイルを開いて、該当箇所を探して、貼り付ける
Claude Codeを使う場合
- サイドバーのチャットに「ボタンの色を赤に変えて」と打つ
- 終わり
Claude Codeが自分でファイルを探し、該当箇所を見つけ、修正して保存するまでやってくれます。変更内容はVS Codeのエディタ上でリアルタイムに確認できます。
導入手順
必要なもの
- VS Code（インストール済みであること）
- Claudeのサブスクリプション（月$20のProプラン、または従量課金のAPIキー）
Step 1：拡張機能をインストールする
VS Codeを開いて、左側のサイドバーにある拡張機能アイコン（四角が4つ並んだアイコン）をクリック。
検索欄に「Claude Code」と入力して、Anthropic製の拡張機能をインストールします。
Step 2：サインインする
インストールが完了すると、サイドバーにClaudeのアイコンが追加されます。クリックするとサインイン画面が表示されるので、Anthropicのアカウントでログインします。
アカウントを持っていない方は claude.ai から登録できます。
Step 3：使い始める
プロジェクトのフォルダをVS Codeで開いた状態で、サイドバーのClaude Codeをクリック。チャット画面が表示されたら、あとは日本語で話しかけるだけです。
実際に使ってみるとこうなる
たとえばこんな会話ができます。
自分：「合計金額の文字を大きくして、色を緑にして」
Claude Code：該当ファイルを探して修正内容を提示。VS Codeのエディタ上で変更箇所がハイライト表示され、「承認する」ボタンを押すと保存される。
自分：「リセットボタンを押したときに確認ダイアログを出したい」
Claude Code：ダイアログの実装コードを書いて、ボタンのクリック処理に組み込む。変更内容を画面上で確認してから承認できる。
ファイルをコピーして貼り付けるという手間が一切ありません。さらに、変更内容を承認・却下できるので、意図しない修正が入ってしまっても安心です。
VS Code拡張版が初心者におすすめな理由
Claude Codeにはターミナル（黒い画面）で動かす方法もありますが、初心者にはVS Code拡張版をおすすめします。
| ターミナル版 | VS Code拡張版 | |
|---|---|---|
| 起動方法 | コマンド入力が必要 | アイコンをクリックするだけ |
| コードの変更確認 | 自分でファイルを開いて確認 | エディタ上でリアルタイムに見える |
| 変更の承認 | コマンドで操作 | ボタンクリックで承認・却下 |
| 初心者への敷居 | 高い | 低い |
VS Code拡張版なら「VS Codeを開いていつも通りコードを書く」延長線上でそのまま使えます。 新しい操作を覚えるコストが最小限です。
個人開発でどう役立つか
エラーの解決
「エラーが出た」と打つだけで、Claude Codeが自分でエラーログを確認して、原因のファイルを探して、修正案を提示してくれます。エラー文をコピーして貼り付ける手間がありません。
コードの説明
「このファイルが何をしているか説明して」と聞けば、ファイルを読んで日本語で説明してくれます。Geminiが出してくれたコードの意味がわからないときにも使えます。
新機能の追加
「シェアボタンを追加したい」と伝えると、どのファイルに何を追加すればいいかを判断して、実装から確認まで進めてくれます。
注意点
料金がかかる
Claude Codeは無料では使えません。Anthropicのサブスクリプション（月$20のProプラン）またはAPIキー（使った分だけ課金）が必要です。個人開発の用途であれば、Proプランの範囲内で使えることが多いです。
AIが間違えることもある
Claude Codeが修正したコードが意図と違う動きをすることもあります。変更内容は必ずVS Code上で確認してから承認する習慣をつけましょう。また、変更前にGitでコミットしておくと、元に戻したいときに安心です。
GeminiとClaude Code、どう使い分ける？
| 場面 | おすすめ |
|---|---|
| アイデア出し・設計の相談 | Gemini（無料で使える） |
| コードの実装・修正 | Claude Code（ファイル操作まで自動） |
| エラーの原因調査と修正 | Claude Code（ファイルを自分で読んでくれる） |
| コードの意味を理解したい | どちらでも可 |
最初はGeminiで始めて、慣れてきたらClaude Codeを試してみるという流れが自然かと思います。
まとめ
- Claude Code = VS Codeのサイドバーで使えるAI開発ツール
- Geminiは「アドバイスをくれる人」、Claude Codeは「一緒に手を動かしてくれる人」
- VS Codeの拡張機能をインストールするだけで使い始められる
- 変更内容をエディタ上で確認・承認できるので初心者でも安心
- 月$20のProプランで使える
- エラー解決・機能追加・コードの整理など個人開発のあらゆる場面で役立つ
「もっと楽に開発したい」「コピペの手間をなくしたい」という方は、ぜひ試してみてください。
