カツプロ
ログイン
← 投稿一覧

Claude CodeはVS Code版で足りる?デスクトップ版との違いを公式情報と実画面で比較

かつ

かつ

2026/09/22

Claude CodeはVS Code版で足りる?ブラウザ確認も並行作業もVS Codeでできた。デスクトップ版だけの機能も整理。右に、VS Codeで変更を左右に並べて確認している実画面

この記事は、Webサイトを作るALcuesto(エールクエスト)が、AIでコードを書く「Claude Code(クロード・コード)」のVS Code版デスクトップ版の違いを、Anthropicの公式ドキュメントと自社のパソコンの実画面で整理したものです。私たちはふだん、VS Code版を使って開発しています。

先に結論です。

  • 中身は同じClaude Codeです。設定ファイルは共通なので、どちらを使っても、決めておいたルールや許可はそのまま効きます
  • 「ブラウザでの表示確認」と「並行作業」は、VS Code版でもできます。公式ドキュメントのVS Code版のページに、どちらも書かれています。ただしブラウザの使い方は、2つで少し違います
  • 出先のスマホから進み具合を見て指示を送ることも、VS Code版でできます。「Remote Control」という機能を使います
  • デスクトップ版のページにしか書かれていない機能もあります。パソコンの画面操作、iOSアプリのシミュレーターなどです。これらが要らなければ、VS Code版で足ります

用語を先に整理しておきます。

  • Claude Code:Anthropicが作っている、AIにコードを読ませたり書かせたりする道具です。ファイルの編集やコマンドの実行まで、AIがやってくれます
  • VS Code版:コードを書くソフト「Visual Studio Code(VS Code)」に入れる拡張機能として使う形です。VS Codeそのものについては「WEBコーティングにおススメコードエディタ Visual Studio Code」に書きました
  • デスクトップ版:Claudeのデスクトップアプリの「Code」タブで使う形です。アプリには Chat・Cowork・Code の3つのタブがあります
  • CLI(シーエルアイ):黒い画面(ターミナル)に文字を打って使う形です。この記事では比べる対象にしていません

きっかけ:AIの答えを確かめたら、違っていた

この記事を書いたきっかけは、Claude Code自身に「VS Code版とデスクトップ版、何ができて何ができないの?」と聞いたことです。

返ってきた比較表では、「アプリ内のブラウザで表示確認」と「ワークツリーで並行して作業」の2つが、デスクトップ版だけの機能になっていました。ところが、私たちはVS Code版でも、ブラウザを使った確認も並行作業もしています。そう伝えると、Claude Codeは「デスクトップ版のページに載っていたのを見て、VS Code版ではできないと決めつけていた」と訂正しました。

AIは、自分が作られた会社の製品についてでも、確かめずに比べてしまうことがあります。そこで、公式ドキュメントを一から読み直し、実際にVS Code版を動かして確かめました。以下は、その結果です。

前提:中身は同じ。設定も共通

VS Code版の公式ページは、設定ファイルについてこう書いています(Claude Code Docs「VS Code」)。

~/.claude/settings.json の Claude Code 設定:拡張機能と CLI 間で共有されます。許可されたコマンド、環境変数、hooks、MCP サーバーに使用します。

デスクトップ版の公式ページにも、次の一文があります(Claude Code Docs「Desktop application」)。

Desktop と CLI は同じ設定ファイルを読み取るため、セットアップが引き継がれます

つまり、プロジェクトのルールを書いた CLAUDE.md、許可するコマンド、つないだ外部ツール(MCPサーバー)は、どちらで使っても同じです。違うのは、まわりの画面と、画面から使える機能です。

VS Code版を実際に動かしてみた

架空のカフェのページ(HTMLとCSSの2ファイル)を用意して、VS Code版で直してもらいました。使ったのは、VS Code 1.138.0 と Claude Code拡張機能 2.1.278 です(2026年9月22日、自社のWindowsパソコンで確認)。

準備:VS Codeのバージョンと、有料プラン

公式ページには、VS Code 1.94.0以上と、Claudeの有料プラン(Pro・Max・Team・Enterprise)かClaude Consoleのアカウントが必要と書かれています。APIキーは要りません(Claude Code Docs「VS Code」)。VS Codeの拡張機能の画面で「Claude Code」を探して入れます。

つまずいた所:フォルダを「信頼」しないと動かない

最初は、練習用のフォルダをパソコンの一時フォルダに作って開きました。すると、画面の上に「制限モードは、安全なコード参照のためのものです」と出て、Claude Codeの入口が表示されませんでした。

