VS CodeではじめるClaude Code──インストールから基本の使い方まで

AI・テクノロジー
スポンサーリンク

コードを書いていると、「ここのバグ、原因を一緒に探してほしい」「この関数にコメントを付けて回りたい」「コミットメッセージを考えるのが地味に面倒」といった場面がよくあります。Claude Code は、そういう作業をエディタの中からそのままAIに頼めるツールです。ここでは、多くの人が使っている VS Code(Visual Studio Code)に組み込んで使う方法を紹介します。

対話型AIのClaudeには、ブラウザやアプリでチャットする使い方のほかに、コーディングに特化した Claude Code という入口があります。チャット版が「相談相手」だとすると、Claude Code は「手元のコードを実際に読んで、書き換えまで手伝ってくれる相棒」に近い立ち位置です。コードを書かない作業向けには別のツールもありますが、この記事はあくまで開発者向けの内容としてまとめています。

Claude Code はどんなツール?

Claude Code は、Anthropic(アンソロピック)が出しているコーディング向けのAIツールです。もともとはターミナル(コマンドを打つ黒い画面)で動くCLI(コマンドラインツール)として始まりましたが、今は VS Code に組み込んで、エディタの中でグラフィカルに使えるようになっています。Anthropicの公式ドキュメントでも、VS Code で使うなら拡張機能版が推奨とされています。

ふつうのコード補完ツールと違うのは、ファイルを横断して読みながら、まとまった作業を任せられる点です。「このエラーの原因を調べて直して」とお願いすると、関係しそうなファイルを自分で見にいって、修正案を差分(変更前後の比較)で見せてくれます。こちらは内容を確認して、受け入れる・断る・やり直してもらう、を選ぶだけ。コードを勝手に書き換えられて驚く、ということが起きにくい作りになっています。

使うには有料プランが必要(料金まわり)

先に正直なところを書いておくと、Claude Code は無料プランでは使えません。Claude Code 自体に追加料金はかからず、有料プランに含まれる形になっています。個人向けだと、Pro(米国価格で月20ドルほど)か、もっと使う人向けの Max(同じく月100ドル〜200ドルほど)が対象です。ほかに、開発者向けにAPIキーを使って、使った分だけ支払う方式も選べます。

価格は変わりますし、地域によって現地通貨や税の扱いも違います。年払いの割引が入ることもあります。実際に始める前に、公式のヘルプセンター(support.claude.com)で最新の金額を確認してください。すでにチャット版でProなどを契約しているなら、その同じアカウントでそのまま使えます。

VS Code に入れてみる

必要なものは、VS Code(バージョン1.98以上)と、有料プランに入った Claude のアカウントだけです。APIキーは用意しなくても、アカウントでサインインすれば使えます。VS Code をまだ入れていない人も含めて、ゼロから始める手順をまとめます。

  1. VS Code をダウンロードする。公式サイト(code.visualstudio.com)を開き、自分のOSに合ったボタン(Windows・Mac・Linux)からダウンロードします。無料です。Microsoft の有料の「Visual Studio」とは別物なので、間違えないように注意してください。
  2. VS Code をインストールする。ダウンロードしたファイルを開いて、案内に沿って進めればインストールできます。Windows はインストーラーを実行、Mac はアプリをアプリケーションフォルダに移すだけです。終わったら一度起動してみましょう。
  3. 拡張機能ビューを開く。VS Code で、拡張機能ビューを開きます(Macは Cmd+Shift+X、Windows / Linux は Ctrl+Shift+X)。左側のアイコンが並んだ列(アクティビティバー)の、四角が組み合わさったアイコンをクリックしてもOKです。下の画像のような検索パネルが出れば成功です。
  1. 「Claude Code」を入れる。上の画像のような画面が出たら、検索ボックスに「Claude Code」と入力します。ここで似た名前の拡張機能がたくさん出てくるので、選ぶときは発行元(提供元)が Anthropic になっているものを選んでください。名前は「Claude Code for VS Code」で、発行元名の横に認証済みを示すチェックマークが付き、インストール数も多いのが目印です。正しいものを選んだら「Install(インストール)」を押します。
  2. パネルを開いてサインインする。いちばん左にあるアイコンの列(アクティビティバー)から、下の画像のような星のマーク(スパークと呼ばれます)の Claude のアイコンをクリックすると、Claude のパネルが開きます(Windows / Linux は Ctrl+Escape、Mac は Cmd+Escape のショートカットでもOK)。初回はサインイン画面が出るので、ブラウザで認証を済ませます(すでにチャット版で有料プランに入っていれば、同じアカウントでOKです)。
  1. 新しい会話を始める。パネルが開いたら「+ New session」をクリックします。「Ask Claude to edit…」という入力欄が出れば、ここに頼みごとを打って会話を始められます。上の「Local / Web」タブは、手元のパソコンで作業する Local のままでOKです。これで準備完了です。

基本の流れ

使い方は、チャットに近い感覚です。パネルの入力欄に、やってほしいことを日本語でそのまま書けば動きます。「このファイルが何をしているか説明して」「ここのバグを直して」といった具合です。

