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 は補完的に活用することで、より快適で再現性の高い開発環境を構築することができます。