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.6k
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
150
Reactを段階的に覗いてみる
ytaisei
3
1.6k
Reactのトランジションを覗いてみる
ytaisei
1
2.2k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
260
React19で状態管理はどう変わるか
ytaisei
2
170
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
2k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.8k
BunがCommonJSをサポートする理由
ytaisei
2
380
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.5k
Other Decks in Technology
See All in Technology
Agile PBL at New Grads Trainings
kawaguti
PRO
1
430
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
110
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
140
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
420
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
160
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
410
人工衛星のファームウェアをRustで書く理由
koba789
15
7.9k
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Making Projects Easy
brettharned
117
6.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building an army of robots
kneath
306
46k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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