React ライブラリ・ツールインフォグラフィック

ルーティングとナビゲーション

React Router

ウェブサイトのナビゲーションを制御し、URLをカスタマイズするライブラリ

BrowserRouter、Routes、Routeコンポーネントでページへのリンクを作成
Linkコンポーネントでページ間のナビゲーション
ネストされたルートの作成が可能
useNavigate、useParamsなどのカスタムフック

Next.js

サーバーレンダリングされたウェブページを作成するReactフレームワーク

Reactでフルスタックウェブアプリケーション構築
パフォーマンス向上と高速読み込み
検索エンジン最適化(SEO)の改善

UIコンポーネント

Shad CN

Tailwind CSSでスタイリングされ、Radix UIで構築されたUIコンポーネント

コードをコピー＆ペーストで利用
高度にカスタマイズ可能
V0チャットボットでコンポーネント生成も可能

Material UI

Googleのマテリアルデザインに基づくUIコンポーネントライブラリ

50以上のプリビルトコンポーネント
カスタムテーマ作成とレスポンシブデザイン
アクセシビリティに最適化
Material Iconsアイコンライブラリ付属

Chakra UI

アクセシビリティに重点を置いたUIコンポーネントライブラリ

WAI-ARIA規格に準拠
テーマ作成とダークモード対応
プロップスによるスタイル追加
useDisclosureフックとuseToastフック

Ant Design

Ant Group（アリババの金融部門）が作成した企業向けUIライブラリ

ボタン、カレンダー、ツリー、チャートなどのコンポーネント
50以上の言語をサポート
ビジネス向けアプリケーション構築に最適

Headless UI

スタイルなしのコンポーネントを提供するUIライブラリ

好みのCSSライブラリと自由に組み合わせ可能
アクセシビリティを念頭に設計
状態管理も可能

React Bootstrap

React向けに最適化されたBootstrapライブラリ

ボタン、モーダル、ナビバーなどのコンポーネント
仮想DOMにアクセス可能
jQueryを必要としない実装

Tailwind + React

ウェブサイトのUIを構築するためのCSSライブラリ

高度にカスタマイズ可能なコンポーネント
npm installコマンドでReactプロジェクトに導入

Mantine

100以上のカスタマイズ可能なコンポーネントと50以上のフックを提供

レスポンシブデザインに最適化
ライト・ダークテーマ対応
フォームライブラリ内蔵
ReduxやFormikと相性が良い

状態管理

Redux

ウェブサイトの状態管理のためのライブラリ

ストアで情報を一元管理
コンテナを使って適切なコンポーネントにデータを送信
ユーザーアクションを基にリデューサーが状態を更新

Zustand

軽量な状態管理ライブラリ

最小限のボイラープレート
Reduxよりシンプル
リデューサー、アクション、プロバイダーが不要

フォーム管理

Formik

フォーム構築を簡単にするライブラリ

状態管理、バリデーション、エラー処理
Yupと連携可能
Formikコンポーネントとフックでフォームに機能を追加

React Hook Form

不要な再レンダリングを抑えるフォーム管理ライブラリ

ChakraやMaterial UIとシームレスに連携
useFormフックで状態とバリデーション管理
少ないコードでフォーム作成が可能

アニメーションとビジュアル

Framer Motion

Reactのための強力なアニメーションライブラリ

animate、initial、transitionプロップでアニメーション制御
hover、tap、drag、scrollなどのジェスチャーに対応
motion.dコンポーネントとuseAnimationフック
60FPSで最適化され、CSSトランスフォームとWebGLを活用

React Spring

物理学に基づく現実世界のような動きを再現するアニメーションライブラリ

バネ物理学を使用したアニメーション
useSpringフックでアニメーション制御
ボタンやdiv要素のアニメーション、透明度の変更など

Swiper

カルーセル、画像ギャラリー、ヒーローセクション向けライブラリ

デスクトップ、タブレット、スマートフォン対応
レスポンシブなUIコンポーネント
スムーズな遷移とナビゲーションコントロール

React 3 Fiber

3JSライブラリのReactレンダラー

3Dシーン、アニメーション、ゲーム用グラフィックス作成
Framer MotionやReact Springと連携可能
useLoaderフックで3Dモデルを読み込み
3D概念（メッシュ、マテリアル、シェーダー）の基礎知識が必要

React 360

360度VR体験を構築するためのフレームワーク

WebGLとWeb VRを組み合わせてVRヘッドセット用アプリを作成
3D環境と空間インターフェースを構築
360度動画、写真、パノラマの追加
仮想ツアー、製品デモ、トレーニングシミュレーション向け

React Spinner

ローディングアニメーション用のビジュアルライブラリ

コンテンツ読み込み中のビジュアルフィードバック
多様なローダーから選択可能
色、サイズ、速度、スタイルのカスタマイズ

データとグラフ

Recharts

D3JSをベースにしたチャートライブラリ

レスポンシブなチャート、グラフ、データ可視化
Reactのコンポーネントベース構造を活用
インタラクティブ要素とグラフ用のプリビルトコンポーネント
アニメーションとインタラクティブコントロール

React ChartJS2

Charts.jsライブラリをReactに統合するコンポーネント

bar、line、piなどのReactコンポーネント
onClick、onHoverなどでインタラクティブ性を追加
高度にカスタマイズ可能なチャートとグラフ

React AG Grid

Reactのデータグリッド・テーブルライブラリ

ソート、フィルタリング、ページネーション、行選択
大量のデータセットを処理可能
paginationプロップとcolumnDefsプロップ
Excelへのエクスポート機能

データフェッチングと状態管理

React Query (TanStack Query)

サーバーサイド状態管理ライブラリ

非同期リクエストとAPIコールの処理
ページネーションと無限スクロール
useQueryフックでデータのフェッチとキャッシュ
useMutationフックでサーバーデータの変更

SWR

リモートデータフェッチングのためのReactフック

「Stale While Revalidate」戦略
キャッシュデータを即座に表示しながら新データを取得
データフェッチング、ミューテーション、キャッシング、ページネーション、エラー処理

開発ツールとスタイリング

Vite

高速なフロントエンドビルドツール

開発時間を大幅に短縮
数秒で新しいReactプロジェクトを作成
ホットモジュールリプレイスメント機能でコード変更を即時反映

Styled Components

ReactのCSS-in-JSライブラリ

コンポーネントにスコープされたプレーンCSSを記述
グローバルCSSの競合を防止

EmotionJS

軽量なCSS-in-JSライブラリ

Styled Componentsより軽量で高速
サーバーサイドレンダリングを内蔵

特殊用途

React Admin

管理パネルとB2Bアプリケーション構築のためのフレームワーク

プリビルトコンポーネントを使用
GraphQLやFirebaseでバックエンドと連携
認証と認可を含むCRUD操作
管理ダッシュボードとCMSバックエンド構築に最適

React DND

ドラッグ＆ドロップ機能を追加するライブラリ

マウス、タッチ、キーボードによるドラッグ機能
useDragフックでコンポーネントをドラッグ可能に
useDropフックでドロップアイテムを受け入れる
ファイルアップローダー、フォームビルダー、ゲームUIに活用

React ライブラリ＆ツール ガイド