SHOEISHA iD

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

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

AngularJSではじめるJavaScriptフレームワーク開発スタイル

AngularJSと組み合わせて便利なライブラリ、RequireJSを使ってコード管理を簡単にしよう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第14回

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

 前回は、簡単なシングルページアプリケーション(以下、SPA)の作成を紹介しました。しかし、比較的規模が大きくなると、開発する人も複数になり、それに併せてプログラム同士が依存し合わないようにする必要が生じてきます。また、同時にSPAでは1つのHTMLで処理を行う為に初回の画面表示が遅くなる傾向があります。このため、JavaScriptのミニマイズ処理なども必須になってきます。それらの解決方法としてRequireJSなどのモジュール管理ライブラリが利用できます。今回は前回作成したSPAサンプルを用いてRequireJSとAngularJSを組み合わせた使い方を紹介します。

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

対象読者

  • JavaScriptを使った複数人でのプロジェクトに参加している方
  • JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方
  • シングルページアプリケーションの開発をしている方

必要な環境

 この記事では、AngularJS(バージョン1.4)を使用し、Chrome(45.0)、IE11、Firefox(40.0)、Safari(8.0.8)の環境にて確認を行っています。また、サンプルコードではデザインのためにBootstrap(バージョン3.3.5)とjQuery(2.1.4)を使用しています。

モジュールとは

 AngularJSにもモジュールという概念はありますが、AngularJSのモジュールは機能の固まりを定義するためのモジュールであって、ファイルを分割したときに、そのファイルの依存関係までを解決する記述はできません。しかしながら、複数の開発者で開発を行っていると、あるファイルが他のファイルに依存している場合には、その依存関係や、そのために読みこむ順番などは開発者同士でそれぞれのルールを作って解決する必要がありました。

 そして、最初に読みこまれるHTMLファイルにプログラムファイルが増える度に、scriptタグを記述していくということになります。

 もちろん、これでも問題がないケースもありますが、比較的規模が大きい開発では、JavaScriptのコード量も多くなるためにリリース時には1つのファイルにまとめてミニマイズなどをしてファイルの読み込み処理などの軽減化を行います。これは、同時にサーバ側のリソース負荷を軽減することにもなるためにその対応を行わないメリットはあまりありません。ただし、リリースのたびにHTMLファイルを書き換えることは非常に面倒な作業になります。そこで、RequireJSを使ってファイルの依存関係の解決と、ミニマイズの処理を行います。

 同じようなことができるライブラリは他にもあり、また、サーバ側で処理を記述できるならこれらのライブラリに頼らずとも、サーバ側で同じようなことを行えます。今回RequireJSを選んだ理由としては、JavaScriptライブラリの依存解決のソリューションとしては比較的長い歴史をもっているということと、AngularJS自体で機能の固まりの定義をするモジュールの機能があるために、RequireJS側では機能の依存についてはあまり気にしなくてもよいところです。また、記述方法もAngularJSと似ているので、理解しやすく非常にAngularJSとRequireJSは親和性が高い関係になっていると思います。

RequireJSの準備

 RequireJSを利用するには、最初にRequireJSのダウンロードページから、require.jsをダウンロードします。今回のサンプルではバージョン2.1.20(minified)を利用しています。

 また、自分で作成したコードを最後にミニマイズ処理をする際には、r.jsというファイルが別途、必要になります。こちらは、ブラウザからは実行できずにコマンドラインからの実行となります。r.jsのgithubを参照するとインストール方法が記されていますが、Nodeを用いたインストールが最も簡単です。今回、Node自体のインストール方法は説明しませんが、こちらの記事などを参考にインストールなどを行って下さい。RequireJSのNodeを用いたインストールはリスト1のように実行します。

リスト1 Nodeでのインストール方法
npm install -g requirejs

RequireJSの基本的な使い方

 RequireJSでは依存するJavaScriptのソースは自動的にscriptタグが作成され読みこまれます。その際の設定や最初に実行されるコードはリスト2で示すようにdata-main属性にて指定します。

リスト2 RequireJSを利用する際のHTMLの記述方法(index.htmlの抜粋)
<!DOCTYPE html>
<html lang="ja" ng-controller="AppController">
<head>
    <meta charset="UTF-8">
    <!-- (1) require.jsで最初に読みこむファイルをdata-mainで指定する -->
    <script type="text/javascript" data-main="js/main.js" src="vendors/require.js"></script>
</head>
: (省略)
</html>

 RequireJSでは、図1のようにrequireもしくはdefine関数を使ってアプリケーションを作成していきます。

図1 RequireJSでのrequire/define関数の関係
図1 RequireJSでのrequire/define関数の関係

 require関数とdefine関数ともに、第一引数に依存するファイル名の配列、第2引数以降にはそれぞれのファイルからの戻り値を示す変数を指定します。依存するファイル名は".js"を省略して記述します。RequireJSの依存定義とAngularJSの依存性注入(DI)の定義は非常に似た記述方法になっていますので、直感的にわかりやすいと思います。

 また、requireとdefine関数は非常に似た動作をしますが、requireはアプリケーションの初めの処理を記述します。したがって、data-main属性で指定したファイルに記述することになります。それ以外に関しては、define関数で問題ありません。

次のページ
AngularJSをRequireJSで利用する

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9011 2015/10/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング