devcontainer-setup

Devcontainer セットアップスキル

Claude Code と言語固有のツールを事前設定した devcontainer を作成します。

使用するタイミング

• ユーザーが「devcontainer をセットアップして」または「devcontainer のサポートを追加して」と依頼した場合
• ユーザーがサンドボックス化された Claude Code 開発環境を希望する場合
• ユーザーが設定を永続化できる分離された開発環境を必要としている場合

使用しないタイミング

• ユーザーがすでに devcontainer の設定を持っており、変更だけが必要な場合
• ユーザーが一般的な Docker またはコンテナーに関する質問をしている場合
• ユーザーが本番用コンテナーのデプロイを希望している場合（これは開発専用です）

ワークフロー

flowchart TB
    start([User requests devcontainer])
    recon[1. Project Reconnaissance]
    detect[2. Detect Languages]
    generate[3. Generate Configuration]
    write[4. Write files to .devcontainer/]
    done([Done])

    start --> recon
    recon --> detect
    detect --> generate
    generate --> write
    write --> done

フェーズ 1：プロジェクトの調査

プロジェクト名の推定

以下の順に確認します（一致した最初の項目を使用します）。

1. package.json → name フィールド
2. pyproject.toml → project.name
3. Cargo.toml → package.name
4. go.mod → モジュールパス（/ の後の最後のセグメント）
5. フォールバックとしてディレクトリ名

スラッグに変換します。小文字にし、スペースとアンダースコアをハイフンに置き換えます。

言語スタックの検出

言語	検出ファイル
Python	pyproject.toml、*.py
Node/TypeScript	package.json、tsconfig.json
Rust	Cargo.toml
Go	go.mod、go.sum

複数言語のプロジェクト

複数の言語が検出された場合は、次の優先順位ですべて設定します。

1. Python - メイン言語です。uv と Python のインストールに Dockerfile を使用します
2. Node/TypeScript - devcontainer の機能を使用します
3. Rust - devcontainer の機能を使用します
4. Go - devcontainer の機能を使用します

複数言語の postCreateCommand では、すべてのセットアップコマンドを連結します。

uv run /opt/post_install.py && uv sync && npm ci

検出されたすべての言語の拡張機能と設定を統合して、構成に含めます。

フェーズ 2：設定の生成

resources/ ディレクトリの基本テンプレートから始めます。次の値を置き換えます。

• {{PROJECT_NAME}} → 人が読みやすい名前（例：「My Project」）
• {{PROJECT_SLUG}} → ボリューム用のスラッグ（例：「my-project」）

その後、以下の言語固有の変更を適用します。

基本テンプレートの機能

基本テンプレートには次の内容が含まれます。

• マーケットプレイスのプラグイン（anthropics/skills、trailofbits/skills、trailofbits/skills-curated）を含む Claude Code
• bubblewrap と socat による サンドボックス化
• uv による Python 3.13（高速なバイナリダウンロード）
• fnm（Fast Node Manager）による Node 22
• AST ベースのコード検索用 ast-grep
• NET_ADMIN 機能を備えた ネットワーク分離ツール（iptables、ipset）
• セキュリティマウント：コンテナーからの脱出を防ぐため、.devcontainer/ を読み取り専用でマウント
• トークン転送：remoteEnv を介した CLAUDE_CODE_OAUTH_TOKEN と ANTHROPIC_API_KEY
• 最新の CLI ツール：ripgrep、fd、fzf、tmux、git-delta

---

言語固有のセクション

Python プロジェクト

検出： pyproject.toml、requirements.txt、setup.py、または *.py ファイル

Dockerfile への追加：

基本の Dockerfile には、uv による Python 3.13 がすでに含まれています。異なるバージョンが必要な場合（pyproject.toml から検出）、Python のインストールを変更します。

# Install Python via uv (fast binary download, not source compilation)
RUN uv python install <version> --default

devcontainer.json の拡張機能：

customizations.vscode.extensions に追加します。

"ms-python.python",
"ms-python.vscode-pylance",
"charliermarsh.ruff"

customizations.vscode.settings に追加します。

