Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

Webアプリ開発技術の新潮流スタディーズ 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 近年のフロントエンド開発の大規模化・複雑化に伴って、JavaScriptフレームワークの需要がますます拡大しています。既にBackbone.jsやAngularJSなど、MV*フレームワークは数多く登場していますが、本記事では最近注目を浴びているFacebook製のライブラリReact.jsについて解説します。フレームワーク・ライブラリの選定に悩んでいる方から、本格的にJavaScriptを触るのが初めてという方まで、サンプルを通じて大体の雰囲気を掴んでいただければと思います。

目次
「後編」はこちら

 

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

ダウンロード表示 ファイル名
本記事終了時点 sample-1.zip
完成版 sample-2.zip
完成版(Bootstrapによるスタイリングあり) sample-2b.zip

 

対象読者

  • 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アプリのイメージ
TODOアプリのイメージ

 

NOTE
  • 画面はTwitter Bootstrapでスタイリングしていますが、今回はサンプルコードをシンプルにするため、CSSを付属していません。
  • より多くの要件を盛り込んだサンプルはTodoMVC(React.js)が参考になるでしょう。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:Webアプリケーション開発技術の新潮流スタディーズ

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5