MOCA
Mobility Coordination App
オンデマンドバスの配車を、AIと地図でスマートに。
広島県東広島市福富町を舞台に、乗客の予約からルート最適化・オペレーター管理までを ワンストップで実現するモビリティ調整プラットフォームです。
システム構成
Next.js を中心に、DB・ルーティング・地図が連携するフルスタック構成
技術スタック
モダンなオープンソース技術を組み合わせたフルスタック構成
App Router・React Server Components・Route Handlers を活用したフルスタックフレームワーク
Server / Client Components の使い分けで、最小限の JS バンドルと高いインタラクティビティを両立
Zod スキーマと組み合わせた End-to-End 型安全。API リクエスト・レスポンスまで型が通る
PostgreSQL ベースの BaaS。リアルタイム DB・Row Level Security・型生成を利用
Open Source Routing Machine。OpenStreetMap データを使った高速ルート最適化エンジン
軽量インタラクティブ地図ライブラリ。SSR を避けた dynamic import でクライアント専用描画
@theme による CSS 変数ベースのデザイントークン管理。カラーパレットをプロジェクト全体で一元管理
API ルートの入力バリデーション。スキーマからエラーメッセージを自動生成し日本語化
すべてオープンソース技術で構築。外部サービス依存は Supabase のみ。
データフロー
予約からルート配車まで、データがどう流れるかをステップで追う
乗客が予約を入力
乗客はブラウザから乗降ポイント・希望時刻・人数を入力して送信
BookingForm コンポーネントが選択中のルートを受け取り、停留所の一覧を動的に表示。フォームは Zod スキーマでクライアント側でも検証されます。
// POST /api/reservations
{
passenger_name: "山田太郎",
pickup_stop_id: "uuid",
dropoff_stop_id: "uuid",
requested_pickup_time: "2026-01-27T09:00:00+09:00",
passenger_count: 1
}API 設計
全エンドポイントで統一されたレスポンス形式。Zod による入力検証を完備
{ success: true, data: {...}, message?: string }{ success: false, error: string, details?: [...] }/api/reservations?date=2026-01-27日付で絞り込んだ予約一覧を取得
{
"success": true,
"data": [
{
"id": "a1b2c3d4-...",
"passenger_name": "山田太郎",
"pickup_stop_id": "uuid",
"dropoff_stop_id": "uuid",
"requested_pickup_time": "2026-01-27T09:00:00+09:00",
"passenger_count": 1,
"status": "confirmed"
}
]
}実際に動かして
みてください
このデモ環境では乗客予約・ルート表示・オペレーター管理をすべて体験できます。
コードはすべて公開予定です。