はじめに
2025年現在、AI駆動によるアプリケーション開発のパラダイムシフトが進行しています。 今後、エンタープライズ組織においてAIを活用したアプリの内製化が一層進むと考えられます。
本記事では、チーム開発を行う際に必要性の高い「Dev Containers」を解説し、AIコーディング環境も含めた開発環境のセットアップ手順をご紹介します。
また、1台のローカルPC内で、ローカルOSと「Dev Container」がどのように連携して動作するのかも解説します。
用語補足
- Dev Containers は、Visual Studio Code の拡張機能名を指します
- Dev Container は、その拡張機能で利用する開発用のコンテナ単体を指します
対象読者
本記事の対象読者として下記の方々を想定します。
- アプリケーション開発、チーム開発を行う
- AIエージェントによるコーディングでDev Containerを使ってみたい
- Dev Containerのセットアップ手順や仕組みを知りたい
背景・課題
アプリケーションの開発環境には、開発ツールや依存ソフトウェアの複雑なバージョンの組み合わせが存在し、プロジェクト固有の構成で環境構築することが求められます。同じプロジェクトのメンバー間ではバージョン構成を統一する必要があり、異なるプロジェクトであれば環境の分離が必要です。
チーム開発の場合、複数メンバーで開発環境を統一しておかないと、動作差異や不具合発生につながります。
仮に1人で複数プロジェクトの開発を行う場合でも、1台のPC環境の中でプロジェクトごとの環境分離が必要です。
それから、AI駆動開発で用いられるClaude CodeやGemini CLIなどのAIエージェントは便利な一方で、rmコマンドの自動実行により重要ファイルが削除されてしまう危険性があります。
また、AIエージェントがソフトウェアやライブラリを自動インストール・自動バージョンアップすることもあり、意図せず環境を破壊してしまう危険性があります。このため、隔離された環境の中でAIエージェントを動作させることが求められます。
チーム開発やAI駆動開発の際に求められる開発環境の分離は、Dev Containersで実現できます。
Dev Containersとは
Dev Containersは、Visual Studio Codeで利用できる拡張機能で、Dockerコンテナを活用して開発環境を分離できます。開発に必要な環境（Node.js、Python、データベースなど）を設定ファイルに記述することで自動構築できます。
現場でよくある問題
アプリケーション開発の現場で、こんな経験はありませんか？
1. 「私の環境では動くのに...」問題
# 開発者A: Node.js 16.x + npm 7 # 開発者B: Node.js 18.x + npm 9 # 本番環境: Node.js 14.x + npm 6
2. ローカル環境の汚染問題
# プロジェクトAのために npm install -g create-react-app@4.0.0 # プロジェクトBは古いバージョンが必要... npm install -g create-react-app@3.0.0 # 衝突！
3. 新メンバーの環境構築地獄
「環境構築の手順書通りやったけど動きません」 「あ、それPostgreSQLのバージョンが...」 「Redisも入れないと...」 「環境変数の設定が...」 → 丸2日かかる
実践的なメリット
1. 開発効率の向上
- 環境構築: 2日 → 10分 （私の経験によるケース。状況により時間は変化）
- トラブルシューティング: 環境起因の問題がほぼゼロに
- 実験的な変更: 壊れてもDev Containerのリビルドで即復旧
2. チーム開発の改善
# 新メンバー参加時 git clone [repository] code . # VS Code起動 # 「コンテナで開きますか？」→ Yes # 10分後には開発開始！
3. 本番環境との一致
# Dockerfile（本番用）とdevcontainer.json（開発用）で # 同じベースイメージを使用 FROM node:22-alpine
Dev Containersを使うべきシーン
- AI駆動開発
- AIエージェントの試行錯誤を隔離し、ローカル環境の破壊を防ぐ
- チーム開発
- 同一環境を即時再現し、動作差異と初期構築時間を削減
- 複数プロジェクトの並行開発
- 依存関係とバージョンをプロジェクト単位で分離
- 特定バージョンの言語/DBが必要
- 任意のバージョンを固定し、安全に切替可能
- 技術検証・試行錯誤
- 互換性を無視した変更を行ってもリビルドで元に戻せる
Dev Containerの構築手順
解説用にシンプルな環境を例に、以下をセットアップします。
- Node.js
- TypeScript
- React
- Vite
- Claude Code
1. 事前準備
- 以下をローカルPCにインストールしてください
- Docker Desktop または Rancher Desktop などのDocker動作環境
- Visual Studio Code（VS Code）
- VS Codeでプロジェクトフォルダを開いておく
2. Dev Container構成ファイルを作成
- プロジェクトフォルダに
.devcontainerフォルダを作成 .devcontainerフォルダ内にdevcontainer.jsonファイルを作成
以下、devcontainer.json
{
"name": "Node.js & TypeScript & React & Vite with Claude Code",
"image": "mcr.microsoft.com/devcontainers/typescript-node:22",
"features": {
"ghcr.io/anthropics/devcontainer-features/claude-code:1": {}
},
"postCreateCommand": "npm create vite@7.1 . -- --template react-ts && npm install"
}
devcontainer.jsonの設定解説
| 項目 | 値 | 解説 |
|---|---|---|
| name | "Node.js & TypeScript & React & Vite with Claude Code" | Dev Containerの名前を記載 |
| image | "mcr.microsoft.com/devcontainers/typescript-node:22" | 使用するDockerイメージを指定しています。Microsoft Container Registry（mcr）から提供される公式のTypeScript/Node.js開発用イメージで、Node.js 22系がプリインストールされています。TypeScriptの開発に必要なツールが含まれた環境です。 |
| features | "ghcr.io/anthropics/devcontainer-features/claude-code:1": {} | Dev Container Featuresを使って追加機能をインストールしています。ここではGitHub Container Registry（ghcr）からAnthropic社のClaude Code バージョン1を追加します。 |
| postCreateCommand | "npm create vite@7.1 . -- --template react-ts && npm install" | コンテナ作成後に自動実行されるコマンドです。Vite 7.1を使ってReact+TypeScriptテンプレートのプロジェクトを現在のディレクトリ（.）に作成し、その後npm installで依存関係をインストールします。 |
3. Dev Container の起動
開発コンテナー: コンテナーでリビルドして再度開く
F1またはCtrl+Shift+P(Mac:Cmd+Shift+P)- 「Dev Containers: Rebuild and Reopen in Container」を選択
コンテナのビルドと起動を待つ
- 以下の処理が自動実行されます：
- Dockerイメージがダウンロードされます
- コンテナが起動します
- Claude Codeがインストールされます
Viteプロジェクトの作成（
postCreateCommandの実行）- 以下が表示されたら
yを入力してください
- 以下が表示されたら、.devcontainerを保持するため「Ignore files and continue」を選択してください
- 以下が表示されたら
npm依存関係がインストールされます
- 以下が表示されたら任意のキーを押してください
- 以下の処理が自動実行されます：
4. 開発ツール：Viteの起動
- VS Code内でターミナルを開く
- 開発ツール：Viteの起動
npm run dev -- --host
5. ブラウザで接続
アプリケーションへのアクセス
ポートフォワーディングの確認
- VS Codeが自動的にポート5173をフォワーディングします
- 「ポート」タブで確認可能（VS Codeの下部パネル）
ブラウザでアクセス
- 方法1: ターミナルのURLをCtrl+クリック（Cmd+クリック）
- 方法2: ブラウザで直接
http://localhost:5173を開く - 方法3: VS Codeの「ポート」タブから
- ポート5173の行を右クリック
- 「Open in Browser」を選択
React + Viteアプリの確認
- Vite + Reactのデフォルトページが表示されます
- Vite + Reactのデフォルトページが表示されます
トラブルシューティング
よくある問題と解決方法
| 問題 | 解決方法 |
|---|---|
| コンテナが起動しない | Docker Desktopなど、コンテナエンジンが起動しているか確認 |
| ポート5173にアクセスできない | VS Codeの「ポート」タブでポートが開いているか確認 |
| ブラウザが自動で開かない | 手動でhttp://localhost:5173にアクセス |
6. AIコーディングエージェント：Claude Codeを起動
- VS Code内でターミナルを開く
- Claude Codeの起動
claude
- 好みのテキストスタイルを選ぶ
- Claude Codeが起動しました
Dev Container環境の動作フロー
本記事のDev Containerについて、動作の流れを説明します
① git clone
GitHubリポジトリからソースコードと.devcontainer/devcontainer.jsonをローカルPCにクローンします。（git cloneの解説は割愛）
統一されたリモートリポジトリをチームメンバーがクローンすることで、メンバー全員が同じ開発環境に統一されます。
② Dev Container起動時の自動マウント
①でクローンしたプロジェクトフォルダ（マウント元）が、Dev Container環境内に自動マウントされます。
③ コンテナ自動構築
②のマウント先の.devcontainer/devcontainer.jsonに基づき、コンテナレジストリからコンテナイメージがダウンロードされ、Dev Container環境が自動構築されます。
また、Node.jsやVite、Claude Codeなど、開発に必要なツール・依存関係が自動インストールされます。
④ 開発ツール起動
Dev Containerに接続されたターミナルで、npm run dev -- --hostコマンドを実行し、開発サーバー（Vite）を起動します。
⑤ ポートフォワーディング
コンテナ内でViteのデフォルトポート5173が自動検出され、ローカルPCのポート5173に自動的にフォワーディングされます。
⑥ アプリ動作確認
ローカルPCのWebブラウザから、ポートフォワーディング経由でアプリ動作確認ができます。
おわりに
本記事では、Dev Containersによる開発環境の分離と再現性の確保、AIエージェントを安全に活用するためのシンプルな構成と構築手順を紹介しました。また、ローカルPC内でDev Containerがどのように動作するか図解で解説しました。ぜひ、記事のdevcontainer.jsonをコピーして動かし、Viteを起動するところまで試してみてください。チームで共有し、必要な機能を小さく追加しながら、運用しやすいプロジェクト標準へと整備していきましょう。
執筆者
三島 映人 NTT西日本グループのサービス開発におけるテックリードやプロジェクトマネジメント、アプリケーション開発組織の技術統括、エンジニア育成を行っています。 PMP、MBA等を保有。趣味は自作キーボードの設計。
参考資料・出典
本記事を執筆するにあたり、以下のサイトを参考にしました。
商標
- Windows / Visual Studio Code は、Microsoft Corporationの商標もしくは登録商標です
- Mac は、Apple Inc.の商標もしくは登録商標です
- GitHub は、GitHub Inc.の商標もしくは登録商標です
- Docker / Docker Desktop は、Docker Inc.の商標もしくは登録商標です
- Rancher は、SUSE LLCの商標もしくは登録商標です
- Claude / Claude Code は、Anthropic PBCの商標もしくは登録商標です
- Gemini は、Google LLCの商標もしくは登録商標です
- Node.js は、OpenJS Foundationの商標もしくは登録商標です
- React は、Meta Platforms, Inc.の商標もしくは登録商標です
- PostgreSQL は、PostgreSQL の商標もしくは登録商標です
- Redis は、Redis Ltd.の商標もしくは登録商標です
- Python は、Python Software Foundationの商標もしくは登録商標です
- MySQL はOracle Corporationの商標もしくは登録商標です
- MongoDB はMongoDB Inc.の商標もしくは登録商標です
- PMP は、Project Management Institute, Inc. の商標もしくは登録商標です
