スタートアップ技術スタック選択ガイド2025：0→1からシリーズBまでの技術意思決定

┌─────────────────────────────────────────────────────┐
│         イノベーショントークン配分例                      │
├─────────────────────────────────────────────────────┤
│                                                     │
│  保有イノベーショントークン: 3個                         │
│                                                     │
│  良い例:                                             │
│  ├── ビジネスモデル (革新) ......... トークン1個使用   │
│  ├── PostgreSQL (退屈な技術) ....... トークン0個      │
│  ├── Next.js (実績あり) ........... トークン0個       │
│  ├── 独自MLパイプライン (革新) ..... トークン1個使用   │
│  └── 残りトークン: 1個（予備）                        │
│                                                     │
│  悪い例:                                             │
│  ├── ビジネスモデル (革新) ......... トークン1個使用   │
│  ├── CockroachDB (新しい) ......... トークン1個使用   │
│  ├── Bun Runtime (新しい) ......... トークン1個使用   │
│  ├── 独自MLパイプライン (革新) ..... トークン不足!     │
│  └── 残りトークン: 0個（危険）                        │
│                                                     │
└─────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────┐
│       アーキテクチャ進化パス                         │
│                                                  │
│  Stage 0: モノリス (MVP)                           │
│  ├── 単一のNext.jsアプリ                           │
│  ├── 単一のDB (Supabase)                          │
│  └── 単一のデプロイ (Vercel)                       │
│           │                                       │
│           ▼ (PMF達成)                              │
│  Stage 1: モジュラーモノリス                        │
│  ├── ドメイン別モジュール分離                       │
│  ├── 内部API境界の定義                             │
│  └── DBスキーマ分離開始                             │
│           │                                       │
│           ▼ (チーム10名+, トラフィック急増)           │
│  Stage 2: 選択的サービス分離                        │
│  ├── ボトルネックサービスのみ分離                    │
│  ├── イベント駆動の非同期処理導入                    │
│  └── キャッシュレイヤー追加                         │
│           │                                       │
│           ▼ (チーム30名+, グローバル展開)            │
│  Stage 3: MSA (必要な場合のみ)                      │
│  ├── 独立デプロイ可能なサービス群                    │
│  ├── サービスメッシュ                               │
│  └── 集中型オブザーバビリティ                       │
└──────────────────────────────────────────────────┘

┌───────────────────────────────────────────────┐
│           MVP技術スタック (2025)                 │
├───────────────────────────────────────────────┤
│                                               │
│  Frontend:  Next.js 15 (App Router)           │
│  Styling:   Tailwind CSS + shadcn/ui          │
│  Backend:   Next.js API Routes / Server Actions│
│  Database:  Supabase (PostgreSQL)             │
│  Auth:      Supabase Auth / NextAuth.js       │
│  Storage:   Supabase Storage / Cloudflare R2  │
│  Deploy:    Vercel                            │
│  Analytics: PostHog (セルフホスト) / Plausible  │
│  Payments:  Stripe                            │
│  Email:     Resend                            │
│  Monitoring: Vercel Analytics + Sentry        │
│                                               │
│  月額合計コスト: 0 ~ 50 USD                     │
│  (Vercel Free + Supabase Free Tier)           │
│                                               │
└───────────────────────────────────────────────┘

# プロジェクト作成
npx create-next-app@latest my-startup --typescript --tailwind --app --src-dir
cd my-startup

# コア依存関係のインストール
npm install @supabase/supabase-js @supabase/ssr
npm install stripe @stripe/stripe-js
npm install resend
npm install zod react-hook-form @hookform/resolvers

# UIライブラリ
npx shadcn@latest init
npx shadcn@latest add button card input form dialog toast

# 開発ツール
npm install -D prettier eslint-config-prettier
npm install -D @types/node

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // Server Componentではset不可 - 無視
          }
        },
      },
    }
  )
}

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

// src/app/auth/login/page.tsx
'use client'

import { createClient } from '@/lib/supabase/client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const router = useRouter()
  const supabase = createClient()

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })

    if (error) {
      alert(error.message)
    } else {
      router.push('/dashboard')
      router.refresh()
    }
    setLoading(false)
  }

  const handleGoogleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: `${window.location.origin}/auth/callback`,
      },
    })
  }

  return (
    <div className="flex min-h-screen items-center justify-center">
      <form onSubmit={handleLogin} className="w-full max-w-md space-y-4 p-8">
        <h1 className="text-2xl font-bold">ログイン</h1>
        <input
          type="email"
          placeholder="メールアドレス"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full rounded border p-2"
          required
        />
        <input
          type="password"
          placeholder="パスワード"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full rounded border p-2"
          required
        />
        <button
          type="submit"
          disabled={loading}
          className="w-full rounded bg-blue-600 p-2 text-white"
        >
          {loading ? 'ログイン中...' : 'ログイン'}
        </button>
        <button
          type="button"
          onClick={handleGoogleLogin}
          className="w-full rounded border p-2"
        >
          Googleでログイン
        </button>
      </form>
    </div>
  )
}

