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;
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;
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;
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;
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;
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;
}
// 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;
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;
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;
参考
