Freeive

claude-code·公開 2026.06.01·閲覧 3

Claude Code /ide: VS Codeと連携してエディタ内で使う

ターミナルとエディタを行き来するのが面倒なら、/ideでClaude CodeをVS Codeなどのコードエディタと連携し、接続状態を確認・管理する方法を見ていきます。

Claude Codeをターミナルで使っていると、「今どのファイルを見ているか」「さっき直したコードが画面に反映されたか」といったことが何度も途切れます。ターミナルとエディタのウィンドウを交互に見て流れが崩れるのです。これを滑らかにつなぐのがコードエディタ連携で、その状態を扱うコマンドが/ideです。

定義(何かというと)

/ideは、Claude Codeとコードエディタ(IDE)の連携状態を確認・管理するコマンドです。

IDE(Integrated Development Environment、統合開発環境)とは、コードを書いて実行してデバッグすることを一つのプログラムの中で全部できるようにまとめたエディタのことです。VS CodeやCursorなどが代表例です。/ideは、Claude Codeがこうしたエディタときちんとつながっているか、どのエディタに付いているかを見せて管理してくれます。

連携されると、Claude Codeがエディタで今開いているファイルや選択したコードを把握できるので、作業がずっと自然になります。

使い方(難易度別)

基礎 — 連携状態を確認する

そのまま入力します。

/ide

こうすると、現在どのエディタとつながっているか、つながっていなければどのエディタに付けられるか、状態が表示されます。

応用 — VS Codeに付ける

最もよくあるのはVS Codeとの連携です。通常はVS Codeの中にClaude Code拡張(extension)をインストールすると自動で連携されますが、/ideで接続状態を点検し、必要なら直接接続を選べます。

/ide

リストから接続するエディタを選べばよいです。連携されると、エディタでコードを選択したままClaude Codeに質問すれば、「この部分」と言うだけでどこを指しているか理解してくれます。

発展 — エディタ内の作業フローを作る

連携が終わると、ターミナルとエディタを別々に見ていた習慣を変えられます。

  1. エディタで直したいコードをドラッグで選択します。
  2. Claude Codeに「この関数を整理して」のように頼みます。
  3. Claude Codeがその選択範囲を基準に作業します。

ファイルパスをいちいち書いたりコードをコピー&ペーストする必要が減ります。手を行き来させる回数が減るぶん、集中が途切れにくくなります。

よくある落とし穴

  • /ideを打ったのにエディタがリストに出ないなら、エディタ側のClaude Code拡張がインストールされているか先に確認してください。連携は両側がそろって初めて成立します。
  • 複数のエディタウィンドウを同時に開いておくと、どのウィンドウに付くか混乱することがあります。作業するウィンドウを一つ決めておくとすっきりします。

実践事例

ある初心者開発者がターミナルでClaude Codeを使いながら、毎回「今見ているファイルがstyles/main.cssなんだけど…」とパスを説明するのに疲れていました。/ideでVS Codeと連携した後は、エディタでファイルを開いたまま「今このファイルで色の値を整理して」と言うだけで通じました。説明する時間がぐっと減り、作業速度が上がりました。

こう使うともっといい

エディタ連携は作業環境を整える作業の一部です。設定全般を手直ししたいなら/configでClaude Codeの設定を見て、ターミナル環境自体を整えるなら/terminal-setup系のコマンドと一緒に使うとよいです。/ideでエディタと付けておき、残りの環境も自分の手に合わせて整えていけばよいです。

まとめ

/ideは、Claude Codeとコードエディタの連携状態を確認・管理するコマンドです。VS Codeのようなエディタに付けておけば、コードをいちいち説明したりコピーしたりする必要なく、エディタ内の流れのまま作業できます。ターミナルとエディタを行き来して疲れているなら、真っ先に整理すべき部分です。

基準:Claude Code v2.1.154(2026.05)

#ClaudeCode#claude-code#ide#AIコーディング#バイブコーディング#開発者

Comments

コメント 0

サインイン状態を確認中…

コメントを読み込み中…

Recent

他の日記も。