新しいアプリの作成

/create-new-appスキルを使ってモノレポに新しいWebアプリケーションを作成する。

概要

モノレポにはtemplates/web/にすぐに使えるWebアプリテンプレートが含まれています。手動でファイルをコピーして設定を編集する代わりに、Claude Codeの**/create-new-app**スキルを使えば、一つのコマンドですべてをセットアップできます。

テンプレートには以下が含まれています：

  • Next.js 15 App Router + TypeScript（strictモード）
  • Tailwind CSS スタイリング
  • 認証ミドルウェア 共有認証サービス用に設定済み
  • データベースヘルパー コネクションプーリング付き（pgライブラリ）
  • AIドキュメント 構造（CLAUDE.md、PLAN.md、ai_docs/）
  • デプロイ設定 Railway + GitHub Actionsのパターン

/create-new-appスキル

/create-new-appスキルは、アプリ作成プロセス全体を自動化します。テンプレートのコピー、設定、デプロイセットアップ、ドキュメントまで、すべてを一つのコマンドで処理します。

使い方

Claude Codeで以下のように入力します：

スキルを実行text
/create-new-app <app-name>

これだけです。Claudeが不足している情報を確認し、残りをすべて処理します。

必要な情報

Claudeがアプリを作成するには4つの情報が必要です：

  1. アプリ名 — kebab-case（例：meal-planner、task-board）
  2. アプリの概要 — 何をするアプリか簡単に説明
  3. 主要機能 — 主な機能のリスト
  4. ターゲットユーザー — 誰が使うアプリか

コマンドでアプリ名を指定した場合（例：/create-new-app meal-planner）、Claudeはその名前を使い、不足している情報のみを確認します。

例：必要な情報をすべて一度に伝える
Claudeプロンプト
/create-new-app meal-planner このアプリは共有キッチンの週間献立を計画するためのものです。 主要機能：レシピ閲覧、週間献立作成、買い物リスト生成。 ターゲットユーザー：コワーキングキッチンのメンバー。

すべての情報を一度に伝えれば、Claudeは追加の質問なしに進めます。

スキルの実行内容

裏側では、/create-new-appが以下のフェーズを自動的に実行します：

フェーズ1：テンプレートからセットアップ

ステップ実行内容
テンプレートコピーtemplates/web/をapps/<app-name>/にコピー
パッケージ名更新package.jsonのnameをアプリ名に設定
メタデータ更新app/layout.tsxにアプリタイトルと説明を設定
ルートスクリプト追加ルートpackage.jsonにdev:<app-name>、build:<app-name>、start:<app-name>を追加
依存関係インストールモノレポルートからpnpm installを実行

フェーズ2：AIドキュメントのカスタマイズ

ClaudeがCLAUDE.md、PLAN.md、ai_docs/のすべてのプレースホルダーを置換します：

プレースホルダー置換内容例
[app-name]kebab-caseの名前meal-planner
[app_name]snake_case（テーブルプレフィックス）meal_planner
[App Name]タイトルケースMeal Planner

説明、機能、ターゲットユーザーを伝えていれば、ai_docs/00_product_brief.mdも自動で記入されます。残りのドキュメント（01〜06）は開発の進行に合わせて記入できます。

フェーズ3：デプロイセットアップ

Claudeが既存アプリのパターンに従って3つのファイルを作成します：

  • apps/<app-name>/deploy.config.yml — サービスIDとルートディレクトリ
  • .github/workflows/deploy-app-<app-name>-staging.yml — ステージングへの手動デプロイ
  • .github/workflows/deploy-app-<app-name>-production.yml — mainマージ時の自動デプロイ

フェーズ4：ビルドを検証する

Claudeがビルドを実行し、スキャフォルドされたアプリが正しくコンパイルされることを確認します。これはCIが走らせるのと同じチェックです — ローカルで通れば、PRでも通ります。

ビルドを検証（モノレポルートから）bash
pnpm build:meal-planner

開発サーバーを起動したり、ローカルで.envを設定したりすることはありません — アプリはあなたのマシンではなく、PRプレビューと本番環境で動きます。デプロイと環境変数を参照してください。

セットアップ後：開発を開始する

アプリが作成できたら、機能の実装を始めましょう。

開発を開始
Claudeプロンプト
meal-planner: このアプリで作業を開始したいです。 CLAUDE.mdとPLAN.mdを読んで、フェーズ1の実装を開始してください。 モノレポワークフローに従ってください：mainからフィーチャーブランチを作成、実装、ビルドテスト、PRを作成。

継続的な開発では、以下のワークフローガイドに従ってください：

テンプレートのディレクトリ構造

テンプレートの内容text
apps/my-app-name/
├── package.json              # 依存関係（name更新済み）
├── tsconfig.json             # TypeScript strictモード
├── next.config.ts            # Next.js設定
├── tailwind.config.ts        # Tailwind CSS
├── postcss.config.js         # PostCSS
├── middleware.ts             # 認証ミドルウェア（設定済み）
├── deploy.config.yml         # デプロイ設定（スキルが作成）
├── CLAUDE.md                 # AI開発ガードレール
├── PLAN.md                   # プロジェクト状況追跡
├── README.md                 # アプリドキュメント
├── app/
│   ├── layout.tsx            # ルートレイアウト（メタデータ更新済み）
│   ├── page.tsx              # ホームページ（スターター）
│   ├── globals.css           # グローバルスタイル
│   └── _lib/
│       └── db.ts             # データベースコネクションプール
└── ai_docs/
  ├── README.md             # ドキュメントインデックス
  ├── 00_product_brief.md   # プロダクト定義
  ├── 01_user_experience.md # UI/UXフロー
  ├── 02_architecture.md    # 技術アーキテクチャ
  ├── 03_data_contract.md   # データ＆APIコントラクト
  ├── 04_integrations.md    # 外部サービス
  ├── 05_runbook.md         # 運用
  ├── 06_acceptance_tests.md# テストシナリオ
  └── plans/
      └── README.md         # フェーズ計画インデックス

手動で実行する場合

スキルを使わず手動でセットアップしたい場合：

手動の手順bash
# テンプレートをコピー
cp -r templates/web/ apps/my-app-name/

# apps/my-app-name/package.json を編集 — "name": "my-app-name" に設定
# apps/my-app-name/app/layout.tsx を編集 — タイトルと説明を設定

# ルートpackage.jsonにスクリプトを追加:
# "dev:my-app-name": "pnpm --filter my-app-name dev"
# "build:my-app-name": "pnpm --filter my-app-name build"
# "start:my-app-name": "pnpm --filter my-app-name start"

# 依存関係をインストール（必ずモノレポルートから実行）
pnpm install

# デプロイ設定とワークフローファイルを作成
# （パターンは .github/workflows/deploy-app-checkin-board-*.yml を参照）

クイズ

Quiz

モノレポで新しいアプリを作成する最も簡単な方法は？