読者です 読者をやめる 読者になる 読者になる

Carpe Diem

備忘録。https://github.com/jun06t

RequireJS(その1)

JavaScript
RequireJSはjsファイル同士の依存関係を崩さないよう非同期で読み込みつつ、多重読み込みなども防止してくれるライブラリです。 あと何より嬉しいのが「依存関係を明示出来る点」です。普通のHTMLだと、どのモジュール(.js)がどれに依存してるか不明なので、ある .js ファイルを外すと全然動かなくなることもしばしば。結果「とりあえず動くから入れておこう」といった用途不明の .js ファイルが出てきます。RequireJSなら「どのモジュールがどれに依存しているか明示できる」ので、開発がしやすくなります。 今回はまず普通のJSの読み込み方と同じ状態ができるお試し版の説明です。 使うのは現在最新の v2.1.9 です。 ◆ケース js ├ a.js ├ b.js └ c.js があり、以下の依存関係がある場合
a.js ← b.js(b は a に依存)
a.js, b.js ← c.js(c は a, b に依存)
普通のHTMLコードなら
<script src="js/a.js"></script>
<script src="js/b.js"></script>
<script src="js/c.js"></script>
の順に読み込むことで、依存性を解決します。 ◆RequireJSで書く場合 慣習的に以下のフォルダ構成にすることが多いです。 js ├ app.js ├ require.js └ libs   ├ a.js   ├ b.js   └ c.js app.jsというのは最初に読み込ませるファイルです。プログラムで言うmain関数的な役割ですね。 HTMLは
<script data-main="js/app.js" src="js/require.js"></script>
読み込むのはこれだけです。シンプル! app.js
require(['libs/c']);
依存関係の末端を .js なしで書きます。全て書いて下さい。今回は c.js だけが末端なので、['c']としてます。 またパスの開始地点は最初に読み込んだ app.js の位置になるので、js/libs/c ではないです。ご注意。 依存関係の末端?なにそれ? とよく分からなくて app.js
require(['libs/a', 'libs/b', 'libs/c']);
と書いてしまっても大丈夫です。a.js, b.js, c.js それぞれの依存関係は、それぞれで明示していきます。 ◆モジュールの書き方 a.js
console.log('a.js'); //処理
b.js
define(['libs/a'], function() {
    console.log('b.js'); // 処理
})
c.js
define(['libs/a', 'libs/b'], function() {
    console.log('c.js'); // 処理
})
それぞれ依存するモジュールを配列の中にいれます。ちなみに c.js は b.js に依存し、b.js は a.js に依存しているので c.js
define(['libs/b'], function() {
    console.log('c.js'); // 処理
})
と書いても動きます。ですが依存関係を明示するために、こちらは非推奨です。 これで使えるようになります。 ◆動作確認 HTMLを開くと、コンソールに a.js b.js c.js と表示されました。お疲れ様でした。 ソース: RequireJS moduleについて java-ja.js #2 RequireJS実践編