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-workspace4. ワークスペースのバックアップ方法
複数のプロジェクトを管理していると、ワークスペースの設定をバックアップしておきたい こともあります💡
🔹 ワークスペース設定をバックアップする方法
.code-workspaceファイルを クラウドストレージ（Google Drive / Dropbox）に保存- VS Codeの「設定同期」機能を有効化（Microsoftアカウントが必要）
- GitHubに設定をプッシュ（チーム開発ならこの方法が便利！）
📌 VS Codeの「設定同期」機能を使うと、他のPCでもワークスペース設定を復元できる！
ワークスペースを便利に使うための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のコマンドラインを使って、ワークスペースを指定して起動することもできます。
shコピーする編集するcode "C:\Users\username\my-workspace.code-workspace"
👉 このコマンドを実行すると、指定したワークスペースが直接開く！
3. .gitignore にワークスペース設定を追加するべきか？
ワークスペースの .code-workspace ファイルには、プロジェクトごとの設定が保存されています。
このファイルを Gitで共有するかどうか は、状況によって判断しましょう💡
✅ .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を活用するなら？
👉 もっと効率よく開発するなら、お問い合わせもどうぞ！
📩 コーディングの相談・依頼はこちら 💻✨
