JavaScriptエンジニア必見！Reactの核心：Hooksとコンポーネント指向による状態管理の最適解
Reactは、Facebook（現Meta）によって開発された、Webおよびネイティブのユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。
Reactが現代のウェブ開発で非常に人気があるのには、いくつかの大きな理由があります。
Reactでは、UIの状態を直接操作するのではなく、「このデータ（状態）の時には、UIはこうあるべき」ということを宣言的に記述します。
何が便利か？ 状態（データ）が変わると、Reactが必要な部分だけを自動で効率的に更新してくれます。これにより、UIの挙動を予測しやすくなり、手動でのDOM（Document Object Model）操作に起因するバグを大幅に減らすことができます。
UIを、それぞれが独立した再利用可能な部品（コンポーネント）に分割して構築します。
何が便利か？
再利用性
一度作ったボタンやヘッダーなどのコンポーネントを、アプリケーションのどこでも簡単に使い回せます。
保守性
複雑なUI全体ではなく、小さなコンポーネント単位で開発・テスト・デバッグを行えるため、コードの保守性や拡張性が高まります。
Reactの大きな特徴の一つに仮想DOMがあります。これは、実際のブラウザのDOMの軽量なコピーのようなものです。
何が便利か？
データが更新されると、Reactはまず仮想DOM上で新しいUIツリーを作成します。
次に、前の仮想DOMツリーと新しいツリーを比較し（差分検出）、実際に変更が必要な最小限の箇所だけを特定します。
そして、その特定された変更だけを、効率的に実際のブラウザのDOMに反映します。
実際のDOM操作はコストが高いのですが、仮想DOMを使うことで、アプリケーションの描画パフォーマンスが向上します。
Reactは巨大なコミュニティに支えられており、ルーティング（React Router）、状態管理（Redux, MobX, Recoil, Zustandなど）、テスト、UIコンポーネントライブラリなど、開発を助けるためのツールやライブラリが非常に豊富です。
Reactは、JavaScriptをベースにしているため、Node.jsとnpm（またはYarn/pnpm）がインストールされていることが前提となります。
現在、Reactプロジェクトを始める最も推奨される方法は、Viteなどのモダンなビルドツールを使用することです。これにより、開発環境のセットアップが簡単に行えます。
# Viteを使って新しいReactプロジェクトを作成
npm create vite@latest my-react-app -- --template react
my-react-app の部分がプロジェクト名になります。
上記のコマンドを実行後、ターミナルの指示に従って進めます。
作成したディレクトリに移動し、必要な依存関係をインストールしてから、開発サーバーを起動します。
cd my-react-app
npm install
npm run dev
これで、通常は http://localhost:5173 などでアプリケーションがブラウザで確認できるようになります。
Reactの最も基本的な仕組みであるコンポーネントと状態（State）を使った簡単なカウンターコンポーネントの例です。
src/Counter.jsx
// 必要なReactフックをインポートします
import React, { useState } from 'react';
// Counterという名前の関数コンポーネントを定義
function Counter() {
// 1. 状態の定義:
// カウントの現在の値 (count) と、それを更新するための関数 (setCount) を定義します。
// 初期値は 0 です。
const [count, setCount] = useState(0);
// 2. イベントハンドラ:
// ボタンがクリックされた時に実行される関数
const incrementCount = () => {
// setCountを使って状態を更新します。
// countの値が変更されると、Reactはこのコンポーネントを再描画します。
setCount(count + 1);
};
const decrementCount = () => {
// countが0より大きい場合のみデクリメント
if (count > 0) {
setCount(count - 1);
}
};
// 3. 宣言的なUI (JSX):
// この関数が返すJSX（JavaScript XML）がUIとして描画されます。
return (
<div>
{/* 現在のカウント値を表示 */}
<h1>現在のカウント: {count}</h1>
{/* ボタンがクリックされると incrementCount が実行されます */}
<button onClick={decrementCount} style={{ margin: '5px' }}>
-1 減らす
</button>
<button onClick={incrementCount} style={{ margin: '5px' }}>
+1 増やす
</button>
</div>
);
}
// 他のファイルから使えるようにエクスポート
export default Counter;
src/App.jsx での使用例
import Counter from './Counter'; // 作成したコンポーネントをインポート
import './App.css'; // スタイルをインポート
function App() {
return (
<div className="App">
<h2>Reactカウンティングアプリ</h2>
{/* Counterコンポーネントを配置 */}
<Counter />
{/* 再利用性のデモとして、もう一つ配置することも可能 */}
{/* <Counter /> */}
</div>
);
}
export default App;
useState
これはHooks（フック）と呼ばれるReactの機能の一つで、関数コンポーネント内で「状態」を持たせるために使われます。
JSX
HTMLのような見た目ですが、実際はJavaScriptの拡張構文です。JavaScriptの変数や関数を {} で埋め込むことができます。
onClick
ボタンのイベントハンドラです。通常のHTMLと異なり、キャメルケース（onClick）で記述し、値としてJavaScriptの関数を渡します。
このように、Reactではコンポーネントを作成し、その中の状態を管理することで、複雑なUIを構造化して構築することができます。ご興味があれば、次はProps（コンポーネント間のデータ受け渡し）やHooksについて調べてみるのがおすすめです！