VS Codeで練習用フォルダを開いた実画面。上に「制限モードは、安全なコード参照のためのものです。すべての機能を有効にするには、このフォルダーを信頼します。」という青い帯があり、左下にも「制限モード」と出ている。Claude Codeのアイコンは表示されていない

公式ページの「よくある問題」にも、「拡張機能は制限モードでは動作しません」と書かれています(Claude Code Docs「VS Code」)。信頼しているフォルダの中に置き直したところ、動きました。はじめて使うときに入口が見つからなければ、まずここを見てください。

パネルを開く

ファイルを開くと、エディタの右上にオレンジ色のマーク(公式ページでは Spark アイコンと呼んでいます)が出ます。押すと、右にClaude Codeのパネルが開きます。入力欄の下には、使うモデルと、後で説明する「モード」が表示されています。

VS Codeの実画面。左にstyle.cssのコード、右にClaude Codeのパネルが開いている。パネルには「Learn Claude Code」の案内と、下に入力欄があり、「Opus 5 (1M) High」と「Auto」の表示がある

直したい行を選んで、そのまま渡す

ここがVS Code版のいちばん便利なところです。エディタで行を選ぶと、入力欄の下に「6 lines selected」と出て、選んだ部分がClaudeに渡ります。さらに Alt+K(Macは Option+K)を押すと、@style.css#31-36 のように、ファイル名と行番号が入力欄に入ります。

style.cssの31行目から36行目(.menu li の部分)を選んだ実画面。右の入力欄に「@style.css#31-36」と入り、下に「6 lines selected」と出ている

「このファイルの、この行」を言葉で説明しなくてよいので、指示が短くて済みます。

モードを選ぶ

入力欄の右下を押すと、Claudeにどこまで任せるかを選べます。

