SHOEISHA iD

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

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

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

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

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


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

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

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

「前編」はこちら

 

 なお、執筆時点での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つずつ環境を整えていきます。

次のページ
npmによるプロジェクトの管理

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

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

もっと読む

この記事の著者

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング