Reactとは

React.jsは、Facebookによって開発されたJavaScriptのフロントエンドフレームワークです。データの変化に応じてUIを動的に更新する能力に重点を置いています。

Facebook、Instagramなどに使われていますが、Webアプリケーション、モバイルアプリケーション、デスクトップアプリケーションなど、さまざまなアプリケーションの開発に使用できます。

React.jsの特徴

  • jQuery等と違い、HTMLを書いてからその要素に処理を書く書き方ではない
  • jQueryに慣れている人にとっては作り方の概念の違いに違和感を感じる
  • HTMLファイルを作らずにいきなり.jsファイルから書き始める
  • 慣れない記述が多く、学習難易度が高い
  • React.jsで作られたWebページは仮想DOMで動く
  • UIをコンポーネントに分割して構築する
  • データの変化に応じてUIを動的に更新しやすい

React.jsは、データとUIを分離して考え、複雑なUIを簡単に構築することができます。一方のjQueryは、DOM要素を操作することに特化したフレームワークなので、React.jsほど複雑なUIを構築することはできません。

最終的に、React.jsとjQueryのどちらを使用するかは、プロジェクトの規模や複雑さ、開発者の経験などによって異なります。

React.jsとjQueryの比較表

項目React.jsjQuery
データとUIの分離ありなし
複雑なUIの構築得意不得意
バグの可能性高い低い
ドキュメントやチュートリアルの量少ない多い
初心者向け不向き向いている

React.jsとjQueryのメリットとデメリット

項目React.jsjQuery
メリット
  • データとUIの分離により、複雑なUIを簡単に構築できる
  • パフォーマンスが優れている
  • 拡張性が高い
  • 学習しやすい
  • 多くのドキュメントやチュートリアルが用意されている
  • バグの可能性は低い
デメリット
  • 学習曲線が急である
  • バグの可能性が高い
  • ドキュメントやチュートリアルの量が少ない
  • データとUIの分離がされていないため、複雑なUIを構築するのが難しい
  • パフォーマンスが低い
  • 拡張性が低い

React.jsよりもjQueryのほうが多くのドキュメントやチュートリアルが用意されているので、初心者はjQueryが使いやすいです。

React.jsとjQueryの使用例

用途React.jsjQuery
ソーシャルメディアのWebアプリケーション向いている不向き
オンラインショッピングのWebサイト向いている不向き
ブログのWebサイト不向き向いている
静的なWebサイト不向き向いている

jQueryとReact.jsのコードを比較

具体的に書き方や作り方にどんな違いがあるのか、例を見てみましょう。こちらの例は、ボタンをクリックするたびに、その下にある数値がカウントアップされていくプログラムです。

jQueryで書く場合

用意するのは「index.html」というHTMLファイルです。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<title>カウントアップの例</title>
	<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
	<script type="text/javascript">
		$(function() {
			let count = 0;

			$("#output").html(count);

			$("button").click(function() {
				count++;
				$("#output").html(count);
			});
		});
	</script>
</head>
<body>
	<button>カウントアップ</button>
	<div id="output"></div>
</body>
</html>

React.jsで書く場合

用意するのは「index.js」というJavaScriptファイルです。

index.js
import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from "react";

const Counter = () => {
	const [count, setCount] = useState(0);

	useEffect(() => {
		document.getElementById("output").innerText = count;
	}, [count]);

	return (
		<div>
			<button onClick={() => setCount(count + 1)}>カウントアップ</button>
			<div id="output"></div>
		</div>
	);
};

ReactDOM.render(
	<Counter />,
	document.getElementById('root')
);

今までjQueryに慣れ親しんできた方がReact.jsを学ぶときにまず大きな違和感を感じるのは、React.jsではそもそも!DOCTYPEの宣言やhead、bodyタグなどを書かないところです。