VS Code DevContainer + micromamba で最強の Python 開発環境を構築する

## はじめに

Python 開発で「環境構築で半日溶けた」という経験はありませんか？
この記事では、**VS Code DevContainer + micromamba** を使って、誰でも同じ開発環境を 5 分で立ち上げられる設定を紹介します。

## その前に。

| 項目             | 説明                                                 |
| ---------------- | ---------------------------------------------------- |
| **DevContainer** | Docker + VS Code で統一開発環境を構築する仕組み      |
| **micromamba**   | conda より高速・軽量な Python パッケージマネージャー |
| **mamba**        | conda の高速版（micromamba でインストール可能）      |

## DIR 構成概要

```
.devcontainer/
├── devcontainer.json  # VS Code設定（拡張機能、ポート等）
├── Dockerfile         # Ubuntu + micromamba + Node.js
└── setup.sh          # Python パッケージ自動インストール
```

**コンセプト**:

- **Dockerfile** = OS 環境の土台（Ubuntu + micromamba + Node.js）
- **devcontainer.json** = VS Code の設定（拡張機能、フォーマッタ等）
- **setup.sh** = プロジェクト固有のパッケージ導入

## 📁 ファイル構成

### 1. Dockerfile - 環境の土台を作る

```dockerfile
# FIX: Ubuntu 22.04 に固定して再現性を確保（devcontainers が公式で提供）
FROM mcr.microsoft.com/devcontainers/base:ubuntu-22.04

# root 権限で追加パッケージをインストール
USER root

# FIX: 開発でよく使うビルドツールもまとめて導入
RUN apt-get update \
    && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y upgrade \
    && apt-get -y install --no-install-recommends \
         curl bzip2 ca-certificates git procps build-essential \
    && apt-get clean && rm -rf /var/lib/apt/lists/*

# micromamba を単体バイナリで導入
ENV MAMBA_ROOT_PREFIX=/opt/conda
ENV PATH=$MAMBA_ROOT_PREFIX/bin:$PATH

# FIX: snakepit の最新ビルドをそのまま展開
RUN curl -L https://micromamba.snakepit.net/api/micromamba/linux-64/latest \
    | tar -xvj -C /usr/local/bin --strip-components=1 bin/micromamba \
    # FIX: base 環境を作成し、mamba も同時に入れる
    && micromamba create -y -p $MAMBA_ROOT_PREFIX python=3.12 mamba \
    && micromamba clean -a -y

# VS Code DevContainer 既定の vscode ユーザーに権限を渡す
RUN chown -R vscode:vscode $MAMBA_ROOT_PREFIX

# Node.js & npm を追加（LTS 20.x）
ENV NODE_VERSION=20
RUN curl -fsSL https://deb.nodesource.com/setup_${NODE_VERSION}.x | bash - \
  && apt-get install -y nodejs \
  && npm install -g yarn

USER vscode

# デフォルトシェル
CMD ["bash"]
```

**Dockerfile のポイント:**

- `mcr.microsoft.com/devcontainers/base:ubuntu-22.04` = Microsoft 公式の DevContainer 用 Ubuntu
- `vscode`ユーザーが最初から存在（`useradd`不要）
- `micromamba`を直接バイナリで導入（軽量・高速）
- Python 3.12 + mamba を同時にインストール
- Node.js 20 LTS も追加でフルスタック対応

### 2. devcontainer.json - VS Code 体験を最適化

```json
// .devcontainer/devcontainer.json
{
  "name": "ubuntu-python-mamba",
  "build": { "dockerfile": "Dockerfile" }, // FIX: パスが同じ階層なら相対でOK
  "init": true,

  // FIX: ${localWorkspaceFolderBasename} で他 PC でも動く
  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",

  "forwardPorts": [3000],

  "portsAttributes": {
    "3000": {
      "label": "Next.js Dev Server",
      "onAutoForward": "notify"
    }
  },

  "customizations": {
    "vscode": {
      // ---------- Settings ----------
      "settings": {
        "python.defaultInterpreterPath": "/opt/conda/bin/python",
        "python.condaPath": "/opt/conda/bin/mamba",
        "[python]": {
          "editor.formatOnSave": true,
          "editor.codeActionsOnSave": {
            "source.fixAll": "explicit",
            "source.organizeImports": "explicit"
          },
          "editor.defaultFormatter": "charliermarsh.ruff"
        }
      },
      // ---------- Extensions ----------
      "extensions": [
        "ms-python.python",
        "charliermarsh.ruff",
        "ms-python.black-formatter",
        "KevinRose.vsc-python-indent",
        "njpwerner.autodocstring",
        "VisualStudioExptTeam.vscodeintellicode",
        "ms-python.debugpy",
        "ms-python.vscode-pylance",

        // フロントエンド開発向け（以下を追加）
        "dbaeumer.vscode-eslint", // ESLint の統合
        "esbenp.prettier-vscode", // Prettier フォーマッタ
        "dsznajder.eslint-plugin-jsx-a11y", // JSX アクセシビリティ
        "formulahendry.auto-close-tag", // 自動タグ補完
        "formulahendry.auto-rename-tag", // タグ自動リネーム
        "christian-kohler.path-intellisense", // ファイルパス補完
        "bradlc.vscode-tailwindcss", // TailwindCSS 支援（使うなら）
        "yoavbls.pretty-ts-errors", // TypeScriptエラーをわかりやすく
        "styled-components.vscode-styled-components", // styled-components 支援（任意）
        "xabikos.JavaScriptSnippets", // React/JS スニペット
        "ms-vscode.vscode-typescript-next", // 最新TypeScript LSP（任意）
        "ritwickdey.liveserver"
      ]
    }
  },

  // FIX: 相対パス化 & bash 呼び出し
  "postCreateCommand": "bash .devcontainer/setup.sh",
  "envFile": "src/.env",

  "remoteUser": "vscode"
}
```