使っていくうちに便利だと感じるのが、次のような機能です。

  • 選択した範囲を自動で見てくれる。気になる行を選んでから質問すれば、その箇所を踏まえて答えてくれます。Option+K(Windows / Linux は Alt+K)を押すと、「このファイルの何行目から何行目」という参照を入力欄に差し込めるので、「ここを説明して」とピンポイントで聞けます。
  • ファイルやフォルダを指定できる。入力欄で @ を打ってからファイル名を入れると、その中身を読んだうえで答えてくれます。名前の一部を打つだけでも候補を探してくれるので、フルパスを覚えていなくても大丈夫です。

Claude がファイルを書き換えようとすると、変更前と変更後を並べた差分が表示され、「この変更を入れていい?」と確認されます。中身を見て、受け入れる・断る・別のやり方を指示する、を選べます。差分の段階で自分で手直ししてから受け入れることもできます。

「どこまで自動でやらせるか」を選べる

入力欄の下に、Claude の動き方を切り替えるモードがあります(最初は「Ask before edits」が選ばれています)。ここをクリックすると切り替えられるので、最初に知っておくと安心です。

  • 通常モード(画面では「Ask before edits」=編集の前に確認):ファイルを編集するたびに許可を求めてきます。差分を見て一つずつOKを出すスタイルで、初めて触るコードベースではこれが無難です。
  • プランモード(「Plan mode」):何をするつもりかを先に文章で説明してくれて、こちらが承認するまで手を付けません。VS Code ではその計画がMarkdownの文書として開くので、「ここは触らないで」といったコメントを書き込んでから始めてもらえます。大きめのリファクタリング(作り直し)の前に向いています。
  • 自動承認モード(「Edit automatically」):いちいち聞かずにどんどん編集を進めます。速い反面、目を離している間に変更が進むので、内容を信頼できる場面に絞るのが安全です。

具体的に何を頼める?

イメージしやすいように、よくある使い方をいくつか挙げます。

コードの説明:初めて見るコードや、他の人が書いた部分を選んで「これ何してるの?」と聞く。読み解きの時間がぐっと減ります。

デバッグ:エラーメッセージを貼るか、症状を伝えると原因を探してくれます。VS Code の「問題(Problems)」パネルに出ている警告やエラーも、拡張機能が直接読み取れるので、いちいちコピペしなくても拾ってくれます。

リファクタリングや横断的な修正:複数のファイルにまたがる変更も、まとめて面倒を見てくれます。プランモードで方針を確認してから進めると安心です。

Git まわり:「変更内容がわかるメッセージでコミットして」「この機能のプルリクを作って」とお願いすると、実際の変更内容をもとにコミットメッセージやPRの説明文を書いてくれます。

ブラウザを使ったテスト:別途 Claude の Chrome 用拡張機能を入れておけば、@browser と打って「localhost:3000 を開いてコンソールにエラーが出ていないか見て」のように、動作確認まで頼めます。

ターミナル派の人へ

もともとの CLI が好きな人や、CLI にしかない機能を使いたい人は、VS Code の中でそのまま使えます。統合ターミナル(Macは Cmd+`、Windows / Linux は Ctrl+`)を開いて claude を実行すれば、ターミナルからでも差分表示などのエディタ連携が効きます。

ひとつ注意点として、拡張機能はチャットパネル用に自前の CLI を内蔵していますが、ターミナルで claude コマンドを直接打つには、別途 CLI 単体のインストールが必要です。拡張機能を入れただけでは claude がパスに通らない点だけ覚えておくとつまずきません。拡張機能の設定で「Use Terminal」をオンにすると、パネル自体を CLI 風の表示に切り替えることもできます。

使う前に気をつけたいこと

便利な反面、AIに任せる以上は気をつけたい点もあります。

提案された変更は、受け入れる前に中身を確認する習慣をつけたいところです。とくに自動承認モードでは、意図しない箇所まで書き換わっていないか目を通すのが安心です。信頼できないコードを扱うときは、VS Code の制限モード(Restricted Mode)を使ったり、自動承認は避けて手動で承認したりするのが無難です。

もうひとつ、Claude Code は更新が速いツールです。アイコンの位置やショートカット、モードの名前などは、バージョンによって変わることがあります。手元の表示と細部が違っても慌てず、迷ったら公式ドキュメントで現在の仕様を確認してください。あなたのコードがモデルの学習に使われることはない、と公式は説明していますが、機密に関わる部分の扱いは、組織のルールに合わせて判断するのがよいと思います。

まずは小さな1タスクから

最初から大きな作り直しを任せるより、「この関数にコメントを付けて」「このエラーの原因を教えて」くらいの小さな頼みごとから試すと、差分の確認の流れや、どこまで自動でやらせるかの感覚がつかめてきます。慣れてくると、エディタを離れずに調べ物や修正が進むので、思考の流れを切らずに作業できるのが気持ちいいところです。気になった人は、まずひとつ手元のプロジェクトで動かしてみるのがおすすめです。

出典・もっと知りたい人へ

細かい設定やショートカット、最新の対応状況は公式ドキュメントが確実です。

コメント

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