フロントエンド・PHPカンファレンス北海道2026
トーク(30分)
フロントエンド

Web × Native、APIクライアントはどこまで共通化の勘所

suguru_ohki スー suguru_ohki

フロントエンドが実装されている現場でネイティブアプリの話を出たことある人いますよね?
そんなひとは、React Nativeを併用するプロジェクトで、APIクライアントをどこまで共通化すべきか悩むことでしょう。
ちなみに私は悩みました・・・。

本セッションでは、OpenAPIスキーマを起点としたコード生成ツール(orval、openapi-typescript、openapi-fetchなど)を活用し、Web/Native間でAPIクライアントを共通化する戦略を4段階のレベルで整理します。

Lv.1: 型定義のみ共通
Lv.2: + fetcher関数も共通
Lv.3: + エラーハンドリング共通
Lv.4: + hooksまで完全共通

  • ネイティブアプリとフロントエンドのメンテは同一チームか別チームか
  • SSRは必要か
  • オフライン対応は必要か

などといったプロジェクト特性に応じた判断軸を示し、最適な共通化レベルを解説します。OpenAPIスキーマからフロントエンドで型安全なクライアントを自動生成する実践的なワークフローもご紹介します。