勉強会資料シェア Getting Started with RequireJS

げりんぐすたーてっど うぃず りくわぃあーじぇーぇす

ということで、社内勉強会でRequireJSの入門資料をこさえたのでシェア。

利用したデモファイルセット

http://d.aho.mu/S4mh

なんとなくRequireJSが動くセットです。スライド中のr.jsによるビルドコマンドや、gruntを利用したビルドも試せるようになっています。

おさえるべき要点

いくつかの要点だけ記事内に文字列でおこしておきまする。

モジュラーと依存関係

Webサイト → Webアプリ への流れが明確になってきてフロントエンドが複雑化してきている今、1つのJSファイルにつらつらとCSSのようなノリで書き連ねる時代は終わりつつあります。

• ParisJS #10 : RequireJS

このあたりについては、上記の素晴らしいスライドから、Figureを拝借しました。個々のJavaScriptの粒度が揃えてモジュラー化することで、自然なコンテキストになるというくだりは直感的に理解いただけるかと。そして次に解決すべきは、依存管理の問題というわけです。

RequireJS

今回のキモとなるライブラリです。

• Why Web Modules?
• Why AMD?

このあたりを読んでおけば、モジュラーとAMDについては抑えられると思います。本勉強会ではAMDとしての側面はあまり触れず、依存管理ツール＆ビルド方法にフォーカスしていますので、AMD成分は↑のページから補充してください。

上の2記事は、Google翻訳で随分と読みやすい日本語に変換されたので、たぶん読みやすいです

実コード上の機能・設定としては、以下を抑えていただければよろしいのではないでしょーか。

• define と require
• requirejs.config における paths と shim
• shim による deps と exports

特に、最後のshim周りをおさえておくことで、defineなんちゃらで自身をreturnせず、globalにexportするだけのような既存ライブラリもAMDの枠組みに入れることができます。プラグインのdepsとかもよく使う。

r.js によるビルドと almond

基本は、r.jsというコマンドラインツールでビルドします。おなじみnpmで入ります。

% npm install -g requirejs
% r.js
See https://github.com/jrburke/r.js for usage

そしてalmondも大事。RequireJSのコアから、AMD的な機能を取り除いて、defineとrequireを解決するだけのミニマルshimです。

almond.js 0.2.0
Uncompressed size: 13166 bytes.
Compressed size: 1190 bytes gzipped (2506 bytes minified).

require.js 2.1.1
Uncompressed size: 78934 bytes.
Compressed size: 5949 bytes gzipped (15707 bytes minified).

Uglifyでテキトーにcompressすると、ファイルサイズ差としてはこんな感じ。gzipしても5kb弱の差がありますね。requirejsを突っ込むかわりに、r.jsでかためるときにalmondを混ぜておくと、総サイズを節約できるという具合です。

このあたり実際には、r.jsを直接叩かずに、例によってgruntでまとめて自動化してます。

別の意見

依存性の問題や規模が大きくなったときの管理を提供してくれる反面、RequireJS Hellと呼ばれるような捉え方も存在します。曰く、解決すべき問題に対して過剰な機能が提供されてるとか、依存解決が逆に高コストになってねぇかとか、現実問題そこまでしなくてもこうすれば十分に解決できるじゃんとか、利用コンテキスト・プロダクトのサイジングにもよりますよねーとか、どうせ最後はビルドツール頼みじゃんとか。

まあ、いろいろあるようで

• AMD is Not the Answer : Tom Dale
• RequireJS Hell – AMD really is not the answer | Neverending Nexua
• JavaScript module loaders: necessary evil? | Ruben Verborgh

同じような疑問を感じる方は、このあたりの記事をコメント欄と合わせてご覧になるとよろしいのではないでしょうか。

おしまい

今回は入門編なフシもございましたので、軽めの内容でしたが次回はリリースされたプロジェクトの実例を交えて、より深いところをシェアしていきたい。

なんか、社内勉強会するといつも機材トラブルでしぬので、どうにかしたい。嗚呼。

(´；ω；`)ガンバルヨ！

---