HTML5テクニカルノート

React入門 01: コンポーネントを組み立てる

ID: FN1608002
Technique: HTML5 / JavaScript
Library: React 15.4.2

ReactはFacebook社が開発している、今もっとも注目されているJavaScriptフレームワークです。HTMLの要素を動的につくり上げて、ページに差し込むことができます。「JSX」というJavaScriptを拡張したシンタックスにより、JavaScriptコードの中にXMLと似た階層構造をもつタグが書き込めます(「JSXの深層」参照)。

01 コンポーネントをつくってHTMLドキュメントに差し込む

HTMLドキュメントは、つぎのように構成します。<div>要素(id属性"content")にReactのコンポーネントからつくった要素を差し込みます。Reactの基本的な設定やJSXについては「React: まずは動かしてみる」をお読みください。


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>

<script src="src/script.js" type="text/babel"></script>
</head>
<body>
	<div id="content"></div>
</body>
</html>

Reactは部品となるコンポーネントで要素を組み立てます。コンポーネントのクラスをつくるのが、React.createClass()メソッドです。以下のコード001のように、renderメソッドを定め、JSXのXML記法でつくる要素を返します。メソッドの戻り値を与えた変数(CommentBox)がクラス名になります。そして、ReactDOM.render()メソッドにより、つくられた要素をHTMLドキュメントに差し込みます。第1引数がクラスからつくる要素、第2引数は要素を差し込む親要素です

HTMLドキュメントと同じ場所に設けたフォルダsrcに、JavaScriptファイルscript.jsをつくってJavaScriptコードを書くことにします。以下のコード001により、HTMLドキュメントの<body>要素には、つぎのようなコードが動的に加えられ、ページにテキストが示されます(図001)。


<div id="content">
	<div data-reactroot="" class="commentBox">
	CommentBoxを表示
	</div>
</div>

図001■ページに示されたコンポーネントのテキスト

コード001■コンポーネントからつくった要素をHTMLドキュメントに動的に差し込む


var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				CommentBoxを表示
			</div>
		);
	}
});
ReactDOM.render(
	<CommentBox />,
	document.getElementById('content')
);

02 コンポーネントを組み合わせる

コンポーネントは組み合わせて階層化できます。つぎのように、親コンポーネントに新たにふたつのコンポーネント(CommentListとCommentForm)を加えましょう。


var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				<h1>コメント</h1>
				<CommentList />
				<CommentForm />
			</div>
		);
	}
});

ふたつのコンポーネント(CommentListとCommentForm)はつぎのように定めます。今のところ、まだふたつとも同じ仮のかたちです。


var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				CommentListを表示
			</div>
		);
	}
});
var CommentForm = React.createClass({
	render: function() {
		return (
			<div className="commentForm">
				CommentFormを表示
			</div>
		);
	}
});

これで、つぎのような要素が<body>要素に動的に加えられ、それぞれのテキストがHTMLドキュメントに示されます(図002)。これらの手を加えたのが、以下のコード002です。


<div id="content">
	<div data-reactroot="" class="commentBox">
		<h1>コメント</h1>
		<div class="commentList">CommentListを表示</div>
		<div class="commentForm">CommentFormを表示</div>
	</div>
</div>

図002■ふたつのコンポーネントから加えられた要素にテキストが示された

コード002■親コンポーネントに子コンポーネントを加える


var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				<h1>コメント</h1>
				<CommentList />
				<CommentForm />
			</div>
		);
	}
});
var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				CommentListを表示
			</div>
		);
	}
});
var CommentForm = React.createClass({
	render: function() {
		return (
			<div className="commentForm">
				CommentFormを表示
			</div>
		);
	}
});
ReactDOM.render(
	<CommentBox />,
	document.getElementById('content')
);

03 コンポーネントのプロパティを取り出す

コンポーネントには、つぎのように属性のかたちでプロパティ(author)が与えられます。プロパティを使えば、同じコンポーネントのクラスからつくった要素でも、表示が変えられます。


var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				<Comment author="ヘンリー・キッシンジャー">チャンスは貯金できない。</Comment>
				<Comment author="マーク・トウェイン">禁煙なんてたやすい。私は何千回もやった。</Comment>
			</div>
		);
	}
});

新たなコンポーネント(Comment)は、つぎのように定めました。JSXに波括弧{}でJavaScriptの式を書いて、テキストやコンポーネントが加えられます。this.propsプロパティを参照して、親要素に与えたプロパティが取り出せます(「Component API」参照)。また、子要素はそのchildrenプロパティで参照できます。


var Comment = React.createClass({
	render: function() {
		return (
			<div className="comment">
				<h2 className="commentAuthor">
				{this.props.author}
				</h2>
				{this.props.children}
			</div>
		);
	}
});

これらの書き替えをしたのが、以下のコード003です。HTMLドキュメントには、ふたつのコンポーネントのテキストがプロパティ(author)の値とともに示されます。なお、以下のサンプル001にサイトjsdo.itのコードを掲げました。JSXを使ったため、JavaScriptコードも[HTML]タブに書いています。[Play]ボタンで実行できますし、jsdo.itのサイトで開けば[Fork]でコードを複製して編集することもできます。

図003■ふたつのコンポーネントのテキストとプロパティ値が示された

コード003■新たにふたつ加えたコンポーネントのテキストとプロパティ値を示す


var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="commentBox">
				<h1>コメント</h1>
				<CommentList />
				<CommentForm />
			</div>
		);
	}
});
var CommentList = React.createClass({
	render: function() {
		return (
			<div className="commentList">
				<Comment author="ヘンリー・キッシンジャー">チャンスは貯金できない。</Comment>
				<Comment author="マーク・トウェイン">禁煙なんてたやすい。私は何千回もやった。</Comment>
			</div>
		);
	}
});
var Comment = React.createClass({
	render: function() {
		return (
			<div className="comment">
				<h2 className="commentAuthor">
				{this.props.author}
				</h2>
				{this.props.children}
			</div>
		);
	}
});
var CommentForm = React.createClass({
	render: function() {
		return (
			<div className="commentForm">
				CommentFormを表示
			</div>
		);
	}
});
ReactDOM.render(
	<CommentBox />,
	document.getElementById('content')
);

サンプル001■React 15.4.2: Composing components

作成者: 野中文雄
更新日: 2017年3月13日 React公式サイトの構成およびライブラリのバージョン更新にともなう修正。
更新日: 2016年8月30日末尾のリンクにReact入門 06を追加
更新日: 2016年8月21日末尾にReact入門シリーズのリンクを追加。
作成日: 2016年8月13日