こんにちは！日々の開発、本当にお疲れ様です。
突然ですが、皆さんはこんなストレスを抱えていませんか？
「フロントエンドのUIリポジトリを開きながら、同時にバックエンドのAPIサーバーのリポジトリも修正したい。でも、ウィンドウをいくつも立ち上げると、どの画面がどこだか分からなくなるし、ファイル検索のたびに迷子になる……」
複数のリポジトリが絡み合う現代のWeb開発において、この「ウィンドウの切り替え地獄」は、エンジニアの集中力を削ぐ大きな原因の一つです。脳のメモリ（コンテキスト）がここで無駄に消費されてしまいます。
これを一発で解決し、あなたの毎日のコーディングを劇的に楽にしてくれるのが、今回解説するVS Codeの「マルチルートワークスペース」です。
これをマスターすれば、全く異なる場所にある複数のプロジェクトを一つのウィンドウに美しく同居させ、それぞれに独立した設定を持たせながら、ストレスフリーに横断開発できるようになります。まるで一枚の巨大なキャンバスに、必要なパーツをすべて並べるかのような快適さを、一緒に手に入れましょう！
—
1. マルチリポジトリ開発における「コンテキストスイッチ」の呪縛
まずは、なぜ私たちが「一つのウィンドウで複数プロジェクトを管理すべきなのか」という設計思想のお話からさせてください。
通常、プロジェクトAとプロジェクトBを同時に触る場合、以下のような操作をしていませんか？
1. VS Codeのウィンドウを2つ立ち上げる
2. 「あれ、こっちのウィンドウはどっちのプロジェクトだっけ？」とタスクバーで迷う
3. ターミナルを開くたびに、それぞれのウィンドウで`cd`コマンドを叩いてディレクトリを移動する
これは、認知科学でいう「コンテキストスイッチ（文脈の切り替え）」を頻繁に発生させています。人間の脳は、ウィンドウが切り替わるたびに「今、自分はどのプロジェクトのどの文脈にいるのか」を再認識するコストを払わされています。これが積もり積もって、夕方にはどっと疲労感ウェーブが押し寄せる原因になるのです。
VS Codeのマルチルートワークスペースは、この物理的・心理的壁を取り払います。複数の独立したGitリポジトリを「ルート」として一つのツリー構造に束ね、統合されたエディタ体験を提供してくれるのです。
—
2. 実践！マルチルートワークスペースの作り方
百聞は一見に如かず。実際に手を動かして、その快適さを体験してみましょう。
ここでは例として、フロントエンド用のリポジトリ (`my-frontend`) と、バックエンド用のリポジトリ (`my-backend`) が、ローカルの `~/projects/` ディレクトリに並んで存在していると仮定します。
ステップ1：最初のプロジェクトをウィンドウで開く
まずは、いつも通りどちらか片方のプロジェクト（例：`my-frontend`）をVS Codeで開きます。
ステップ2：別のプロジェクトを「ワークスペースに追加」する
ここが魔法の入り口です。メニューバーから直感的に操作できます。
1. 上部メニューの 「ファイル (File)」 をクリック。
2. 「ワークスペースにフォルダを追加… (Add Folder to Workspace…)」 を選択。
3. ファイル選択ダイアログが開くので、もう片方のプロジェクト (`my-backend`) のフォルダを選んで追加します。
これで、左側のエクスプローラー（ファイルツリー）に、`my-frontend` と `my-backend` の2つのルートフォルダが縦に並んで表示されたはずです！
ステップ3：ワークスペースファイルとして保存する
この状態は、まだ一時的なメモリ上にしかありません。これをいつでも呼び出せる「設定ファイル」として保存します。
1. 再び 「ファイル (File)」 をクリック。
2. 「名前を付けてワークスペースを保存… (Save Workspace As…)」 を選択。
3. 適当な名前（例: `my-fullstack-app.code-workspace`）をつけて、プロジェクト全体を俯瞰できる親ディレクトリ等に保存します。
これで基礎セットアップは完了です！
今後は、この `my-fullstack-app.code-workspace` ファイルをダブルクリックするだけで、いつでもこのマルチリポジトリ環境が一瞬で立ち上がります。
—
3. ワークスペースの真骨頂！個別設定ファイル (`.code-workspace`) の活用術
マルチルートワークスペースの本当の凄さは、保存した `.code-workspace` ファイルが、JSON形式の強力な設定コンテナとして機能する点にあります。
先ほど保存したファイルをテキストエディタ（VS CodeでもOKです）で開いてみてください。中身は次のような構造になっています。
{
“folders”: [
{
// 1つ目のルートフォルダのパス（相対パスで記述するのがチーム共有のコツです）
“path”: “my-frontend”
},
{
// 2つ目のルートフォルダのパス
“path”: “my-backend”
}
],
“settings”: {
// ワークスペース全体に適用したい共通の設定をここに書きます
“editor.formatOnSave”: true, // 保存時に自動フォーマットを有効化
“editor.tabSize”: 2, // インデントは一律でスペース2つに統一
“files.exclude”: {
“/.git”: true,
“/.DS_Store”: true
}
}
}
プロジェクトごとに異なる設定を上書きする
ここからがアーキテクトの腕の見せ所です。「フロントエンドはタブ幅2スペースだけど、バックエンドのPythonプロジェクトはPEP8に従って4スペースにしたい！」という現場のわがままも、このワークスペース設定なら完璧に制御できます。
次のように `settings` セクションを拡張してみましょう。
{
“folders”: [
{
“name”: “フロントエンド (React)”, // ワークスペース内での表示名をカスタム可能
“path”: “my-frontend”
},
{
“name”: “バックエンド (Python/FastAPI)”,
“path”: “my-backend”
}
],
“settings”: {
// ワークスペース全体のデフォルト設定
“editor.formatOnSave”: true,
// 【重要】フォルダごとの個別設定（スコープ設定）
// フォルダ名やパスをキーにして、特定のリポジトリだけに設定を強制できます
“[typescript]”: {
“editor.tabSize”: 2
},
“[python]”: {
“editor.tabSize”: 4
}
},
// 拡張機能（Extensions）の推奨設定もここに持たせられます
“extensions”: {
“recommendations”: [
“esbenp.prettier-vscode”,
“ms-python.python”
]
}
}
この設定ファイルをGitで管理し、チームメンバーと共有（リポジトリの親に置くなど）すれば、「新しいメンバーが参画した初日に、環境構築で半日ハマる」という悲劇を完全に撲滅できます。みんなが同じウィンドウ構成、同じ拡張機能、同じフォーマット規則で開発をスタートできるのです。
—
4. 精度高い「HelloWorld」的動作確認：検索とターミナルの調和
正しく設定できているか、そして本当にコンテキストスイッチが減るのか、簡単な動作確認（HelloWorld）をしてみましょう。
1. 全文検索（Cmd + Shift + F / Ctrl + Shift + F）の威力を体感する
複数ウィンドウを開いていた時は、「どのプロジェクトのコードだっけ？」と検索範囲に悩んでいましたが、マルチルートワークスペースでは、両方のリポジトリが同時に検索対象になります。
例えば、APIのスキーマ定義（バックエンド）と、それを呼び出す型定義（フロントエンド）を同時にヒットさせ、一瞬で見比べることができます。
2. 統合ターミナルのマルチプレックス操作
VS Codeのターミナルを開いてみてください（`Ctrl + \“）。
ターミナルの右上にある「＋」ボタンのプルダウンを見ると、現在参加しているリポジトリ（ルートフォルダ）ごとにカレントディレクトリを指定してターミナルを立ち上げることができます。
- ターミナル1：`my-frontend` で `npm run dev` を走らせる
- ターミナル2：`my-backend` で `poetry run uvicorn main:app –reload` を走らせる
1つのウィンドウの下部パネル内で、フロントとバックのサーバーログが仲良く並んで流れていく様子を見るだけでも、エンジニアとしての満足感が得られるはずです。
—
先輩エンジニアからのエール
お疲れ様でした！これであなたも、VS Codeのマルチルートワークスペースを自在に操るエンジニアの仲間入りです。
複数のリポジトリを往来する開発は、一見すると複雑で面倒なことに思えたり、デスクトップが散らかりがちになります。しかし、今回紹介したワークスペースという「器」を適切に設計し、プロジェクトごとの設定をコード化（Configuration as Code）してあげることで、開発体験は劇的に洗練されます。
ウィンドウ迷子になるストレスから解放され、純粋に「コードを書く楽しさ」だけに没頭できる時間を、ぜひ毎日の開発に取り入れてみてください。あなたのコーディングライフが、より快適でクリエイティブなものになることを心から応援しています！