MonacaアプリでReactを使ってみよう
最近何かと話題になっているのがReactです。フレームワークという訳ではなく、ビューのライブラリですが、DOMの状態（ステータス）を意識せずに使える点がうけています。従来のサーバサイドのようにHTMLをレンダリングすれば後はReactが処理を行ってくれるのが便利です。
今回はそんなReactをMonacaアプリ開発で 使ってみます。なお、開発環境としてMonaca Localkitを使っています。
Localkitで新規プロジェクト作成
まずはMonacaアプリの新規プロジェクトを作成します。今回は最低限のテンプレートを選択しています。
wwwの下にsrcとjsというフォルダを作成しています。srcにはReact用のjsxファイルが、jsフォルダにはjsxから変換したjsファイルが入ります。
npmで設定
必要なライブラリはnpmでそろえます。あらかじめnode.jsをインストールしておいてください。
npm init
npm install --save react react-dom babelify babel-preset-react
npm install -g browserify babelify watchify
browserifyはrequireするファイルの連結、babelifyはES6に準拠した書き方の展開、watchifyは差分ビルド用に使います。構成は次のようになります。
ファイルの作成
ではjsxファイルを作成します。www/src/index.jsxとして作成します。
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
そしてこのjsxファイルを変換します。
$ watchify -t [ babelify --presets [ react ] ] www/src/index.jsx -o www/js/index.js -v
666455 bytes written to www/js/index.js (1.84 seconds)
-vをつけておくと簡単なメッセージが流れますのでちゃんと動いているか確認しやすいです。
HTMLファイルの修正
続いてHTMLファイルを修正します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
</script>
</head>
<body>
<div id="content">
This is a template for Monaca app.
</div>
<script src="js/index.js"></script>
</body>
</html>
一番下でwatchifyによって生成されたindex.jsを読み込んでいます。これをプレビューで確認すると、Hello, world!と表示されるはずです。
もう少し複雑にする
Reactの特徴としてコンポーネントを連携する機能が知られています。例えば以下のようにコンポーネントを分割することで再利用性を高めたり、リスト表示をシンプルにできます。
var React = require('react');
var ReactDOM = require('react-dom');
var React = require('react');
var ReactDOM = require('react-dom');
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);
Reactでは素のJavaScriptではなく、JSXを使って書くのが基本です。Webブラウザ上でもReactの文法やBabelを解釈する方法はありますが、実行速度が若干落ちてしまいます。そのため、オフラインで変換する方が良いでしょう。そんな時にはMonaca Localkitを使って書いてみてください。
