DevContainer使い方完全ガイド｜初心者でも15分で開発環境を構築する方法

DevContainerとは？開発環境の統一を実現する仕組み

「私の環境では動くのに、他の人のPCでは動かない…」「新メンバーの環境構築に丸一日かかってしまう…」

こうした開発現場の悩みを、DevContainerは根本から解決します。

DevContainerとは、Visual Studio Code（VSCode）とDockerを組み合わせてコンテナ内で開発を行う環境のこと。開発に必要なツールやライブラリ、設定をすべてコンテナに閉じ込めることで、チーム全員が同じ環境で開発できます。

従来は各自のPCに直接ツールをインストールしていましたが、DevContainerでは設定ファイル一つで環境を共有できます。新メンバーがジョインしても、わずか数分で開発をスタートできる環境が手に入るのです。

DevContainerが解決する3つの課題

1. 環境差異による動作不良の解消

開発チームで最も頻繁に起こるトラブルが、環境の違いによる動作不良です。DevContainerでは、開発環境そのものをコード化して共有するため、全員が同じDockerイメージ、同じ設定で開発でき、環境差異による問題が発生しません。

2. オンボーディング時間の大幅短縮

従来の環境構築では、手順書を見ながら一つずつツールをインストールし、半日から1日かかることも珍しくありませんでした。DevContainerなら、リポジトリをクローンしてVSCodeで開くだけ。必要なツールは自動でインストールされ、数分で開発を始められます。

3. 複数プロジェクトの環境切り替えを簡単に

プロジェクトごとに異なるバージョンのツールが必要な場合でも、DevContainerではプロジェクトごとに独立したコンテナを使うため、環境変数の切り替えや仮想環境の使い分けが不要。複数のプロジェクトを並行して進める場合でも、混乱なく作業できます。

DevContainerの仕組みと動作フロー

DevContainerは3つの要素で構成されています。

Docker：開発環境を動かす「箱」の役割
VSCode：実際にコードを書くエディタ
Dev Containers拡張機能：VSCodeとDockerを繋ぐ橋渡し

動作の流れ：

プロジェクトフォルダにdevcontainer.jsonを配置
VSCodeでフォルダを開く
Dev Containers拡張機能が設定ファイルを読み込み、Dockerコンテナを自動起動
VSCodeがコンテナ内に接続し、開発開始

この仕組みにより、ローカル環境を汚さず、プロジェクトごとに最適化された環境で開発できます。

15分で始める環境構築手順

DevContainerを使い始めるために必要なツールは、すべて無料で利用できます（Docker Desktopは企業規模によって有料の場合があります）。

必要なツールのインストール

1. Docker Desktopのインストール

Windowsの場合：
- Docker公式サイトから「Download for Windows」をクリック
- インストーラーを実行し、「Use WSL 2 instead of Hyper-V」にチェック
- インストール完了後、PCを再起動

Macの場合：
- チップ（Intel / Apple Silicon）を確認
- 公式サイトからチップに合わせたバージョンをダウンロード
- DMGファイルを開き、Docker.appをApplicationsフォルダにドラッグ

2. VSCodeとDev Containers拡張機能の導入

VSCode公式サイトからインストーラーをダウンロードして実行
VSCodeを起動し、拡張機能から「Dev Containers」（Microsoft製）を検索してインストール
左下に緑色の「><」アイコンが表示されれば準備完了

3. 動作確認

ターミナルで以下のコマンドを実行します。

docker --version
docker run hello-world

「Hello from Docker!」と表示されれば、Dockerは正常に動作しています。

サンプルプロジェクトで体験

まずは公式サンプルで動作を体験してみましょう。

VSCodeの左下「><」アイコンをクリック
「Try a Dev Container Sample...」を選択
「Node.js」を選択
コンテナの起動を待つ（初回は数分かかります）
ターミナルでnode --versionを実行して確認

コンテナ内のNode.jsが動作すれば成功です。このNode.jsはコンテナ内にインストールされたもので、PC本体には影響しません。

既存プロジェクトへの適用

自分のプロジェクトにDevContainerを追加する手順：

VSCodeで既存プロジェクトを開く
左下「><」→「Add Dev Container Configuration Files...」を選択
プロジェクトに応じたテンプレートを選択（Node.js、Python、PHPなど）
オプション（バージョン、追加ツール）を選択
「Reopen in Container」をクリック

プロジェクトのルートに.devcontainer/devcontainer.jsonが作成され、コンテナが起動します。

devcontainer.jsonの設定を理解する

devcontainer.jsonは、開発環境の「設計図」です。この設定ファイルを理解すれば、チームに最適な環境を構築できます。

基本構造と主要項目

{
  "name": "プロジェクト名",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {}
  },
  "customizations": {
    "vscode": {
      "settings": {
        "editor.formatOnSave": true
      },
      "extensions": [
        "dbaeumer.vscode-eslint"
      ]
    }
  },
  "forwardPorts": [3000],
  "postCreateCommand": "npm install"
}

