【Day 09】VS Code + Docker拡張機能＋ WSL2ターミナル連携

▲ Day 09: VS Code + Docker + WSL2連携 / 軽量エディタとLinux統合環境で爆速コンテナ開発

🐳

皆さん、こんにちは！ Docker/コンテナ実践講座の専任講師です。
前回のDay 08では、Visual Studio 2022の強力なコンテナツールと「F5キー一発デバッグ」の全貌をマスターしました。
大規模なエンタープライズソリューションではVisual Studioが絶対的な強さを誇りますが、現代のWeb API開発やマイクロサービス、設定ファイルの微修正などでは、「世界中で最も使われている軽量エディタ VS Code」の軽快さが圧倒的な威力を発揮します。
本日は、「VS Code ＋公式Docker拡張機能＋ WSL2ターミナル連携」を組み合わせ、重厚なGUIツールから完全に脱却して1画面で爆速開発を実現する極意を徹底解説します！

① 導入・本日の達成目標

「Dockerの操作はコマンドラインが基本」と頭では分かっていても、実行中のコンテナ一覧やログの流し読み、コンテナ内部のファイル確認などをすべて黒い画面（CLI）だけで行うのは、慣れるまで大きな負担です。
かといって、巨大な専用GUIツールを別に立ち上げると、エディタとの画面切り替えに時間を取られ、PCのメモリも圧迫されます。

そこで登場するのが「VS Code（Visual Studio Code）」です。VS Codeに公式のDocker拡張機能とWSL拡張機能を組み合わせれば、エディタの画面内に「GUIの直感性」と「Linuxの爆速コマンド環境」が美しく同居します。

本日の講義を終える頃には、以下の3つの目標を完全にクリアできるようになります。

重厚GUIツールとVS Code＋WSL2の決定的違いを理解し、画面切り替えストレスをゼロにするワークスペースを設計できる。
VS Code Docker拡張機能の3大機能（一覧・ログ・シェル接続）を使いこなし、マウス操作わずか1クリックでコンテナを自在に検査・操作できる。
WSL2ターミナル連携とC# Dev Kitを組み合わせ、Windows上でネイティブLinux同等の超高速な.NETコンテナ開発環境を構築できる。

② 重厚GUIツール vs VS Code＋WSL2の対比

仮想マシン時代や初期のコンテナ開発では、「コードを書くエディタ」「VMを操作する管理画面」「ターミナル」の3つがバラバラに分かれており、開発者の集中力を削いでいました。

▲ 【図解①】旧来の重いGUI管理とエディタを行き来する苦痛を解消し、VS Code 1画面で完結する現代の対比

VS Codeを採用することで、これらの分断された作業空間がたった1つのウィンドウに見事に統合されます。

📊 旧来の管理手法とVS Code＋WSL2連携の比較表

比較項目	従来の重厚GUI / 個別ツール	現代のVS Code ＋ WSL2連携
画面構成	エディタ、GUIツール、端末が別ウィンドウで散乱	エディタ1画面に全機能が統合（画面切り替えゼロ）
起動速度・メモリ	ギガバイト級のメモリ消費、起動に数十秒	瞬時に起動、メモリ消費が極めて軽量
ターミナル環境	PowerShellやコマンドプロンプト（Linux構文非互換）	本物のLinux bash（WSL2）が下部に直結
コンテナ操作性	長大なCLIコマンドを手動タイプするか重いUI操作	ツリービューから1クリックでログ・シェル・停止・削除

③ VS Code Docker拡張機能の3大機能

Microsoft公式の「Docker」拡張機能（拡張機能ID: ms-azuretools.vscode-docker）をインストールすると、VS Codeのアクティビティバー（左端）にクジラのアイコンが追加されます。

▲ 【図解②】一覧表示・ログ追跡・シェル接続をGUIクリックだけで自在に操作する3大機能

この拡張機能が提供する機能のうち、現場で毎日必ず使う「3大必須テクニック」がこちらです。

[1] 一覧表示（Containers / Images / Volumes / Networks）

