DockerとVS Code Dev Containersで誰でも同じ開発環境を3分で構築する方法

0. はじめに

「自分のPCでは動いたのに、他の人の環境だと動かない...」

開発者なら一度は経験したことがあるこの問題。原因はOSの違い、言語のバージョン、インストールされているライブラリの差異など様々です。

この記事では、そんな開発環境にまつわる悩みを Docker と VS Code Dev Containers を使って解決する方法を紹介します。この記事を読めば、誰でも・いつでも・どこでも、わずか3分で全く同じクリーンな開発環境を手に入れられるようになります。

1. 対象読者

• GitとVS Codeの基本的な操作ができる方
• Dockerは名前を聞いたことがある、または少し触ったことがある方
• 開発環境の構築で消耗した経験のある全ての方

2. 必要なもの（事前準備）

以下の3つを公式サイトからインストールしておいてください。既にインストール済みの方は飛ばしてOKです。

1. Docker Desktop
   • DockerをPC上で簡単に動かすための公式アプリです。
2. Visual Studio Code
   • もはや説明不要のテキストエディタですね。
3. Dev Containers 拡張機能
   • VS Codeの拡張機能マーケットプレイスで「Dev Containers」と検索してインストールします。

3. "3分" 構築手順

それでは、実際に開発環境を構築していきましょう！
今回は例として、Pythonで簡単なWebサーバーを動かす環境を構築してみます。

Step 1: プロジェクトフォルダの準備

まず、開発を行いたいプロジェクトのフォルダを準備します。

# 例: my-python-app というフォルダを作成して移動
mkdir my-python-app
cd my-python-app

# VS Codeで開く
code .

Note
コマンド操作が苦手な方は、普通にフォルダを作成し、VS Codeの「ファイル」メニューから「フォルダを開く」を選択しても大丈夫です。

Step 2: Dev Container の設定ファイルを追加

1. VS Codeで コマンドパレット (Cmd + Shift + P or Ctrl + Shift + P) を開きます。
2. >Dev Containers: Add Dev Container Configuration Files... を選択します。
3. テンプレート一覧から Python 3 を検索して選択します。
4. Pythonのバージョンを聞かれるので、好きなものを選択します。（ここでは3.11-bullseyeを選択）
5. 追加機能の選択画面が出ますが、今回は何も選択せずに「OK」を押します。
6. プロジェクト内に .devcontainer フォルダと devcontainer.json が生成されます。

.devcontainer/devcontainer.json

// For format details, see [https://aka.ms/devcontainer.json](https://aka.ms/devcontainer.json). For config options, see the
// README at: [https://github.com/devcontainers/templates/tree/main/src/python](https://github.com/devcontainers/templates/tree/main/src/python)
{
	"name": "Python 3",
	"image": "[mcr.microsoft.com/devcontainers/python:1-3.11-bullseye](https://mcr.microsoft.com/devcontainers/python:1-3.11-bullseye)",

	// Features to add to the dev container. More info: [https://containers.dev/features](https://containers.dev/features).
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [5000],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "pip install --user -r requirements.txt",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: [https://aka.ms/dev-containers-non-root](https://aka.ms/dev-containers-non-root).
	// "remoteUser": "root"
}

Step 3: コンテナでプロジェクトを開く

VS Code右下に表示される「Reopen in Container」をクリックします。
初回はイメージのダウンロードに数分かかりますが、2回目以降はすぐに起動します。

Step 4: 動作確認

VS Codeのターミナルを開き (Ctrl + @)、Pythonがインストールされているか確認しましょう。

# Pythonのバージョンを確認
$ python --version
Python 3.11.x

# pipのバージョンも確認
$ pip --version
pip 2x.x.x ...

Step 5: 簡単なWebサーバーを動かしてみる

この環境を使って、FlaskでWebサーバーを立ててみましょう。

1. requirements.txt ファイルを作成し、Flaskとだけ記述します。
2. app.py ファイルを作成し、以下のコードを貼り付けます。

# app.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return '<h1>Hello from Dev Container!</h1>'

1. ターミナルでFlaskをインストールし、実行します。

# Flaskをインストール
pip install -r requirements.txt

# Webサーバーを起動
flask run

1. devcontainer.json の "forwardPorts": [5000] のコメントを解除し、コンテナをリビルドします。（コマンドパレット > Rebuild Container）

リビルド後、VS Codeの「ポート」タブに転送されたポートが表示され、「ブラウザで開く」アイコンをクリックすると、ローカルPCのブラウザで Hello from Dev Container! と表示されます！

4. なぜこれが最高に便利なのか？

• 環境のコード化（IaC）: .devcontainer をGit管理すれば、誰でも同じ環境を再現できます。
• PCが汚れない: Python本体やライブラリはコンテナ内。ローカルは汚れません。
• プロジェクト間の環境分離: プロジェクトごとにPythonのバージョンを簡単に切り替えられます。

5. ちょっとしたカスタマイズ

devcontainer.json の "postCreateCommand" のコメントを外しておけば、コンテナ起動時に自動でライブラリをインストールできます。

{
	"postCreateCommand": "pip install --user -r requirements.txt"
}

6. まとめ

DockerとVS Code Dev Containersを使えば、環境差異による無駄なトラブルシューティングから解放され、チーム全体の開発効率が劇的に向上します。

ぜひ、次のプロジェクトから試してみてください！

Happy Hacking!