Dev Containers入門 🐳

〜docker-composeユーザーにおすすめしたい開発体験の改善〜

この記事では、VS Codeと連携して開発体験を向上できる「Dev Containers」についてご紹介します。

特に、普段から docker-compose を利用している開発者の方にとっては、開発環境の構築・共有をより効率的に行える手段となるため、ぜひ参考にしてみてください！

🧩 Dev Containersとは？

Dev Containers は、VS Code と Docker を組み合わせて、開発環境をコードベースで管理・再現可能にする仕組みです。

VS Codeの拡張機能である Dev Containers を利用し、次のような構成で開発用コンテナを定義します。

.devcontainer/
├── devcontainer.json
└── Dockerfile

これにより、プロジェクトに参加するすべての開発者が、同一の開発環境（拡張機能なども含めて）を即座に再現することができます。

🤔 docker-composeとの違いは？

docker-compose は複数サービス（例：Webアプリ + DB + Redisなど）を定義して一括起動できる便利なツールです。
一方で、開発者個人のエディタ設定やターミナル環境、Lintや拡張機能の適用まではカバーできません。

Dev Containers を併用することで、開発環境の起動・作業環境の統一・VS Code の自動最適化まで一貫して管理できます。

項目	docker-compose	Dev Containers	評価の根拠
複数サービスの構成管理	◎	◯（compose併用時）	`docker-compose` は本来この用途に特化。Dev Containers 単体では1サービス前提のことが多く、複数構成には compose の併用が推奨される。
開発者環境の統一（エディタ・Lint等）	✕	◎	`devcontainer.json` に VS Code 拡張機能や設定を記述できるため、全メンバーで統一された開発体験を再現可能。
VS Code との連携	△（手動設定）	◎（自動適用）	compose 使用時は `docker exec` 等で手動接続が必要。Dev Containers は VS Code が自動で開発コンテナに attach し、設定も自動反映される。
`.vscode` 連携	✕	◎	Dev Containers 環境下では `.vscode/settings.json` や `.vscode/extensions.json` を自然に組み合わせて使用できる。compose 単体では仕組みとして連携なし。
GitHub Codespaces 対応	✕	◎	Codespaces は Dev Containers の設定ファイルに完全準拠しており、そのままクラウド開発が可能。compose 単体では未対応。

🧠 Dev Containersの活用シーン（docker-composeユーザー向け）

プロジェクト参加時の環境構築をスムーズにしたい
Node.jsやPythonなどのバージョン差異によるトラブルを防ぎたい
毎回 docker exec で中に入る手間を減らしたい
VS Code の設定（フォーマッター・拡張機能）をチームで統一したい

このようなニーズを持つチームには、Dev Containersの導入効果が大きいと考えられます。

🛠️ 利用手順

① 拡張機能のインストール

VS Code に「Dev Containers」拡張をインストールします。

② `.devcontainer` フォルダを作成

mkdir .devcontainer

③ 設定ファイルの作成

devcontainer.json

{
  "name": "My App Dev Container",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "settings": {
    "terminal.integrated.defaultProfile.linux": "bash"
  },
  "extensions": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ],
  "postCreateCommand": "npm install"
}

Dockerfile

FROM node:18
WORKDIR /workspace

.devcontainer 単体でも使用可能ですが、既存の docker-compose.yml と組み合わせることで、より柔軟かつ実用的な構成になります。

💡 docker-composeとの組み合わせ例

以下は、Node.jsアプリとMySQLを docker-compose で起動し、Dev Containers を通して VS Code から開発できる構成例です。

# docker-compose.yml
services:
  app:
    build:
      context: .
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - .:/workspace
    ports:
      - "3000:3000"
    depends_on:
      - db
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: rootpass

VS Code で「Dev Container で再オープン」すれば、開発コンテナが立ち上がり、DB などの他サービスも同時に起動されます。

🔚 まとめ：開発体験の標準化に有効な選択肢

Dev Containers を導入することで…

環境構築コストを削減し、さらにオンボーディングを高速化
エディタ側の設定の差異によるコーディングルール適用漏れの防止

といったメリットが得られます。

既に docker-compose を利用している開発者にとっても、Dev Containers は補完的に活用することで、より快適で再現性の高い開発環境を構築することができます。