Dockerアクティビティバーを開くと、現在起動中のコンテナ（緑色アイコン）、停止中のコンテナ、ローカルに保持されているイメージ、ボリューム、ネットワークが整理されたツリー状に一覧表示されます。
「どのコンテナが何番ポートを公開しているか」が一目で把握でき、右クリックからコンテナの「Start」「Stop」「Restart」が即座に行えます。

[2] リアルタイムログ追跡（View Logs）

コンテナ一覧から対象コンテナを右クリックして「View Logs」を選択すると、VS Codeの統合ターミナルが開き、コンテナ内部の標準出力がリアルタイムでストリーミング表示されます。
ASP.NET CoreのWeb APIが受け取ったHTTPリクエストやエラーログが即座に流れるため、CLIで docker logs -f [ID] を打つ手間すら不要になります。

[3] 1クリックでシェル起動・内部侵入（Attach Shell）

「コンテナの中に設定ファイルが正しくコピーされたか確認したい」「コンテナ内部から外部DBに接続テストしたい」という場面では、コンテナを右クリックして「Attach Shell」を選択します。
VS Codeが自動的にコンテナ内部の /bin/sh または /bin/bash を判別して接続し、エディタ内で直接Linuxコマンド（ls -la、cat appsettings.json 等）を実行できるようになります。

④ WSL2ターミナル連携による高速開発フロー

Windows開発者にとって最大の壁だった「WindowsとLinuxのファイルシステムの差異・遅延」を完璧に解決するのが、WSL2（Windows Subsystem for Linux 2）ターミナル連携です。

▲ 【図解③】Windowsエディタの使いやすさとLinuxの爆速ファイルI/O・ネイティブDockerを両立する仕組み

