VS Codeのワークスペースとは？複数プロジェクトを管理する便利な使い方を解説！

2025年3月4日2025年5月8日

VS Codeで複数のプロジェクトを管理していると、どのフォルダを開いていたのか分からなくなったり、毎回設定をやり直すのが面倒だったりしませんか？💡

そんなときに便利なのが「ワークスペース機能」です！
VS Codeのワークスペースを使えば、複数のフォルダを1つのウィンドウで開いたり、プロジェクトごとに設定を保存したりできます✨

✔ こんな方におすすめ！

複数のWebサイトやアプリを並行して開発している
毎回エディタの設定や拡張機能をやり直すのが面倒
フォルダごとに異なる設定を適用したい
仕事や個人のプロジェクトを整理して管理したい

この記事では、VS Codeのワークスペースとは何か？何ができるのか？ を初心者向けに分かりやすく解説します💡

さらに、実際の使い方や活用術、メリット・デメリット まで詳しく紹介！

VS Codeのワークスペースとは？何ができるの？

🔹 ワークスペースとは？

ワークスペースとは、VS Codeで複数のプロジェクトを管理するための機能 です。

通常、VS Codeでは フォルダを開いて編集 しますが、ワークスペースを使うと 複数のフォルダをまとめて開き、プロジェクトごとに設定を保存 できます✨

🔹 フォルダを開くだけ vs. ワークスペースを使う場合の違い

機能	フォルダを開く	ワークスペースを使う
開けるフォルダ	1つだけ	複数のフォルダを同時に開ける
設定の保存	VS Code全体の設定を適用	プロジェクトごとに個別の設定を保存可能
拡張機能の管理	全プロジェクト共通	プロジェクトごとに異なる拡張機能を適用
Gitの管理	1フォルダごと	複数のリポジトリを1つのウィンドウで管理
ワークスペースの保存	なし	.code-workspace ファイルに保存可能

📌 つまり、ワークスペースを使えば「異なるプロジェクトをまとめて管理できる」＆「プロジェクトごとの設定を保存できる」！

🔹 どんな場面でワークスペースを使うべき？

✔ 複数のプロジェクトを並行して開発している
→ 1つのウィンドウで複数のフォルダを開けるので、プロジェクト間をスムーズに切り替え可能！

✔ プロジェクトごとに異なる設定を適用したい
→ ワークスペースごとに設定が保存できるので、仕事用・個人用でエディタのカスタマイズを分けられる！

✔ フロントエンド＆バックエンドのプロジェクトを同時に開きたい
→ 例えば、frontend フォルダ（React/Vue）と backend フォルダ（Node.js/PHP）を1つのワークスペースで管理できる！

✔ プロジェクトごとに異なる拡張機能を有効化したい
→ ワークスペースごとに拡張機能を設定すれば、無駄なプラグインを減らしてVS Codeを軽量化！

「複数プロジェクトを1つのウィンドウで管理」する具体的な例

VS Codeのワークスペースを活用すると、異なるプロジェクトを1つのウィンドウで開き、スムーズに行き来しながら開発 できます💡
以下のような 具体的なケース で特に便利です！

1. フロントエンド & バックエンドの開発を同時に行う場合

🛠 例：Webアプリの開発

通常の開き方:

frontend（React/Vue）を開く
backend（Node.js/PHP）を開く
👉 別々のウィンドウになり、切り替えが面倒…

ワークスペースを使うと:

frontend フォルダ（ReactやVue）
backend フォルダ（APIサーバー）
👉 1つのウィンドウでまとめて開けるので、タブを切り替えるだけで作業できる！

📌 「APIの変更 → フロントで確認」といった作業がスムーズになる！

2. WordPressのカスタマイズでテーマ＆プラグインを同時に編集

🛠 例：WordPressサイトの開発

通常の開き方:

wp-content/themes/my-theme/ を開く
wp-content/plugins/my-plugin/ を開く
👉 別々のウィンドウで開くと、行ったり来たりするのが面倒…

ワークスペースを使うと:

my-theme（カスタムテーマ）
my-plugin（自作プラグイン）
👉 1つのウィンドウで開けるので、効率的にカスタマイズができる！

📌 テーマとプラグインの連携をスムーズにテストできる！

3. クライアントごとに複数のWebサイトを管理

🛠 例：Web制作会社やフリーランスの案件管理

通常の開き方:

client-A-site を開く
client-B-site を開く
👉 毎回ウィンドウを切り替えるのが手間…

ワークスペースを使うと:

client-A-site（WordPressサイト）
client-B-site（ECサイト）
👉 1つのウィンドウで管理すれば、複数案件を並行作業できる！

