Docker開発、編集はどこでする？VSCodeの「ローカル編集」と「Dev Containers」を徹底比較
はじめに：Docker開発の「2つのVSCode画面」問題
Dockerとdocker-compose.ymlを学び、volumesを設定し、docker-compose upでコンテナが起動した！さあ開発するぞ、と思った矢先、こんな混乱に陥りませんか？
- 画面A: いつものVSCode。ターミナルはMacのzsh（%）
- 画面B: VSCodeのReopen in Containerで開いた「新画面」。ターミナルはコンテナのsh（/app#）
「あれ、どっちで編集すればいいの？ claude（AI拡張機能）やgitはどこにインストールすれば？ volumesで同期してるならReopen in Containerって意味なくない？」
筆者もまさにこの点で混乱しましたが、この2つのスタイルの違いを理解することで、Docker開発の全体像がクリアになりました。
この記事では、この2つの開発スタイル（流派）の違いを解説します。
結論：2つの開発スタイル（流派）がある
docker-compose upでコンテナを起動した後、VSCodeで開発するには、大きく分けて2つの流派があります。
- スタイルA：ホストで編集・管理し、コンテナで実行する（最もシンプル）
- スタイルB：すべてをコンテナ内で完結させる（Dev Containers）
volumesによる同期は、どちらのスタイルでも（ほぼ）使いますが、その「目的」が少し異なります。
スタイルA：ホストで編集、コンテナで実行
これは、設定が最もシンプルで直感的なスタイルです。
やること:
- **画面A（ホスト/Mac側）**のVSCodeでコードを編集します。
- docker-compose upは、Macのターミナル（または画面Aのzshターミナル）で実行します。
- volumes（./:/app）が、Mac側での編集をコンテナに自動で同期してくれます。
役割分担
このスタイルでは、「編集・管理」と「実行」を明確に分離します。
ホストOS (あなたのMac)
- 役割: 編集とバージョン管理
- ツール: VSCode, claude拡張機能, gitコマンド
あなたはMacにインストールされたgitやclaudeを使い、使い慣れたVSCodeでコードを編集・コミットします。
Dockerコンテナ (Linux)
- 役割: 実行
- ツール: npm run dev（Node.jsサーバ）
コンテナは、DockerfileのRUN npm ciで作られたコンテナ専用のnode_modulesを使い、コードを実行することに専念します。
メリットとデメリット
メリット:
- 設定がdocker-compose.ymlのvolumesだけで済むため、とにかく楽。
- 使い慣れたMacのツール（git, AI拡張機能）をそのまま使える。
デメリット（落とし穴）:
-
「環境のズレ」が起きる可能性がある。
- 例：VSCode（Mac側）が参照するnodeのバージョンと、コンテナが実行するnodeのバージョンが異なると、Mac上ではエラーが出ないのにコンテナで実行するとエラーになる、といった問題が起こり得る
スタイルB：すべてをコンテナで完結（Dev Containers）
これは、スタイルAの「環境のズレ」というデメリットを完全に解消するための、より高度で厳密なスタイルです。
やること:
- VSCodeのReopen in Containerで**画面B（コンテナ側）**を開きます。
- 今後は、画面A（Mac側）のVSCodeは使わず、この画面Bだけで開発・実行・管理の全てを行います。
魔法の鍵：.devcontainer/devcontainer.json
このスタイルでは、volumesに加えてdevcontainer.jsonという「開発環境の構築マニュアル」が中心的な役割を果たします。
あなたが「画面B（コンテナ側）」でgitやclaudeを使いたい場合、devcontainer.jsonに**「コンテナを準備するとき、ついでにgitとclaude拡張機能もインストールしておいてね」**と書き込んでおく必要があります。
Discussion