ES Discussは、文字通りECMAScript仕様についてのディスカッションをまとめたアーカイブです。先日、ES Discussにこんなスレッドが立っているのを見かけました。

Integrating the Webs’ dependency systems

…

Right now there appear to be three separate efforts to develop dependency systems for the Web platform:

• ES6 Modules
• HTML Imports
• <script needs=””> in HTML

At the moment they are mostly not overlapping, but it seems likely that all will grow over time and that could get messy.

I would therefore like to propose that we integrate these so that we end up with just one system that manages all three.

What do people think?

…

ここで3種類挙がっている依存性解決システムについて、簡単に見て行きたいと思います。

1. ES6 Modules

ES6で採用が議論されているModuleの仕様です。なんと、あのJavaScriptに、ついに言語仕様レベルでModule機構が入るんです…！激アツ仕様ですね！
Mozilla における ECMAScript 6 のサポートを見ると、残念ながら2014年5月現在まだサポートはされていないようですが、色々polyfillみたいなものも出てきています。

• square/es6-module-transpiler
• https://github.com/ModuleLoader/es6-module-loader

はやいとこブラウザで使えるようになってほしいですね〜ワクワクします。

2. HTML Imports

HTML ImportsはPolymerで使った以外でほとんど目にしたことがないですが、これも面白い仕様です。今までHTML片の再利用は、SSIやテンプレートエンジンなどサーバーサイドの力を借りてなんとかやってきましたが、ついにHTMLの仕様に入ろうとしています…！うんうん、よく成長したなあ
仕様書を読んでみると、以下の構文でimportされたDOMにアクセスできるようです。

// ---
var link = document.querySelector('link[rel=import]');
var heart = link.import;
// Access DOM of the document in /imports/heart.html
var pulse = heart.querySelector('div.pulse');
// ---

（あれ？でもimportってJSの予約語だったような…）

HTML Importsは上述の通りPolymerで利用できます。

• Polymer

3. <script needs=””> in HTML

これだけ聞いたこと無いぞ？と思ったらまだMLにしか上がってないようでした。初見だったので特に説明しません（できません）。

[whatwg] Script preloading

ところで

これらのように言語仕様レベルで決まっているものだけではなく、JSの依存性解決の考え方はいくつかあります。

昨今のJSの高性能化に伴い、「一つのwebアプリケーションに大量のJSモジュールをロードして使う」という使い方が一般化してきました。そこで問題となってきたのがモジュール同士の依存関係です。それまでせいぜい数個程度だったJSファイルは数十個まで膨れ上がり、その一つ一つが他のモジュールに依存しているのです。この読み込み順序を手作業で並べかえるのは至難の業です…。

さて、言語仕様レベルのModule機構がなくとも依存管理をすることは可能です。そうして出てきたのがAMDやCommonJSという考え方です。これらの解説は下の文献が明るいので、読んでみると良いでしょう。

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

※ちなみに自分はAMDのJavaScriptJavaScriptした感じが好きです。

まとめ

Webにおける様々な依存性解決の技術を挙げてみました。
今までおろそかになっていた依存性解決のためのシステムが、ようやくWeb技術の仕様の中に入っていこうとしています。冒頭のスレッドでも議論されていましたが、これら依存性解決システムがゴチャゴチャと乱立するのではなくて、うまくまとまっていくことを願います。

担当：八幡（WebGLを基礎から勉強中）