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
OpenAPIコード生成ライブラリを 『Orval』に移行した理由
Search
ytaisei
April 23, 2023
Technology
2
4.4k
OpenAPIコード生成ライブラリを 『Orval』に移行した理由
2023年「春のJavaScript祭り」のLT登壇資料。
概要:OpenAPIからのコード自動生成ライブラリをopenapi-generatorからOrvalに移行した理由と効果について
ytaisei
April 23, 2023
Tweet
Share
More Decks by ytaisei
See All by ytaisei
TanStack Routerを新規プロダクトで1年間運用してみた結果
ytaisei
1
120
Reactを段階的に覗いてみる
ytaisei
3
1.5k
Reactのトランジションを覗いてみる
ytaisei
1
2k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
200
React19で状態管理はどう変わるか
ytaisei
2
160
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
1.9k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.8k
BunがCommonJSをサポートする理由
ytaisei
2
360
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.4k
Other Decks in Technology
See All in Technology
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.2k
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
180
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
450
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
20
5.7k
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
270
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
370
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
220
AI工学特論: MLOps・継続的評価
asei
10
1.2k
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
2
270
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
180
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.2k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Become a Pro
speakerdeck
PRO
29
5.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Fireside Chat
paigeccino
37
3.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Why Our Code Smells
bkeepers
PRO
337
57k
GitHub's CSS Performance
jonrohan
1031
460k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Transcript
OpenAPIコード生成ライブラリを 『Orval』に移行した理由 早稲田大学4年 安井大晟(ytaisei) 1
TABLE OF CONTENTS 自己紹介 01 Orvalとは? 03 抱えていた課題 02 効果検証
プロダクトが抱えていた 課題を整理 04 Orvalの特徴を紹介 他の自動生成ライブラリとの違 いは 導入後の効果 2
自己紹介 01 3
自己紹介 2019年:早稲田大学教育学部入学(元教員志望) 2021年:42Tokyo入学 2022年:エンジニアを目指し休学 学生ピッチコンテスト等で受賞 2023年:SaaS企業インターン 4
抱えていた課題 プロダクトが抱えていた課題を整理 02 5
TypeScript (前提)使用している技術 Axios HTTPクライアント コード生成ライブラリ openapi-generator テスト Testing Library 言語
非同期状態管理 React Query UIライブラリ React 6
TypeScript (前提)使用している技術 Axios HTTPクライアント コード生成ライブラリ Orval テスト Testing Library 言語
非同期状態管理 React Query UIライブラリ React 7
React QueryのQuery Keyを 安全に管理できていなかった 抱えていた課題 課題1 課題2 Openapi-generator の使いづらさ ライブラリに対する不満
React Queryの設計上の問題 8
Openapi-generatorの使いづらさ • 出力ファイルの多さ • 実行速度の遅さ • 数多くのライブラリに対応している分、痒い所に手が届かない ◦ 70近いclient generatorを用意
◦ Mock生成、ファイルの出力方法 etc. 9
React QueryのQuery Keyを 安全に管理できていなかった これ キャッシュを管理する keyになるため、 必ず一意性を保証する必要がある 10
公式でもQuery Keyを定数で管理することを 推奨している 11
定数で管理するメリット Query Keyを文字列で指定しなくて良い • • Human Errorを防ぐ • 保守性を高める 12
React QueryのQuery Keyを 安全に管理できていなかった 抱えていた課題 課題1 課題2 Openapi-generator の使いづらさ ライブラリに対する不満
React Queryの設計上の問題 13
Orvalとは? Orvalの特徴を紹介 他の自動生成ライブラリとの違いは 03 14
Orvalとは? Orvalは、OpenAPIから型安全なコードを自動生成するツールであり、 React Queryのカスタムフックも生成できます。APIドキュメントからクラ イアントコードを生成し、開発効率を向上させるだけでなく、型情報を提 供してエラーを減らします。 (ChatGPTに聞きました) 15
まとめると • TS製ライブラリ • 高速なコード生成 • Mockの自動生成 • 柔軟な出力方法 プロダクトとの相性が
非常にいい REST設計で状態管理にReact QueryやSWRのような ライブラリを使用している場合、Orvalは高い価値を発揮する。 16
Orvalが向かないケース • スキーマが正しく定義されていない ◦ 生成されるコードの質が落ちる • テスト運用がされていない ◦ Mockの自動生成が生きない •
React QueryやSWRを使っていない ◦ カスタムフックの自動生成が生きない 17
生成されるコード 1. HTTP通信ロジック 2. Query Keyの生成関数 3. 型定義 4. React
Queryのカスタムフック (特定の設定をした条件で) 18 1 2 3 4
2. Query Keyの生成関数 • エンドポイントに沿ったQuery Keyを設定 • 一意であればなんでもいい ライブラリに任せたい! 19
4. React Queryのカスタムフック 1. エンドポイントごとにuseQueryの カスタムフックを実装する 2. React Queryのオプションを失わない設計 3. TDataをGenericsで渡せる
4. QueryFn、QueryKeyを分けて実装する すべての条件を満たしている 👍 20
出力ファイル形式の柔軟性 公式より 21
効果検証 導入後の効果 04 22
React QueryのQuery Keyを 安全に管理できていなかった 抱えていた課題 課題1 課題2 Openapi-generator の使いづらさ 柔軟なカスタマイズと特定の技術下で
高い価値を発揮! React Queryの設計を完全に任せられる! 23
24 • HTTP通信 ◦ openapi-generator • React Queryの実装 • Query
Keyの管理 • React Queryのオプション指定 どれだけメンテナンスすべきコードが削減されたか
25 メンテナンスが必要なコードが大幅に削減 • HTTP通信 • React Queryの実装 • Query Keyの管理
• React Queryのオプション指定
• React Queryのカスタムフック • Query Keyの管理 • Mock関数の生成 etc. 誰が担当しても同じ(似た)実装になるものは、
ライブラリに任せることでHuman Errorを防ぎ、 開発者体験を向上させる 26
THANKS! ご清聴ありがとうございました ぜひ様々なイベントでのお声がけをお待 ちしています! Twitter:https://twitter.com/ytaisei_ GitHub:https://github.com/taisei-13046 Qiita:https://qiita.com/taisei-13046 Zenn:https://zenn.dev/taisei_13046 27