senior-fullstack

シニアフルスタックエンジニア

概要

データベース設計、API レイヤー、フロントエンド UI、認証、デプロイを網羅する、完全なエンドツーエンドの TypeScript アプリケーションを開発します。このスキルは、Next.js App Router、型安全な API を実現する tRPC、データベースアクセスに使う Prisma、モニタリングを含む本番環境へのデプロイを用いた、モダンな TypeScript フルスタックを専門としています。

開始時に宣言：「エンドツーエンドの TypeScript 開発に、シニアフルスタックスキルを使用しています。」

---

フェーズ 1：データレイヤー

目標： データベーススキーマとデータアクセスパターンを設計します。

アクション

1. Prisma でデータベーススキーマを設計する
2. リレーションとインデックスを定義する
3. 開発用のシードデータを作成する
4. マイグレーションのワークフローを設定する
5. データアクセスにリポジトリパターンを実装する

Prisma スキーマの例

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  role      Role     @default(USER)
  posts     Post[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([email])
  @@index([createdAt])
}

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id], onDelete: Cascade)
  authorId  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([authorId])
  @@index([published, createdAt])
}

インデックス戦略の判断表

クエリパターン	インデックスの種類	例
一意のフィールドによる検索	一意インデックス	@@unique([email])
外部キーによる絞り込み	標準インデックス	@@index([authorId])
絞り込みとソートの組み合わせ	複合インデックス	@@index([published, createdAt])
全文検索	全文インデックス	データベース固有
地理空間クエリ	空間インデックス	データベース固有

停止 — 次の条件を満たすまでフェーズ 2 に進まないでください：

• すべてのリレーションを含むスキーマが定義されている
• インデックスがすべてのクエリパターンをカバーしている
• シードデータのスクリプトが存在する
• マイグレーションが生成され、テスト済みである

---

フェーズ 2：API レイヤー

目標： tRPC と Zod のバリデーションを使用して、型安全な API を構築します。

アクション

1. tRPC のルーターとプロシージャを定義する
2. Zod で入力バリデーションを実装する
3. 認証ミドルウェアを追加する
4. サービスレイヤーにビジネスロジックを構築する
5. エラーハンドリングとロギングを追加する

tRPC ルーターの例

export const userRouter = router({
  list: protectedProcedure
    .input(z.object({
      page: z.number().min(1).default(1),
      pageSize: z.number().min(1).max(100).default(20),
      search: z.string().optional(),
    }))
    .query(async ({ ctx, input }) => {
      const { page, pageSize, search } = input;
      const where = search ? { name: { contains: search, mode: 'insensitive' } } : {};
      const [users, total] = await Promise.all([
        ctx.db.user.findMany({
          where, skip: (page - 1) * pageSize, take: pageSize, orderBy: { createdAt: 'desc' },
        }),
        ctx.db.user.count({ where }),
      ]);
      return { users, total, totalPages: Math.ceil(total / pageSize) };
    }),

  create: protectedProcedure
    .input(createUserSchema)
    .mutation(async ({ ctx, input }) => {
      return ctx.db.user.create({ data: input });
    }),
});

認可パターンの判断表

パターン	使用する場面	例
ロールベース（RBAC）	シンプルな権限モデル	管理者とユーザー
リソースレベル	所有者のみアクセス可能	ユーザーが自分の投稿を編集できる
属性ベース（ABAC）	複雑なルール	組織のメンバーシップ＋ロール＋リソースの状態
フィーチャーフラグ	段階的なロールアウト	プレミアム機能

停止 — 次の条件を満たすまでフェーズ 3 に進まないでください：

• すべての tRPC ルーターが Zod バリデーションとともに定義されている
• 適切なルートが認証ミドルウェアで保護されている
• ビジネスロジックがルーターではなくサービスレイヤーにある
• エラーハンドリングが構造化されたエラーを返す

---

フェーズ 3：UI レイヤー

目標： デフォルトではサーバーコンポーネントを使用し、インタラクティブな機能にはクライアントコンポーネントを使用してページを構築します。

アクション

1. サーバーコンポーネント（デフォルト）でページを構築する
2. インタラクティブな機能にクライアントコンポーネントを追加する
3. tRPC フック経由で API に接続する
4. 楽観的更新を実装する
5. ローディング状態とエラー状態を追加する

コンポーネントタイプの判断表

要件	コンポーネントタイプ	データソース
静的コンテンツ、データ表示	サーバーコンポーネント	DB/API を直接呼び出す
インタラクティブなフォーム	クライアントコンポーネント	tRPC ミューテーションフック
リアルタイム更新	クライアントコンポーネント	tRPC サブスクリプションまたはポーリング
検索／絞り込み	クライアントコンポーネント	デバウンス付き tRPC クエリ
ナビゲーションの共通部分	サーバーコンポーネント	セッションデータ

停止 — 次の条件を満たすまでフェーズ 4 に進まないでください：

• ページでデフォルトとしてサーバーコンポーネントを使用している
• クライアントコンポーネントが最小限で、その使用理由が明確である
• すべてのデータ取得経路にローディング状態とエラー状態がある
• ミューテーションの楽観的更新が機能する

---

フェーズ 4：本番環境

目標： 認証、モニタリング、CI/CD を整えてデプロイに備えます。

アクション

