copied!

AI にどんなコードを書かれても大丈夫！DevContainer+mise で築く「壊されても安心でユニバーサル」な開発環境

Daichi Kugimiya

2025.6.26

copied!

はじめに：生成 AI 時代の新たな悩み

「ChatGPT、このバグを直して！」
「GitHub Copilot、この機能を実装して！」

そんなふうに生成 AI に頼んでコードを書いてもらったら、気づいたら開発環境がぐちゃぐちゃになっていた…そんな経験はありませんか？

AI が提案するコマンドを無邦気に実行して、気づいたら Node.js のバージョンが変わっていたり、知らないツールがグローバルにインストールされていたり。「あれ？昨日まで動いていたのに…」という事態に陥ることも。

そんな現代の開発者の悩みを解決する、「AI にどんなことをされても安心」な開発環境テンプレートをご紹介します。

🛡️ このテンプレートの「安全性」

1. コンテナによる完全な環境分離

ローカル環境を一切汚染しません
AI が提案した「危険なコマンド」を実行してもホスト OS は無傷
最悪の場合、コンテナを削除して再作成すれば元通り

2. ハイブリッド開発アプローチの自由度

DevContainer を使いたい人：完全に隔離された安全な環境
ローカル開発派の人：mise による統一されたツール管理
チーム内で異なる開発スタイルでも協業可能

3. 一瞬で復旧可能な設計

環境が壊れてもReopen in Containerで即座に復旧
全ての設定は.devcontainer/と.mise.tomlに集約
新しいメンバーも同じ環境を即座に再現可能

🎯 主要な特徴と仕組み

DevContainer + mise のパワーコンビ

DevContainer（コンテナ派）

Docker Compose + 専用 Dockerfile で構成
VSCode の拡張機能も自動でセットアップ
GitHub Codespaces でもそのまま動作

mise（ローカル派）

.mise.tomlでツールバージョンを一元管理
DevContainer の中でも外でも同じツール環境
プロジェクトごとに独立したツール管理

実際の設定ファイル例

読者の皆さんが実際に構築できるよう、全ての設定ファイルをご紹介します！

# .mise.toml
[tools]
task = "3.41.0"
# node = "20.10.0"  # 必要に応じて追加
# python = "3.11.0" # 必要に応じて追加

// .devcontainer/devcontainer.json
{
  "name": "Sample Dev Container with mise",
  "dockerComposeFile": ["./compose.yml"],
  "service": "app",
  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
  "customizations": {
    "vscode": {
      "extensions": [] // 必要な拡張機能をここに追加
    }
  },
  "postCreateCommand": "mise trust -- --non-interactive && mise install --yes",
  "postAttachCommand": "",
  "forwardPorts": [3000, 8000, 5173],
  "remoteUser": "root"
}

# .devcontainer/compose.yml
services:
  app:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile

    volumes:
      - ../..:/workspaces:cached
      - mise:/mise

    command: sleep infinity

# mise のキャッシュを保存
volumes:
  mise:

# .devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/base:bullseye

# docker + mise の構成についてはドキュメントを参照
# <https://mise.jdx.dev/mise-cookbook/docker.html>

RUN apt-get update  \\
    && apt-get -y --no-install-recommends install  \\
    # install any other dependencies you might need
    sudo \\
    curl \\
    git \\
    ca-certificates \\
    build-essential \\
    && rm -rf /var/lib/apt/lists/*

SHELL ["/bin/bash", "-o", "pipefail", "-c"]
ENV MISE_DATA_DIR="/mise"
ENV MISE_CONFIG_DIR="/mise"
ENV MISE_CACHE_DIR="/mise/cache"
ENV MISE_INSTALL_PATH="/usr/local/bin/mise"
ENV PATH="/mise/shims:$PATH"
# ENV MISE_VERSION="..."

# 署名を確認してスクリプトを実行
# <https://mise.jdx.dev/installing-mise.html>
RUN gpg --keyserver hkps://keyserver.ubuntu.com --recv-keys 0x7413A06D \\
    && curl <https://mise.jdx.dev/install.sh.sig> | gpg --decrypt > install.sh \\
    && sh ./install.sh

🔧 タスク管理システム（おまけ機能）

このテンプレートには、Taskfile によるタスク管理システムも含まれています。ただし、これは完全にオプションです。

Taskfile の良いところ

npm scriptsやMakefileの代替として使える
複雑なコマンドを覚える必要がない
環境変数の管理が楽

でも、必須ではありません

# Taskfileを使う場合
task setup
task dev

# 直接コマンドを使いたい場合
mise install
# その他の開発用コマンド...

自分の好みに合わせて選択してください。 重要なのは環境の一貫性であり、タスクランナーは好みの問題です。

🚀 実際の構築手順

ステップ 1：プロジェクトの準備

まず、以下のディレクトリ構造を作成します：

your-project/
├── .devcontainer/
│   ├── devcontainer.json
│   ├── compose.yml
│   └── Dockerfile
├── .mise.toml
└── .gitignore

ステップ 2：設定ファイルの作成

上記の設定ファイル例をそれぞれ作成してください。また、.gitignoreに以下を追加：

# Taskfile (個人用)
Taskfile.yml

# mise関連
.mise/

ステップ 3：使い方

DevContainer を使う場合

作成したプロジェクトを VSCode で開く
“Reopen in Container”を選択
これで終わり！ コーヒーを飲んでいる間に環境構築完了

ローカル開発の場合

miseをインストール
プロジェクトルートで mise installを実行
これで終わり！ 同じツール環境が手に入る

🎪 こんなシーンで活躍

シーン 1：AI 開発での事故防止

あなた：「ChatGPT、この機能を実装して」
ChatGPT：「以下のコマンドを実行してください...」
あなた：「コンテナ内だから安心して実行！」

シーン 2：新しいメンバーのオンボーディング

新人さん：「環境構築の手順書はどこですか？」
あなた：「Dev Containerで開くだけです」
新人さん：「え、それだけ？」

シーン 3：チーム内の環境差異解決

Aさん：「僕のMacでは動くんだけど...」
Bさん：「私のWindowsでは...」
あなた：「みんなコンテナ使いましょう」

💡 まとめ：AI 時代の開発者の必須スキル

生成 AI 時代において、環境の安全性は新たな必須スキルになりました。このテンプレートは：

✅ 安全性：コンテナによる完全な環境分離
✅ 柔軟性：DevContainer 派もローカル派も対応
✅ 効率性：複雑な環境構築を自動化
✅ 再現性：チーム全体で同じ環境を共有
✅ 復旧性：問題が起きても即座に復旧可能

「AI に任せて安心、環境も安心」 な開発ライフを始めませんか？

🔗 参考リンク

📝 このテンプレートを試したい方へ

上記の設定ファイルをコピー&ペーストして、自分のプロジェクトに適用してみてください！

🎁 おまけ：Taskfile の例

もし Taskfile も使ってみたい場合は、以下をプロジェクトルートに Taskfile.dist.yml として保存：

version: "3"

vars:
  APP_ENV: development

tasks:
  default:
    desc: タスク一覧を表示
    cmds:
      - task -l

  setup:
    desc: mise をセットアップし、必要なツールをインストール
    cmds:
      - mise install

  check:
    desc: mise の設定を確認
    cmds:
      - mise list
      - mise doctor

「AI と共存する時代の開発環境、作ってみませんか？」

MultiKueueを利用した外部クラスタへのジョブスケジューリング