React.js : 話題のReact.jsを触ってみる。Connpass APIで検索アプリ作成

巷で話題のReact.jsですが、ちょこちょこ勉強しながらコンポーネントを作成してアプリを作ってみました。

Connpassの検索アプリ

イベント管理Webサービス「Connpass」の検索アプリを作ります。ちょっとアプリとは違いますが、コメント欄のサンプルを掲載している下記を参考に開発しました。

ConnpassはHTTP GETでJsonが取得できるWeb APIが公開されていますので、それをJSONPで叩いて取得することにしました。

制作したものがこちらになります。

検索してヒットした案件が最大30件表示されるシンプルな検索アプリです。

React.jsを使ってみた所感

React.jsは、VirtualDOMによる最小限の更新など様々な特徴が挙げられていますが、個人的にまず感じたのは「本当にコンポーネント作るだけだな」ということです。下記のcreateClassが大きなウェイトを占めています。

React.jsはFluxなどのアーキテクチャも背景にありますが、あくまでViewのコンポーネント化を行うフレームワークでしかありません。stateによって状態を持つこともできますが、なるべくそれをせずにイミュータブルな見た目の構造と振る舞いをパッケージ化したコンポーネント一か所にまとめ、それを組み合わせることでView全体を構築していくようなスタイルになります。

意味付けや構造を担うHTMLと振る舞いに関わるJSをひとつにまとめて利用できることで、Viewコードの見通しがよくなったり、再利用性が高まったりするのではないかと思われます。なので、大きなアプリケーションに向いていると言われているようです。

var Hello = React.createClass({
  render() {
    return (
      <div><span>hello</span></div>
    )
  }
});

実際に使うときは、まずViewをどのようなコンポーネントで構成するのかという分割と、それぞれのコンポーネントが担う責務設計が必要そうです。なので、思いつきで書き足していくようなプロトタイピングすたいるだと少し使いにくいかもしれないと感じました。