マルチレポだってスキーマ駆動開発がしたい！

スキーマ駆動開発とは？ API のスキーマを最初に定義して、定義をもとに FE や BE の開発を進める開発手法はじめに API のスキーマ定義をするため、FE
<-> BE 間における API 仕様のずれを防ぐことができる FE は API スキーマを参考に、BE の実装を待たずして作業を進められる（MSW 等のモックを利用）

案件での課題と背景 ①API 定義に Open API を利用しているが、API の型定義（呼び出し処理等）を自前で作成している作成・管理コストが都度発生 ②FE
と BE で Repo が独立しており（マルチレポ）、同じ型定義を別々に作成が必要 FE と BE での定義のずれ、認識齟齬による手戻り

背景と課題 ①API 定義に Open API を利用しているが、API の型定義を自前で用意している作成・管理コストが都度発生型定義の自動生成ライブラリを利用して自動化したい ②FE
と BE で Repo が独立しており、別々に作成が必要 FE と BE での定義のずれ、認識齟齬による手戻り Npm パッケージ化して FE と BE の Repo で共通化させたい

① クライアントコードの自動生成ライブラリ選定自動生成用のライブラリの選択肢はいくつかあるが今回は Orval を選定 API のクライアントコードだけでなく fetching ライブラリ（Tanstack
Query, SWR）のカスタム hooks も自動生成可能メンテナンスが活発 ※ Issue をあげたところ翌日には PR が上がってスムーズにマージされた

① クライアントコードの自動生成その他のライブラリ Open API Generator この手のライブラリでは最も老舗っぽく、情報も多い出力されるファイルが多かったり、実行速度が比較的遅いなどの課題あり Open API
TypeScript Orval の時点で選ぶならこれ Swagger Codegen Swagger TypeScript API ...etc

脱線 Orval 語源ほかのトラピスト醸造所と違い、オルヴァル修道院が造っているビールはたった 1 種類だけ。敷地内にあるマチルドの泉には１０７６年にここを訪れたイタリアの伯爵夫人が結婚指輪を落とし、鱒がくわえて上がってきたという伝説が残っいる。 https://www.belgianbeer.co.jp/products/list.php?category_id=274

閑話休題

② マルチレポでのパッケージ共有 Npm パッケージ管理・公開には GitHub Packages を利用。パッケージ化したコードを public または
private にホストして利用することができる GitHub 公式のサービス特定の org 内でのみ利用可能なパッケージをホストすることができる npm や RubyGems などの各言語の標準的なパッケージ管理サービスをサポート

② マルチレポでのパッケージ共有パッケージの公開・利用手順は記事が詳しい。（本 LT では割愛） GitHub Packages の
npm レジストリを使って、社内 org 用のプライベートパッケージを公開する手順とインストールする手順

コード自動生成＆パッケージ共有のイメージ

導入手順パッケージ公開新規 Repo 作成。Orval 等インストール、セットアップ PAT（Github Personal Token）作成パッケージ公開の
CI 整備パッケージのバージョン更新の基準にはセマンティックバージョニングを利用し、 PR の Label でどの � バージョンの更新かを判定する方針をとる PR に適切な Label が付与されているかをチェックする GHA は以下バージョンを更新し、パッケージを公開する GHA は以下

導入手順パッケージの利用（インストール）各メンバーに以下作業を依頼 PAT の作成以下の権限を設定 repo read:packages 利用しているシェルへ環境変数として PAT
を登録各 CI 環境に PAT を登録（AWS Code Build, GHA）

悩み・苦労した点 Npm パッケージをどのような形で公開するか？ JS にして公開するか、TS のまま公開するか？モジュールはすべてバンドルするか？分けるとしたらパスはどう設計するか？クライアントコード自動生成ライブラリ＆マルチレポのケースの事例が少ない Orval で生成した
Tanstack Query の hooks コードをパッケージ化した際の呼び出しに一工夫必要(クエリキーや認証情報の渡し方等)

今後の展望 FE・BE の既存コードのリファクタ（自作の型定義の置き換え） Tanstack Query のカスタム Hooks コードを自動生成したものに置き換え API の
Mock データ（MSW）コードも自動生成したものに API スキーマを追加すると、型定義＆API 処理のカスタム Hooks＆Mock データが全て自動生成されてスキーマ駆動開発が実現（理想）

マルチレポだってスキーマ駆動開発がしたい！

マルチレポだってスキーマ駆動開発がしたい！

mimu

More Decks by mimu

Other Decks in Programming

Featured

Transcript