その2から大分間が空いたけれどもその3。

とはいうもののその2でjquery方式のビルド方法分かったんだからそれ使えば終わりじゃないか。確かにそうだ、いやいや待ってほしい、よーく考えてほしい。
投稿してから時間空きすぎててもうあんまり覚えてないが、どう考えても一般人が気軽に行えるような内容ではない。なんで自作したjavascriptをさっとぱっと公開したいだけなのにあんな面倒なコーディングルールや環境構築をまるっと全て整備しなければいけないのか。

辿り着いた答えはwebpack。どちらかというとCommonJSよりのビルドツールだがAMDにも対応してくれる。
正直なところ初めからwebpack導入しておけば、CommonJSでもAMDでも好きな方で書いて最終的に1つのグローバル変数としてモジュールを吐き出すということが簡単にできる。
そしてwebpackだとAMD(あるいはCommonJS)の機能を含めた形でビルドしてくれるからrequire.jsのような外部jsファイルを読み込む必要がない。これが結構重要。

  • 「このライブラリを使うにはrequire.jsが必要です。」
  • 「このライブラリはscriptとして読み込むだけで使えます。」

ライブラリを使おうと思ってるページで既にrequire.jsを使っているならrequire.js必須と言われてもなんとかしてくれそうだが、そうでない大部分のページでは読み込むだけで使える方が楽に決まっている。

というわけでとにもかくにも実際に試してみたのがこちら。
言わずと知れたライフゲームを好きなところにポンッと設置するためだけのjavascriptモジュール。なんでライフゲームかと言うと最近みたライフゲーム動画が面白かったから。
対応ブラウザであればこの直下あたりに黒と緑の点滅するセル群が表示されているはず。


今更ながらgithub使ってみようと思いたったのでこちらに。
https://github.com/miyanokomiya/LifeCanvas

読み込むとグローバル変数としてLifeCanvasが登録される。そして設置先のタグのIDを第一引数としてnewすればライフゲームの設置完了。第二引数としてオプションを渡すこともできる。

使い方

var app = new LifeCanvas("設置したいタグのID", {  
 width : 幅,
 height : 高さ,
 rowCount : 行数,
 columnCount : 列数
 stepFrame : ステップ間隔(ミリ秒)
});

標準のDOM操作API使うのは面倒なので思いっきりjqueryに頼っているが、このライブラリを読み込んでも$がグローバルに展開されることはない。多分webpackの機能+jquery側がきちんとUMD対応しているからだと思われる、詳細までは調べておらず。

webpackビルドで1つ不満なのは、r.jsは/*!で始まるライセンスコメントをファイル上部にまとめてくれてたのに、webpackでは元の位置にままになってしまう点。ライセンス表記が消えるわけではないけどかなり気づきにくくなるからやっぱり上部にまとめてほしい・・・

グローバルに展開するだけなの?UMDじゃないの?ゴミじゃんという突っ込みが聞こえてきそうだが、まさにその通り。
UMD対応するにはどうしても別に用意したUMDラップを切り貼りしていくということが必要で、webpackでシンプルにビルドして終了にはできそうもない。
webpackにそういうの一発でやってくれるオプションあったりしないのかと他人任せな期待を持ちつつ、今後の課題ということでまたいつか。


2016,7,31

webpackでUMDビルドないのと探してみたら検索の一件目で見つけたので即追記。
webpackでライブラリを作る
AMD形式で書いてても問題なくUMDにしてくれる。

やはりお手軽にライブラリ作るならwebpackが最適なのではないだろうか。もちろんAMDやCommonJSを構成するためのコードも同梱されるのでファイルサイズは膨らむが、きっとそれを気にするレベルのお方ならjqueryのようなビルド環境もさくっと構成できるだろう。

なぜここまでAMDに拘っているのかというと、開発をrequire.js環境で行いたいから。フロントエンドjavascript原理主義者にとって、ビルドしなければ動かないjavascriptなんてjavascriptではないのである。コード修正してブラウザリロードしたら即反映される、このスピード感こそjavascriptの魅力ではないか。でもいざ開発終わって公開しようという段階になるとrequire.js依存は枷になってしまう。

そんなわがままを叶えてくれるのがwebpack。require.jsとwebpackは主要なビルド設定が揃っている(もちろん記法は違うが)のでconfigファイルを用意するだけでそれぞれのビルドを行うことができる。