シングルページアプリ って知ってますか? 簡単に言うとHTMLページは1つで、あとはCSSとJSで頑張って画面遷移やら何やらWebアプリ作っちゃおうぜっていうものです。私は今から5年ほど前に qooxdoo を使ってバックエンドの管理用UIなシングルページアプリを作ったのですが、当時はそんな概念も浸透しておらず、なかなかに面白いことやっていたなと今になって思うのです。
で、最近「シングルページアプリ作りてぇ」欲が突然高まりまして、なんか良いツール無いかなと探していたところ brunch を見つけました。というのも qooxdoo は重量級過ぎまして決まり事が多い上にページビルドの動作が重く、ちょっと今時ではないのかなと。まぁ昔のことなんでqooxdooの今はわからないですが。それに対して brunch はライブラリ選択の自由度が高くてコンパクトで、いかにもいまどきな感じがします。普通なら nodejs = JavaScript で完結できるところもポイント高いです。qooxdoo はJSのラッパー文法で、かつ本体は Python でした。
brunch の唯一の欠点は branch と typo しやすいことでしょうか。ここまで書く間に3回ほど typo してます。
さてこの brunch こんな感じで使うことになります。
- アプリのひな形からプロジェクトを作る
- 結構いろんなひな形が公開されてる
- アプリ書く
- JavaScript/CoffeeScript でゴリゴリ書くよ (TypeScriptも使えるはず)
- 既存ライブラリ使うよ
- テストもJavaScriptで書くよ
- ビルド&デプロイする
- 簡易HTTPDサーバ内蔵で手元で動作確認できるよ
まぁよくある使い方ですね。
Hands on.
ではちょっと使ってみましょう。まずはインストール
$ npm install -g brunch
一発です。これで brunch というコマンドが使えるようになります。
で、早速アプリを作って実行してみましょう。
$ brunch new testapp
$ cd testapp
$ brunch watch --server
12 May 18:48:00 - info: application started on http://localhost:3333/
12 May 18:48:01 - info: compiled in 424ms
サーバは 3333 ポートで起動しますのでWebブラウザで見るとこうなります。
左上の App tests をクリックすると
こうなります。なんか良さそうじゃないですか?
Inspect the structure.
さてビルド後にプロジェクトディレクトリを見てみるとこんな感じでした。
$ ls
README.md config.coffee node_modules/ public/ vendor/
app/ generators/ package.json test/
ざっくり説明しましょう。
| パス | 説明 |
|---|---|
| config.coffee | プロジェクトの設定ファイル。主にビルドに必要なリソースの依存関係、ディレクトリ構成とかJSの合成順序とかが書かれている。 |
| package.json | brunch 実行時に必要な node_modules/ の構成情報が入ってる。たぶん最初のうちは触る必要がない。 |
| app/ | アプリのJSとかはココに書く。特に app/assets/ はそのまま public/ へ出力されるので、エントリポイントとなるHTML (index.html) や画像リソースをまとめておくと良い。 |
| vendor/ | jquery とかアプリを書くときに使うサードパーティライブラリはココに置く。 |
| test/ | テスト関連のコードはココに置く。テストには mocha とか使うらしい。 |
| public/ | アプリの出力場所。最終的に此処の内容を(スタティック)Webサーバにデプロイすれば良い。 |
とりあえずこれくらい知っておけば、さらに詳しく見る助けとなるでしょう。
おまけ
Optimize Build.
リリース時には
$ brunch build --optimize
こんな風に最適化してビルドします。minifyとかいろいろやってくれます。ぜひ public/ 下の出力結果を見てください。CSSやJSが綺麗(?)にパックされています。
Minimum Project Template.
最小のプロジェクトのひな形が https://github.com/monokrome/brunch-with-brunch にあります。ドキュメント上は
$ brunch new newapp --skeleton https://github.com/monokrome/brunch-with-brunch
すれば良いのですが Windows では途中でエラーを吐いて止まりました。代わりにこんなふうにすれば良いでしょう。
$ git clone https://github.com/monokrome/brunch-with-brunch newapp
$ cd newapp
$ rm -rf .git
$ npm install
$ brunch build
この状態でデフォルトで生成されるアプリと比べると、何がどうなっているのかとてもわかりやすいです。ただ現時点では app/ 下になにも無いので build しても public/ 自体が出力されません。適当なJSファイルを app/ 下においてからもう一度 build するとさらにわかりやすいです。
まとめ
- brunch は JavaScript (nodejs) で完結したapplication assemblerです。
- JSやCSSの結合や最適化(minifyなど)をしてくれます。
- CoffeeScript などのJavaScriptラッピング言語を利用できます。
- CommonJS (=require関数) で複数モジュールを記述します。
- 既存の vendor ライブラリを利用できます。
便利そう&結構以前からあるのに日本語の情報が少ないので紹介してみました。