話題のReact.js使ってみた。

にわかに話題になっているJavascriptライブラリ「React.js」を使ってみました。

React.jsとは

DOM(HTMLの構造)をコンポーネントベースで構築するためのライブラリみたいです。
FunctionalReactiveProgramming(FRP)という新しいパラダイムを取り入れているのが大きな特徴のようです。FRPでは従来のように手続き的に上から下へ処理をしていくのではなく、それぞれのコンポーネントを宣言という形で定義することによってDOM(UI)を構築することが出来ます。現在のデータや入力を一つの状態とみなし、その状態のみからUIを作りだすので、予期せぬ依存関係などがない高い独立性を保ったプログラミングができます。このReact.jsではFRPの流れを汲みつつ、従来ボトルネックとなっていたDOMの再構築を仮想DOMを利用して効率的に扱えるようになっています。

正直この辺をうまく説明できるほど理解できてはいないのですが、関数型プログラミングの本質的な部分も含めて新しいトレンドになっていきそうな魅力を感じました。

React.jsを試してみる

http://facebook.github.io/react/docs/tutorial.html
試すにあたって公式のチュートリアルを見ながら真似して書いてみました。コメントフォームをAPIと連携しながら作っていくという内容なのですが、このチュートリアル良く出来ています。宣言的にコンポーネントを構築すると言われてもピンと来ないですが、このチュートリアルの手順を踏んで書いていくと、アプリケーションをどう分割して宣言し、どう実装していくのかというプラクティスがしっかり学べるようになっています。FRPってどんな感じなのか気になるという方は是非このチュートリアルで手を動かしてみる事をおすすめします。

JSX

Reactを使うにあたって、JSXというJavascriptを拡張した独自言語を利用すると便利にかけるようになります。ややこしいことにDeNAが作ったJSXという言語とは全くの別物です。Reactで利用する方のJSXは、JavascriptにXMLのテンプレートエンジンが追加されたような感じです。クオートなしにXMLが書けるので初見の違和感はすごいですが、エスケープとかに悩まされる事がないので慣れてしまえば便利に利用できます。

JSXは独自言語のため、ブラウザでそのまま解釈することが出来ません。JSXをコンパイルしてJavascriptに変換してあげる必要があるのですが、開発用途ではライブラリを読み込むだけでそのままJSXを利用できるものが配布されています。処理速度の問題もあるので本番環境では推奨されていませんが、ちょっとReactを試す目的ではお手軽で便利です。

HelloWorld

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

チュートリアルではこんな感じでHelloWorldしています。

createClassという名前ですが、これはオブジェクト指向的なクラスではなく、DOMを構築するコンポーネントみたいなイメージになります。各コンポーネントはrenderという関数を持っていてここで宣言した構造を返しています。divのclassNameは、HTMLとして出力時にはclassに変換されます。classだと名前が衝突するためHTMLの要素名がリネームされているみたいですね。似た感じでlabelのforHtmlForに置き換わったりもしています。

React.renderがいわゆるエントリーポイントになっていて、1つのコンポーネントと、Render結果を展開するDOM要素を引数に取ります。これにより<div id="content"></div>内にCommnetBoxが展開されます。

props

先ほどのコンポーネントに対して

<CommentBox url="comments.json" pollInterval={2000} />

みたいにプロパティを設定することも出来ます。
こうやって設定したプロパティはコンポーネントの中で this.props.url みたいな形で参照することが出来ます。ちょうどコンポーネントの引数みたいな形で、外部(コンポーネント)との値を受け取りを管理し、挙動を変更しています。

state

プロパティとは別に状態を表すstateというものもコンポーネントは持ちます。こっちはコンポーネント内部での状態を管理するもので、ライブラリで変更などが厳密に管理されています。状態の変更はsetState()というメソッドを呼ぶ必要があって、それ以外の方法で変更しようとすると怒られます。慣れないと不便に感じるかもしれませんが、これによってコンポーネントの副作用がなくなり、独立したコンポーネントが作れたり、ライブラリが効率的にDOMを管理できたりするわけです。

外部との通信

このチュートリアルではAjaxで他のAPI叩いているので、Reactではどうやって通信するのだろうと思ったのですが、普通にjQuery使ってました。特にReact側で特別な機構が用意されている訳ではないみたいです。DOM操作ではjQueryつかうと衝突してしまうので、通信部分だけ担うライブラリあると便利そうですね。

アニメション

アニメション用のタグ <ReactCSSTransitionGroup transitionName="example"></ReactCssTransitionGroup> でくくってあげるだけで定義されたCSSのクラスが呼ばれるようになります。挿入・削除のアニメーションをReactで面倒みてくれるのは助かりますね。

http://facebook.github.io/react/docs/animation.html

サーバー側でのHTML自動生成

サーバーのHTML自動生成系のツール(wtformsとか)との相性はかなり悪いです。テンプレートエンジンでJSX内にフォームを無理やり書き出すみたいなこと試してみましたが正直闇が深いです。JSXはValidなXMLしか受け付けないので、inputの末尾スラッシュがないとダメですし(HTML5では逆に末尾スラッシュ不要)、classやforをclassNameやhtmlForに置き換える必要があったり、JSX用の{}タグを書こうとするとクオートが挿入されたり…。素直にJSXで作りきるか、専用のフレームワークなどを使ったほうがよさそうです。

その他所感

Reactを使ってみてコンポーネントの分割が自然に出来るなというのが一番の印象です。見たまんまで分割して定義していけるので、オブジェクト指向のようにクラス設計に頭を悩ますことなく設計していけるように感じました。チュートリアルをベースにちょっとした管理画面を作ってみましたが、初めてReactを触った割には綺麗に書くことができました。状態の受け渡しが制限されている分、お互いの関係が複雑にならずスッキリまとめられるみたいです。学習コストも「新しいパラダイムだから大変だ!」みたいに身構える程高くないと感じました。

処理速度がどれくらい早いかについては未検証です。処理が重くなる程複雑な事していませんし、そもそもJSXをコンパイルせずに使っているので真の早さがどれくらいか不明です。とりあえずPCであればリアルタイムに変換しても遅延は感じませんでした。

Flux

ReactというのはFluxというアーキテクチャのView部分を取り出したものなので、アプリケーション全体をFluxで構築することによってよりベストプラクティスに近い使い方をすることが出来るみたいです。

http://facebook.github.io/flux/docs/todo-list.html#content

こちらにTodoリストを作るサンプルがあります。
Reactが十分実用的だったので、Fluxを使ったアプリケーション作成も是非試してみたいです。

参考資料

Sat, 24 Jan 2015 11:23:20 +0000   |   Category:Javascript

関連記事

About Me

kimihiro-n

Androidアプリを中心にいろいろアプリ作ってます。
T N G

Products

放課後アプリ部
放課後アプリ部
個人アプリ開発者のための集客プラットフォーム作りました。 AndroidやiOSアプリのダウンロード数増加を無料で手伝います!

最速のJSON可視化・解析ツール
JSONを使った開発をスムーズにするためのツールです。 特定の値までのパスを簡単に取れます。
過去に作ったiOSアプリ
明日から本気出すタスク管理 for iOS
過去に作ったAndroidアプリ
明日から本気出すタスク管理 for Android Nagareboshi taplight
Others..

Search Articles