Back Claude Code

11.Visual Studio Code上でClaude Codeを操作しようとして起きた取り違いに戸惑う

2026.06.28 1 min read
ARTICLE HERO

導入:今日行ったClaude Codeとの格闘の概要

今日は、Claude Code(Anthropic社が提供するAIコーディング支援ツールです)を使って、ブログ記事の下書きを自動生成する仕組みをつくる取り組みを進めていました。この取り組みは、Visual Studio Code(コードを書くためのエディタです)の中でClaude Codeを動かして行っています。今回のメモは、そのVisual Studio Code上でのClaude Codeの操作についてつまずいた2つの点についての記録です。

実践したこと:具体的な手順や入力したコマンド

VS Codeを起動して、Claude Codeを操作しながらブログ記事の自動生成の仕組みづくりを進めていました。動作確認のために「このフォルダにファイルを作って」と指示を出す、という操作も行いました。

躓いたポイントと解決策:エラーや悩んだ点と、その対処法

1つ目のつまずきは、VS Codeを開くたびにClaude Codeを拡張機能から探していたことです。

VS Codeを起動するたびに「あれ、Claude Codeがどこにもない」と焦り、そのたびに拡張機能(VS Codeに後から追加できる機能のことです)の一覧を開いてClaude Codeを探し、有効化し直すという作業を毎回くり返していました。同じ手間を何度も踏むうちに、正直うんざりした気持ちになっていたのを覚えています。

原因は、一度インストールすれば、Claude Codeのアイコン(赤いスパークアイコン)が画面左端の縦のアイコン列にずっと残っていることに気づいていなかったことです。毎回ゼロから探す必要はなかったのに、そのことを知らなかったために無駄な手順を繰り返し、自分でもどかしさを感じていました。

解決策が分かったときは、拍子抜けするほど単純でした。毎回やるべきことは「画面左端の赤いスパークアイコンをクリックするだけ」だったのです。拡張機能を開き直したり、有効化し直したりする必要はありません。さらに、Claude Codeのパネルを一度右側に配置すれば、その配置はVS Codeが記憶してくれます。次に同じフォルダを開いたときは、前回の配置のまま開くので、毎回ドラッグして右に持っていく必要もありませんでした。これまでの手間を思うと、知ってしまえば呆気ないものだなと苦笑いしてしまいます。

2つ目のつまずきは、操作していたのが「Claude Code」ではなく「GitHub Copilot」だったことです。

動作確認のため「このフォルダにファイルを作って」と指示したら、ファイルが作られました。しかし、本来出るはずの「作っていいですか?」という確認が出ないまま、いきなり作られてしまい、一瞬ひやりとしました。おかしいと思って画面をよく見たら、操作していたチャットはClaude Codeではなく、VS Codeに元から入っている「GitHub Copilot」(マイクロソフト社のAIコーディング支援機能です)でした。

原因は、VS Codeには見た目のよく似た「AIに話しかけるチャット」が複数同居していることです。GitHub Copilotは、AIモデルとしてClaude(HaikuやSonnetという種類のモデルです)も選べるため、名前も雰囲気もClaude Codeと似ていました。初見では、どちらがどちらか見分けがつかず、しばらく画面をにらみながら戸惑っていました。決め手になったヒントは、返答の隅に「GPT-5 mini」という別のモデル名が表示されていたことと、権限設定に「Copilotは構成済みの設定を使用します」と書かれていたことです。これを見つけたときは、ようやく腑に落ちた思いがしました。

解決策として、見分け方が分かりました。本物のClaude Codeは、画面左端の「赤いスパークアイコン」から開きます。本物のClaude Codeのパネルの目印は、「New session」「Local / Web」のタブや、「Ask Claude to edit…」という入力欄です。一方、GitHub Copilotの目印は、「Auto」「既定の承認」「次にビルドする内容を説明します」といった表示です。これからブログ記事を書く作業(CLAUDE.mdやスキルを使う作業)は、必ず本物のClaude Codeのほうで行うようにします。Copilotのチャットでやっても、CLAUDE.mdやスキルは効かないためです。

まとめと次回の目標:本日の成果と次回の予告

今日の成果は、Claude Codeは一度入れたら左端の赤いスパークアイコンを押すだけで開けると分かったことです。毎回探す必要はなく、パネルの配置も記憶されるので、毎回右に動かす必要もありません。また、VS Codeには似たAIチャット(Copilot)が同居していて取り違えやすいことも分かりました。赤いスパークアイコンを目印にすることが大切です。

次回は、本物のClaude Codeを正しく開いた状態で、ブログ記事の生成作業を進めていきたいと思います。