SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

「後編」はこちら

 

 なお、執筆時点での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)が参考になるでしょう。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
最初の一歩

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Webアプリケーション開発技術の新潮流スタディーズ連載記事一覧

もっと読む

この記事の著者

鳥居 陽介(株式会社ワークスアプリケーションズ)(トリイ ヨウスケ)

株式会社ワークスアプリケーションズ所属。イケてるアプリケーションを死ぬほど楽に作るために研究を続ける日々。社内での立ち位置は「フロントエンドのナウい人」。最近エバンジェリストという肩書きが付いた。趣味は作曲とスノーボード。 Blog: http://jinjor-labo.hatenablog.com/ ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8491 2015/04/24 16:51

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング