Asial Blog

Recruit! Asialで一緒に働きませんか?

MonacaアプリでReactを使ってみよう

カテゴリ :
Monaca
タグ :
JavaScript
React

最近何かと話題になっているのがReactです。フレームワークという訳ではなく、ビューのライブラリですが、DOMの状態(ステータス)を意識せずに使える点がうけています。従来のサーバサイドのようにHTMLをレンダリングすれば後はReactが処理を行ってくれるのが便利です。



今回はそんなReactをMonacaアプリ開発で使ってみます。なお、開発環境としてMonaca Localkitを使っています。



Localkitで新規プロジェクト作成



まずはMonacaアプリの新規プロジェクトを作成します。今回は最低限のテンプレートを選択しています。





wwwの下にsrcとjsというフォルダを作成しています。srcにはReact用のjsxファイルが、jsフォルダにはjsxから変換したjsファイルが入ります。



npmで設定



必要なライブラリはnpmでそろえます。あらかじめnode.jsをインストールしておいてください。



  1. npm init
  2. npm install --save react react-dom babelify babel-preset-react
  3. npm install -g browserify babelify watchify

browserifyはrequireするファイルの連結、babelifyはES6に準拠した書き方の展開、watchifyは差分ビルド用に使います。構成は次のようになります。





ファイルの作成



ではjsxファイルを作成します。www/src/index.jsxとして作成します。



  1. var React = require('react');
  2. var ReactDOM = require('react-dom');
  3.  
  4. ReactDOM.render(
  5.   <h1>Hello, world!</h1>,
  6.   document.getElementById('example')
  7. );

そしてこのjsxファイルを変換します。



  1. $ watchify -t [ babelify --presets [ react ] ]  www/src/index.jsx -o www/js/index.js -v
  2. 666455 bytes written to www/js/index.js (1.84 seconds)

-vをつけておくと簡単なメッセージが流れますのでちゃんと動いているか確認しやすいです。



HTMLファイルの修正



続いてHTMLファイルを修正します。



  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6.     <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  7.     <script src="components/loader.js"></script>
  8.     <link rel="stylesheet" href="components/loader.css">
  9.     <link rel="stylesheet" href="css/style.css">
  10.     <script>
  11.     </script>
  12.   </head>
  13.   <body>
  14.   <div id="content">
  15.       This is a template for Monaca app.
  16.     </div>
  17.     <script src="js/index.js"></script>
  18.   </body>
  19. </html>

一番下でwatchifyによって生成されたindex.jsを読み込んでいます。これをプレビューで確認すると、Hello, world!と表示されるはずです。





もう少し複雑にする



Reactの特徴としてコンポーネントを連携する機能が知られています。例えば以下のようにコンポーネントを分割することで再利用性を高めたり、リスト表示をシンプルにできます。



  1. var React = require('react');
  2. var ReactDOM = require('react-dom');
  3.  
  4. var React = require('react');
  5. var ReactDOM = require('react-dom');
  6.  
  7. var CommentBox = React.createClass({
  8.   render: function() {
  9.     return (
  10.       <div className="commentBox">
  11.         <h1>Comments</h1>
  12.         <CommentList />
  13.         <CommentForm />
  14.       </div>
  15.     );
  16.   }
  17. });
  18.  
  19. var CommentList = React.createClass({
  20.   render: function() {
  21.     return (
  22.       <div className="commentList">
  23.         Hello, world! I am a CommentList.
  24.       </div>
  25.     );
  26.   }
  27. });
  28.  
  29. var CommentForm = React.createClass({
  30.   render: function() {
  31.     return (
  32.       <div className="commentForm">
  33.         Hello, world! I am a CommentForm.
  34.       </div>
  35.     );
  36.   }
  37. });
  38.  
  39. ReactDOM.render(
  40.   React.createElement(CommentBox, null),
  41.   document.getElementById('content')
  42. );






Reactでは素のJavaScriptではなく、JSXを使って書くのが基本です。Webブラウザ上でもReactの文法やBabelを解釈する方法はありますが、実行速度が若干落ちてしまいます。そのため、オフラインで変換する方が良いでしょう。そんな時にはMonaca Localkitを使って書いてみてください。