#navi_header|JavaScript|

2015-03時点でJSのモジュールロードとかパッケージ管理について見てみると、CommonJSだとかAMDだとかBrowserifyとかwebpackとかbowerとか色々出てきて混乱したので、整理してみた勉強メモです。各プロダクト・仕様のできることや役割について、まだまだ誤解してる部分もあると思いますので、勉強中ということで割り引いてください。

#more||

* 簡単な歴史と経緯

※細かい歴史とか時系列は無視してます、というか知らないで書いてます。あくまでも自分の頭のなかでの整理用。

1. require.jsがブラウザ上のアプリで頑張ってモジュールロードできるようにしてくれた。
2. 一方、Server Side JSの仕様策定から、CommonJSのrequire()が出てきて、node.js でのモジュールロードで使えるようになった。
3. しかし、node.js 上で require() が動くなら、ブラウザ上でもrequire()動いて欲しい。→ CommonJSのrequire()が書かれたJSファイルを、ブラウザ用に変換してくれるビルドツールの Browserify が登場。
4. だけどやっぱりCommonJS側でもブラウザ向けに最適化されたモジュールロード、取り込みたいよねということでAMD(Asynchronous Module Definition)の仕様が立ち上がったが、CommonJSでは決めきれずに外出しされ、require.js側でも取り込んだ。
5. この時点で、以下のような勢力図になった。
- サーバサイド・デスクトップアプリ向け→ node.js & npm エコシステム
-- CommonJSのrequire()でモジュールロード
-- パッケージシステムは npm (=package.json)
- ブラウザ向け
-- モジュールロードは require.js でAMD対応。
-- パッケージシステムは・・・まだ無かったかも・・・？
-- Browserify使えば、npmエコシステム側のパッケージシステムを使えたことは確か。
6. その後、Bowerとwebpackが登場した。
- BowerはTwitter社が作った、Webブラウザ向けのパッケージ管理システム。つまりnode.jsのnpmに対応する。package.jsonに似た、bower.jsonで依存関係と自分自身のパッケージ情報を定義する。
- webpackはCommonJSとAMDの両方をサポートするモジュールローダだが、どちらかというとWebアプリで取り扱う種々のファイルをロードし、変換する、一種の変換システムとして利用できるらしい。まさにWebアプリを "pack" するためのツールと言える？

2014年内だと、npmエコシステムはやはりサーバサイドでしか扱えないライブラリが手厚く、逆にBower側はブラウザ向けのjQueryやAngularJSなどが充実しているようだ。

整理している中で注意が必要だと感じたのが、「モジュールロードの方式」と「パッケージシステム」は直交する点。
「パッケージシステムをどうする？」という点で出てくるのが、npm陣営(package.json)とbower陣営(bower.json)になる。
npm陣営は当然CommonJSの実装であるnode.jsエコシステムがメインであるため、どうしてもブラウザ上で動作するアプリ向けのライブラリが弱かったらしい。
そこで出てきたのが、jQuery/AngularJS/BackboneJSなどブラウザ上で動作するライブラリを手厚くしたBowerというパッケージシステムであり、これがbower.jsonというファイルで管理される。

* 箇条書きで整理

- モジュールのロードをどうするか？
-- サーバサイド・デスクトップアプリ向け → CommonJSのrequire()
--- npm
--- webpack
-- ブラウザ上のWebアプリ向け → AMD(Asynchronous Module Definition)
--- require.js
--- webpack
-- その他
--- browserify → CommonJSのrequire()で書かれたJSを、ブラウザ向けのJSに変換してくれるツール。
- パッケージシステムをどうするか？
-- サーバサイド・デスクトップアプリ向け → npm陣営(package.json)
-- ブラウザ上のWebアプリ向け → bower陣営(bower.json)

* 参考URL

** 総論

- JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog
-- http://tsuchikazu.net/javascript-module/
- javascript - Difference between Grunt, NPM and Bower ( package.json vs bower.json ) - Stack Overflow
-- http://stackoverflow.com/questions/21198977/difference-between-grunt-npm-and-bower-package-json-vs-bower-json
- npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ
-- http://havelog.ayumusato.com/develop/others/e630-npm_meets_frontend.html

** AMD, require.js 周り

- JavaScriptのモジュール化 AMDとrequire.js - NAVER まとめ
-- http://matome.naver.jp/odai/2137754797849445801
- Asynchronous module definition - Wikipedia, the free encyclopedia
-- http://en.wikipedia.org/wiki/Asynchronous_module_definition
- AMD · amdjs/amdjs-api Wiki
-- https://github.com/amdjs/amdjs-api/wiki/AMD
- CommonJS Notes
-- http://requirejs.org/docs/commonjs.html

** 個別のプロダクト・ライブラリ

- Browserify
-- http://browserify.org/
- RequireJS
-- http://requirejs.org/
- Bower
-- http://bower.io/
-- Bower入門(基礎編) - from scratch
--- http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308
-- bower/bower
--- https://github.com/bower/bower
- webpack module bundler
-- http://webpack.github.io/
-- webpack/webpack
--- https://github.com/webpack/webpack
-- webpackを使い倒す - Thujikun blog
--- http://thujikun.github.io/blog/2014/12/07/webpack/
-- RequireJS等はもう古い。WebPackとは？｜1 pixel｜サイバーエージェント公式クリエイターズブログ
--- http://ameblo.jp/ca-1pixel/entry-11884453208.html
-- webpackでbower使って外部ライブラリの依存解決する - Qiita
--- http://qiita.com/mizchi/items/674c76104e1a0f8a68f4


#navi_footer|JavaScript|