React SPAを作るのに使用しているライブラリ
じょうげんTanStack Router
新世代ルーティングライブラリ。
React Routerの型安全版、Next.jsのSPA版。
Routeフックス、レイアウトDI、Route Maskingによる状態管理不要なダイアログ実装など、使ってて楽しいAPIが盛りだくさん。
SPAでも簡単にCode Splittingできるのが良い。
Routeオブジェクトのテスト手法が今の所見つかっていなくて、結局コンポーネント単位でのテストか、E2Eになってしまうのが残念。
RouteフックスやOutlet、useNavigation、Linkをモックせざるを得ない。
知っている人がいたら教えてください。
じょうげんTanStack Query
ご存知、Server stateの状態管理ライブラリ。
Routerとの相性がとことん良くて、QueryClientのインスタンスをDIできたり、loaderで読み込み前にデータをprefetchしておける。
useSuspenseQueryは本当に何もしないでRender as you fetchな実装やnull排除ができるようになるし、Suspense境界で自由自在にレンダリングをコントロールできる。
あと、useMutationが気持ち良すぎる。
オプション内に宣言的にエラーハンドリングや直前処理を書けて、本当にわかりやすい。
楽観的更新がこんなに簡単にかけるなんて思わなかった。
テスト時もQueryClientを使えば問題なく、ストレスがない。
じょうげんky
fetchを多機能化させた、axiosより軽量な空気読める系ライブラリ。
ky.post<User>("url", { json: user }).json() のように呼ぶと、メソッドの指定、ヘッダの指定、リクエストとレスポンスのJSON parse、レスポンスの型付けが全て自動で行われる。
ky独自の便利機能がいずれも便利。
リトライ機能の付加
フック
独自Errorクラスのthrow
これがSuspenseベースのルーティングライブラリと非常に相性が良い。
HTTPErrorとTimeoutErrorの2つしか無いので、それをErrorBoundaryでcatchして判定してあげれば簡単にエラーハンドリングをUIに持ち込める。
最大の利点は、共通処理を搭載させた新たなkyインスタンスを作成するky.create,ky.extend。
prefixURLをまとめて与えたインスタンスを作っておき、それを継承した認証系処理のフックを追加した別のインスタンスを作って使いまわせば、各リクエストの関数に本当に何も書かなくて良くなる。
じょうげんjotai
複数コンポーネントから参照される状態をContextよりも簡単に扱える状態管理ライブラリ。
そのまま使えばuseState並のシンプルさでグローバルステートを使える。
Reactのコンポーネントやhooksのように、状態自体をcomposableに組み合わせて使用できるので、メンタルモデル的にもReactとの相性が抜群。
他ライブラリとのインテグレーションが凄まじく、上記TanStack Routerの状態管理をjotai内に持ち込めたり、果てはReduxの外部ステートにアクセスできたり、何でもあり。
Providerを使わない代わりに、その状態にどこからでもアクセスできるようになってしまうので、パッケージプライベートな運用は必要かもしれない。
じょうげんYamada UI
Chakra UIやMantineのいいとこ取りをした、UIコンポーネントライブラリ。
内部で複数のコンポーネントが使用されているUIを表現するのに2通りのやり方が用意されているため、初めはデフォルトのレイアウト、カスタムしたくなったら分解して細かく設定のようなことがやりやすい。
アラート表示用のuseNoticeがコンポーネントではなく、カスタムフックとして提供されていたり、テーブルコンポーネントが自分で組み立てるのではなく既にTanStack Tableを内部に組み込んでくれているお陰で簡単に作れたりするのがお気に入りポイント。
CSSは学習コストが低いemotionのStylePropが生えているので、全てYamadaUIのコンポーネントを使用するようにし、Style Propで統一することでプロジェクトのコードに一貫性を持たせることができる。
あと、デザインシステムが優れていて、そこだけ切り取っても1つのライブラリと言えるほど。
同一のコンポーネントに適用するデフォルトPropsやvariantをthemeで統一的に管理できたり、コンポーネントがレンダリングされてほしいHTMLタグをasで指定できるおかげでコンポーネントのネストを減らせたり。
このasPropは、ネイティブ要素だけではなくYamada UI自身のVStackなどのレイアウト系コンポーネントを使えたり、使用しているルーターライブラリのLinkコンポーネントにしたりもできちゃう。
じょうげんConform
フォームの状態管理ライブラリ
RemixやNext.js向けのサーバーサイドのバリデーションを統合できるライブラリだが、実はクライアントサイドでも使える。
フォームのアクセシブル属性を自動で付与してくれるのが本当に良すぎる。
じょうげんts-belt
lo-dashやramda、remedaのような、配列、オブジェクトなどのためのユーティリティ
まだpipeline operatorがないJavaScriptの世界に関数型プログラミングをもたらしてくれる。
もちろん型安全。
特筆すべきはその性能。
pipe関数を使ったことによって期待しているのは、生JSよりもイテレート回数が減ることによるパフォーマンスの向上なので、パフォーマンスこそが全て。
じょうげんReact19、React Compiler
今のところ使っているのはref as propとtitleの巻き上げくらいだけど、そろそろリリースされるだろうということで19前提でRC版で開発している。
React Compilerについては、レビューでメモ化についての指摘をしなくて済む所が良いですね。