1. 認証を設定する（NextAuth.js / Clerk / Lucia）
2. デプロイを設定する（Vercel / Docker）
3. モニタリングとエラー追跡を追加する
4. CI/CD パイプラインを実装する
5. パフォーマンス監査を行う

認証ソリューションの選択表

ソリューション	最適な用途	SSR サポート	セルフホスト
NextAuth.js (Auth.js)	OAuth プロバイダー、JWT／セッション	はい	はい
Clerk	迅速なセットアップ、マネージドサービス	はい	いいえ
Lucia	カスタム、軽量	はい	はい
Supabase Auth	Supabase エコシステム	はい	一部

モニタリングチェックリスト

• ソースマップを使用したエラー追跡（Sentry）
• パフォーマンスモニタリング（Vercel Analytics またはカスタム）
• データベースクエリのパフォーマンス（Prisma メトリクス）
• API エンドポイントのレイテンシとエラー率
• 稼働状況のモニタリング（外部からの ping）
• 構造化ロギングによるログ集約
• エラー率急増時のアラート

Docker デプロイ

FROM node:20-alpine AS base
RUN corepack enable

FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm prisma generate
RUN pnpm build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

STOP — 次の条件を満たしたら本番環境の準備完了です：

• 認証の設定とテストが完了している
• デプロイパイプラインが機能する（プレビュー＋本番環境）
• モニタリングとアラートが有効になっている
• パフォーマンス監査が完了している

---

フルスタックの型安全性パイプライン

Prisma Schema -> Prisma Client (types) -> tRPC Router -> tRPC Hooks -> React Components
     |                  |                     |              |              |
  Migration        Type-safe DB          Validated API    Auto-typed    Rendered UI
                   queries               with Zod         queries

---

プロジェクト構成

prisma/
  schema.prisma
  migrations/
  seed.ts
src/
  app/                    # Next.js App Router
    (auth)/               # Auth route group
    (dashboard)/          # Protected route group
    api/trpc/[trpc]/      # tRPC handler
  server/
    db.ts                 # Prisma client singleton
    trpc.ts               # tRPC init
    routers/              # tRPC routers
    services/             # Business logic
  components/
    ui/                   # Design system atoms
    features/             # Feature components
  hooks/                  # Custom React hooks
  lib/
    trpc.ts               # tRPC client
    auth.ts               # Auth configuration
    validators.ts         # Zod schemas
tests/
  unit/
  integration/
  e2e/

---

アンチパターン／よくある間違い

アンチパターン	問題点	適切なアプローチ
コンポーネント内での生 SQL	型安全性とセキュリティを損ないます	tRPC 経由で Prisma を使用します
Server Components が使える場面でのクライアント側 fetch	不要な JavaScript が増え、遅くなります	静的データには Server Components を使用します
Prisma クライアントをフロントエンドと共有する	セキュリティ侵害につながり、データベースが露出します	Prisma はサーバーコード内でのみ使用します
外部キーのインデックス不足	JOIN と検索が遅くなります	すべての外部キーにインデックスを設定します
トークンを localStorage に保存する	XSS の脆弱性につながります	HttpOnly Cookie を使用します
Zod による検証を省略する	実行時に型エラーが発生します	API 境界ですべての入力を検証します
モノリシックな tRPC ルーター	保守が難しく、マージコンフリクトが発生します	ドメイン（user、post など）ごとに分割します
tRPC プロシージャ内にビジネスロジックを記述する	テストが難しく、再利用できません	サービスレイヤーに切り出します

---

ドキュメントの参照（Context7）

最新のドキュメントを確認するには、mcp__context7__resolve-library-id の後に mcp__context7__query-docs を使用します。返されたドキュメントは、記憶している知識より優先されます。

• react — コンポーネントのパターン、フック、または React 19 以降の機能について
• next.js — App Router、API ルート、またはサーバーコンポーネントについて
• prisma — スキーマ設計、クライアントクエリ、またはマイグレーションについて
• tailwindcss — ユーティリティファースト CSS のパターンまたは設定について

---

インテグレーションポイント

スキル	関係
senior-frontend	UI レイヤーはフロントエンドのパターンに従います
senior-backend	API レイヤーはバックエンドのパターンに従います
senior-architect	アーキテクチャの決定がサービス境界を導きます
security-review	認証の実装はセキュリティパターンに従います
testing-strategy	フルスタックテストでは戦略フレームワークを使用します
code-review	レビューではスタックのすべてのレイヤーを対象にします
performance-optimization	最適化はすべてのレイヤーに適用されます

---

主要原則

• データベースからブラウザーまで、単一の言語（TypeScript）を使用します
• スタック全体で型安全性を確保します（実行時の型の不一致を防ぎます）
• デフォルトでは Server Components を使用し、必要に応じて Client Components を使用します
• Zod を使用して API 境界ですべての入力を検証します
• すべてのクエリパターンに対応するデータベースインデックスを設定します
• 環境ベースの設定を使用します（ハードコードされた値は使用しません）

---

スキルタイプ

FLEXIBLE — 技術選定はプロジェクトの状況に合わせて調整してください。4 フェーズのプロセスを強く推奨します。スタック全体での型安全性は必須です。すべての API 入力を Zod で検証する必要があります。データベーススキーマの変更にはマイグレーションを使用する必要があります。