サイト管理者
React
佐藤功樹

React ライブラリ 2024

React
この記事は約12分で読めます。

React が登場してしばらく経ちます。それ以来、コンポーネント駆動型ライブラリの周りには、充実していながらも圧倒的なライブラリのエコシステムが発展してきました。

他のプログラミング言語やライブラリ/フレームワークから来た開発者は、React で Web アプリケーションを作成するためのすべてのライブラリを把握するのに苦労することが多いですよね。

React の核心とは、機能コンポーネントを使ってコンポーネント駆動型のユーザーインターフェースを作成できることです。

例えば、ローカルステート、副作用、パフォーマンス最適化のための React Hooks などです。しかし、結局のところ、ここではUIを作成するための関数（コンポーネントとフック）を扱っているに過ぎないということは心に留めておきたいですよね。

以下は、2024年に使われるであろう技術の用例をまとめたものです。

1. React プロジェクトのセットアップ

Vite

Vite は高速かつ意見がまとまった React プロジェクトのセットアップです。効率的な開発のためにネイティブESモジュールを活用しています。

現代の JavaScript の機能に組み込まれたサポートと印象的な速度で迅速な開発を提供します。

Next.js

Next.js は多様なReactフレームワークで、サーバーサイドレンダリング（SSR）を可能にし、パフォーマンスと SEO を向上させます。

静的サイト生成（SSG）もサポートしており、強力なプラグインシステムで拡張性を提供しています。

Astro

Astro は静的サイトジェネレーターで、静的と動的なウェブサイトの利点を組み合わせています。React コンポーネントをビルド時に使用できるため、高速な読み込み時間を実現します。

静的ファイルのホスティングには Astro を使うのが最も良い選択肢となるでしょう。

2. React パッケージマネージャー

npm

npm は Node.js のデフォルトのパッケージマネージャーであり、React プロジェクトの依存関係を管理するために広く使用されています。

広範なパッケージのレジストリと直感的なコマンドラインインターフェースを提供しています。

pnpm

pnpm は依存関係をプロジェクト間で共有することパフォーマンスを向上させることを目指した代替のパッケージマネージャーです。

依存関係を効果的に共有することにより、ディスクスペースの節約と高速なインストールを提供します。したがって、通常のnpmやyarnと同じように使えますが、インストールやアップデートの際により高速な処理が期待できます。

3. React ステート管理

Zustand

Zustand は React の軽量なステート管理ライブラリです。

シンプルな API と直感的なステート管理のアプローチを提供します。

// 必要なモジュールをインポート
import create from 'zustand';

// Zustandのストアを作成
const useStore = create((set) => ({
  // 初期のステート
  count: 0,
  // ステートを更新するためのアクション
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// Reactコンポーネント
function Counter() {
  // Zustandのストアからステートとアクションを取得
  const { count, increment, decrement } = useStore();

  // コンポーネントのレンダリング
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;
TypeScript

4. React データの取得

TanStack Query

TanStack Query は React アプリケーションでの API リクエストを簡素化するデータ取得ライブラリで、REST および GraphQL API の両方をサポートし、データの取得とキャッシュのための簡潔な構文を提供します。

// 必要なモジュールをインポート
import { useQuery } from '@tanstack/react-query';

// REST APIのエンドポイント
const API_ENDPOINT = 'https://api.example.com/data';

// データを取得するためのクエリ関数
const fetchData = async () => {
  const response = await fetch(API_ENDPOINT);
  if (!response.ok) {
    throw new Error('データの取得に失敗しました。');
  }
  return response.json();
};

// Reactコンポーネント
function MyComponent() {
  // useQueryを使ってデータを取得
  const { data, isLoading, isError } = useQuery('myData', fetchData);

  // ローディング中の表示
  if (isLoading) {
    return <p>Loading...</p>;
  }

  // エラーが発生した場合の表示
  if (isError) {
    return <p>Error fetching data</p>;
  }

  // データを表示
  return (
    <div>
      <h1>My Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;
TypeScript

5. ルーティング

React Router

React Router は React アプリケーションでの宣言的なルーティングのためのデファクトスタンダードです。使いやすさと頑強なナビゲーション機能で知られています。

// App.js

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// ページコンポーネント
const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

const App = () => {
  return (
    <Router>
      <div>
        {/* ナビゲーションリンク */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* ルートごとのコンポーネントの設定 */}
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};

export default App;
JavaScript

TanStack Router

TanStack Router は特に TypeScript 愛好者の間で人気があります。
型の安全性とモダンなルーティングアプローチを提供するため、流行りの代替手段となっています。

// App.tsx

import React from 'react';
import { BrowserRouter as Router, Route, Link } from '@tanstack/router';

// ページコンポーネント
const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

const App = () => {
  return (
    <Router>
      <div>
        {/* ナビゲーションリンク */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* ルートごとのコンポーネントの設定 */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </div>
    </Router>
  );
};

export default App;
TypeScript

6. ReactでのCSSスタイリング

ユーティリティファーストCSS（例：Tailwind CSS）

Tailwind CSS は事前に定義されたクラスを提供するユーティリティファーストの CSS フレームワークで、カスタマイズを犠牲にせずに開発の効率を向上させます。

// src/components/Button.tsx

import React from 'react';
import '../styles/tailwind.css';

const Button = () => {
  return (
    <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
      Click me
    </button>
  );
};

export default Button;
TypeScript

CSS-in-CSS（例：CSS Modules）

CSS Modules は React コンポーネント内でスタイリングをカプセル化し、グローバルなスタイルの衝突を防ぐためのモジュラーで保守しやすいスタイリングプラクティスを提唱しています。

/* src/components/Button.module.css */

.button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}
CSS
// src/components/Button.js

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    <button className={styles.button}>
      Click me
    </button>
  );
};

export default Button;
JavaScript

CSS-in-JS（非推奨）

CSS-in-JS はスタイリングに使用されることがありますが、潜在的なパフォーマンスのオーバーヘッドと複雑性が増加する可能性があるため、一般的には推奨されません。

// src/components/Button.js

import React from 'react';
import styled from 'styled-components';

// styled-componentsを使用してスタイルを定義
const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

const Button = () => {
  return (
    <StyledButton>
      Click me
    </StyledButton>
  );
};

export default Button;
JavaScript

CSS-in-TS

TypeScript を使用したスタイリングでは、型付きのスタイルを使用して、React コンポーネントのコードの明確さとツールのサポートを向上させます。

// src/components/Button.tsx

import React from 'react';
import styled from '@emotion/styled';

// styledを使用してスタイルを定義
const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

const Button: React.FC = () => {
  return (
    <StyledButton>
      Click me
    </StyledButton>
  );
};

export default Button;
TypeScript

参考

React Libraries for 2024
Discover the essential React libraries for 2024! Navigate the vast ecosystem effortlessly with this curated list. Empower your React projects with these powerfu...
www.robinwieruch.de