いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！ 【前編】

　なお、執筆時点でのReact.jsのバージョンは0.12.2です。サンプルとして、次の3つを、本記事のタイトル下にある［ダウンロード］から入手できます

対象読者

• JavaScriptフレームワーク・ライブラリの選定に悩んでいる方
• 本格的にJavaScriptを触るのが初めてという方
• jQueryでの大規模なフロントエンド開発に限界を感じている方

必要な環境

　Node.jsがインストールされていることが推奨です。

React.jsとは何か

　React.jsは最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。

　前提として、JavaScriptの世界でMVCのVといえば、紛れもなくDOM（Document Object Model）のことを指します。特に何も意識しないで作った場合、都合の良いDOMからデータを引っ張り出しては別のDOMを書き換えるといった、行き当たりばったりな作りになりがちです。そこで、MVCの考え方を導入することにより、データを画面とは独立した構造体として切り出し、データを更新⇒画面（DOM）に反映の一定の流れを作ることができます。

　React.jsも、まさにこの目的のために生み出されました。正確にはフレームワークという扱いではありませんが、アプリケーションの設計に大きく寄与することには間違いありません。

　公式サイトには、特徴として以下の3つが挙げられています。

「JUST THE UI」

　MVCのVであり、既存のアーキテクチャと容易に結合することができます。

「VIRTUAL DOM」

　DOMを模した中間オブジェクトをあらかじめ生成し、更新差分のみを本物のDOMに反映することにより、ハイパフォーマンスを実現します（詳しくは後述）。

「DATA FLOW」

　データフローを一方向に保ち、データと画面（DOM）の対応をを宣言的に記述することによって、可読性を向上させます。

　多くのフレームワーク違い、React.jsが提供するのはコンポーネントを作成する仕組みだけです。他の複雑な概念を理解する必要が一切ないため、学習コストは非常に安く済みます。シンプルに上から下までコンポーネントを作ることだけ考えていきましょう。するとデータフローは自然とデータから画面（DOM）へ、コンポーネントツリーの上から下へと一方向に統一されるはずです。

　それでは、概念だけでは理解が進まないと思いますので、早速コードを見ていきましょう。

簡単なTODOアプリの作成

　MVCフレームワークのサンプルとしてお馴染みの、簡単なTODO管理アプリを作ります。

　要件は次のとおりです。

• トップページで新規TODOを登録する
• ï¼»Done］ボタンをクリックするとTODOが完了状態になる
• 未完了のTODOはトップページ（#active）に、完了のTODOは2ページ目（#completed）に表示する

TODOアプリのイメージ