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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
mimu
July 01, 2024
Programming
0
56
マルチレポだってスキーマ駆動開発がしたい!
mimu
July 01, 2024
Tweet
Share
More Decks by mimu
See All by mimu
TypeScriptのバックエンド開発について
mmrakt
0
64
lt.pdf
mmrakt
0
27
npm/Yarn/pnpmゆるふわ解説
mmrakt
0
1.3k
Type Script型パズル(?)超入門
mmrakt
0
84
まだWebpackで消耗してるの?
mmrakt
0
89
Other Decks in Programming
See All in Programming
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
380
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
440
CSC307 Lecture 09
javiergs
PRO
1
830
CSC307 Lecture 07
javiergs
PRO
0
550
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
540
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
4
220
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
170
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
220
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう!
neruneruo
4
2.7k
AIによる高速開発をどう制御するか? ガードレール設置で開発速度と品質を両立させたチームの事例
tonkotsuboy_com
5
1.5k
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6k
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
110
Featured
See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
The Cost Of JavaScript in 2023
addyosmani
55
9.5k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
640
Making the Leap to Tech Lead
cromwellryan
135
9.7k
Building Applications with DynamoDB
mza
96
6.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
What does AI have to do with Human Rights?
axbom
PRO
0
2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Site-Speed That Sticks
csswizardry
13
1.1k
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