Flutter & Dart Frog¶

KanjiIQはフロントエンドにFlutter、バックエンドにDart Frogを使用しています — 開発、テスト、デプロイメントを簡素化する統一されたDartエコシステムです。

Flutter Web¶

なぜFlutterなのか？¶

単一コードベース：1つのソースからWeb、iOS、Android、デスクトップに対応
Material Design 3：最小限のカスタムスタイリングでネイティブ感のあるUI
強力なi18nサポート：51言語の組み込みARBベースローカライゼーション
オフラインサポート：ローカルデータキャッシュ用のsqfliteパッケージによるSQLite

ビルドプロセス¶

Flutter Webは静的アセット（HTML、JS、CSS、画像）を生成し、Nginxで配信されます：

# From Dockerfile.frontend (simplified)
FROM ubuntu:22.04 AS builder
# Install Flutter SDK
RUN flutter gen-l10n          # Generate 51 localization files
RUN flutter build web --release

FROM nginx:alpine
COPY --from=builder /app/frontend/build/web /usr/share/nginx/html

ビルド引数：

API_URL — バックエンドAPIエンドポイント（デフォルトは相対パス/api/）
CACHEBUST — CI/CDで強制的に新しいビルドを行う（タイムスタンプベース）

状態管理¶

KanjiIQは状態管理にProviderを使用しています：

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => StudyProvider()),
    // Locale, connectivity, sync providers
  ],
  child: MyApp(),
)

Providerは代替手段（Riverpod、BLoC）よりもシンプルなため選択されました — KanjiIQの状態管理ニーズはシンプルです（フラッシュカードセッション状態、ロケール設定、接続状態）。

ルーティング¶

GoRouterが宣言的ルーティングを処理し、以下をサポートします：

ディープリンキング（URLベースのナビゲーション）
リダイレクトガード（認証チェック）
画面階層のネストされたルート

Dart Frogバックエンド¶

なぜDart Frogなのか？¶

フロントエンドと同じ言語：Dartモデルを共有可能
軽量：Express.jsに似た最小限のフレームワークオーバーヘッド
ミドルウェアベース：コンポーザブルなミドルウェアによるクリーンなリクエストパイプライン
ホットリロード：dart_frog devによる高速な開発イテレーション

リクエストライフサイクル¶

graph LR
    R[HTTP Request] --> MW[Middleware Stack]
    MW --> RH[Route Handler]
    RH --> DB[(PostgreSQL)]
    DB --> RH
    RH --> RS[JSON Response]

各ルートはroutes/ディレクトリ内のDartファイルです。Dart Frogはファイルベースのルーティングを使用します：

backend/routes/
├── _middleware.dart           # Global middleware
├── api/v1/
│   ├── kanji/
│   │   ├── index.dart         # GET /api/v1/kanji
│   │   ├── [id].dart          # GET /api/v1/kanji/:id
│   │   └── random/
│   │       └── index.dart     # GET /api/v1/kanji/random
│   └── admin/
│       ├── _middleware.dart    # Admin auth middleware
│       └── ...

ビルドプロセス¶

# From Dockerfile.backend (simplified)
FROM dart:stable AS builder
RUN dart pub global activate dart_frog_cli
RUN dart_frog build

FROM dart:stable
COPY --from=builder /app/build /app
CMD ["./server"]

ビルドステップはDartをスタンドアロンサーバーバイナリにコンパイルし、すべてのルートが事前登録されます。

共有Dartエコシステム¶

フロントエンドとバックエンドの両方が同じDartツーリングの恩恵を受けます：

ツール	用途
`dart analyze`	両方のコードベースにわたる静的分析
`dart format`	一貫したコードスタイル
`dart test`	ユニットテストと統合テスト
`pub.dev`	共有パッケージリポジトリ

モバイル対応¶

Flutterフロントエンドはマルチプラットフォームデプロイメント向けに設計されています：

Web：現在デプロイ済み（主要ターゲット）
iOS/Android：flutter build apk / flutter build ipaでビルド可能
デスクトップ：flutter build macos / linux / windowsでサポート

オフラインファーストアーキテクチャ（SQLiteキャッシュ、接続検出、バックグラウンド同期）は最初からモバイルを念頭に設計されています。