【React】ライブラリ選定に悩む全ての人へ【2022年度版】

こんにちは。株式会社インプルの平澤です。
Reactのライブラリ選定で迷われたこと、迷っていることはありませんでしょうか？
そんな方々へ私の選ぶベストライブラリセットご提供します。

バリデーション

フォームをReact hook form もしくは Formikで実装し、バリデーションをYupやZodで行うのが
主流となっています。
個人的にはformはreact-hook-formをお勧めします。
GitHubのスター数は同じくらいですが、react-hook-formの方が後発ながら2022年5月にダウンロード数でformikを上回っています。
実際にさまざまなReactのGitHubを見ると最近はreact-hook-formを採用しているものが多く、ドキュメントが日本語対応しているという面でも導入のしやすさを感じます。

バリデーションのライブラリに関してはyupかzodをお勧めします。
他にもさまざまなライブラリがありますが、yupが2015年でzodが2020年にリリースされており経過年数に対してのGitHubスター数やnpmのダウンロード数も一線を画しています。

画面遷移

画面遷移は現状ではReact routerを選んでおけば間違えはないといった状況です。
GitHubのスター数などをみても群を抜いています。

ただ、React Queryなどの作者でもあるTanner Linsley氏が開発したReact Locationという比較的新しいライブラリがあり、React Routerと比較してシンプルで扱いやすくこちらも気になるところです。

本番環境で使用するにはまだ心もとないですが、非同期ルーティングや検索パラメータ周りの充実など使用してみる価値アリな印象です。

React router

Home v6.20.1

React location

TanStack Router | React Router, Solid Router, Svelte Router, Vue Router

Powerful routing and first-class search-param APIs for JS/TS, React, Solid, Vue and Svelte

UI

UIライブラリはここではMUIとChackraの2つを取り上げます。
ここで取り上げる2つを使用する場合には、後述するCSSのライブラリはemotionを使用することをおすすめします。
UIライブラリは実際にドキュメントを確認し、デザインが自分の求めているものにより近いものを選ぶのが良いです。

MUIは、にはテーマやパレットという考え方があり、統一感のある色やレイアウトを簡単に実現することができます。
ChakraUIは限られたパラメータを設定することで、統一感のあるデザインを表現することができます。

mui

MUI: The React component library you always wanted

MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.

chakra

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System

CSS

CSSの個人的おすすめはemotionかtailwindになります。
tailwindはクラス名を考える必要がないことなどがあり、スピード感を持って開発を進めることができます。
Css in Jsを使用する場合とTailwindを使用する場合はUIフレームワークに何を使用するかなども考慮するべき点ではあります。
tailwindを採用するとUIフレームワークはHeadless UIが相性が良く、muiやchakraを使用する場合はemotionの方が相性がいいです。
詳しくは下記の別記事にまとめていますので、こちらをご覧ください。

emotion

Emotion – Introduction

tailwind

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

通信（キャッシュ）

外部システムとの通信はアプリケーション開発のパフォーマンスボトルネックになりがちです。
これを解決するための手法の一つとして、キャッシュを利用する方法があります。
ここで取り上げるのは、通信で取得したデータをキャッシュして利用できるライブラリをご紹介します。

SWRとReactQueryは非常に似ていて、どちらを使っても正直そこまで差を感じません。
機能面でいくとRectQueryの方が多機能でありますが、バンドルサイズを比較するとSWR:4.2KB, ReactQuery:13.0KBですので、
様々な機能を使い倒したい -> ReactQuery
とりあえず導入したいが迷っている -> SWR
といった判断で問題ありません。
SWRは日本語のドキュメントがある点でも導入のしやすさを感じます。

SWR

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

SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with...

React query

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue

状態管理

状態管理の個人的おすすめはzustandかjotaiになります。
個人開発で規模の小さいものであれば、jotaiで規模感が大きくなる場合はzustandを選ぶのをお勧めします。
詳しくは下記の別記事にまとめておりますので、こちらをご覧ください。

Zustand

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.

Jotai

Jotai, primitive and flexible state management for React

Jotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders ar...

チャート

チャートのライブラリに関してもUIライブラリと同様に、デザインや表示する内容でイメージと近いものを選択するのが無難です。

rechartsはReact コンポーネントとして使え、素の SVG の描画をサポートしています。
また、画面に表示したいコンポーネントを宣言するだけで描画可能です。

react-chartjs-2はchartjsをreact用にしたライブラリになり、react-chartjs-2とchartjs両方のインストールが必要になります。
chartjsのGitHubスター数は58.9kとなっており非常に有名なライブラリです。

recharts

GitHub - recharts/recharts: Redefined chart library built with React and D3

Redefined chart library built with React and D3. Contribute to recharts/recharts development by creating an account on GitHub.

react-chartjs-2

GitHub - reactchartjs/react-chartjs-2: React components for Chart.js, the most popular charting library

React components for Chart.js, the most popular charting library - GitHub - reactchartjs/react-chartjs-2: React components for Chart.js, the most popular charti...

他

React icons

Reactでiconを入れるならコレといった感じですね。

React Icons

React hot toast

超お手軽にポップアップの実装ができます。私は多用してます。おすすめです。

react-hot-toast - The Best React Notifications in Town - react-hot-toast

Add beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.