Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
マルチレポだってスキーマ駆動開発がしたい!
Search
mimu
July 01, 2024
Programming
0
14
マルチレポだってスキーマ駆動開発がしたい!
mimu
July 01, 2024
Tweet
Share
More Decks by mimu
See All by mimu
TypeScriptのバックエンド開発について
mmrakt
0
27
lt.pdf
mmrakt
0
18
npm/Yarn/pnpmゆるふわ解説
mmrakt
0
1.2k
Type Script型パズル(?)超入門
mmrakt
0
72
まだWebpackで消耗してるの?
mmrakt
0
81
Other Decks in Programming
See All in Programming
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
480
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
120
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
230
止められない医療アプリ、そっと Swift 6 へ
medley
1
170
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
810
CSC509 Lecture 05
javiergs
PRO
0
300
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.1k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Docker and Python
trallard
46
3.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Leading Effective Engineering Teams in the AI Era
addyosmani
2
320
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Transcript
マルチレポだってスキーマ駆動開発がしたい!
スキーマ駆動開発とは? 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 種類 だけ。敷地内にあるマチルドの泉には1076年にここを訪れたイタリアの伯爵夫人が 結婚指輪を落とし、鱒がくわえて上がってきたという伝説が残っいる。 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 データが全て自 動生成されてスキーマ駆動開発が実現(理想)
EOF