対象読者
- 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のように実行します。
npm install -g requirejs
RequireJSの基本的な使い方
RequireJSでは依存するJavaScriptのソースは自動的にscriptタグが作成され読みこまれます。その際の設定や最初に実行されるコードはリスト2で示すようにdata-main属性にて指定します。
<!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関数を使ってアプリケーションを作成していきます。
require関数とdefine関数ともに、第一引数に依存するファイル名の配列、第2引数以降にはそれぞれのファイルからの戻り値を示す変数を指定します。依存するファイル名は".js"を省略して記述します。RequireJSの依存定義とAngularJSの依存性注入（DI）の定義は非常に似た記述方法になっていますので、直感的にわかりやすいと思います。
また、requireとdefine関数は非常に似た動作をしますが、requireはアプリケーションの初めの処理を記述します。したがって、data-main属性で指定したファイルに記述することになります。それ以外に関しては、define関数で問題ありません。
