React の使い方

Web システムの世界では、様々な理由から HTML や JavaScript といった、言語ごとの大きい縦の区切りでソースコードを分割するのが普通でした。 しかしその場合、UI 部品の「処理」と「見た目」がそれぞれ別々のファイルに記述されてしまうことになるため、 UI 部品を再利用することが少し困難でした。

React を使用すると、UI 部品の「処理」と「見た目」の両方を「コンポーネント」という単位で1つにまとめることが可能になります。 コンポーネントという単位でまとめることで、UI 部品として再利用することが容易になります。 また、開発を行う際にも、コンポーネントという単位で作業を分担することができるようになるため、 大人数での作業がしやすくなったりします。

では、実際にどうやってコンポーネントを作成するか見てみましょう。 下記の例を見てください。 これは、ボタンをただ表示するだけのコンポーネントになります。 React のコンポーネントは、JavaScript の関数として記述します。 関数の中にそのコンポーネントの「処理」を記載し、その「見た目」を return で返します。 普通の JavaScript の関数との違いは return でコンポーネントの見た目を返すかどうかぐらいでしかありません。

function MyButton() {

	// コンポーネントの「処理」をここに記述する
	// 例えば、ボタンの状態や、ボタンが押された時の処理などを記述する

	// コンポーネントの「見た目」を返す
	return (
		<button>This is a button</button>
	);
}

え？ JavaScript ファイルの中に HTML タグが直接書かれているように見える？ これではシンタックスエラーになって動かないのではないかですって？？？ ...そうです。その通りです。 これは JSX と言いまして、JavaScript の中に HTML タグのようなマークアップを直接記述できるようになる拡張構文になります。 JSX の詳細については後述しますので、まずはコンポーネントの振舞いについて注目してください。

今度は上記の例で作成したコンポーネント「MyButton」を、別のコンポーネントの中で使用する方法を見てみましょう。 コンポーネントの中で、別のコンポーネントを使用するには、 return で返すマークアップの中に、使用したいコンポーネントを HTML のタグと同様にマークアップの形式で記述します。 通常の HTML のタグと区別するために、コンポーネントの名前の先頭は常に大文字にする必要があるので注意してください。 このようにマークアップとして記述することで、好きな位置に好きなコンポーネントを埋め込むことができます。

function MySection() {
	return (
		<section>
			<h1>This is a h1</h1>
			<MyButton />
		</section>
	);
}

上記の2つのコンポーネントを実際に使用すると下記のような結果になります。 ちゃんと2つのコンポーネントが混ざった見た目になっていることを確認してください。

<section>
	<h1>This is a h1</h1>
	<button>This is a button</button>
</section>

React のコンポーネントがどんなものなのかイメージできましたでしょうか。 React のコンポーネントとは、マークアップを返す JavaScript の関数でしかありません。 実際に使用する際には、コンポーネントの状態を管理したり、 別のコンポーネントにパラメーターを渡したり、 表示を切り替えたり、ループしたり、イベントハンドラを設定したりといった細かな処理が必要になるでしょう。 もっと詳しい説明については公式のドキュメントを見てもらった方が良いと思いますので、そちらを参照してください。

JSX はコンポーネントの「見た目」を記述するために使用されている JavaScript の拡張構文です。 JSX を使用することで、HTML タグを直接 JavaScript ファイルの中に書くことができます。 とはいえ、これは実際には HTML タグと完全に同じものではありません。 JSX には HTML タグとの違いがいくつか存在しています。 例えば、JSX では、全てのタグを閉じる必要があります。 <br> ではなく、<br /> と記述しなければなりません。 お気付きの方もいると思いますが、この記述方法は XML と同じです。 かなり昔に一時期流行った XHTML を思い出していただければわかりやすいのではないでしょうか。 つまり、JSX とは JavaScript の中に直接書ける XML のようなものなのです。

React では JSX を JavaScript の中で HTML タグを記述するためのシンタックスシュガーとして使用します。 JSX を使用せずに React を使用することもできるのですが、その場合は HTML タグに相当する関数呼び出しを自前で記述することになり、 かなりメンドクサイことになるので、JSX は使用した方が良いと思います。

例えば、上記の例で使用した「MySection」コンポーネントを、JSX を使用せずに記述すると下記のような記述になります。 JSX を使用した例と比べてみてください。

function MySection() {
	return React.createElement(		// <section> ～ </section>
		"section",
		null,
		React.createElement(		// <h1> ～ </h1>
			"h1",
			null,
			"This is a h1"
		),
		React.createElement(MyButton, null)		// <MyButton />
	);
}

つまり、JSX を使用すると、記述されたタグの1つ1つを React.createElement() という関数の呼び出しに自動で変換してくれるのです。 JSX が無いとどれくらいメンドクサイか理解いただけますでしょうか。

とはいえ、JSX は JavaScript 本来の機能ではありません。 そのため、ブラウザで直接動作させることはできません。 JSX を動作させるためには、JSX から実際に動作する JavaScript へ変換する必要があります。 この変換は Babel や TypeScript などで行うことができます。 具体的な変換方法は後述します。

