browserifyを試してみる
既にアドベントカレンダーの投稿予定の日は過ぎ去っていますが、、書きました。
最近までbrowserifyに関して、substackが作った何か、ぐらいのことしか知りませんでした。
今回、クライアントサイドでJavaScriptのモジュール管理が可能にできるツールだと人から教わり、実際に試してみました。
(nodeのコアライブラリが利用できる点などは特に触れません。)
browserifyとは何か
browserifyとは、クライアントサイドのJavaScriptでモジュールシステムを実現するnpmです。
公式サイトには、
require('modules')in the browser
とあります。
具体的には、
var hoge = require('./hoge');
という形でモジュールの読み込みが出来るようになります。
(モジュールシステムを提供する点ではRequire.jsと似ているようで、実際はだいぶ違うように思います。)
単純にこれだけだと、browserifyで可能になることのイメージがつきにくいと思います。僕はこの説明を読んだだけでは、それを具体的にどう利用するのか分かりませんでした。
browserifyで実現するモジュールシステム
require('modules')が可能になると何が良いのかというと、サイト全体のJavaScriptファイルや機能の管理を考えると分かってきます。
大抵、ウェブサイトにおいてJavaScriptのファイルは複数あり、ページ毎に様々なJavaScriptを使っていると思います。その管理や構成に関しては悩むことがあると思います。
個人的にサイト全体のJavaScriptの管理・構成で悩ましい点は、以下の点だと思います。
- リクエスト数を減らす為JavaScriptの各機能をなるべく1つのJavaScriptファイルにまとめるようにする
- JavaScriptファイルに幾つかの機能をまとめて記述すると、そのうち一部はあるページで読み込むだけで実行される事のない無駄な部分になってしまったりする
- ページ毎にどのJavaScriptファイルを読み込ませるかを考えていると、どのJavaScriptファイルに何を記述するかを検討することに多大な労力が必要になる
こういった懸念点を解消するのが、browserifyだと思います。
Aというページに必要なJavaScriptの機能は、モジュールを用意して
var tab = require('./tab'),
slideshow = require('./slideshow');
というように必要に応じてrequire()で読み込んで利用すればいいだけです。こうすることで、リクエスト数を増やす心配は不要になり、どの機能をどのJavaScriptファイルに記述してということで悩む必要はなくなると思います。
モジュールを用意して、画面に応じて必要なモジュールをrequire()すればいいだけです。
実際に試してみました
https://github.com/makotot/browserify-sampleで簡単なサンプルを作ってみました。
indexとsampleの画面でそれぞれ以下の機能をJavaScriptファイルにモジュールとして読み込んで、各画面で利用するようにしています。
- index : タブ切り替え、ツールチップ
- sample : ツールチップ、ページ最上部へスクロール
browserifyを利用せずにJavaScriptを作る場合、これぐらいの小規模な構成であっても構成・管理に悩むことになると思います。
モジュール管理がbrowserifyによって可能になることで、それぞれの画面で必要な機能だけが読み込まれるようになりました。
このサンプルに関して、もしご意見や疑問などあればissueやpull request頂きたいです。
nodeスタイルの記述を多少必要としますが、学習コストがかかるものでも無いように思います。