サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

React: まずは動かしてみる


ReactはFacebook社が開発している、今もっとも注目されているJavaScriptフレームワークです。HTMLの要素を動的につくり上げて、ページに表示することができます。ただ、なじみの少ない構文などの予備知識や準備が求められるため、初めての方には手をつけにくいきらいがあります。本稿では最小限のコードを示して、とりあえず大枠をご説明します。

01 ページに"Hello, world!"のテキストを動的に表示する

最小限のコードは以下に掲げました(コード001)。コードをそのままHTMLドキュメントにコピー&ペーストすれば、"Hello, world!"のテキストが示されます(図001)。

図001■ページに示された"Hello, world!"のテキスト

図001

コード001■ページにテキスト"Hello, world!"が含まれた要素を動的に表示する


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);
</script>
</head>
<body>
	<div id="example"></div>
</body>
</html>

前掲コード001には、あまり見かけない構文や役割のわからないJavaScriptライブラリも含まれているでしょう。順に、かいつまんでご説明します。

02 ReactのJavaScriptライブラリを<script>要素に読み込む

以下のふたつの<script>要素が、ReactのJavaScriptライブラリを読み込みます。CDNを使いましたので、ローカルにダウンロードしなくて構いません(図002)。


<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>

図002■Reactのダウンロードページに示されたCDNのコード

図002

03 JSXによるJavaScript構文の拡張

JavaScriptコードの中にHTMLのようなタグを書く以下のような構文は、あまりなじみがないでしょう。これは、「JSX」というJavaScriptを拡張したシンタックスです。JavaScriptコードにXMLと似た階層構造をもつタグが書き込めます(「JSXの深層」参照)。


<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);
</script>


<body>
	<div id="example"></div>
</body>

前掲のJSXコードを正しく処理すると、以下のHTMLに相当する要素(<h1>)が動的にページに差し込まれます。


<body>
	<div id="example">
		<h1 data-reactroot="">Hello, world!</h1>
	</div>
</body>

もっとも、JSXのコードはそのままブラウザで実行することはできません。エディタでも、エラーが示されるでしょう。XMLのタグを使わないつぎのようなJavaScriptコードに変換しなければならないのです。けれども、JSXは動的に加えられる要素とその構造がわかりやすい構文です。


ReactDOM.render(
	React.createElement(
		'h1',
		null,
		'Hello, world!'
	),
	document.getElementById('example')
);

04 BabelでJSXをコンパイルする

そこで、前掲コード001では、JSXを変換(コンパイル)するJavaScriptライブラリをつぎのように<script>要素で読み込んでいます。babel-coreはJavaScriptのコンパイラです。


<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

ただし、babel-coreのバージョンにご注意ください。本稿執筆時では、6.1.19が最新です。ところが、バージョン6ではReactのJSXが正しくコンパイルできません。そのため、あえて5.8.34を使っています。それに、コンパイルをブラウザ上で行うのは、効率的とはいえません。ですから、babel-coreのJavaScriptライブラリを使うのは、あくまで練習用と考えるのがよいでしょう。

図003■CDNJSのbabel-core

図003

Babelを使って、JSXを予め(静的に)コンパイルすることもできます。ただし、Node.jsのNPMを使いタスクランナーと組み合わせるなど、やり方がいろいろあり、本稿の対象とした初心者の前提知識から外れます。その解説は機会を見て、また別の記事で書くことにします。つぎのサンプル001はサイトjsdo.itに掲げたコードです。JSXを使ったため、JavaScriptコードも[HTML]タブに書いています。[Play]ボタンで実行できますし、jsdo.itのサイトで開けば[Fork]でコードを複製して編集することもできます。

サンプル001■React: Hello, world!


作成者: 野中文雄
更新日: 2016年8月30日 末尾のリンクにReact入門 06を追加
更新日: 2016年8月21日 末尾にReact入門シリーズのリンクを追加。
更新日: 2016年8月14日 サンプル001とその補足説明を追加。
作成日: 2016年8月7日


Copyright © 2001-2016 Fumio Nonaka.  All rights reserved.