script タグで CDN から直接 React を読み込んで使用することができます。 下記の例では、unpkg を使用していますが、 他にも jsDelivr や cdnjs など、 npm パッケージを提供する CDN なら何でも使用することができます。 もちろん、このファイルをダウンロードして、自分で配信することもできます。

<!-- react パッケージの読み込み -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

<!-- react-dom パッケージの読み込み -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

npm を使用してインストールする場合は、下記のコマンドを実行します。 npm の使い方がわからないという方は、「Node.js と npm の使い方（その１：概要）」を参考にしてください。

npm install --save-dev react react-dom

npm を使用してインストールした場合は、使用したいファイルで読み込む必要があります。 CommonJS の場合は require()、ES Modules の場合は import を使用して読み込みます。

// react パッケージの読み込み
const React = require('react');

// react-dom パッケージの読み込み
const ReactDOM = require('react-dom/client');

// react パッケージの読み込み
import React from 'react';

// react-dom パッケージの読み込み
import ReactDOM from 'react-dom/client';

Babel 8 より前ではこれがデフォルトです（この記事の作成時点では Babel 7.22.10 が最新） JSX が JavaScript に変換される際、React.createElement() に変換されます。 しかし、これには少し問題があります。

JSX が React.createElement() に変換されるということは、 JSX を使用している全てのファイルで React オブジェクトが使用できる状態を作り出さなければならないということ意味します。 React 本体を script タグを使用して読み込んでいる場合は、React オブジェクトがグローバルに存在しているので問題はありません。 npm パッケージの方の React を require()（CommonJS の場合）や import（ES Modules の場合）を使用して読み込んでいる場合は、JSX を使用している全てのファイルで、 React オブジェクトを require() / import しておく必要があります。 例え、ソースコード上で React オブジェクトを全く使用していないように見えたとしても、 JSX の変換後には必ず React オブジェクトが使われている状態になってしまうからです。

// React オブジェクトは下記のコード上のどこにも使用していないように見えるかもしれませんが、
// JSX の部分が React.createElement() に変換されるため必要になります
import React from 'react';

function MyButton() {
	return (
		// この部分が React.createElement() に変換される
		<button>This is a button</button>
	);
}

新バージョンでは、JSX が JavaScript に変換される際、_jsx() に変換されます。 また、自動で _jsx() の require() / import を追加してくれるようになります。 つまり、旧バージョンで問題となった require() / import の無駄な記述が必要なくなります。

新バージョンは Babel 7.9.0 以降で使用できますが、デフォルトでは有効になっていません。 そのため、使用する際には Babel の設定を変更する必要があります。 Babel 8 以降ではこちらがデフォルトになるとのことなので、 設定がメンドウという方は Babel のバージョンアップを待っても良いかもしれません。

新バージョンを使用するには、webpack の「@babel/preset-react」パッケージの設定で、 runtime に automatic を指定します。 ちなみに旧バージョンを使用する場合は、classic を指定します。

module.exports = {
	mode: 'production',
	entry: {
		main: './src/index.js',
	},
	output: {
		path: __dirname + '/dist',
		filename: '[name].js',
	},
	module: {
		rules: [
			{
				test: /\.(?:js|mjs|cjs)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: [
							['@babel/preset-react', {runtime: 'automatic'}],
						],
					},
				},
			},
		],
	},
};

「eslint-plugin-react」パッケージをインストールするには、下記のコマンドを実行します。

npm install --save-dev eslint-plugin-react

「eslint-plugin-react」パッケージがインストールできたら、ESLint の設定ファイルを下記のように変更します。 extends に plugin:react/recommended を追加することで JSX が扱えるようになります。 また、settings.react.version で React のバージョンを指定する必要があります。 detect を指定すると使用されている React のバージョンを自動で設定してくれます。 現状では指定しないと Warning が表示されるようです。 将来的にはデフォルトが detect になり、指定しなくても良くなるようです。

module.exports = {
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
	],
	"settings": {
		"react": {
			"version": "detect",
		},
	},
};

React を script タグで読み込んでいる場合は、 ESLint からは React オブジェクトと ReactDOM オブジェクトが見つかりませんので、 globals に追加してエラーにならないように設定します。

module.exports = {
	"globals": {
		"React": "readonly",
		"ReactDOM": "readonly",
	},
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
	],
	"settings": {
		"react": {
			"version": "detect",
		},
	},
};

JSX の変換が新バージョンの場合は、extends に plugin:react/jsx-runtime を追加します。 旧バージョンの場合では必要だった require() / import が、 新バージョンでも残ってると指摘してくれるようになります。

module.exports = {
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
		"plugin:react/jsx-runtime",
	],
	"settings": {
		"react": {
			"version": "detect",
		},
	},
};

React にはコンポーネントに型の定義を追加して、型チェックを行うことができる PropTypes という機能があります。 TypeScript の型チェックのようなものです。 ESLint では PropTypes による型チェックがデフォルトで有効になっています。 無効化したい場合は下記のように変更します。

module.exports = {
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
	],
	"rules": {
		"react/prop-types": "off",
	},
	"settings": {
		"react": {
			"version": "detect",
		},
	},
};