一般向けサービス
Web+スマホアプリ
推奨:TypeScript
推奨
TypeScript
- フロントと同じ言語に揃えられ、API呼び出し中心の処理に向くTypeScript(§2-10 手順2)
構成行を開くと詳細(乗り換える条件・根拠・費用・習熟度)
WebNext.js
Next.js
既定:アプリ(SSR・フルスタック)フロントエンド
乗り換える条件
- TanStack StartVercel依存を避けたい、クライアント主体で型安全なルーティングを重視するとき
- React Router(フレームワークモード)Remix系の資産があるとき
代替:画面Elixir(BEAM)
既定は Phoenix LiveView(サーバー主導でリアルタイムUI)。フロントをReactで作りたいとき に乗り換える。
成長したら → ECS/Cloud Run(コンテナ)§24
- きっかけ
- 費用の増加、AWSに集約したい
- 最初からの備え
- Next.jsのstandalone出力でコンテナ化できる状態を保つ。Vercel固有の機能への依存を最小にする
ケース別の構成§19
- EC(独自要件が多い)フロント:Next.js+shadcn/ui
- 自社SaaS(B2B)フロント:Next.js+shadcn/ui+TanStack Query
- toCサービス(Web+モバイル)Web:Next.js
- AI/LLMプロダクトフロント:Next.js(ストリーミング表示)
- 個人開発・MVPTS全部入り:Next.js+Supabase+Vercel
習熟度
モバイルReact Native+Expo(Expo Router、NativeWind)
React Native
既定:クロスプラットフォームモバイルアプリ
乗り換える条件
- Flutterデザインの完全な一貫性を重視し、Dartを受け入れられるとき
- Hotwire NativeRailsで作っていて画面の多くがWebで済むとき
代替:モバイルRuby / Rails
既定は Hotwire Native。ネイティブ体験を重視するとき に乗り換える。
ケース別の構成§19
- toCサービス(Web+モバイル)モバイル:React Native+Expo(Expo Router、NativeWind)
- モバイルアプリ単体アプリ:React Native+Expo(Expo Router、NativeWind)
習熟度
Expo
既定:クロスプラットフォームモバイルアプリ
乗り換える条件
- Flutterデザインの完全な一貫性を重視し、Dartを受け入れられるとき
- Hotwire NativeRailsで作っていて画面の多くがWebで済むとき
ケース別の構成§19
- toCサービス(Web+モバイル)モバイル:React Native+Expo(Expo Router、NativeWind)
- モバイルアプリ単体アプリ:React Native+Expo(Expo Router、NativeWind)
習熟度
Expo Router
既定:ナビゲーションモバイルアプリ
ケース別の構成§19
- toCサービス(Web+モバイル)モバイル:React Native+Expo(Expo Router、NativeWind)
- モバイルアプリ単体アプリ:React Native+Expo(Expo Router、NativeWind)
NativeWind
既定:スタイルモバイルアプリ
ケース別の構成§19
- toCサービス(Web+モバイル)モバイル:React Native+Expo(Expo Router、NativeWind)
- モバイルアプリ単体アプリ:React Native+Expo(Expo Router、NativeWind)
バックエンドHono(またはGo)
Hono
既定:HTTPフレームワークTypeScript(Node.js)
乗り換える条件
ケース別の構成§19
習熟度
Go
言語別の既定§2-2
選ぶ場面§2-10
- Kubernetes・クラウドのコントロールプレーンを扱う
- 中程度の常時接続+高スループットgoroutineで並行処理が簡潔に書け、運用も単純
- サービス間のRPCProtocol Buffers周りのツールが充実し、単一バイナリで配りやすい
既定:インフラ系ツール(Kubernetes Operator、Terraformプロバイダ等)作成物ごとの言語の決め方
代替:一般的なWeb API・SaaSのバックエンド作成物ごとの言語の決め方
既定は TypeScript(フロントと1言語に揃う)。3人以上で公開APIを長期運用するとき(§2-10 手順3) に乗り換える。
代替:開発者向けツール(Linter、フォーマッタ、ビルドツール、パーサ)作成物ごとの言語の決め方
既定は Rust。処理が軽く、開発速度を優先したいとき に乗り換える。
代替:データベース・検索エンジン等の基盤ソフト作成物ごとの言語の決め方
既定は Rust。GCの影響が許容できる分散系の制御部分 に乗り換える。
代替:スクリプト・社内の小さな自動化作成物ごとの言語の決め方
既定は TypeScript(Node.jsで直接実行、またはBun)。単一バイナリで配りたいとき に乗り換える。
採用の根拠§22-2
単一バイナリで配布でき、実行時の依存がない。メモリ使用量が小さく、同時接続に強い。Go 1互換性の約束により、長期間コードが壊れにくい。Docker、Kubernetes、TerraformなどインフラOSSの多くがGoで書かれている
「人材が少ないのでは」→ 言語仕様が小さく、他言語経験者なら短期間で読み書きできる
ケース別の構成§19
習熟度
DB・認証・ストレージSupabase(小〜中規模)/ RDS+Clerk+S3(中規模以上)
Supabase
代替:本番ホスティング(PaaS)DB本体とホスティング
既定は Neon(ブランチ機能でPRごとにDBを複製できる)。認証・ストレージ・リアルタイムも一緒に欲しいとき に乗り換える。
RDS
既定:AWSを使うどこで動かすか
乗り換える条件
- Lambdaリクエストがまばらでコールドスタートを許容できるとき
- ECS Express Mode構成を最小にしたい小規模案件
App Runnerは新規受付を終了したため選ばない
Clerk
ケース別の構成§19
習熟度
S3
既定:オブジェクトストレージ(AWS)ファイル・画像・動画
費用の注意§25
- 主な課金の軸
- 保存量、リクエスト数、データ転送
- 膨らみやすい要因
- 外部への大量配信
- 対策
- CloudFront経由で配信する。配信が多いならR2を検討する
プッシュ通知FCM(Expo Notifications)
FCM
既定:プッシュ通知メール・通知
ケース別の構成§19
- toCサービス(Web+モバイル)プッシュ通知:FCM(Expo Notifications)
- モバイルアプリ単体プッシュ通知:FCM(Expo Notifications経由)
Expo Notifications
既定:プッシュ通知メール・通知
画像・動画Cloudflare Images/Cloudflare Stream
Cloudflare Images
ケース別の構成§19
- EC(独自要件が多い)画像:Cloudflare Images
- toCサービス(Web+モバイル)画像・動画:Cloudflare Images/Cloudflare Stream
Cloudflare Stream
ケース別の構成§19
- toCサービス(Web+モバイル)画像・動画:Cloudflare Images/Cloudflare Stream
分析PostHog
PostHog
既定:Webサイトのアクセス解析プロダクト分析・機能フラグ
乗り換える条件
- Cloudflare Web Analytics静的サイトでCookieなしの最小限の計測だけ欲しいとき
- Plausibleセルフホストもできる軽量な解析が欲しいとき
- GA4取引先やマーケティング担当がGA4のレポートを求めるとき
既定:A/Bテストプロダクト分析・機能フラグ
ケース別の構成§19
- 自社SaaS(B2B)分析・機能フラグ:PostHog
- toCサービス(Web+モバイル)分析:PostHog
- モバイルアプリ単体分析:PostHog
習熟度
配信EAS Build/Submit/Update
EAS Build
既定:ビルド・配信モバイルアプリ
ケース別の構成§19
- toCサービス(Web+モバイル)配信:EAS Build/Submit/Update
- モバイルアプリ単体配信:EAS Build/Submit/Update
EAS Submit
既定:ビルド・配信モバイルアプリ
EAS Update
既定:OTA更新モバイルアプリ
§19-7の構成
構成図 toCサービス(Web+モバイル)
flowchart TB
WEB["Next.js"] --> API["Hono/Go API"]
APP["Expo アプリ"] --> API
API --> SB[("Supabase<br/>DB・Auth・Storage")]
API --> FCM["FCM"] -. "プッシュ通知" .-> APP
API --> CFI["Cloudflare Images/Stream"]作り始める
共通の準備
# 言語・ツールのバージョン固定(使う言語だけ)
mise use node@lts pnpm@latest
mise use go@latest
mise use ruby@latest
mise use python@latest uv@latest
# Gitフックと依存更新
pnpm add -D lefthook && pnpm exec lefthook install
# renovate.json を置き、GitHubでRenovateアプリを有効化するtoCサービス(§19-7)
npx create-expo-app@latest mobile
pnpm create next-app@latest web
npx supabase init