"python.defaultInterpreterPath": ".venv/bin/python",
"[python]": {
  "editor.defaultFormatter": "charliermarsh.ruff",
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

postCreateCommand： pyproject.toml が存在する場合は、コマンドを連結します。

rm -rf .venv && uv sync && uv run /opt/post_install.py

---

Node/TypeScript プロジェクト

検出： package.json または tsconfig.json

Dockerfile への追加は不要です： 基本テンプレートには、fnm（Fast Node Manager）による Node 22 が含まれています。

devcontainer.json の拡張機能：

customizations.vscode.extensions に追加します。

"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"

customizations.vscode.settings に追加します。

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit"
}

postCreateCommand： ロックファイルからパッケージマネージャーを検出し、基本コマンドと連結します。

• pnpm-lock.yaml → uv run /opt/post_install.py && pnpm install --frozen-lockfile
• yarn.lock → uv run /opt/post_install.py && yarn install --frozen-lockfile
• package-lock.json → uv run /opt/post_install.py && npm ci
• ロックファイルなし → uv run /opt/post_install.py && npm install

---

Rust プロジェクト

検出方法: Cargo.toml

追加する機能:

"ghcr.io/devcontainers/features/rust:1": {}

devcontainer.json の拡張機能:

customizations.vscode.extensions に追加:

"rust-lang.rust-analyzer",
"tamasfe.even-better-toml"

customizations.vscode.settings に追加:

"[rust]": {
  "editor.defaultFormatter": "rust-lang.rust-analyzer"
}

postCreateCommand: Cargo.lock が存在する場合は、ロックファイルを使用してビルドします:

uv run /opt/post_install.py && cargo build --locked

ロックファイルがない場合は、標準のビルドを使用します:

uv run /opt/post_install.py && cargo build

---

Go プロジェクト

検出方法: go.mod

追加する機能:

"ghcr.io/devcontainers/features/go:1": {
  "version": "latest"
}

devcontainer.json の拡張機能:

customizations.vscode.extensions に追加:

"golang.go"

customizations.vscode.settings に追加:

"[go]": {
  "editor.defaultFormatter": "golang.go"
},
"go.useLanguageServer": true

postCreateCommand:

uv run /opt/post_install.py && go mod download

---

参考資料

詳しくは、以下を参照してください:

• references/dockerfile-best-practices.md - レイヤーの最適化、マルチステージビルド、アーキテクチャのサポート
• references/features-vs-dockerfile.md - devcontainer の機能とカスタム Dockerfile の使い分け

---

永続ボリュームの追加

devcontainer.json に新しいマウントを追加する際のパターン:

"mounts": [
  "source={{PROJECT_SLUG}}-<purpose>-${devcontainerId},target=<container-path>,type=volume"
]

よく追加される設定:

• source={{PROJECT_SLUG}}-cargo-${devcontainerId},target=/home/vscode/.cargo,type=volume（Rust）
• source={{PROJECT_SLUG}}-go-${devcontainerId},target=/home/vscode/go,type=volume（Go）

---

出力ファイル

プロジェクトの .devcontainer/ ディレクトリに、以下のファイルを生成します:

1. Dockerfile - コンテナーのビルド手順
2. devcontainer.json - VS Code/devcontainer の設定
3. post_install.py - 作成後のセットアップスクリプト
4. .zshrc - シェルの設定
5. install.sh - devcontainer を管理する CLI ヘルパー（devc コマンド）

---

検証チェックリスト

ファイルをユーザーに提示する前に、以下を確認してください:

1. すべての {{PROJECT_NAME}} プレースホルダーが、読みやすい名前に置き換えられている
2. すべての {{PROJECT_SLUG}} プレースホルダーが、スラッグ化された名前に置き換えられている
3. devcontainer.json の JSON 構文が有効である（末尾のカンマがなく、適切にネストされている）
4. 検出されたすべての言語に、言語固有の拡張機能が追加されている
5. postCreateCommand に必要なセットアップコマンドがすべて含まれている（&& で連結されている）

---

ユーザーへの案内

生成後、ユーザーに以下を案内してください:

1. 起動方法:「VS Code で開き、［コンテナーで再度開く］を選択します」
2. 代替方法: devcontainer up --workspace-folder .
3. CLI ヘルパー: .devcontainer/install.sh self-install を実行して、devc コマンドを PATH に追加します