主要項目の役割：

image：ベースとなるDockerイメージ
features：追加でインストールする機能（Git、GitHub CLIなど）
customizations：VSCodeの設定や拡張機能
forwardPorts：ローカルに転送するポート番号
postCreateCommand：コンテナ作成後に実行するコマンド

実践的な設定例

Node.js + TypeScript環境

{
  "name": "Node.js TypeScript Project",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },
  "customizations": {
    "vscode": {
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "forwardPorts": [3000],
  "postCreateCommand": "npm install"
}

Python + Flask環境

{
  "name": "Python Flask Project",
  "image": "mcr.microsoft.com/devcontainers/python:3.11",
  "customizations": {
    "vscode": {
      "settings": {
        "python.linting.enabled": true,
        "python.formatting.provider": "black"
      },
      "extensions": [
        "ms-python.python",
        "ms-python.black-formatter"
      ]
    }
  },
  "forwardPorts": [5000],
  "postCreateCommand": "pip install -r requirements.txt"
}

拡張機能とツールの自動インストール

チーム全員に必要な拡張機能を配布するには、customizations.vscode.extensionsに拡張機能IDを指定します。

拡張機能IDの調べ方：
1. VSCodeの拡張機能ページを開く
2. 歯車アイコン → 「拡張機能IDのコピー」
3. devcontainer.jsonに追加

これにより、コーディング規約を設定レベルで統一でき、チーム全体の開発効率が向上します。

DevContainerの日常的な使い方

コンテナの基本操作

起動：
- プロジェクトフォルダを開き、左下「><」→「Reopen in Container」

停止：
- 左下「Dev Container: xxx」→「Close Remote Connection」

再構築：
- 設定ファイル変更後は「Rebuild Container」を実行
- キャッシュを含めてクリーンに再構築する場合は「Rebuild Container Without Cache」

チームメンバーへの共有方法

DevContainerの設定をチームで共有するには：

.devcontainer/devcontainer.jsonをGitリポジトリにコミット
チームメンバーがリポジトリをクローン
VSCodeで開くと自動的に「Reopen in Container」の通知が表示される
クリックするだけで同じ環境が構築される

設定ファイル自体が環境の定義となるため、詳細な手順書は不要です。

よくあるトラブルと対処法

コンテナが起動しない場合

「WSL2 installation is incomplete」（Windows）
- PowerShellを管理者権限で開き、wsl --installを実行
- PCを再起動

「Cannot connect to the Docker daemon」
- Docker Desktopが起動していることを確認
- 緑色のステータスになるまで待つ

Docker Desktopが起動しない
- Windows：BIOSで仮想化（VT-x/AMD-V）を有効化
- Mac：セキュリティ設定でフルディスクアクセスを許可

動作が重い・遅い場合

Docker Desktopのリソース設定を見直す（メモリ、CPU）
不要なコンテナ・イメージを削除する
Windowsの場合、WSL2のメモリ制限を調整

イメージやコンテナのクリーンアップ

不要なリソースを削除してディスク容量を確保：

# 停止中のコンテナを削除
docker container prune

# 未使用のイメージを削除
docker image prune

# すべての未使用リソースを削除
docker system prune -a

DevContainerで環境の属人化を防ぐ運用のコツ

チーム全体で環境を統一するメリット

DevContainerを導入すると、以下のメリットが得られます。

トラブル対応の効率化：再現性が高いため、問題の切り分けが容易
オンボーディング時間の短縮：新メンバーが即日で開発に参加可能
ドキュメント不要：設定ファイルが環境の定義となり、ドキュメントと実際の環境がズレない

運用ルールの整備

DevContainerを効果的に運用するために：

設定ファイルの変更はチームで共有：変更時はPRでレビュー
定期的なイメージ更新：セキュリティパッチを適用
プロジェクトごとに最適化：不要なツールは含めず、必要最小限の構成に

Docker Composeとの使い分け

DevContainer：開発環境の統一に特化
Docker Compose：複数コンテナ（DB、Redis等）のオーケストレーション

複雑な環境では、DevContainerとDocker Composeを組み合わせることも可能です。

まとめ：DevContainerで開発環境の悩みを解決

DevContainerは、「私の環境では動く」問題や環境構築の手間を根本から解決します。設定ファイル一つで環境を共有でき、新メンバーも数分で開発を始められます。

Harmonic Societyでは、複数のクライアント案件を並行して進める際、DevContainerを活用することで開発効率を大幅に向上させています。「ちょうどいい」デジタル化を推進する私たちにとって、環境構築の手間を最小化することは重要な要素です。

この記事で紹介した手順に従えば、15分でDevContainerを導入できます。まずはサンプルプロジェクトで体験し、自分のプロジェクトに適用してみてください。開発環境の統一が、チーム全体の生産性向上につながります。