ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Facebookからまた面白そうなソフトウェアが出てきましたよ!

JavaScriptにおけるテンプレートフレームワークは数多く出てきています。いずれも興味深い作りなのですが、ここにきてFacebookがReactというライブラリをリリースしました。

ReactはUIを生成するJavaScriptライブラリで、MVCでいうところのVになります。さっそくコードを見てみましょう。

一番シンプルな実装例。左側がコード、右側が実行結果になります。
一番シンプルな実装例。左側がコード、右側が実行結果になります。

Reactは必須ではないのですがJSXというXMLライクな記法を使っています。

<hellomessage name="John" />
のように定義すると
this.props.name
で値が取り出せます。実際の描画はリアルタイムに反映されるので、Helloのところを修正すればすぐにレンダリング内容が変わります。

こちらはタイマーを使った例。コードが見やすいのではないかと思いますがいかがでしょう。
こちらはタイマーを使った例。コードが見やすいのではないかと思いますがいかがでしょう。

次がTodoアプリの例。イベントのハンドリングも可能です。
次がTodoアプリの例。イベントのハンドリングも可能です。

TodoAppとTodoListの二つのクラスを使って動作を制御しています。onSubmitで

this.handleSubmit
を指定して、実際に
handleSubmit
が実行されているのが分かるかと思います。

Markdownエディタ。外部のライブラリと組み合わせた使い方も可能です。
Markdownエディタ。外部のライブラリと組み合わせた使い方も可能です。

ここまで来て疑問だったのが、HTMLタグが文字列として定義されていないことです。実際、ここまでのコードをJavaScriptとして実行してもエラーになります。

実際のコードは次のようになっています。

/**
 * @jsx React.DOM
 */

var HELLO_COMPONENT = "\
/** @jsx React.DOM */\n\
var HelloMessage = React.createClass({\n\
  render: function() {\n\
    return <div>{'Hello ' + this.props.name}</div>;\n\
  }\n\
});\n\
\n\
React.renderComponent(<hellomessage name=\"John\" />, mountNode);\
";

React.renderComponent(
  ReactPlayground( {codeText:HELLO_COMPONENT} ),
  document.getElementById('helloExample')
);

つまり

ReactPlayground( {codeText:HELLO_COMPONENT} )
によってReact記法を展開しているようです。ほぼほぼJavaScriptですが、ラッピングすることで最適化処理されたり、より便利な機能を手軽に使えるようになりそうです。

ReactはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。

React | A JavaScript library for building user interfaces

facebook/react

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2