VS Codeの統合ターミナルは、デフォルトでWSL2のUbuntuシェル（wsl.exe）を呼び出すことができます（ショートカット: Ctrl + `）。

⚡ 【超重要】ファイルI/O速度を10倍にする「WSL2ネイティブ配置」

💡 パフォーマンス最大化の黄金ルール

Windowsの C:\Users\...（WSLから見ると /mnt/c/...）にソースコードを置くと、ファイルアクセス時に9Pプロトコルを通過するため、dotnet build や docker build が著しく低速化します。
プロジェクトは必ず WSL2のLinuxネイティブ領域（例: ~/projects/my-app） に配置してください！
WSL2のターミナルから code . と打ち込めば、Windows側のVS Codeがリモートクライアントとして立ち上がり、超爆速なLinuxファイルI/Oの恩恵を100%享受できます。

⑤ C# Dev Kit ＋ Docker拡張機能の強力な共存

「VS CodeはC#開発に向いていない」というのは過去の話です。現在ではMicrosoft公式の「C# Dev Kit」拡張機能によって、Visual Studio並みの快適なコーディング環境が手に入ります。

▲ 【図解④】Microsoft公式 C# Dev Kit と Docker拡張機能を融合させた次世代C#開発ワークスペース

[1] C# Dev Kitが提供するエンタープライズ機能

ソリューションエクスプローラー: Visual Studioでおなじみの .sln ファイル構造をVS Codeのサイドバーにツリー表示。
高度なIntelliSense & Roslyn: 正確なコード補完、リファクタリング、定義へのジャンプ。
テストエクスプローラー: xUnitやNUnitのテストコードを自動検出し、エディタ上からワンクリックで個別実行。

[2] Docker拡張機能とのシームレスな協調

C# Dev Kitでコードを編集しながら、Docker拡張機能を使って同一画面内で以下のアクションが直感的に行えます。

Dockerfile を開くと、文法チェックとシンタックスハイライト、ベースイメージの入力支援が自動で作動。
Dockerfile を右クリックして「Build Image」を選択すれば、ターミナルにビルドコマンドが自動展開されて実行。
生成されたイメージを右クリックして「Run」または「Run Interactive」を選ぶだけで、ポート割り当て付きで即座にコンテナ起動。

⑥ チーム開発のためのVS Code設定とGit管理

チーム全員が同じ快適な環境で開発できるよう、プロジェクト直下の .vscode/ ディレクトリに設定ファイルを配置し、Gitで共有しましょう。

[1] 推奨拡張機能の共有（.vscode/extensions.json）

{
  "recommendations": [
    "ms-azuretools.vscode-docker",
    "ms-vscode-remote.remote-wsl",
    "ms-dotnettools.csdevkit",
    "eamodio.gitlens"
  ]
}

このファイルをリポジトリにコミットしておくと、新しいチームメンバーがVS Codeでリポジトリを開いた瞬間に「推奨拡張機能をインストールしますか？」と通知され、環境構築の属人化を防げます。

[2] タスク自動化（.vscode/tasks.json）

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "docker-build",
      "label": "docker-build: debug",
      "platform": "dotnet",
      "dockerBuild": {
        "tag": "mywebapi:dev",
        "target": "base",
        "dockerfile": "${workspaceFolder}/Dockerfile",
        "context": "${workspaceFolder}"
      }
    },
    {
      "type": "docker-run",
      "label": "docker-run: debug",
      "dependsOn": ["docker-build: debug"],
      "dockerRun": {
        "image": "mywebapi:dev",
        "ports": [{ "hostPort": 5000, "containerPort": 8080 }]
      }
    }
  ]
}

⑦ C# / .NET 現場での実践アプローチ

WSL2ターミナル上でC# Web APIプロジェクトを作成し、VS Codeでコンテナ化する一連の最速コマンドフローを確認しましょう。

[A] WSL2ターミナルからのプロジェクト作成と起動

# 1. WSL2ネイティブ領域に移動してディレクトリ作成
cd ~
mkdir -p projects/DockerDemo && cd projects/DockerDemo

# 2. .NET 8.0 Web API プロジェクトを作成
dotnet new webapi -n OrderApi --no-openapi false

# 3. VS CodeをWSLリモートモードで起動
cd OrderApi
code .

[B] 4大AIエージェントへの指示プロンプト例

🤖 Antigravity / Claude Code への指示プロンプト:

「VS Code上でWSL2（Ubuntu）をバックエンドとして開発しているASP.NET Core Web APIプロジェクトがあります。VS CodeのDocker拡張機能およびC# Dev Kitと完全に連携できるように、マルチステージDockerfile、適切な.dockerignore、および.vscode/tasks.json（docker-build / docker-run構成）を作成してください。」

⚠️ 30年選手がハマりやすい現場の落とし穴

「拡張機能をWindows側にだけインストールして、WSL環境で機能しない罠」
VS CodeをWSL2リモートモード（左下が WSL: Ubuntu と表示されている状態）で使っている場合、拡張機能には「ローカル（UI）側」で動くものと「リモート（WSL/コンテナ）側」で動くものがあります。
C# Dev KitやDocker拡張機能は、「WSLにインストール」ボタンをクリックしてWSL2側に有効化しないと、IntelliSenseやDockerデーモン通信が正しく作動しません。
拡張機能パネルで「WSL: Ubuntu で有効」となっているかを必ず確認しましょう！

📌 本日のまとめ＆明日へのステップ

VS Code ＋ WSL2連携により、重厚なGUIツールや画面切り替えのストレスを排除し、エディタ1画面でコンテナ開発が完結する。
VS Code Docker拡張機能の3大機能（一覧表示・View Logs・Attach Shell）を使えば、CLIコマンドを覚え切る前でも直感的にコンテナを操れる。
ソースコードは WSL2のネイティブファイルシステム領域 に配置して code . で開くことで、ファイルI/O速度が劇的に向上する。
C# Dev Kit と組み合わせることで、VS CodeでもVisual Studioに劣らない本格的な.NETコンテナ開発環境が手に入る。

次回【Day 10】予告:
『Docker CLI基本コマンド①（run / ps / stop / rm / logs）』〜実戦で毎日使う基本操作の完全習得〜

仮想空間の日常

このブログを検索