📌 タブを切り替えるだけで、異なる案件に素早く対応！

4. チーム開発で異なるリポジトリを同時に開く

🛠 例：Gitを使ったチーム開発

通常の開き方:

core-repo（システムのベースとなるコード）
feature-repo（新機能開発のリポジトリ）
👉 別々のウィンドウで開くと、ブランチを行き来するのが大変…

ワークスペースを使うと:

core-repo（メインリポジトリ）
feature-repo（機能追加用リポジトリ）
👉 1つのウィンドウで両方を管理できるので、修正やマージがスムーズ！

📌 Gitの管理が楽になり、ブランチの比較や変更履歴の確認がしやすくなる！

5. ドキュメント管理と開発を同時に行う

🛠 例：開発しながらドキュメントを整理

通常の開き方:

project-code（コードのリポジトリ）
project-docs（ドキュメントを管理するフォルダ）
👉 ドキュメントを確認するたびにウィンドウを切り替えるのが面倒…

ワークスペースを使うと:

project-code（開発用フォルダ）
project-docs（Markdownで書いたドキュメント）
👉 1つのウィンドウで開けば、開発しながらドキュメントをすぐに更新できる！

📌 コードとドキュメントをセットで管理すれば、情報の整理がしやすくなる！

まとめ：ワークスペースが活躍する場面

フロントエンドとバックエンドを同時に開く → APIとフロントの連携がスムーズ
WordPressのテーマ＆プラグインを同時に編集 → テーマとプラグインの動作確認がしやすい
複数のクライアント案件を並行管理 → ウィンドウを切り替える手間が省ける
チーム開発で異なるリポジトリを同時に開く → Gitの管理がスムーズに
ドキュメントとコードを同時に管理 → Markdownファイルをすぐに編集できる

VS Codeのワークスペースの作り方

ワークスペースを活用するには、「新しいワークスペースを作成する」方法 を知っておかなければなりません。

当然と言えば当然笑

ここでは、ワークスペースの作成方法と複数プロジェクトの管理方法 を詳しく解説します！

1. ワークスペースを新規作成する方法

🔹 1つのフォルダをワークスペースとして開く

VS Codeを開く
「ファイル」→「フォルダーを開く」 を選択
開きたいプロジェクトのフォルダを選択して「開く」

👉 これで 1つのフォルダだけ を開くことができますが、これは通常の開き方です。
ワークスペースを活用するなら 複数のフォルダを追加する方法 を覚えましょう！

🔹 複数のフォルダをワークスペースに追加する

VS Codeで「ファイル」→「フォルダーをワークスペースに追加」を選択
追加したいプロジェクトのフォルダを選択し、「追加」ボタンを押す
「ファイル」→「ワークスペースとして保存」を選択し、任意の場所に保存
- my-workspace.code-workspace というファイルが作成される

📌 これで「ワークスペースの設定を保存」できるようになり、次回からこのワークスペースを開けば、同じフォルダ構成で作業を再開可能！

2. ワークスペースの開き方 & 保存方法

🔹 保存したワークスペースを開く方法

VS Codeを開く
「ファイル」→「ワークスペースを開く」 を選択
作成した .code-workspace ファイルを選択し、開く

👉 これで 保存した複数フォルダのプロジェクトが、前回と同じ状態で開く ことができます！

3. `.code-workspace` ファイルの活用

ワークスペースを保存すると、.code-workspace というファイルが生成されます。
これは ワークスペース内の設定を保存するファイル で、中身を編集することでカスタマイズも可能 です！

📌 .code-workspace のサンプル（基本構造）

{
  "folders": [
    {
      "path": "C:/Users/username/project1"
    },
    {
      "path": "C:/Users/username/project2"
    }
  ],
  "settings": {
    "editor.fontSize": 14,
    "files.autoSave": "afterDelay"
  }
}

✔ ワークスペースにフォルダを手動で追加・削除 できる
✔ エディタの設定をプロジェクトごとにカスタマイズ できる

ワークスペースごとのカスタマイズ設定

VS Codeのワークスペース機能を活用すれば、プロジェクトごとに異なる設定を適用することが可能 です💡
これにより、例えば 仕事用・個人用でエディタの設定を変えたり、開発環境ごとにカスタマイズしたり できます！

1. ワークスペースごとにエディタの設定を保存する

ワークスペースごとに設定を変更するには、ワークスペースの設定ファイル（.code-workspace）にカスタマイズ内容を記述 します。

🔹 設定手順

ワークスペースを開く（「ファイル」→「ワークスペースを開く」）
「Ctrl + ,」（Macは「Cmd + ,」）で設定画面を開く
「ワークスペースの設定」タブに切り替える
変更したい設定を入力し、保存

