モノレポ概要

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

モノレポとは?

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

Vibe Coderにとってのメリット

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

リポジトリ構造

vibe-coding-platform/
├── apps/                    # すべてのアプリケーションがここに
│   ├── checkin-board/       # アプリの例
│   ├── breakfast-tracker/   # 別のアプリ
│   └── your-new-app/        # あなたのアプリはここに
├── shared/                  # 共有リソース
│   ├── database/            # データベーススキーマ(Prisma)
│   ├── auth/                # 認証サービス
│   ├── storage/             # オブジェクトストレージヘルパー(Railwayバケット)
│   ├── api/                 # 共有APIコントラクト
│   └── types/               # 共有TypeScript型
├── 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_TOKENCLOUDFLARE_ZONE_ID が必要

apps/ディレクトリ

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

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

アプリの命名規則

アプリはケバブケース(小文字とハイフン)を使用します:

✅ 正しい❌ 間違い
checkin-boardCheckinBoard
breakfast-trackerbreakfast_tracker
my-new-appmyNewApp

shared/ディレクトリ

複数のアプリが使用できる共有リソース:

ディレクトリ目的編集権限
shared/database/すべてのテーブルのPrismaスキーマVibe coder(レビュー付き)
shared/auth/中央集約型の認証サービス開発者のみ
shared/storage/オブジェクトストレージヘルパー(S3互換)Vibe coder(レビュー付き)
shared/api/共有APIコントラクト開発者のみ
shared/types/共有TypeScript型Vibe coder(レビュー付き)

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

データベースアクセス

アプリはランタイムのデータベースクエリに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はどこで実行すべきですか?

次のステップ