モードの一覧の実画面。上から Manual(編集のたびに承認を求める)、Edit automatically(選んだ部分かファイル全体を編集する)、Plan(コードを調べて、編集の前に計画を出す)、Auto(安全確認を通った操作は自動で進め、危ないものは止まる)の4つが並んでいる

  • Manual:ファイルを書き換える前に、毎回たずねてくれます
  • Edit automatically:たずねずに書き換えます
  • Plan:先に計画を出して、承認を待ちます。VS Code版では、計画がMarkdownの文書として開き、その中にコメントを書き込んで直してもらえます(公式ページ
  • Auto:安全かどうかの確認を通った操作は自動で進め、危ないものだけ止まります

変更を左右に並べて確かめる

Manualにして、「スマホで値段が折り返されないように直して」と頼みました。するとVS Codeのエディタに、元のコードと直したコードが並び、足された行が緑で示されました。右のパネルでは「Yes/No/代わりにどうしてほしいか」を選べます。

変更の確認画面の実画面。左のエディタに、.menu li への gap: 12px と、新しい .menu li span:last-child { flex-shrink: 0; white-space: nowrap; } が緑色で足されている。右のパネルには「1 Yes」「2 Yes, allow all edits this session」「3 No」の選択肢がある。パソコン内のフォルダの場所はぼかしている

いつもの編集画面の上で差分を見られるので、書き換わる場所を見落としにくいです。「Yes」を押すと反映されました。

Claude Codeの返事の実画面。「style.css:31-42 を直しました。スマホ幅で値段が折り返されないようになるはずですが、実機やブラウザではまだ表示を確かめていません。」とあり、値段を1行に固定したことと、品名との間に余白を足したことが箇条書きで説明されている

返事の1行目に「実機やブラウザではまだ表示を確かめていません」とあります。コードを直すところまではVS Code版だけでできますが、画面で確かめるには、もう一手間が要ります。それが次の話です。

なお、公式ページによると、送ったメッセージごとに「ここまでコードを巻き戻す」「ここから会話をフォークする」こともできます(Claude Code Docs「VS Code」)。

VS Codeでは無理と思われがちな3つ

1. ブラウザでの表示確認

VS Code版の公式ページには、こう書かれています(Claude Code Docs「VS Code」)。

Claude を Chrome ブラウザに接続して、Web アプリをテストし、コンソールログでデバッグし、VS Code を離れることなくブラウザワークフローを自動化できます。

使い方は、入力欄に @browser と書いてから、してほしいことを書くだけです。必要なのは、Chromeの拡張機能「Claude in Chrome」のバージョン1.0.36以上です(同じページ)。Chrome連携のページによると、ChromeのほかにEdgeなどChromiumを元にしたブラウザでも使え、Anthropicの有料プランでログインしている必要があります(Claude Code Docs「Chrome」)。

ただし、デスクトップ版のブラウザとは仕組みが違います。

VS Code版デスクトップ版
使うブラウザふだん使っているChromeに、拡張機能を入れて使うアプリの中のブラウザ(画面の一部として開く)
ログインふだんのChromeのログイン状態をそのまま使う保存したログインや履歴のない、まっさらな状態
向いている場面ログインが必要な管理画面などの確認作っているサイトの確認。直すたびにClaudeが自動で確かめる

表の内容は、VS Code版のページと、デスクトップ版のページの「ブラウザとChrome拡張機能の選び方」の節によります(Claude Code Docs「Desktop application」)。デスクトップ版のページ自身も、ログインしたままの画面でClaudeに作業させたいときは、Chrome拡張機能を使うよう案内しています。

2. 並行作業(ワークツリー)

ワークツリー(worktree)は、Gitの機能で、同じプロジェクトの作業用コピーを別の場所に作るものです。2つの作業を同時に進めても、ファイルの書き換えがぶつかりません。

VS Code版の公式ページの「git を使用する」の節には、独立した worktree でClaudeを始めるには、worktreeのページを参照するよう書かれています(Claude Code Docs「VS Code」)。また、コマンドパレットの「Open in New Tab」「Open in New Window」で会話を増やすと、それぞれが別の履歴で並行して進むとも書かれています(同じページ)。

デスクトップ版は、セッションを始めるときに「worktree」を選べるボタンがあり、手軽です(Claude Code Docs「Desktop application」)。VS Code版では、会話の中でClaudeに「worktreeで作業して」と頼むと、Claudeが作ってくれます(Claude Code Docs「worktrees を使用した並列セッションの実行」)。どちらも、プロジェクトがGitで管理されていることが前提です。始め方が違うだけで、できることは同じです。

3. 出先のスマホから、進み具合を見る・指示を送る

パソコンを家に置いたまま出かけて、外からコードの進み具合を確かめたり、続きを指示したりしたい。これも、VS Code版で「Remote Control(リモートコントロール)」を使えばできます。公式ページはこう説明しています(Claude Code Docs「Remote Control」)。

Remote Control は claude.ai/code または Claude アプリ(iOS および Android)をマシン上で実行されている Claude Code セッションに接続します。デスクでタスクを開始してから、ソファの電話またはコンピュータのブラウザで続行できます。

VS Code版での始め方は、Claude Codeの入力欄に /remote-control(短く /rc)と打つだけです。つながると、スマホのClaudeアプリの「Code」の一覧や、ブラウザの claude.ai/code に、その会話が出てきます(同じページ)。

  • 作業はパソコンの上で動きます。スマホは、パソコンで動いている会話をのぞく窓です。ファイルや設定は、パソコンのものがそのまま使われます
  • スマホからも、パソコンからも、同じ会話にメッセージを送れます。スマホから写真やファイルを添付して渡すこともできます
  • 条件は、Pro・Max・Team・Enterpriseのプランです。APIキーでは使えません。TeamとEnterpriseでは、管理者が先に設定で有効にする必要があります

出かける前に気をつけることが2つあります(同じページ)。

  • VS Codeは開いたままにしておきます。VS Codeを終了すると、その会話はオフラインになります
  • パソコンがスリープすると、その間は止まります。パソコンが戻ると自動でつなぎ直しますが、出先から作業を進めたいなら、スリープしない設定にしておく必要があります

毎回 /remote-control と打つのが面倒なら、コマンドメニューの設定にある「Enable Remote Control for all sessions」で、すべての会話を最初からつなげておけます(Claude Code Docs「VS Code」)。

なお、デスクトップ版にも、スマホのClaudeアプリから新しい仕事を渡す「Dispatch」という機能があります。公式の使い分けの表では、Dispatchは「外出中に仕事を任せる」、Remote Controlは「進行中の作業を別の端末から操る」ためのものと整理されています(Claude Code Docs「Remote Control」)。

VS Code版ならではのこと

VS Code版の公式ページに書かれていて、エディタとつながっているからこそできることです(すべてClaude Code Docs「VS Code」より)。

  • エディタのエラーや警告を読める。VS Codeの「問題」パネルに出ているエラーや警告を、Claudeが読めます。PHPやTypeScriptなど、入れている拡張機能が見つけたまちがいを、そのまま手がかりにできます
  • 選んだ行と、開いているファイルが自動で伝わる。上で見たとおりです
  • ターミナルの出力を渡せる。@terminal:ターミナルの名前 と書くと、エラーやログをコピーせずに見せられます
  • Jupyterのノートブックを実行できる。実行する前に、毎回VS Codeが確認します
  • CLIと会話の履歴を共有している。VS Codeで始めた会話を、ターミナルの claude --resume で続けられます

デスクトップ版のページにしか書かれていない機能

反対に、デスクトップ版の公式ページには書かれていて、VS Code版のページには書かれていない機能です。

Claude Code Docsの日本語版「Desktop application」のページの実画面。Codeタブでできることとして、diffビューでのレビューとPRの監視、埋め込みブラウザでのプレビュー、iOS Simulatorペイン、ペインの配置、サイド質問、他のセッションの確認、外部ツールの接続、アプリを開いてスクリーンを制御、マシン上・クラウド上・SSH上での実行が並んでいる

出典:Claude Code Docs「Desktop application」(2026年9月22日に表示)

  • パソコンの画面操作(コンピュータ使用):Claudeがアプリを開き、画面をクリックして作業します。macOSとWindowsの研究プレビューで、ProかMaxのプランが必要です。TeamとEnterpriseでは使えません
  • スマホのアプリから新しい仕事を渡す(Dispatch):こちらもProかMaxのプランが必要です。動いている作業を外から見て続きを指示するだけなら、上で書いたRemote ControlでVS Code版でもできます
  • iOSアプリのシミュレーター:iOSアプリを動かして試す画面を、アプリの中に開きます
  • 定期的な作業の予約:決まった時間に作業を走らせます
  • プルリクエストの見張り:GitHubの自動チェックが失敗したら直しにいく、全部通ったらマージする、を自動にできます。GitHub CLIが必要です
  • アプリの中のブラウザで、直すたびに自動で確認:上の表のとおりです

プランの条件は、デスクトップ版のページの「コンピュータ使用」と「Dispatch」の節によります(Claude Code Docs「Desktop application」)。

気をつけること:会話の履歴は別々

セッション管理の公式ページには、こう書かれています(Claude Code Docs「セッションの管理」)。

デスクトップアプリ、Web 上の Claude Code、および VS Code 拡張機能はそれぞれ独自のセッション履歴を保持しています。

設定は共通でも、VS Code版で進めた会話は、デスクトップ版の一覧には出てきません。両方を使うなら、「この作業はこちらで続ける」と決めておくと迷いません。

私たちの使い分け

ここからは私の考えです。

  • コードを書いて直す仕事は、VS Code版で足ります。行を選んで渡す、エディタの上で差分を見る、エディタのエラーを読ませる。この3つが毎日の作業でいちばん効くので、私たちはVS Code版を中心にしています
  • ブラウザでの確認も、VS Code版から頼めます。ログインが必要な画面を確かめたいときは、むしろChrome拡張機能のほうが向いています
  • 出先から様子を見るのも、VS Code版のままで。パソコンを家に置いて出かけるなら、Remote Controlをつないでおけば、スマホから進み具合を見て指示を送れます
  • デスクトップ版を開くのは、デスクトップ版にしかない機能が要るときです。画面の操作をClaudeに任せたいとき、iOSアプリを作るとき、などです

そしてもう1つ。AIに比べてもらった結果は、公式の資料で確かめてから使うことをおすすめします。今回のように、AIがもっともらしい比較表を作ることがあるからです。

この記事で使った出どころ

公式ドキュメントは、すべて2026年9月22日に開いて確認しました。

公式

自社で確かめたこと

  • VS Code 1.138.0 と Claude Code拡張機能 2.1.278 で、架空のカフェのページ(HTMLとCSSの2ファイル)を直してもらった一連の実画面(2026年9月22日、自社のWindowsパソコンで撮影)
  • 一時フォルダに置いたフォルダを開くと制限モードになり、Claude Codeの入口が出なかったこと(同日)
  • Chrome拡張機能を使ったブラウザ確認と、Remote Controlは、この記事では公式ページの記述までを確かめました。実際に動かしてはいません

この記事の著者・監修

カツ
生成AIエンジニア/フロントエンドエンジニア/舞台監督などなど

カツ

カツプロ運営者のカツです! AI・Web関連から、日常のことなど、私目線の回答も交えながらお伝えします!

この記事をシェア

note

スポンサーリンク

コメント(0)

まだコメントはありません。

コメントは Tier 1(有料)の機能です。ログインのうえアップグレードしてください。

こちらの記事も読まれています