// src/app/api/stripe/checkout/route.ts
import { NextRequest, NextResponse } from 'next/server'
import Stripe from 'stripe'
import { createClient } from '@/lib/supabase/server'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: NextRequest) {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()

  if (!user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

  const { priceId } = await req.json()

  const session = await stripe.checkout.sessions.create({
    customer_email: user.email,
    line_items: [{ price: priceId, quantity: 1 }],
    mode: 'subscription',
    success_url: `${req.nextUrl.origin}/dashboard?success=true`,
    cancel_url: `${req.nextUrl.origin}/pricing?canceled=true`,
    metadata: {
      userId: user.id,
    },
  })

  return NextResponse.json({ url: session.url })
}

┌───────────────────────────────────────────────┐
│      Stage 1 技術スタックアップグレード            │
├───────────────────────────────────────────────┤
│                                               │
│  Database:   Supabase Pro → より大きなインスタンス│
│  Cache:      + Redis (Upstash)                │
│  Queue:      + BullMQ (Redisベース)            │
│  Search:     + Meilisearch / Typesense        │
│  CDN:        + Cloudflare                     │
│  Monitoring: + Better Stack / Grafana Cloud   │
│  CI/CD:      GitHub Actions高度化              │
│  Error:      Sentry Pro                       │
│                                               │
│  月額コスト: 200 ~ 500 USD                      │
└───────────────────────────────────────────────┘

// src/lib/cache.ts
import { Redis } from '@upstash/redis'

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
})

export async function getCached<T>(
  key: string,
  fetcher: () => Promise<T>,
  ttl: number = 3600 // 1時間
): Promise<T> {
  const cached = await redis.get<T>(key)
  if (cached !== null) {
    return cached
  }

  const data = await fetcher()
  await redis.set(key, data, { ex: ttl })

  return data
}

export async function invalidateCache(pattern: string) {
  const keys = await redis.keys(pattern)
  if (keys.length > 0) {
    await redis.del(...keys)
  }
}

-- インデックス最適化
CREATE INDEX CONCURRENTLY idx_users_email ON users(email);
CREATE INDEX CONCURRENTLY idx_orders_user_created
  ON orders(user_id, created_at DESC);
CREATE INDEX CONCURRENTLY idx_products_category_status
  ON products(category_id, status) WHERE status = 'active';

-- パーティショニング（イベントテーブルが大きくなった時）
CREATE TABLE events (
  id BIGSERIAL,
  user_id UUID NOT NULL,
  event_type TEXT NOT NULL,
  payload JSONB,
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
) PARTITION BY RANGE (created_at);

CREATE TABLE events_2025_01 PARTITION OF events
  FOR VALUES FROM ('2025-01-01') TO ('2025-02-01');
CREATE TABLE events_2025_02 PARTITION OF events
  FOR VALUES FROM ('2025-02-01') TO ('2025-03-01');

┌───────────────────────────────────────────────┐
│         Stage 2 技術スタック                     │
├───────────────────────────────────────────────┤
│                                               │
│  Compute:     AWS ECS Fargate / GKE           │
│  Database:    RDS PostgreSQL Multi-AZ         │
│  Cache:       ElastiCache Redis Cluster       │
│  CDN:         CloudFront + S3                 │
│  Queue:       SQS / RabbitMQ                  │
│  Search:      ElasticSearch / OpenSearch      │
│  CI/CD:       GitHub Actions + ArgoCD         │
│  Monitoring:  Datadog / Grafana Stack         │
│  Log:         CloudWatch / Loki               │
│  IaC:         Terraform                       │
│                                               │
│  チーム規模: 10〜30名                            │
│  月額コスト: 2,000 ~ 10,000 USD                 │
└───────────────────────────────────────────────┘

# k8s/deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: api-server
spec:
  replicas: 3
  selector:
    matchLabels:
      app: api-server
  template:
    metadata:
      labels:
        app: api-server
    spec:
      containers:
      - name: api
        image: my-registry/api-server:latest
        ports:
        - containerPort: 3000
        resources:
          requests:
            memory: "256Mi"
            cpu: "250m"
          limits:
            memory: "512Mi"
            cpu: "500m"
        readinessProbe:
          httpGet:
            path: /health
            port: 3000
          initialDelaySeconds: 5
          periodSeconds: 10
        livenessProbe:
          httpGet:
            path: /health
            port: 3000
          initialDelaySeconds: 15
          periodSeconds: 20