🔹 設定例：フォントサイズを変更する

{
  "folders": [
    {
      "path": "C:/Users/username/project1"
    }
  ],
  "settings": {
    "editor.fontSize": 16
  }
}

📌 この設定を適用すると、このワークスペース内だけフォントサイズが16pxに！
👉 他のワークスペースやプロジェクトには影響しないので、プロジェクトごとに細かく調整できる！

2. ワークスペースごとに拡張機能を管理する

VS Codeでは、ワークスペースごとに有効化・無効化する拡張機能を設定可能 です💡
例えば、Web制作のプロジェクトでは「Live Server」を有効にし、Pythonのプロジェクトでは「Python拡張機能」だけ有効にする…といった使い分けができます！

🔹 設定手順

「拡張機能」タブ（Ctrl + Shift + X）を開く
設定したい拡張機能の右側にある「歯車アイコン ⚙」をクリック
「ワークスペースで有効にする」または「ワークスペースで無効にする」を選択

✔ プロジェクトごとに必要な拡張機能だけを有効にできる！
✔ 余計なプラグインを減らすことで、VS Codeの動作を軽量化できる！

3. プロジェクトごとに異なるキーバインドやテーマを適用する

ワークスペースを使うと、プロジェクトごとにキーボードショートカットやテーマ（カラー設定）を変更 することも可能！

🔹 設定例：テーマをプロジェクトごとに変える

{
  "settings": {
    "workbench.colorTheme": "Dracula"
  }
}

👉 この設定を適用すると、このワークスペースでは「Dracula」テーマが適用される！

🔹 設定例：キーバインドを変更する

{
  "keybindings": [
    {
      "key": "ctrl+s",
      "command": "workbench.action.files.save"
    }
  ]
}

👉 この設定を適用すると、「Ctrl + S」で保存する動作を変更できる！

ワークスペースを便利に使うためのTIPS

VS Codeのワークスペースを活用すると、プロジェクト管理が楽になり、作業効率が大幅にアップ します！
ここでは、ワークスペースをさらに便利に使うためのテクニック を紹介します💡

1. ショートカットキーで素早くワークスペースを切り替える

複数のワークスペースを使い分ける場合、毎回「ファイル」→「ワークスペースを開く」から選ぶのは面倒…💡
そんなときは ショートカットキー を活用しましょう！

🔹 ショートカットキー一覧

操作	ショートカットキー
最近使ったワークスペースを開く	`Ctrl + R` （Macは `Cmd + R`）
新しいワークスペースを開く	`Ctrl + Shift + N` （Macは `Cmd + Shift + N`）
ワークスペースを閉じる	`Ctrl + Shift + W` （Macは `Cmd + Shift + W`）

📌 Ctrl + R（Macは Cmd + R）を使えば、最近開いたワークスペースをすぐに切り替え可能！

2. VS Codeの起動時に特定のワークスペースを開く

「いつも特定のワークスペースから作業を始める」という場合、VS Code起動時に自動でワークスペースを開く設定 をしておくと便利です💡

🔹 方法①：デスクトップショートカットを作成する（Windowsのみ）

VS Codeのショートカットをコピー
右クリック →「プロパティ」を開く
「リンク先」の最後に .code-workspace ファイルのパスを追加plaintextコピーする編集する"C:\Program Files\Microsoft VS Code\Code.exe" "C:\Users\username\my-workspace.code-workspace"
「OK」を押して適用

✔ このショートカットをダブルクリックすると、自動で指定したワークスペースが開く！

🔹 方法②：ターミナルからワークスペースを開く

VS Codeのコマンドラインを使って、ワークスペースを指定して起動することもできます。

code "C:\Users\username\my-workspace.code-workspace"

👉 このコマンドを実行すると、指定したワークスペースが直接開く！

3. `.gitignore` にワークスペース設定を追加するべきか？

ワークスペースの .code-workspace ファイルには、プロジェクトごとの設定が保存されています。
このファイルを Gitで共有するかどうか は、状況によって判断しましょう💡

✅ `.code-workspace` をGitに含めるべきケース

✔ チーム全員で同じ設定を使いたい（例：フォーマット設定を統一したい）
✔ 複数の開発環境で同じワークスペース設定を適用したい

❌ `.code-workspace` をGitに含めないほうがいいケース

✔ 個人の好みの設定が多い（例：フォントサイズやテーマ）
✔ 開発メンバーごとに違う拡張機能を使いたい

📌 チーム開発の場合は .gitignore に追加しておくのが無難！

*.code-workspace

