PROGRAMMING

初心者でも分かる！React.js～基礎編～

thumb005

入門編でご説明したReactの概念をもとに、実際にコードを紹介していきます。
 

React.jsの導入方法

 
前回の続きから、さっそくReact.jsを導入していきたいと思います。
必要なモジュールなどはなく、headタグで読み込むだけでOKです。
CDNを使えば、すぐに実装可能です。
 

React.js公式導入方法

 
React.jsで紹介されている導入方法は、下記のコードのようにheadタグでCDNを呼び出します。
そして、bodyタグ内でtype属性でtext/babelを指定したscriptタグで記述します。
 
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello React</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	</head>
	<body>
		<div id="content"></div>
		<script type="text/babel">
			// ここにコードが入ります
		</script>
	</body>
</html>

 

React.jsの外部JSファイル版導入方法

 
でも、JSファイルを外部から呼び出すときはどうしたらいいの？という問題がでてきました。
 
もし外部から呼び出したいときは、いつもJSファイルを呼び出すときのようにheadタグに記述し、type属性でtext/babelを指定したscriptタグで呼び出すだけでOKです。
例えば、render.jsというファイルを呼び出したい時は下記のようになります。
 
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello React</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<script src="/js/render.js" type="text/babel"></script>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>

 

コンポーネントを作って、表示する

 
おおまかにいうと、React.createClass()でコンポーネントを作成し、ReactDOM.render()でコンポーネントを表示します。
前回、javascriptのコードの中にHTMLタグのようなものを記述できるとお話しましたが、下記のようなコードになります。
 
render.js

var Compornent = React.createClass({
	render: function(){
		return (
			<div className="compornent">
				Hello World!!
			</div>
		);
	}
});
ReactDOM.render(
	<Compornent />,
	document.getElementById('content')
);

 
このXMLに似た記述の仕方をJSXといって、javascriptシンタックスの拡張です。
React.jsはツリー構造を定義するために最も適しているのがJSXだと説明しています。
実際にJSXを使用せずに、javascriptでコンポーネントを生成することもできます。
けれど、やはり私もHTMLタグのようなもののほうが扱いやすいと感じていますので、JSXでコードを紹介していきます。
 
var Compornentで宣言したCompornentに、コンポーネントが入っています。
それをReactDOM.render()の第一引数で指定することによって、第二引数で指定した要素内に挿入されます。
 
Web制作をやっていた人からすると、ちょっと見慣れない記述の仕方ですよね。
 
<Compornent />というReact.jsのエレメントは、オブジェクトのインスタンスに似ていて、React.jsのコンポーネントはオブジェクトのクラスに似ています。
これをコンポーネント指向といって、関数型プログラミングのすべての関数が必ずなんらかの返り値を返すということと、概ね同じ仕組みです。
 
なんたが小難しくなってきましたね。でも大丈夫です。
この仕組みをさっくりと理解することで、かなりコーディングが楽になってきます。
 

リストタグのコンポーネントを表示する

 
list01～list03という文字列の入ったliタグを3つ表示させます。
 
render.js

var list = [
	{'id':0, 'str': 'list01'},
	{'id':1, 'str': 'list02'},
	{'id':2, 'str': 'list03'},
];
var Compornent = React.createClass({
	render: function(){
		return (
			<ul>
				{this.props.data.map(function(result){
					return (
						<li key={result.id}>
							{result.str}
						</li>
					);
				})}
			</ul>
		);
	}
});
ReactDOM.render(
	<Compornent data={list} />,
	document.getElementById('content')
);

 
上記のように、JSON配列をレンダリングすることも可能です。
データモデルとの連携をする場合は、<Compornent data={list} />として属性のようにデータを渡します。
そして、React.createClass()内で、this.props.dataとして受け取ることができます。
ちなみに、map()は配列を展開します。
 
ここで注意したいのが、render()内のreturnでタグを記述しますが、展開する場合はもう一度returnする必要があります。
そして、リストタグのように複数の同じ要素を生成させる場合はkeyが必要になります。
keyも属性のように、li key={result.id}と指定します。
 

最後に

 
コンポーネントを作成して表示するまでご紹介しました。
初めは見慣れない記述ですが、仕組みを読み解くと構造はとてもシンプルですね。
ここから実践編として、Ajaxで非同期通信したデータを扱っていきたいと思います。