---
apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: api-server-hpa
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: api-server
  minReplicas: 3
  maxReplicas: 20
  metrics:
  - type: Resource
    resource:
      name: cpu
      target:
        type: Utilization
        averageUtilization: 70

# terraform/main.tf
terraform {
  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 5.0"
    }
  }
}

resource "aws_db_instance" "main" {
  identifier     = "my-startup-production"
  engine         = "postgres"
  engine_version = "16.1"
  instance_class = "db.r6g.large"

  allocated_storage     = 100
  max_allocated_storage = 500
  storage_encrypted     = true

  multi_az               = true
  backup_retention_period = 14

  performance_insights_enabled = true
  monitoring_interval          = 60
}

resource "aws_elasticache_replication_group" "main" {
  replication_group_id       = "my-startup-cache"
  description                = "Redis cache cluster"
  node_type                  = "cache.r6g.large"
  num_cache_clusters         = 2
  automatic_failover_enabled = true
  multi_az_enabled           = true
  engine_version             = "7.0"
  port                       = 6379

  at_rest_encryption_enabled = true
  transit_encryption_enabled = true
}

┌─────────────────────────────────────────────────────────┐
│                Stage 3 アーキテクチャ                      │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐          │
│  │CloudFront│───>│ ALB/NLB  │───>│ K8s      │          │
│  │  + WAF   │    │          │    │ Cluster  │          │
│  └──────────┘    └──────────┘    └──────────┘          │
│                                       │                 │
│                     ┌─────────────────┼──────────┐     │
│                     ▼                 ▼          ▼     │
│              ┌───────────┐   ┌───────────┐ ┌────────┐ │
│              │API Gateway│   │  Worker    │ │ Cron   │ │
│              │  Service  │   │  Service   │ │Service │ │
│              └─────┬─────┘   └─────┬─────┘ └───┬────┘ │
│                    │               │            │      │
│      ┌─────────────┼───────────────┼────────────┤     │
│      ▼             ▼               ▼            ▼     │
│  ┌────────┐  ┌─────────┐   ┌──────────┐  ┌────────┐ │
│  │RDS     │  │Redis    │   │  Kafka   │  │  S3    │ │
│  │Multi-AZ│  │Cluster  │   │ Cluster  │  │        │ │
│  └────────┘  └─────────┘   └──────────┘  └────────┘ │
│                                    │                  │
│                              ┌─────┴─────┐           │
│                              │ElasticSearch│           │
│                              │  Cluster   │           │
│                              └───────────┘           │
│                                                       │
│  チーム規模: 30名以上                                   │
│  月額コスト: 10,000 USD以上                              │
└─────────────────────────────────────────────────────────┘

// src/events/producer.ts
import { Kafka, Partitioners } from 'kafkajs'

const kafka = new Kafka({
  clientId: 'my-startup',
  brokers: (process.env.KAFKA_BROKERS || '').split(','),
  ssl: true,
  sasl: {
    mechanism: 'scram-sha-256',
    username: process.env.KAFKA_USERNAME!,
    password: process.env.KAFKA_PASSWORD!,
  },
})

const producer = kafka.producer({
  createPartitioner: Partitioners.DefaultPartitioner,
  idempotent: true,
})

export async function publishEvent(topic: string, event: {
  type: string
  payload: Record<string, unknown>
}) {
  await producer.connect()

  const message = {
    key: event.payload.id as string || crypto.randomUUID(),
    value: JSON.stringify({
      ...event,
      timestamp: new Date().toISOString(),
      version: '1.0',
    }),
    headers: {
      'event-type': event.type,
      'content-type': 'application/json',
    },
  }

  await producer.send({ topic, messages: [message] })
}

// Zustandの例 - シンプルなストア
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface CartStore {
  items: Array<{ id: string; name: string; price: number; quantity: number }>
  addItem: (item: { id: string; name: string; price: number }) => void
  removeItem: (id: string) => void
  clearCart: () => void
  total: () => number
}

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) =>
        set((state) => {
          const existing = state.items.find((i) => i.id === item.id)
          if (existing) {
            return {
              items: state.items.map((i) =>
                i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
              ),
            }
          }
          return { items: [...state.items, { ...item, quantity: 1 }] }
        }),
      removeItem: (id) =>
        set((state) => ({
          items: state.items.filter((i) => i.id !== id),
        })),
      clearCart: () => set({ items: [] }),
      total: () =>
        get().items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    }),
    { name: 'cart-storage' }
  )
)

