Get require.js

まずは require.js を入手しましょう。
公式サイトか、github のリポジトリからダウンロードできます。

Download RequireJS
jrburke/requirejs - GitHub

ダウンロードしてきたら適当な場所に解凍、プロジェクトの js ディレクトリにおいておきます。

さっそく使ってみる

それでは早速 require.js を試してみましょう。
今回は以下のようなディレクトリ構成で話を進めます。

/
├ index.html
└/common
 └/js
   ├require.js 
   ├main.js
   ├test1.js
   └test2.js

読み込ませる下位モジュールとして適当に以下のような js というか CoffeeScript ファイルを用意しておきます。

ご覧のとおり、Test2 は Test1 を継承しており、Test1 に依存しています。
Test1 が読み込まれるより先に、Test2 が読み込まれたらエラーが出てしまうわけですね。
ディレクトリと読み込み対象の下位モジュールの準備が出来たら、まずは html に require.js を読み込むよう設定します。
といっても script タグで貼りつけるだけなのですが、一箇所だけ普段と違うことを書きます。

お気づきだとは思いますが、普段見慣れない data-main という属性に main.js を指定しています。
読み込んだ require.js に対し、一番最初に読むべきデータはこれですよと指示しているわけです。
つまり、require.js + data-main によって呼び出されるファイルが
Flash でいうドキュメントクラスに相当するものになると捉えることができるかと思います。

読み込み順を示したファイルを作る

では、require.js 本体を html へ読み込ませる準備が出来たので、次は読み込み順の管理にとりかかりましょう。
先ほど data-main で指定した main.js に読み込み順の指定を書いていきます。
実際 require.js の単純な使い方自体はそんなに複雑ではないので、まずは main.js を見てもらったほうが早いと思います。
とりあえず今更生の js を書く気にはならないので CoffeeScript で以下のように書きました。
js がいい人は自分でいいように書き換えてください。

とてもシンプルですね。ほとんど見たままなので説明なんていらないかと思いますが一応解説記事ということでぐだぐだと。
require の第一引数に読み込みたいモジュールを配列で、第二引数にコールバックを指定します。

さらに、require の中に require をネストすることも出来ます。

依存関係にあるメソッドやプロパティを使用してみましたが、
エラーなく実行されていることで、指定した順序通りに読み込まれているのが分かるかと思います。

今回はサンプルのため、ごくごく単純なモジュールを使いましたが、
これがフレームワークなどを組み込んだ、ガッツりした開発になれば require.js の底力が分かるかと思います。

また、より依存関係が多くなったり、モジュールの数自体が多くなる場合は
define という機能を使うことで、このモジュールがどんなものに依存していて、
どの順番に読み込まれなければより明示的に示すことが出来ますがそのあたりの解説はまたおいおいということで。

いかがでしたでしょうか?
document.createElement などを駆使して自力で遅延読み込みな仕組みを作っても良いとは思いますが
単にそれだけではないのが require.js のすごいところ。
導入も大して難しくありませんし、ぜひつかってみてはどうでしょうか。