4. ワークスペースのバックアップ方法

複数のプロジェクトを管理していると、ワークスペースの設定をバックアップしておきたい こともあります💡

🔹 ワークスペース設定をバックアップする方法

.code-workspace ファイルを クラウドストレージ（Google Drive / Dropbox）に保存
VS Codeの「設定同期」機能を有効化（Microsoftアカウントが必要）
GitHubに設定をプッシュ（チーム開発ならこの方法が便利！）

📌 VS Codeの「設定同期」機能を使うと、他のPCでもワークスペース設定を復元できる！

ワークスペースを便利に使うためのTIPS

1. ショートカットキーで素早くワークスペースを切り替える

複数のワークスペースを使い分ける場合、**毎回「ファイル」→「ワークスペースを開く」から選ぶのは面倒…**💡
そんなときは ショートカットキー を活用しましょう！

🔹 ショートカットキー一覧

操作	ショートカットキー
最近使ったワークスペースを開く	`Ctrl + R` （Macは `Cmd + R`）
新しいワークスペースを開く	`Ctrl + Shift + N` （Macは `Cmd + Shift + N`）
ワークスペースを閉じる	`Ctrl + Shift + W` （Macは `Cmd + Shift + W`）

📌 Ctrl + R（Macは Cmd + R）を使えば、最近開いたワークスペースをすぐに切り替え可能！

2. VS Codeの起動時に特定のワークスペースを開く

「いつも特定のワークスペースから作業を始める」という場合、VS Code起動時に自動でワークスペースを開く設定 をしておくと便利です💡

🔹 方法①：デスクトップショートカットを作成する（Windowsのみ）

VS Codeのショートカットをコピー
右クリック →「プロパティ」を開く
「リンク先」の最後に .code-workspace ファイルのパスを追加plaintextコピーする編集する"C:\Program Files\Microsoft VS Code\Code.exe" "C:\Users\username\my-workspace.code-workspace"
「OK」を押して適用

✔ このショートカットをダブルクリックすると、自動で指定したワークスペースが開く！

🔹 方法②：ターミナルからワークスペースを開く

VS Codeのコマンドラインを使って、ワークスペースを指定して起動することもできます。

shコピーする編集するcode "C:\Users\username\my-workspace.code-workspace"

👉 このコマンドを実行すると、指定したワークスペースが直接開く！

3. `.gitignore` にワークスペース設定を追加するべきか？

✅ `.code-workspace` をGitに含めるべきケース

✔ チーム全員で同じ設定を使いたい（例：フォーマット設定を統一したい）
✔ 複数の開発環境で同じワークスペース設定を適用したい

❌ `.code-workspace` をGitに含めないほうがいいケース

✔ 個人の好みの設定が多い（例：フォントサイズやテーマ）
✔ 開発メンバーごとに違う拡張機能を使いたい

📌 チーム開発の場合は .gitignore に追加しておくのが無難！

plaintextコピーする編集する*.code-workspace

4. ワークスペースのバックアップ方法

複数のプロジェクトを管理していると、ワークスペースの設定をバックアップしておきたい こともあります💡

🔹 ワークスペース設定をバックアップする方法

.code-workspace ファイルを クラウドストレージ（Google Drive / Dropbox）に保存
VS Codeの「設定同期」機能を有効化（Microsoftアカウントが必要）
GitHubに設定をプッシュ（チーム開発ならこの方法が便利！）

📌 VS Codeの「設定同期」機能を使うと、他のPCでもワークスペース設定を復元できる！

まとめ

この記事では、VS Codeのワークスペース機能を活用して、複数のプロジェクトを効率的に管理する方法 を解説しました💡

✔ この記事の振り返り

ワークスペースとは？
→ 複数のプロジェクトを1つのウィンドウで開き、個別の設定を適用できる機能！
ワークスペースの作成方法
→ 「フォルダを追加」→「ワークスペースとして保存」するだけでOK！
ワークスペースごとのカスタマイズ
→ プロジェクトごとにフォントサイズやテーマ、拡張機能を設定可能！
ワークスペースを便利に使うTIPS
→ ショートカットキーで素早く切り替え！起動時に特定のワークスペースを開く設定も可能！
ワークスペースの活用例
→ 「フロント＆バックエンドの同時管理」「WordPressのテーマ＆プラグイン開発」「複数案件の並行作業」などで特に便利！

🚀 結論：ワークスペースを使えば、作業効率が格段にUP！

✔ 複数のプロジェクトを一括管理 → ウィンドウを切り替える手間がなくなる
✔ プロジェクトごとに設定を適用 → 必要な拡張機能や設定を個別に管理
✔ 開発の流れがスムーズに！ → 作業の切り替えが簡単で、集中力を維持しやすい

