なぜこの記事を書こうと思ったか？
現在、テックリードという立場で、いろんな開発ツールを導入することを試しているのですが
その中でも、orvalというツールが、スキーマ開発をしているプロダクトにとても相性がいいと
最近知って、早速導入し活用しています。
まだ存在を知らないという方は、是非知ってほしくてこの記事を書くに至りました。
今日はorvalによって、実際のフロント開発において何が良かったか？を一言で伝えると
UI実装に割く時間が圧倒的に増えた
これが一番の恩恵だと感じています。
orvalとは簡単に言うと何？
orvalがどんな事ができるか？シンプルに言うと
「reactのhooksを活用しているプロダクトに特化したopenapi-generator」になります。
以前お世話になったプロダクトチームのテックリードをしていたsoartec-labさんがコミッターをしているとxで見たのがきっかけでした。
あの人が関わっているOSSならきっと使い勝手いいだろ！
と意気揚々とプロダクトに導入したのを今でも覚えています。
使い方に関しては、公式docsや、「orval 導入」と調べればたくさん出てくるのでそちらを参考にしていただければと思います👍
こちらでは、入れる前と後でどう開発生産性が変わったのか？をお伝えします😄
これまでのリクエスト定義の実装流れ(openapi未導入)
- schema.ts(型定義), type.ts(型を参照するための定義), request.ts(get、やpathなどリクエストの概要)をzodとかを用いて定義
- request.tsで定義した内容を呼び出すためのfetchやmutate処理を定義した関数を作成
- その関数を呼び出して、レスポンスに対する加工や後処理を行う内容をラップしたhooksを定義
- 定義したhooksを画面から呼び出す
懸念点だったとこ
- 定義ファイル多すぎ！
- zodが全然使いこなせてない(intで定義してるのに、なぜかstringで返却されていても特に怒られたりしておらず、型定義の恩恵が受けられていない)
- 必要なレスポンス定義などを各箇所に手打ちしていたので、typoとかもあったり。(気付けない)
→ apiリクエスト定義に一番時間取られる！！UIに集中したいのに。。。
これまでのリクエスト定義の実装の流れ(openapiは導入済)
- openapi-generator-cliを用いて、type-script用の型定義とクエリを出力
- 出力されたクエリを呼び出して、以下の内容を書き加えた関数・hooksを定義
- getならdefaultvalueや取得成功時の返却値の若干の加工
- postやpatchなら成功時や失敗時のエラーハンドリングも記載
- 画面から呼び出すための記述を追加
懸念点だったとこ
出力された関数はあくまでリクエストするための関数だけで、
エラーハンドリングとかに難点を感じていた(成功時、失敗時の判断が、openapi-generatorの出力だけではできないので、別のreact-queryとかでラップしてそのへんの記載を自作しないといけない)
また、 一度作成された自動生成ファイルは削除されないので、ちゃんと考慮しないとゴミファイル溜まっていく...
→ 使えなくはないが、もう少し使い勝手良くなればな...
orvalのリクエスト定義の実装の流れ
- yarn orvalのコマンドを実行し、react-queryベースのhooksまで作成
- 画面で呼び出す(成功時、失敗時はreact-queryのonSuccess, onErrorに定義する形に統一)
良かったこと
- hooksまで勝手に作ってくれるの気持ちｴｴｴｴｴｴｴｴｴｴｴｴｴｴｴ！！！
- コマンド実行するたびにファイルが再生成されるのでゴミが溜まらない！
- 実はorval.config.tsの設定で、無限スクロール用の関数を自動生成するオプションがあったり結構テクい実装が一瞬で解決できる
- UI作り込むぜ！ッシャ！
みたいな感じで、個人的にorval、激推しです🥰
この記事を読んで、是非自社のプロダクトのフロント開発のツールとして検討したいという気持ちになった方がいたら、この記事を書いた甲斐があるというものです💪
Discussion