モノレポ概要

モノレポの構造とアプリの整理方法を理解する。

モノレポとは？

モノレポ（モノリシックリポジトリ）は、複数のプロジェクト、アプリケーション、共有コードを含む単一のリポジトリです。各アプリに個別のリポジトリを持つ代わりに、すべてが1か所にまとめられています。

Vibe Coderにとってのメリット

  • 共有コード：共通のユーティリティ、型、設定がすべてのアプリで共有される
  • 一貫したパターン：すべてのアプリが同じ構造と規則に従う
  • 単一の情報源：1つのCLAUDE.mdファイルにすべてのガイドラインが含まれる
  • 簡単なコラボレーション：Claudeがコードベース全体のコンテキストを理解できる

リポジトリ構造

vibe-coding-platform/
├── apps/                    # すべてのアプリケーションがここに
│   ├── example-app/         # アプリの例
│   ├── breakfast-tracker/   # 別のアプリ
│   └── your-new-app/        # あなたのアプリはここに
├── shared/                  # 共有リソース（この3つだけ）
│   ├── database/            # データベーススキーマ（Prisma）
│   ├── auth/                # Auth API + Auth UI
│   └── schema.md            # 全テーブルの一覧（人間が読む用）
├── templates/               # 新規プロジェクト用テンプレート
├── CLAUDE.md                # AI開発ガイドライン
└── package.json             # ルートワークスペース設定

プラットフォーム構成

このファウンデーション版では次を提供します。

  • 認証の一元化（Auth UI + Auth API：マジックリンク、パスキー、端末パスワード）
  • 会社ごとの 1 つの Postgres（Neon の DATABASE_URL）— 認証テーブルとアプリデータ
  • 全アプリのランチャー App Portal
  • GitHub Actions → Railway デプロイと Cloudflare DNS によるカスタムドメイン

apps/ 配下の各アプリは独立した Next.js サービスです。共有 middleware で認証し、pg で会社 DB にデータを保存します。

カスタムドメイン（staging / production）

各デプロイ後、CI が Railway カスタムドメインと Cloudflare DNS レコードを作成します。

  • ドメイン形式: {service-name}.{RAILWAY_APP_DOMAIN_SUFFIX}
  • GitHub Environment ごとに RAILWAY_APP_DOMAIN_SUFFIX を設定（例: apps.staging.acme.com / apps.acme.com）
  • 同環境に CLOUDFLARE_API_TOKEN と CLOUDFLARE_ZONE_ID が必要

apps/ディレクトリ

apps/ディレクトリ内の各アプリは、以下を持つスタンドアロンのNext.jsアプリケーションです：

  • package.json - 依存関係とスクリプト
  • app/ディレクトリ - Next.js App Routerページ
  • deploy.config.yml - Railwayデプロイ設定

アプリの命名規則

アプリはケバブケース（小文字とハイフン）を使用します：

✅ 正しい❌ 間違い
app-portalAppPortal
breakfast-trackerbreakfast_tracker
my-new-appmyNewApp

shared/ディレクトリ

複数のアプリが使用できる共有リソース。中身はちょうど次の3つです（ls shared/ で確認できます）：

パス目的編集権限
shared/database/すべてのテーブルのPrismaスキーマVibe coder（レビュー付き）
shared/auth/中央集約型の認証サービス（auth-api/、auth-ui/）開発者のみ
shared/schema.md全テーブルを人間が読める形でまとめた一覧Vibe coder（レビュー付き）

さらに詳しく: データベース、認証とアクセス制御、ファイルストレージ。

ストレージや型が shared/ にない理由

各アプリは独立してビルド・デプロイされるため、アプリが shared/ のランタイムコードをimportすることはできません。アプリが実行するコードは、必ずそのアプリの中に置きます。次の機能はどれも実際に使えます。共有ディレクトリに置く代わりに、アプリごとに有効にする形になっているだけです：

機能有効にする方法
ファイルストレージapps/example-app/app/_lib/storage.ts を自分のアプリにコピーし、自分の deploy.config.yml の secrets: に BUCKET_* を対応付ける。詳しい手順はファイルストレージ
通知メール同じ要領で apps/example-app/app/_lib/email.ts をコピーし、secrets: に APP_EMAIL_* を対応付ける
TypeScript型使うコードのそばで、アプリの中に宣言する

アプリごとに有効にするのは意図的な設計です。ファイルを保存しないアプリはバケットの鍵を持たず、メールを送らないアプリはメールの鍵を持ちません。

データベースアクセス

アプリはランタイムのデータベースクエリにpgライブラリ（Prismaクライアントではなく）を使用します。テンプレート付属のgetDb()ヘルパーを使い、SQLインジェクション対策として必ずパラメータ化クエリ（$1, $2, …）を使ってください：

データベースクエリの例typescript
import { getDb } from '@/app/_lib/db';

const db = getDb();
const result = await db.query(
  'SELECT * FROM my_app_users WHERE id = $1',
  [userId]
);
const users = result.rows;

注意: データベースクエリはデプロイ環境（PRプレビューまたは本番）でのみ実行されます。スキーマとマイグレーションの全体フローはデータベースを参照してください。

知っておくべき重要ファイル

CLAUDE.md（ルート）

AI開発で最も重要なファイル。以下を含みます：

  • コーディング標準と規則
  • Gitワークフロールール
  • データベースガイドライン
  • デプロイ手順
ClaudeにCLAUDE.mdを説明してもらう
Claudeプロンプト
CLAUDE.mdファイルを読んで、Vibe coderとして従うべき主要なルールを要約してください。

アプリ固有のファイル

各アプリには独自のドキュメントがある場合があります：

ファイル目的
README.mdアプリの概要とセットアップ手順
CLAUDE.mdアプリ固有のAIガイドライン
PLAN.md開発進捗と計画された作業

モノレポでの作業

コマンドの実行

常にリポジトリルートからコマンドを実行します。アプリをローカルで動かすことはありません — PRを開けばステージングと本番ですべて動きます（デプロイ参照）。ローカルで実行するのは、コミット前にCIと同じチェックを再現するビルドだけです:

ルートから実行するコマンドbash
# コミット前にビルドを確認（CIが走らせるのと同じチェック）
pnpm build:your-app-name

依存関係のインストール

アプリディレクトリ内でpnpm installを実行しないでください：

依存関係のインストールbash
# ✅ 正しい：リポジトリルートから実行
pnpm install

# ❌ 間違い：アプリディレクトリ内で実行しない
cd apps/my-app && pnpm install

新しい依存関係の追加

Claudeに依存関係を追加してもらう
Claudeプロンプト
my-app-nameに「date-fns」パッケージを依存関係として追加してください。
または自分で実行bash
# 特定のアプリに追加
pnpm --filter my-app-name add date-fns

# 開発依存関係として追加
pnpm --filter my-app-name add -D @types/some-package

クイズ

Quiz

pnpm installはどこで実行すべきですか？

次のステップ