アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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を使って書いてみてください。