DevContainerの作成方法：VS Codeで統一された開発環境を構築する

「自分の環境では動くのにチームメンバーの環境では動かない」という問題に悩まされたことはないでしょうか。DevContainerを使えば、Dockerコンテナ上に開発環境を定義し、VS Codeで開くだけで誰でも同じ環境を再現できます。この記事では、DevContainerの基本から実際の作成手順までを解説します。

DevContainerとは

DevContainerは、VS Codeの「Dev Containers」拡張機能を使って、Dockerコンテナ内で開発を行う仕組みです。必要な言語ランタイム、ライブラリ、CLIツールなどをコンテナ内にあらかじめ用意しておくことで、ホストOSの環境に依存せず、誰でも同じ開発環境をすぐに使えるようになります。

主なメリットは次の通りです。

ホストPCを汚さずに、プロジェクトごとに独立した環境を用意できる
devcontainer.json をリポジトリに含めておけば、環境構築の手順書が不要になる
チームメンバー間で言語バージョンやツールのバージョン差異による不具合を防げる

事前準備

DevContainerを使うには、以下のツールが必要です。

Docker Desktop（WSL2バックエンド推奨）
Visual Studio Code
VS Code拡張機能「Dev Containers」（発行元：Microsoft）

拡張機能はVS Codeの拡張機能タブから「Dev Containers」で検索してインストールしてください。

手順1：`.devcontainer` フォルダを作成する

プロジェクトのルートに .devcontainer フォルダを作り、その中に devcontainer.json を作成します。

プロジェクトルート/
└── .devcontainer/
    └── devcontainer.json

手順2：`devcontainer.json` を記述する

既存のベースイメージを使う最もシンプルな例です（Node.jsの場合）。

{
  "name": "Node.js Dev Container",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "postCreateCommand": "npm install",
  "forwardPorts": [3000]
}

主な項目の意味は以下の通りです。

image：ベースとなるDockerイメージ。Microsoftが公開しているdevcontainers/imagesには主要言語のイメージが用意されています。
customizations.vscode.extensions：コンテナ内で自動的にインストールされるVS Code拡張機能。
postCreateCommand：コンテナ作成後に自動実行するコマンド（依存パッケージのインストールなど）。
forwardPorts：コンテナ内のポートをホストに転送する設定。

手順3：独自のDockerfileを使う場合

既存イメージではなく、独自にカスタマイズしたい場合はDockerfileを併用します。

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

FROM mcr.microsoft.com/devcontainers/python:3.12

RUN apt-get update && apt-get install -y \
    libpq-dev \
    && rm -rf /var/lib/apt/lists/*

RUN pip install --no-cache-dir poetry

devcontainer.json側は image の代わりに build を指定します。

{
  "name": "Python Dev Container",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "postCreateCommand": "poetry install"
}

複数のサービス（例：アプリとデータベース）を組み合わせたい場合は、dockerComposeFile を使ってdocker-compose構成を読み込むこともできます。

手順4：コンテナを開く

devcontainer.json を作成したら、VS Codeでプロジェクトフォルダを開きます。右下に表示される通知から「Reopen in Container」を選択するか、コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）で以下を実行します。

Dev Containers: Reopen in Container

初回はイメージのビルドが行われるため数分かかりますが、以降はキャッシュが効くため起動が速くなります。

よくあるカスタマイズ

環境変数の設定：containerEnv または remoteEnv で指定できます。
ボリュームのマウント：mounts を使うと、ホスト側のディレクトリやDockerボリュームを追加でマウントできます。
root以外のユーザーで実行：remoteUser を指定すると、非rootユーザーでコンテナ内の作業を行えます。
機能の追加：features を使うと、GitやDocker-in-Docker、AWS CLIなどの追加ツールを宣言的にインストールできます。

{
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/git:1": {}
  }
}

まとめ

DevContainerは、devcontainer.json 一つで開発環境をコード化し、チーム全体で共有できる仕組みです。まずは公式イメージを使ったシンプルな構成から始め、必要に応じてDockerfileやdocker-compose、featuresでカスタマイズしていくとよいでしょう。一度整えておけば、新しいメンバーの環境構築は「Reopen in Container」を選ぶだけで完了します。