「Claude Code、ターミナルだけで使い続けるのって、ちょっと不便だな」
気づいたのは、契約してから2週間ほど経った頃でした。Claude Codeでアプリを作り始めて、コードの量が増えてきた頃です。
ターミナルの画面で作業しながら、別のウィンドウにコードを開いて、Claudeに「3行目のエラーを直して」と伝えるたびに「どのファイルの、何行目ですか？」という往復が発生する。毎回コードをコピーして貼り付けて、また戻って…という繰り返しが地味にストレスになってきた。
食品スーパーで20年やってきた仕事柄、「段取りの悪さ」には本能的にイライラするほうで。レジ作業でも在庫確認でも、二度手間・三度手間を省く工夫はずっとやってきました。同じように感じて、「何か解決策がないかな」と調べたら、VSCodeとの連携が出てきました。
今日は、Claude CodeをVSCodeと連携させる設定手順と、連携後に変わった作業感を書きます。
「VSCode」って何？という人へ
まず前提を揃えます。
VSCode（Visual Studio Code）は、Microsoftが無料で出しているコードエディタです。プログラマーが世界中で使ってる、コードを書くための専用ノートみたいなツール。
非エンジニアの僕が最初に聞いた時は「専門家向けの難しそうなやつ」という印象でしたが、実際に使ってみると見た目はほぼメモ帳の延長で、そこまで怖くはなかった。
ポイントは「無料で使える」「Claude Codeと連携できる拡張機能がある」この2点です。
なぜターミナル単独より便利になるのか
連携前と連携後で何が変わるのか、先に整理します。
ターミナル単独でClaude Codeを使う場合、Claudeとのやり取りはターミナル画面内だけ。コードファイルを別アプリで開いて、コピーして、ターミナルに貼って、また戻って…という往復が発生します。
VSCodeと連携すると、エディタ画面の中にClaudeのチャット欄が出てきます。開いているファイルをClaudeが直接参照できるようになるので、「今開いてるコードのここ、修正して」が一言で通じる。
イメージで言うと、ターミナル単独が「電話で遠くにいる人に指示する感じ」、VSCode連携が「隣の席に座って一緒に作業してる感じ」です。情報を伝える手間が圧倒的に減る。
設定の手順（全部で30分かかりませんでした）
ステップ1：VSCodeをダウンロード
まだVSCodeが入っていない場合は、code.visualstudio.com から無料でダウンロードします。Mac版を選んで、Applicationsフォルダにドラッグするだけ。
初回起動時に「日本語化しますか？」という案内が右下に出るので、日本語にしておくと後が楽です。
ステップ2：拡張機能「Claude Code」を入れる
VSCodeを起動したら、左のサイドバーにある四角4つが並んだアイコン（拡張機能）をクリック。検索窓に「Claude Code」と入れます。
Anthropic公式の「Claude Code」拡張機能が出てくるので、「インストール」を押す。これだけです。
ステップ3：ログイン連携する
拡張機能を入れたら、キーボードの Cmd + Shift + P を押してコマンドパレット（検索窓）を開き、「Claude」と入力。「Claude Code: Login」系のメニューを選びます。
ブラウザが自動で開いてAnthropicのログイン画面になるので、いつものアカウントでログインするだけ。VSCodeに戻ると、サイドバーかどこかにClaudeとのチャット欄が出ています。
僕はここまで20分かかりませんでした。インストール系の作業の中では、かなりスムーズな部類。
連携後に「これは便利だな」と感じた3つの場面
1. 開いているファイルを意識してくれる
これが一番ありがたかった変化です。
VSCodeでファイルを開いた状態でClaudeに話しかけると、Claudeが「今開いてるファイルはこれですね」という前提で答えてくれます。
以前は「〇〇.pyというファイルの15行目に、こういうコードがあって、エラーが出てるんですが…」と毎回コピーして説明していたのが、「15行目のエラー、直して」だけで通じるようになった。
食品スーパーで例えると、指示書なしで現場を見ながら話せる感じ。「棚のここ、補充しといて」が通じる関係になった、という感覚です。
2. コードの一部を選んで質問できる
ファイル内の気になる部分をマウスで選択した状態でClaudeに「これ、何してるの？」と聞けます。
大きなコードを丸ごと理解しようとすると大変ですが、「このブロックだけ」と絞って聞けるので、40代の僕でも少しずつ理解が追いついてきます。
「全部分からなくていい、今必要な部分だけ分かればいい」というスタンスでやっていると、これがすごく合ってました。
3. エディタ・チャット・ターミナルが1画面に収まる
VSCodeには内蔵のターミナルがあって（Cmd + J で下から出てきます）、そこで claude コマンドを打てば従来のターミナルモードも使えます。
つまり、コードを書くエディタ、Claudeとのチャット、ターミナルが全部1画面に収まる。作業の種類によって「今どのウィンドウを見てたっけ」という切り替えロスがほぼなくなりました。
連携後、作業スピードがどう変わったか
正直な感想を書きます。
連携前は、1つの機能を直したり追加したりするのに、平均30〜40分かかってました。ターミナルとエディタを行き来する往復、コードをコピーして説明する手間がそこそこあった。
連携後は、同じ作業が20〜30分に縮んだ感覚。1割〜2割くらいの短縮。派手な数字じゃないですが、平日夜の2時間しか副業に使えない僕にとって、この差は毎日積み重なります。
月に換算すると、平日20日 × 10分の短縮 = 200分、3時間以上の余裕が生まれた計算。その分でブログ記事が2〜3本書けます。
「もう少し体系的に学びたい」と思った日
VSCodeとの連携を自分で調べていた時、正直こう思った瞬間がありました。「こういう設定の調べ方、もっと効率よく学べないのかな」と。
独学だと、調べて・試して・エラーで止まって・また調べて、というサイクルをひとりで回すことになります。VSCodeの連携くらいなら独学で乗り切れますが、この先アプリ開発が本格化したら、全部自分で調べ続けるのはしんどいかもしれない、という気持ちも正直あります。
そういう「効率よく進めたい」タイプの人には、AIツールの使い方から副業への活かし方まで体系的に教えてくれるスクール（Winスクールなど）を選択肢に入れるのも一手だと思います。僕は今のところ独学派ですが、半年後に壁を感じたら、こういう選択肢も検討するつもりでいます。
まとめ：10分の設定で、毎日の作業が変わった
VSCodeとの連携を振り返ると、設定自体は20〜30分。でも、その後の作業効率は明らかに変わりました。
ターミナルだけで使っている人は、今日中にやってみることをすすめます。無料で設定できて、変わるのは作業の「段取り」だけ。非エンジニアでもちゃんと動きます。
食品スーパーで20年、段取りだけで生き抜いてきた僕が言うので、間違いない。
次回：Claude Code vs Cursor、1週間ずつ使ってみた
VSCodeとの連携が落ち着いてきた頃、知人に「CursorっていうAIエディタも試してみた？」と言われました。
Claude CodeをVSCodeで使う方法は学んだ。でも、Cursorというものが別にあるらしい。「どっちが自分に合うのか」が気になって、実際に1週間ずつ両方を使い込んでみました。
次回は、その比較レポートを書きます。どっちが非エンジニアの副業に向いているか、正直な結論を出します。
コメント