Reactとは何か？主要な概念とjQueryとの違い
Reactはユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。jQueryがページ要素を直接選択して変更することに焦点を当てているのに対し、Reactはデータの特定の状態に基づいてインターフェースを記述することに焦点を当てています。コンポーネントとstateを理解することで、両方のツールを比較し、いつ使用するかを判断しやすくなります。
Reactとは何か？
Reactでは、ボタン、検索ボックス、記事カードなど、インターフェースの部分をコンポーネントとして構築します。各コンポーネントは、その外見と関連する動作を結びつけます。コンポーネントをページに組み合わせたり、各記事に異なるタイトルや著者を指定してカードを再利用したりすることができます。
ReactはJavaScriptを使用し、HTMLとCSSはウェブインターフェースの構造や外見を理解するために依然として有用です。Reactをインストールしても、ログインサーバー、データベース、URL間のナビゲーションは自動的には提供されません。他の部分は自分で選択し実装する必要があります。この記事はブラウザで動作する基本的なインターフェースに焦点を当てています。公式Reactクイックスタートでは、構成要素が紹介されています。
Reactの基本概念
コンポーネント: 表示と動作の単位
関数コンポーネントは、表示する内容を返すJavaScript関数です。定義するコンポーネントの名前はProductCardのように大文字で始まり、buttonのようなHTML要素は小文字の名前を使用します。次のコンポーネントはカードを一度定義し、異なる製品データでその構造を再利用できるようにしています。
function ProductCard({ name, price }) {
return (
<article className="product-card">
<h3>{name}</h3>
<p>KRW {price}</p>
</article>
);
}JSX: JavaScript内でのマークアップ表現
JSXは、JavaScriptファイル内でHTMLのようなマークアップを書くことを可能にする構文拡張です。上記の<article>のセクションがJSXです。波括弧を使うことで、nameやpriceのようなJavaScript式を挿入できます。このコンポーネントを通常のHTMLファイルに貼り付けるだけでは実行できません。
JSXはclassの代わりにclassNameを使用し、<img />のように明示的に閉じるタグを必要とします。複数のトップレベル要素は親要素またはFragmentで囲む必要があります。JSXは入門用の例やプロジェクトで一般的ですが、ReactはJSXなしでも使用できます。構文についてはReactでのJSXの書き方のルールを参照してください。
Props: 親から渡されるデータ
Propsは「プロパティ」の略で、親コンポーネントが子コンポーネントに渡す値です。同じカードで異なる名前や価格を表示したり、同じボタンで異なるラベルを表示したりすることができます。Propには文字列、数値、オブジェクト、関数を含めることができます。以下は、韓国ウォン（KRW）で価格が表示される商品の例です:
<ProductCard name="Beginner keyboard" price={35000} />子コンポーネントは出力を作るために自身のpropsを読み取ります。propsは読み取り専用として扱います：もしその値を変更する必要がある場合は、親のデータを更新して新しい値を渡してください。親はまた、ユーザー操作後に子が呼び出すコールバック関数を渡すこともできます。コンポーネントへのpropsの渡し方はこのデータフローを説明しています。
State: 変化する値を記憶すること
Stateはコンポーネントが覚えておく必要のある情報で、例えば入力値、選択、クリック数などです。useStateを呼び出すと、現在の値とそれを更新するための関数が返されます。useStateはフックであり、コンポーネントがReactの機能にアクセスできるようにする関数です；コンポーネント関数のトップレベルで呼び出してください。
const [count, setCount] = useState(0);初期値は0で、countが現在の状態、setCountが更新を要求します。通常の変数を変更するだけでは、Reactにインターフェースを更新するように伝えることはできません。表示を動かす値には適切な状態構造が必要です。状態: コンポーネントの記憶は、状態がローカル変数とはどう異なるかを説明します。
Reactはどのようにインターフェースを更新するのですか？
カウンターでは、ボタンをクリックすると状態の更新が要求されます。Reactはその状態の出力を計算し、必要な変更をDOMに適用します。ドキュメントオブジェクトモデル（DOM）は、要素やテキストを含む文書のブラウザ上でのオブジェクト表現です。
- ユーザー操作: ボタンクリックがイベントハンドラを実行します。
- 更新リクエスト:
setCountは次の値を指定します。 - レンダー: React はコンポーネントを呼び出して出力を計算します。
- コミット: React は必要な変更を DOM に適用します。
- ペイント: ブラウザが結果を描画します。
レンダリングとは、コンポーネントを呼び出して出力を計算することを意味します。それはページ全体を再読み込みしたり、すべての HTML 要素を削除して再作成したりすることを意味するわけではありません。出力が変わらない場合、レンダーでは DOM の変更が不要な場合があります。React の レンダーとコミットに関するドキュメント はこれらのステップを区別しています。
setCountを呼び出しても、実行中のイベントハンドラー内のcountの値がすぐに置き換わるわけではありません。それは次のレンダーのために状態を要求するもので、Reactは複数の更新をまとめて処理することができます。新しい値が以前の値に依存する場合は、アップデータ関数でその関係を表現します。
setCount(previousCount => previousCount + 1);この関数は保留中の状態を受け取り、次の状態を返します。いくつかのインクリメントがキューに入っている場合に便利です。なぜなら各更新が前の結果から計算されるからです。useStateリファレンスでは、アップデータ関数とその要件について説明しています。
ReactとjQueryの違いは何ですか？
jQueryもJavaScriptのライブラリです。セレクタ、イベント処理、コンテンツやスタイルの変更、そしてAjaxリクエストを提供します。AjaxはAsynchronous JavaScript and XMLの略で、ページ全体を再読み込みすることなくサーバーとデータを交換する技術です。交換されるデータはXMLである必要はありません。公式のjQuery紹介では、DOM操作とイベント処理が主な機能として挙げられています。
| 比較 | jQuery | React |
|---|---|---|
| インターフェース構造 | HTMLを書き、必要な要素を選択して操作します。 | コンポーネントを組み合わせ、データを使ってその出力を記述します。 |
| 更新 | テキストを明示的に変更したり、要素を追加したり、クラスを変更したりします。 | Reactは、状態とプロパティに基づいてレンダリングされた出力を適用します。 |
| データと表示 | 各データの変更を必要なインターフェースの変更に接続します。 | インターフェースを状態の表現として説明します。 |
| イベント | .on()のようなAPIを通じてハンドラーをアタッチします。 |
onClickのようなJSXプロパティを通じてハンドラーを渡します。 |
| 再利用 | 関数、プラグイン、およびプロジェクトで選択した構造を使用します。 | コンポーネントを再利用し、異なるプロパティを渡します。 |
| 開発環境のセットアップ | 簡単な例では、HTMLファイルにスクリプトを読み込むことができます。 | JSXやモジュールを使用する典型的なプロジェクトでは、ビルドツールを設定します。 |
商品をカートに追加することを考えてみましょう。jQueryを使う場合、コードはリスト項目を挿入し、数量と合計を更新し、空のカートメッセージを非表示にするかもしれません。Reactを使う場合、カートの状態に基づいてこれらの表示を記述できます。どちらのアプローチもサーバーエラーを自動的に処理したり、すべての受信データを検証したりするわけではありません。
React が常に高速であるわけではなく、jQuery のコードが常に保守しにくいわけでもありません。結果はインターフェース、実装、読み込まれるコード、ユーザーの操作に依存します。単一の小さなインタラクションと、多くの状態を同期するインターフェースでは保守の必要性が異なるため、それぞれの文脈で評価してください。
jQuery と React で同じカウンターを作る
どちらの例も 0 から始まり、ボタンを押すたびにカウントが 1 増えます。見出しは使用しているライブラリを示し、機能とレイアウトはそれ以外は同等です。それぞれの実装が表示される数字を更新する箇所を比較してください。以下の例は React 19.3.0、jQuery 4.0.0、Vite 8.3.4、Node.js 24.19.0、Microsoft Edge 154 で、マウスクリック、キーボード操作、ページリロードを含めて確認されています。
jQueryの例：選択した要素のテキストを変更する
以下の完全なコードをjquery-counter.htmlとしてUTF-8エンコーディングで保存し、ブラウザで開いてください。このコードは公式のコンテンツ配信ネットワーク（CDN）からjQuery 4.0.0を読み込むので、インターネット接続が必要です。利用可能なバージョンやファイルについては公式jQueryリリースを確認してください。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery counter</title>
<style>
body {
margin: 0;
color: #20242b;
background: #fff;
font: 18px/1.7 Arial, sans-serif;
}
.counter {
box-sizing: border-box;
max-width: 460px;
margin: 24px auto;
padding: 24px;
border: 1px solid #c6d2dd;
border-radius: 12px;
background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
padding: 10px 18px;
border: 0;
border-radius: 6px;
background: #006c9c;
color: white;
font: inherit;
cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
</style>
</head>
<body>
<main class="counter">
<h1>jQuery counter</h1>
<p>Click count: <span id="count" aria-live="polite">0</span></p>
<button type="button" id="increase">Add 1</button>
</main>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
let count = 0;
$('#increase').on('click', function () {
count += 1;
$('#count').text(count);
});
</script>
</body>
</html>
$("#increase")はボタンを選択し、.on("click", ...)はハンドラーをアタッチします。変数を変更した後、コードは$("#count").text(count)を呼び出して表示されるテキストを更新します。これらの操作については、jQuery .on() リファレンスおよびjQuery .text() リファレンスを参照してください。
HTML内ではスクリプトをボタンの後に記述しているため、この例が実行される時点でターゲット要素は既に存在します。何も変化がない場合は、CDN リクエストとブラウザの開発者ツールのコンソールエラーを確認し、要素の ID とセレクターを比較してください。これを WordPress テーマに適用する際は、ライブラリを二重に読み込まないように注意し、$ が noConflict 設定下で jQuery を参照しているかどうかを確認してください。
React の例: インターフェースを変更するために state を更新する
この学習例では、Vite の JavaScript React テンプレートを使用します。Vite は開発サーバーを提供し、ソースファイルを変換およびビルドします。Node.js はこれらのツールをあなたのコンピュータ上で実行し、npm はパッケージをインストールしてプロジェクトコマンドを実行します。Viteの導入要件を満たすサポート対象の長期サポート（LTS）版 Node.js をインストールしてください。2026 年 10 月時点で、ガイドには Node.js 20.19+ または 22.12+ と記載されています。生成されたテンプレートの追加要件も確認してください。
- プロジェクトを作成したいフォルダーでターミナルを開きます。同じ名前のフォルダーがすでに存在しないことを確認してください。
- 以下のコマンドを実行して、JavaScript
reactテンプレートを作成し、そのパッケージをインストールします。
npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install初回実行時、npmはスキャフォールディングツールのインストール確認を求める場合があります。インストール後、src/App.jsxの内容を以下のコードに置き換えてください。labelは親コンポーネントから渡されるpropsで、countはコンポーネントが記憶しているstateです。
import { useState } from 'react';
function Counter({ label }) {
const [count, setCount] = useState(0);
function handleClick() {
setCount(previousCount => previousCount + 1);
}
return (
<main className="counter">
<h1>{label}</h1>
<p>Click count: <span aria-live="polite">{count}</span></p>
<button type="button" onClick={handleClick}>Add 1</button>
</main>
);
}
export default function App() {
return <Counter label="React counter" />;
}
src/main.jsxでは以下のエントリーコードを使用してください。createRootはReactインターフェースをIDがrootのHTML要素に接続し、index.cssがスタイルを供給します。
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
jQueryの例に合わせるために、以下のCSSでsrc/index.cssを置き換えてください。置き換えたApp.jsxはApp.cssをインポートしないため、テンプレートのデフォルトコンポーネントスタイルがこのレイアウトに干渉することはありません。
body {
margin: 0;
color: #20242b;
background: #fff;
font: 18px/1.7 Arial, sans-serif;
}
.counter {
box-sizing: border-box;
max-width: 460px;
margin: 24px auto;
padding: 24px;
border: 1px solid #c6d2dd;
border-radius: 12px;
background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
padding: 10px 18px;
border: 0;
border-radius: 6px;
background: #006c9c;
color: white;
font: inherit;
cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
プロジェクトのindex.htmlには、<div id="root"></div>およびsrc/main.jsxを読み込むモジュールスクリプトを含める必要があります。Viteテンプレートのこの構造を維持し、英語のドキュメントにはlang="en"を使用してください。開発サーバーを起動します:
npm run devターミナルに表示されるローカルアドレスを開きます。通常はhttp://localhost:5173ですが、そのポートが使用中の場合は別のポートが使用されることがあります。サーバーを停止するには、ターミナルでCtrl+Cを押します。変更が反映されない場合は、ファイルを保存して正しいプロジェクトで作業しているか確認してください。JSXのエラーはターミナルまたはブラウザのエラー表示に表示されます。
Reactのハンドラーは、数値要素を選択してそのテキストを置き換えることはありません。JSX式{count}は出力をステートに接続し、setCountは新しいステートを要求します。両方の例では、ストレージが実装されていないため、ページをリロードするとカウントは0にリセットされます。これらの例は更新パターンを示すものであり、パフォーマンスのベンチマークではありません。
ReactとjQueryのどちらを選ぶべきか？
既存のページに小さな機能を追加する場合
要素や小さなメニューを切り替えるボタンは、jQueryを使えば簡単に作成できます。既存のページがすでにjQueryに依存している場合、その構造を維持することで変更の範囲を減らすことができます。また、標準的なDOM APIで十分かどうかも検討してください。すべての小さなインタラクションに新しい依存関係を追加する必要はありません。
接続された状態を持つインターフェースの構築
同じデータが商品リスト、フィルター、カートの合計に影響する場合や、同様のインターフェースが繰り返し表示される場合、Reactのコンポーネントと状態モデルを検討する価値があります。それでもどのコンポーネントがどの状態を保持するか、サーバーデータをいつ更新するかは決める必要があります。Reactを採用しただけでは、良いデザインが保証されるわけではありません。
既存のサイトの一部にReactを追加する
React を使用するためにサイト全体を再構築する必要はありません。特定の要素の内側にコンポーネントをマウントし、ページの残りの部分は既存の形式のままにすることができます。既存プロジェクトに React を追加する公式ガイド では、セットアップと適用範囲について説明されています。
React と jQuery が同じページを共有する場合、DOM の所有権について明確な境界を設ける必要があります。React によって管理される子要素を任意に追加または削除すると、実際の DOM が React のビューと同期しなくなる可能性があります。DOM を操作するプラグインには、適切なライフサイクル内で初期化とクリーンアップを管理する統合が必要です。これらの制限については React が管理する DOM の変更に関するガイダンス を参照してください。
ツールを採用する前に、インターフェースの状態の複雑さ、再利用可能なコンポーネント、チームのJavaScriptの経験、および開発とデプロイの設定を考慮してください。既存のjQuery依存がある小さなページは、新しいインタラクティブなアプリケーションとは異なるニーズがあります。HTML、CSS、およびJavaScriptの基本を学んだ後で、これらのカウンターを実行すると、要素を直接変更する場合と状態を通じてインターフェースを記述する場合の具体的な比較が可能です。
