状態管理
Reduxのような大規模な状態管理ライブラリは導入せず、JotaiとTanStack Queryを使用していました。
サーバー状態とクライアント状態を分離して管理する設計としており、使い分けとしては、TanStack QueryはAPIから取得するデータのフェッチやキャッシュ、同期処理といったサーバー状態の管理に、JotaiはUIの開閉状態やユーザー情報などAPIと関係しないクライアント側のローカルな状態管理に使用していました。
Reactでデータフェッチやサーバー状態を扱うとき、よく名前が挙がるのが SWR と React Query（現TanStack Query） です。どちらも非同期データを簡単に扱える強力なライブラリですが、用途や設計思想に違いがあります。特に、Notionのようなリアルタイム編集型アプリを作る場合、どちらを選ぶべきかは開発体験を大きく左右します。
React Query（TanStack Query）とは
React Queryは、データの取得だけでなく、更新・削除・エラーハンドリング・キャッシュ管理 まで一元的に扱える総合的なサーバー状態管理ライブラリです。
SWRが「データ取得の最適化」を目指すのに対して、React Queryは「サーバー状態全体の管理」を目的に設計されています。
特に、楽観的更新（Optimistic Update） や ミューテーション（Mutation） が強力で、ユーザー操作によって即座にUIを更新しつつ、バックエンドとの同期も安全に行えます。
また、エラー処理やリトライ設定、ローディング状態の管理など、実務的なユースケースに合わせた細かな制御が可能です。
一般的な使い分け
- React Query：CRUD操作が多いWebアプリ、ダッシュボード、タスク管理、SNS、Notionのようなコラボレーションツール。
shadcnやMUIを使用したコンポーネント設計
これらはUIコンポーネントライブラリであり、自前でボタンやフォームをゼロから作る手間を省けます。
UIコンポーネントにはshadcn/uiを採用していました。ベースとなるコンポーネントはshadcnを活用しつつ、プロジェクト固有の要件に合わせてカスタマイズして使用していました。また、それらをさらにラップした共通コンポーネントを作成し、プロジェクト全体で統一したスタイルや挙動を保つよう設計していました。
MUIなどと比較して、スタイルのカスタマイズ性が高く、Tailwind CSSとの相性がよかったためです。また、コンポーネントのコードが直接プロジェクトにコピーされる形式なので、必要に応じて中身を自由に調整できる点も採用理由でした。
MUI × App Routerでの課題
App Routerを採用した際に、MUIはCSS-in-JSベースのためServer Componentsとの相性に課題がありました