B2C SaaS → Node.js (TypeScript) + Next.js
├── フルスタック1名で全てを構築可能
├── Vercelデプロイでインフラの心配を最小化
└── フロントエンド・バックエンドの型共有

B2B SaaS → Node.js or Go
├── APIパフォーマンスが重要ならGo
├── 迅速な機能開発が重要ならNode.js
└── どちらも良い選択

AI/MLスタートアップ → Python + TypeScript
├── MLパイプラインはPython
├── APIサーバーはFastAPI (Python) またはNext.js (TS)
└── フロントエンドはNext.js

フィンテック → Go or Java/Kotlin
├── 高い性能と安定性が必要
├── 静的型システムの安全性
└── 金融規制対応に強いエコシステム

Redis導入が必要な時：
├── 同じクエリが毎秒100回以上実行される時
├── APIレスポンス時間が500msを超える時
├── セッション管理が必要な時
├── リアルタイム機能（リーダーボード、カウンター等）が必要な時
├── レートリミットが必要な時
└── 分散ロックが必要な時

Redisがまだ不要な時：
├── DAU 1,000以下
├── DBクエリが20ms以内
├── Next.jsの組み込みキャッシュで十分な時
└── コストが制約になる時

Vercel/RailwayからAWS/GCPへ移行すべき時：

1. コスト閾値
   ├── Vercel Proのコストが月500ドルを超える時
   ├── 帯域幅コストがコンピューティングより高い時
   └── 関数実行時間の制限に引っかかる時

2. 技術的要件
   ├── ロングランニングプロセスが必要な時（5分以上）
   ├── WebSocketがコア機能の時
   ├── GPUコンピューティングが必要な時
   └── カスタムネットワーク構成が必要な時

3. 規制/コンプライアンス
   ├── データ保存場所の規制
   ├── SOC 2、HIPAA等の認証が必要な時
   └── VPC隔離が必要な時

移行不要な場合：
├── 月額コスト500ドル以下
├── サーバーレスアーキテクチャで十分
├── DevOps専任者がいない
└── トラフィックが予測可能で安定

採用が容易なスタック：
├── Next.js + TypeScript（フロント）
├── Node.js + Express/Nest.js（バックエンド）
├── PostgreSQL / MySQL（DB）
├── Redis（キャッシュ）
├── Docker + GitHub Actions（DevOps）
└── AWS（インフラ）

採用が困難なスタック：
├── Svelte / SolidJS（フロント）
├── Rust / Elixir（バックエンド）
├── CockroachDB / ScyllaDB（DB）
├── Nomad / Consul（オーケストレーション）
└── Pulumi / CDK（IaC）

悪い意思決定パターン：
├── "K8sの経験を積みたい" → K8s導入 (DAU 100)
├── "Rustがトレンドだから" → RustでAPIサーバー (チーム2名)
├── "MSAが正統だから" → 3名で10サービス運用
├── "GraphQLが良いらしい" → シンプルCRUDにGraphQL
└── "Googleがモノレポを使っている" → 3名チームにTurborepo

正しい意思決定：
├── "この問題を解決する最もシンプルな方法は？"
├── "6ヶ月後もメンテナンスできるか？"
├── "チームメンバーが既に慣れた技術か？"
├── "採用が容易な技術か？"
└── "移行コストは許容範囲か？"

Vercel (Next.js開発元):
├── Frontend: Next.js（自社製品）
├── Backend: Go + Node.js
├── Database: PlanetScale (MySQL) → Neon (PostgreSQL)
├── Cache: Redis (Upstash)
├── Monorepo: Turborepoベース
├── Deploy: 自社プラットフォーム
├── Monitoring: 自社構築 + Datadog
└── 特徴: 自社製品を積極活用（ドッグフーディング）

Linear (プロジェクト管理ツール):
├── Frontend: React + TypeScript
├── Backend: Node.js + TypeScript
├── Database: PostgreSQL
├── Cache: Redis
├── Sync: CRDTベースのリアルタイム同期
├── Deploy: Google Cloud
├── Monitoring: 自社構築
└── 特徴: オフラインファースト、ローカルデータ優先

Cal.com (オープンソースのスケジュール管理):
├── Frontend: Next.js + TypeScript
├── Backend: tRPC + Prisma
├── Database: PostgreSQL
├── Auth: NextAuth.js
├── Deploy: Vercel
├── Monorepo: Turborepo
└── 特徴: オープンソース、モノレポ、tRPCで型安全