**devcontainer.json のポイント:**

- `${localWorkspaceFolderBasename}` = プロジェクト名に関係なく動作
- Python + フロントエンド両方の拡張機能を一括導入
- Ruff フォーマッタでコード品質を自動保持
- `postCreateCommand` で環境構築を自動化

### 3. setup.sh - プロジェクト固有パッケージの導入

```bash
#!/usr/bin/env bash
set -euo pipefail                               # FIX: -u と pipefail 追加

# conda / mamba コマンドの PATH を保証
export PATH="/opt/conda/bin:$PATH"

command -v mamba >/dev/null || { echo "[setup.sh] mamba not found"; exit 1; }

# Python パッケージを最小限インストール（必要なら適宜追加）
mamba install -qy -c conda-forge \
    numpy pandas matplotlib scikit-learn jupyterlab ipykernel

# キャッシュ削除でイメージをスリム化
mamba clean -afy

# .env 自動生成（存在しない場合のみ）
ENV_PATH="src/.env"                             # FIX: リポジトリ相対

echo "Setup completed successfully!"
```

**setup.sh のポイント:**

- `set -euo pipefail` = エラー時に即座に停止
- `export PATH` = DevContainer での PATH 問題を回避
- `command -v mamba` = mamba コマンドの存在確認
- 必要最小限のパッケージのみ導入（高速化）

## よくあるトラブルと解決法

### 1. `useradd: user 'vscode' already exists`

**原因**: Microsoft 公式イメージには`vscode`ユーザーが最初から存在  
**解決**: `useradd vscode`を削除し、`remoteUser: "vscode"`をそのまま使用

### 2. `mamba: command not found`

**原因**: Dockerfile の ENV が postCreateCommand に反映されない  
**解決**: setup.sh の先頭で `export PATH="/opt/conda/bin:$PATH"`

### 3. `micromamba`はあるのに`mamba`がない

**原因**: `micromamba create`時に`mamba`パッケージを指定していない  
**解決**: `micromamba create -p /opt/conda python=3.12 mamba`

### 4. `mamba init`で exit code 109

**原因**: `mamba init`は対話的処理が含まれ、DevContainer の非対話モードで失敗  
**解決**: `mamba init`を削除（通常のパッケージインストールには不要）

## 使い方

- Github のアカウントをお持ちの方は[こちら](https://github.com/kom-nori/docker-mamba)から。

### 1. セットアップ

```bash
# プロジェクトをクローン
git clone https://github.com/kom-nori/docker-mamba
cd <your-project>

# .devcontainer ディレクトリを作成し、上記3ファイルを配置
mkdir .devcontainer
# Dockerfile, devcontainer.json, setup.sh を配置
```

### 2. VS Code で開発開始

1. VS Code でプロジェクトフォルダを開く
2. 右下に「Reopen in Container」が表示されるのでクリック
3. 初回は 5-10 分でビルド完了
4. 完成！ Python + Node.js 環境で開発開始

### 3. 確認コマンド

```bash
# Python 環境確認
python --version  # Python 3.12.x
mamba list        # インストール済みパッケージ一覧

# Node.js 環境確認
node --version    # v20.x.x
npm --version     # 10.x.x
```

## 参考リンク

- [あまつ楓](https://www.youtube.com/@amazkaede/videos)
- [Miniforge 公式](https://github.com/conda-forge/miniforge)
- [micromamba 公式](https://mamba.readthedocs.io/en/latest/user_guide/micromamba.html)

## まとめ

この設定により、「環境構築で時間を取られる」「ローカル環境が汚れる」「チームで環境が異なる」といった問題を一挙に解決できます。特に **micromamba + DevContainer** の組み合わせは、従来の conda 環境よりも軽量で高速、かつチーム開発に最適化されています。試してみてください！

---