Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

 前回は、React.jsを使った簡単なアプリケーションの作り方について説明しました。今回は、前回で途中まで作成したTODOアプリに画面遷移機能を追加して、完成まで持っていきます。その過程で、快適で継続的な開発環境の構築方法とテストについて見ていきます。

目次
「前編」はこちら

 

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

表示 ファイル名
完成版(Jestによるテスト) sample-2-jest.zip
完成版(Jestによるテスト、Bootstrapによるスタイリングあり) sample-2b-jest.zip
完成版(Mochaによるテスト) sample-2-mocha.zip
完成版(Mochaによるテスト、Bootstrapによるスタイリングあり) sample-2b-mocha.zip

 

対象読者

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

必要な環境

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

Node.js形式でモジュールを定義する

 前回、途中まで作成したTODOアプリでは、すべてのコードを単一ファイルに記述していましたが、正しくは複数ファイル(モジュール)に分けて管理すべきです。ただし、モジュール間の依存性を整理する必要があります。それには、Node.js形式[1]でモジュールを定義するのが便利です。

 Node.js形式のモジュールはrequire(……)で呼び出すことができます。

 まず、app.jsからストレージを扱う部分をstorage.jsとして切り出します。

storage.js
var TodoStorage = {
  ...
};

module.exports = TodoStorage;

 このようにmodule.exportsにモジュール名を代入することで、別ファイルに定義されているモジュールをインポートすることが可能になります。同様にして、すべてのコンポーネントをモジュールとして別ファイルに切り出しても構いません。

 次に、ファイルとして切り出したstorage.jsと、npm(後述)のパッケージとして定義されているreactを、app.jsからそれぞれ呼び出すように変更します。

app.js
var React = require('react/addons');
var TodoStorage = require('./storage.js');

...

[1] CommonJS形式とも呼ばれます。元々CommonJSはコミュニティベースのJavaScript標準化プロジェクトで、Node.jsのモジュールは(明言されていませんが)これを実装したものと言われています。

Node.jsモジュールをブラウザで動かすためのツールBrowserify

 ただし、このようにして定義したモジュールは、そのままではブラウザ上で動作しません。そこで、Browserifyというツールを使い、ブラウザ上で動作するようにコードを変換します。

 モジュールをブラウザ上で動作させるには2つの戦略があります。

  • 実行時、必要に応じて動的にモジュール(.jsファイル)をロードするようにする
  • あらかじめモジュール間の依存性を解決し、単一ファイルにまとめる

 前者のアプローチはAMD(Asynchronous Module Definition)と呼ばれ、RequireJSが有名です。

 ここでは後者のアプローチを採用します。単一のファイルに結合することによってブラウザからのリクエスト数が減り、動的にロードするよりもパフォーマンスの向上が期待できます。

 次ページ以降、少し長くなりますが、1つずつ環境を整えていきます。


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

著者プロフィール

バックナンバー

連載:Webアプリケーション開発技術の新潮流スタディーズ
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5