【脱・環境構築沼】VS Code Dev ContainersでPCを汚さずチーム共通の開発環境を10分で構築する方法

【脱・環境構築沼】VS Code Dev ContainersでPCを汚さずチーム共通の開発環境を10分で構築する方法

2026/08/25
it docker vscode devcontainers

「新しいプロジェクトに参画したら、環境構築のドキュメントが古くてエラーの連続……」

Webエンジニアにとって、開発環境の構築（環境構築沼）は最も生産性を下げる要因の一つです。Mac / Windows / Linux などローカルPCのOSの違い、Node.jsやPythonのバージョン干渉、インストールしたミドルウェアによるPC環境の汚染など、問題は絶えません。

今回は、VS Codeの公式拡張機能である Dev Containers (旧 Remote - Containers) を活用し、コンテナ内部を直接エディタの開発空間として使用する環境構築手法を解説します。

Dev Containers が開発スタイルを劇的に変える理由

従来のDocker開発では、「ローカルでソースコードを編集し、ターミナルから docker-compose exec でコマンドを実行する」というスタイルが一般的でした。しかし、この方法ではVS CodeのIntelliSense（補完）やデバッガがコンテナ内部のライブラリを直接認識できず、補完が効かないストレスがありました。

Dev Containers を導入すると、VS Code自体がコンテナ内部に接続されるため、「ローカルPCにはDockerとVS Codeしか入っていない状態」 であっても、完全に補完の効いた完璧な開発環境を手に入れることができます。

ローカル開発環境と Dev Containers の比較

graph TD
    subgraph "従来の環境 (ローカル依存)"
        A1["Host PC OS"] --> B1["Node v16 / Python 3.8 直接インストール"]
        B1 --> C1["VS Code (ローカルライブラリを参照)"]
        C1 --> D1["バージョン衝突・OS差分エラー発生"]
    end
    
    subgraph "Dev Containers 環境 (完全隔離)"
        A2["Host PC OS (Dockerのみ)"] --> B2["Docker Container (.devcontainer)"]
        B2 --> C2["指定 Node v20 / Python 3.11 完備"]
        C2 --> D2["VS Code Server がコンテナ内で直に動作"]
        D2 --> E2["100% 同じ環境を誰でも即座に再現"]
    end
end

.devcontainer 設定ファイルの作成ステップ

プロジェクトのルートディレクトリに .devcontainer/ ディレクトリを作成し、以下の2つの配置を行います。

  1. .devcontainer/devcontainer.json （設定ファイル）
  2. .devcontainer/Dockerfile （または docker-compose.yml）

1. devcontainer.json の記述例

Python 3.11 環境に、自動的にVS Code拡張機能（Black, Flake8等）をインストールさせる設定例です。

{
  "name": "Python 3.11 Development Environment",
  "build": {
    "dockerfile": "Dockerfile"
  },
  // VS Codeの設定をコンテナ内へ自動適用
  "customizations": {
    "vscode": {
      "settings": {
        "python.defaultInterpreterPath": "/usr/local/bin/python",
        "editor.formatOnSave": true,
        "python.formatting.provider": "none",
        "[python]": {
          "editor.defaultFormatter": "ms-python.black-formatter"
        }
      },
      // チームで統一したい推奨拡張機能を自動インストール
      "extensions": [
        "ms-python.python",
        "ms-python.black-formatter",
        "njpwerner.autodocstring",
        "eamodio.gitlens"
      ]
    }
  },
  // ポートフォワーディングの設定
  "forwardPorts": [8000],
  // コンテナ作成後に自動実行するコマンド
  "postCreateCommand": "pip install --upgrade pip && pip install -r requirements.txt",
  // リモートユーザーの指定
  "remoteUser": "vscode"
}

2. Dockerfile の記述例

Microsoftが提供する開発用ベースイメージ（devcontainers）を使用することで、非Rootユーザー設定やGitのセットアップがあらかじめ完了した状態でスタートできます。

FROM mcr.microsoft.com/devcontainers/python:1-3.11-bullseye

# 必要な追加パッケージのインストール
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends postgresql-client curl \
    && apt-get clean && rm -rf /var/lib/apt/lists/*

コンテナの起動と開発の開始

  1. VS Codeで拡張機能 「Dev Containers」 (ms-vscode-remote.remote-containers) をインストール。
  2. コマンドパレット (Ctrl + Shift + P / Cmd + Shift + P) を開き、Dev Containers: Reopen in Container を選択。
  3. 数分でコンテナのビルドと拡張機能の適用が完了し、画面左下のステータスバーが Dev Container: Python 3.11... と表示されれば完了です！

実体験：チームのオンボーディング時間が「半日」から「10分」へ

以前のプロジェクトでは、新メンバーが入社するたびに「Pythonのパスが通らない」「C++コンパイラが入っていない」といったトラブルで、先輩エンジニアが半日付きっきりでサポートしていました。

Dev Containers を全社リポジトリへ導入した結果、新しいメンバーは 「Git Clone して Reopen in Container を押すだけ」 で、即日コードを書いてPRを出せるようになりました。

PCを新調した際や、MacからWindowsへ移行した際にも、環境構築の手間は完全にゼロです。

まとめ：開発環境はコードとしてリポジトリで管理する時代

「個人のPC環境に依存するバグ」と格闘する時間は、エンジニアにとっても企業にとっても純粋な損失です。

Dev Containers を使えば、開発環境そのものを .devcontainer というコード（Infrastructure as Code）としてリポジトリで共有・バージョン管理できます。

まだ試したことがない方は、ぜひ手元のプロジェクトに .devcontainer を追加して、ストレスフリーな開発体験を味わってみてください！