「複数のプロジェクトを並行して管理している人」は、ぜひワークスペースを活用してみてください！

💡 さらにVS Codeを活用するなら？

VS Codeの拡張機能おすすめ12選！初心者でも作業効率が劇的にUPする方法

👉 もっと効率よく開発するなら、お問い合わせもどうぞ！
📩 コーディングの相談・依頼はこちら 💻✨

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

パピィ

愛知県を拠点に、AIを活用した業務改善支援、WEB制作、マーケティング戦略サポートを行っています。

営業、マーケティング、WEB開発など多分野で20年以上実務経験を積み、現場視点を持った提案と問題解決を強みとしています。

「誰でも気軽にAIを活用できる世界をつくる」をモットーに、中小企業や個人事業主向けに、成果につながる実践的なノウハウを提供。
ブログやYouTubeを通じて、わかりやすく実用的な情報発信にも力を入れています。

AI活用・業務効率化・マーケティング（集客）でお困りの際は、ぜひご相談ください。

VS Codeのワークスペースとは？複数プロジェクトを管理する便利な使い方を解説！

VS Codeのワークスペースとは？何ができるの？

🔹 ワークスペースとは？

🔹 フォルダを開くだけ vs. ワークスペースを使う場合の違い

🔹 どんな場面でワークスペースを使うべき？

「複数プロジェクトを1つのウィンドウで管理」する具体的な例

1. フロントエンド & バックエンドの開発を同時に行う場合

🛠 例：Webアプリの開発

2. WordPressのカスタマイズでテーマ＆プラグインを同時に編集

🛠 例：WordPressサイトの開発

3. クライアントごとに複数のWebサイトを管理

🛠 例：Web制作会社やフリーランスの案件管理

4. チーム開発で異なるリポジトリを同時に開く

🛠 例：Gitを使ったチーム開発

5. ドキュメント管理と開発を同時に行う

🛠 例：開発しながらドキュメントを整理

まとめ：ワークスペースが活躍する場面

VS Codeのワークスペースの作り方

1. ワークスペースを新規作成する方法

🔹 1つのフォルダをワークスペースとして開く

🔹 複数のフォルダをワークスペースに追加する

2. ワークスペースの開き方 & 保存方法

🔹 保存したワークスペースを開く方法

3. .code-workspace ファイルの活用

ワークスペースごとのカスタマイズ設定

1. ワークスペースごとにエディタの設定を保存する

🔹 設定手順

🔹 設定例：フォントサイズを変更する

2. ワークスペースごとに拡張機能を管理する

🔹 設定手順

3. プロジェクトごとに異なるキーバインドやテーマを適用する

🔹 設定例：テーマをプロジェクトごとに変える

🔹 設定例：キーバインドを変更する

ワークスペースを便利に使うためのTIPS

1. ショートカットキーで素早くワークスペースを切り替える

🔹 ショートカットキー一覧

2. VS Codeの起動時に特定のワークスペースを開く

🔹 方法①：デスクトップショートカットを作成する（Windowsのみ）

🔹 方法②：ターミナルからワークスペースを開く

3. .gitignore にワークスペース設定を追加するべきか？

✅ .code-workspace をGitに含めるべきケース

❌ .code-workspace をGitに含めないほうがいいケース

4. ワークスペースのバックアップ方法

🔹 ワークスペース設定をバックアップする方法

ワークスペースを便利に使うためのTIPS

1. ショートカットキーで素早くワークスペースを切り替える

🔹 ショートカットキー一覧

2. VS Codeの起動時に特定のワークスペースを開く

🔹 方法①：デスクトップショートカットを作成する（Windowsのみ）

🔹 方法②：ターミナルからワークスペースを開く

3. .gitignore にワークスペース設定を追加するべきか？

✅ .code-workspace をGitに含めるべきケース

❌ .code-workspace をGitに含めないほうがいいケース

4. ワークスペースのバックアップ方法

🔹 ワークスペース設定をバックアップする方法

まとめ

✔ この記事の振り返り

🚀 結論：ワークスペースを使えば、作業効率が格段にUP！

この記事を書いた人

関連記事

3. `.code-workspace` ファイルの活用

3. `.gitignore` にワークスペース設定を追加するべきか？

✅ `.code-workspace` をGitに含めるべきケース

❌ `.code-workspace` をGitに含めないほうがいいケース

3. `.gitignore` にワークスペース設定を追加するべきか？

✅ `.code-workspace` をGitに含めるべきケース

❌ `.code-workspace` をGitに含めないほうがいいケース