開発体験がよかったフロントエンドライブラリ in 2024

本記事は、Japan Digital Design Advent Calendar 2024 の21日目の記事になります。

adventar.org

三菱UFJフィナンシャル・グループ（以下MUFG）の戦略子会社であるJapan Digital Design（以下JDD）でフロントエンドエンジニアをしている村山です。

本記事では、開発体験がよかったフロントエンドライブラリ in 2024についてご紹介させていただきます。

フロントエンドの開発において、状態管理やデータフェッチングの効率化は常に重要なテーマです。本記事では筆者が2024年に使ったフロントエンド関連のライブラリで、特に状態管理周りで開発体験が良かった3つのライブラリ、Jotai・SWR・nuqsを紹介します。

Jotai

Jotai, primitive and flexible state management for React

JotaiはReact用の状態管理ライブラリで、シンプルさとパフォーマンスに重点を置いています。

作者は日本人のDaishi Katoさんで、現在ではJotaiの他に、ZustandやValtioといった状態管理ライブラリもメンテナンスしています。

特徴

• 非常にシンプルで、Reduxのようなボイラープレートコードがほとんど不要

• 細かい粒度での状態管理を可能にし、必要なコンポーネントだけが再レンダリングされるため無駄な再レンダリングが発生しづらい

• UtilityやExtensionが豊富で、様々なシーンとライブラリとで組み合わせて利用する事が可能

開発体験の良さ

JotaiはReduxなどと異なり、基本的な使い方だとProviderが不要で、小さく始める場合、以下のようなコードでグローバルな状態管理が可能です。（公式ドキュメントから引用）

const countAtom = atom(0)
const Counter = () => {
  const setCount = useSetAtom(countAtom)
  const count = useAtomValue(countAtom)
  return (
    <>
      <div>count: {count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  )
}

また、公式ドキュメントでのレシピも豊富で、少し凝った使い方をしたい場合も公式ドキュメントを読むことで解決しやすいのも魅力の一つです。

SWR

データ取得のための React Hooks ライブラリ – SWRデータ取得のための React Hooks ライブラリ – SWR

SWRはデータフェッチングとキャッシュ管理を簡素化するためのライブラリです。特にキャッシング周りは名前の由来にもなっている stale-while-revalidate という戦略に基づいてキャッシングされています。

特徴

• 宣言的なデータフェッチングおよびデータフェッチングの状態管理

• 自動的なキャッシュ更新と再検証

• データフェッチング時のエラーのシンプルなハンドリング

開発体験の良さ

基本的なデータフェッチングの機能はもちろん、サーバーから取得したデータのキャッシュをグローバルな状態としても扱えるため、他の状態管理ライブラリを導入せずともグローバルな状態を扱えます。

またこのキャッシュはデフォルトでは自動的に更新および再検証されますが、以下のようにアプリの設定など一回サーバーから読み込んだあと特に値が変わらないものに関してはこの更新をオフにすることで無駄なデータフェッチを抑えることも可能です。

const onlyOnceFetchConfig = {
  suspense: true,
  revalidateOnFocus: false,
  revalidateOnMount: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
} as const satisfies SWRConfiguration
export const useSettings = () => {
  const { data, error, isLoading } = useSWR(
    '/settings',
    fetcher,
    onlyOnceFetchConfig,
  )
  return {
    settings: data,
    isLoading,
    error,
  }
}

nuqs

nuqs | Type-safe search params state management for React

nuqs（旧称next-usequerystate）はURLのクエリパラメータをReactの状態として扱えるライブラリで、特にwebページの検索結果などのURLを共有する機能を作る際に強力なライブラリとなります。

もともとはNext.js専用のライブラリでしたが、今年10月にリリースされたv2からはアダプターを切り替える形でNext.jsの他に素のReact、Remix、React Routerにも対応するようになりました。

特徴

• ReactのuseStateのような形でAPIが提供されておりURLの状態管理が直感的

• TypeScriptサポートが充実しており、型チェックによるエラー防止が可能

• フレームワークに縛られず、各種Reactのフレームワークで利用可能

開発体験の良さ

やはりこのnuqsの一番の良さはURLとUIの同期が簡単にできるところです。

筆者が関わってるプロジェクトでnuqsを導入していないwebアプリではReduxとURLの同期を自前で書かれてたこともあり少し複雑になっていました。

しかしこのnuqsではURLの管理とアプリの状態の管理をまとめて行ってくれるので、他の状態の管理ライブラリを導入せずともURLのクエリパラメータをグローバルな状態として扱えるためとてもシンプルにURLとUIの同期が可能となりました。

特に公式ドキュメントにもある通りカスタムフックでカプセル化することで、様々なコンポーネントで再利用もしやすくなります。

const keyMap = {
  year: parseAsInteger.withDefault(2024),
  month: parseAsInteger.withDefault(1),
  day: parseAsInteger.withDefault(1),
}
const options: Partial<UseQueryStatesOptions<typeof keyMap>> = {
  history: 'replace',
}
type UseURLStatesReturn = UseQueryStatesReturn<typeof keyMap>
export const useURLStates = (): UseURLStatesReturn => {
  return useQueryStates(keyMap, options)
}

まとめ

Jotai、nuqsはグローバルな状態管理をシンプルにしてくれ、SWRはキャッシングによるデータフェッチングの効率化と、使い方次第ではとても良い開発体験を得られるかと思います。

筆者も今まで関わってきたプロジェクトで複雑だった状態管理をよりシンプルでわかりやすくできないかと思いこれらのライブラリを導入しましたが、結果的にとても気持ちよく開発ができました。

この記事がReactの複雑な状態管理に悩んでる人の参考になれば幸いです。

以上、開発体験がよかったフロントエンドライブラリ in 2024でした。
最後までご覧いただきありがとうございました。

---

Japan Digital Design株式会社では、一緒に働いてくださる仲間を募集中です。カジュアル面談も実施しておりますので下記リンク先からお気軽にお問合せください。

採用情報｜Japan Digital Design 株式会社

この記事に関するお問い合わせはこちら

お問い合わせ｜Japan Digital Design 株式会社

Japan Digital Design 株式会社
Technology & Development Div.
Mitsuhiro Murayama