Tweet
Tweet

Slide 1

Slide 1 text

OpenAPIコード生成ライブラリを 『Orval』に移行した理由 早稲田大学4年　安井大晟（ytaisei） 1

Slide 2

Slide 2 text

TABLE OF CONTENTS 自己紹介 01 Orvalとは？ 03 抱えていた課題 02 効果検証 プロダクトが抱えていた 課題を整理 04 Orvalの特徴を紹介 他の自動生成ライブラリとの違 いは 導入後の効果 2

Slide 3

Slide 3 text

自己紹介 01 3

Slide 4

Slide 4 text

自己紹介 2019年：早稲田大学教育学部入学（元教員志望） 2021年：42Tokyo入学 2022年：エンジニアを目指し休学 学生ピッチコンテスト等で受賞 2023年：SaaS企業インターン 4

Slide 5

Slide 5 text

抱えていた課題 プロダクトが抱えていた課題を整理 02 5

Slide 6

Slide 6 text

TypeScript （前提）使用している技術 Axios HTTPクライアント コード生成ライブラリ openapi-generator テスト Testing Library 言語 非同期状態管理 React Query UIライブラリ React 6

Slide 7

Slide 7 text

TypeScript （前提）使用している技術 Axios HTTPクライアント コード生成ライブラリ Orval テスト Testing Library 言語 非同期状態管理 React Query UIライブラリ React 7

Slide 8

Slide 8 text

React QueryのQuery Keyを 安全に管理できていなかった 抱えていた課題 課題1 課題2 Openapi-generator の使いづらさ ライブラリに対する不満 React Queryの設計上の問題 8

Slide 9

Slide 9 text

Openapi-generatorの使いづらさ ● 出力ファイルの多さ ● 実行速度の遅さ ● 数多くのライブラリに対応している分、痒い所に手が届かない ○ 70近いclient generatorを用意 ○ Mock生成、ファイルの出力方法 etc. 9

Slide 10

Slide 10 text

React QueryのQuery Keyを 安全に管理できていなかった これ キャッシュを管理する keyになるため、 必ず一意性を保証する必要がある 10

Slide 11

Slide 11 text

公式でもQuery Keyを定数で管理することを 推奨している 11

Slide 12

Slide 12 text

定数で管理するメリット Query Keyを文字列で指定しなくて良い ● ● Human Errorを防ぐ ● 保守性を高める 12

Slide 13

Slide 13 text

React QueryのQuery Keyを 安全に管理できていなかった 抱えていた課題 課題1 課題2 Openapi-generator の使いづらさ ライブラリに対する不満 React Queryの設計上の問題 13

Slide 14

Slide 14 text

Orvalとは？ Orvalの特徴を紹介 他の自動生成ライブラリとの違いは 03 14

Slide 15

Slide 15 text

Orvalとは？ Orvalは、OpenAPIから型安全なコードを自動生成するツールであり、 React Queryのカスタムフックも生成できます。APIドキュメントからクラ イアントコードを生成し、開発効率を向上させるだけでなく、型情報を提 供してエラーを減らします。 （ChatGPTに聞きました） 15

Slide 16

Slide 16 text

まとめると ● TS製ライブラリ ● 高速なコード生成 ● Mockの自動生成 ● 柔軟な出力方法 プロダクトとの相性が 非常にいい REST設計で状態管理にReact QueryやSWRのような
 ライブラリを使用している場合、Orvalは高い価値を発揮する。 16

Slide 17

Slide 17 text

Orvalが向かないケース ● スキーマが正しく定義されていない ○ 生成されるコードの質が落ちる ● テスト運用がされていない ○ Mockの自動生成が生きない ● React QueryやSWRを使っていない ○ カスタムフックの自動生成が生きない 17

Slide 18

Slide 18 text

生成されるコード 1. HTTP通信ロジック 2. Query Keyの生成関数 3. 型定義 4. React Queryのカスタムフック （特定の設定をした条件で） 18 1 2 3 4

Slide 19

Slide 19 text

2.　Query Keyの生成関数 ● エンドポイントに沿ったQuery Keyを設定 ● 一意であればなんでもいい ライブラリに任せたい！ 19

Slide 20

Slide 20 text

4.　React Queryのカスタムフック 1. エンドポイントごとにuseQueryの カスタムフックを実装する 2. React Queryのオプションを失わない設計 3. TDataをGenericsで渡せる 4. QueryFn、QueryKeyを分けて実装する すべての条件を満たしている 👍 20

Slide 21

Slide 21 text

出力ファイル形式の柔軟性 公式より 21

Slide 22

Slide 22 text

効果検証 導入後の効果 04 22

Slide 23

Slide 23 text

React QueryのQuery Keyを 安全に管理できていなかった 抱えていた課題 課題1 課題2 Openapi-generator の使いづらさ 柔軟なカスタマイズと特定の技術下で 高い価値を発揮！ React Queryの設計を完全に任せられる！ 23

Slide 24

Slide 24 text

24 ● HTTP通信 ○ openapi-generator ● React Queryの実装 ● Query Keyの管理 ● React Queryのオプション指定 どれだけメンテナンスすべきコードが削減されたか

Slide 25

Slide 25 text

25 メンテナンスが必要なコードが大幅に削減 ● HTTP通信 ● React Queryの実装 ● Query Keyの管理 ● React Queryのオプション指定

Slide 26

Slide 26 text

● React Queryのカスタムフック ● Query Keyの管理 ● Mock関数の生成 etc. 誰が担当しても同じ（似た）実装になるものは、 ライブラリに任せることでHuman Errorを防ぎ、 開発者体験を向上させる 26

Slide 27

Slide 27 text

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