昨今の自分用Webアプリケーションひな形
ちょっと jQuery と簡単なサーバサイドの処理を組み合わせた処理を試しに書いてみよう･･･なんて時に、いちいち jQuery を取ってきて HTML を書いて script タグを書いてロードして sinatra 立ち上げて云々･･･というのが毎度面倒なので、ひな形になるアプリケーションを作った。
ひとまず sinatra でサーバーサイドを書き、HTML は slim で、CSS は sass 。JavaScript は CoffeeScriptで書くにあたって jQuery、underscore、Backbone をロードしてある、というような構成にしてあります。
まあ、この類のことは人それぞれ自分なりにカスタマイズしてやっていると思いますが、どういうコンポーネントで構成しているかを、備忘録も兼ねてちょっと紹介してみよう。
bower + require.js
jQuery その他のライブラリは気づけばバージョンが上がったりするし、例えば Twitter の typeahead.js のようなものを追加で使いたいなんてとき、それらをいちいち手で取ってきてたりするのは面倒でござる。
そこで、bower を使った。ボワー。
bower は "package manager for the web" ということで、ブラウザ用の JavaScript ライブラリ用の Bundler みたいなもの。
{ "name": "My Application", "version": "0.0.1", "dependencies": { "requirejs": "latest", "jquery": "latest", "backbone-amd": "latest", "underscore-amd" : "lastest" } }
という bower.json というファイルを書いて
% bower install
で別途 .bowerrc で指定したパスにそれらライブラリがインストールされる。bower list や bower search といったコマンド群でパッケージ管理できて良い。対応ライブラリがまだ少ないようだけど、今のところ自分が利用しているものはだいたいレポジトリに登録されているようですし、登録されていないライブラリを取得してくる方法もあるみたい。
これで JavaScript ファイルをいちいち wget するなんてローテクな作業からはおさらば。
Bundler の Bundler.require のように取ってきたライブラリを DRY にロードできるような機構は今のところ bower にはないみたい、残念。ので、落としてきたファイルに script タグで直接自分でパスを書いたりするのだけど、それじゃあんまりなので require.js でロードするようにした。
HTML (slim) では
body script src="/js/vendor/requirejs/require.js" data-main="/js/application"
と require.js だけロードしてやって、application.js (coffee) で
require.config paths: jquery: 'vendor/jquery/jquery' underscore: 'vendor/underscore-amd/underscore' backbone: 'vendor/backbone-amd/backbone' require ['jquery', 'underscore', 'backbone'], ($, _, Backbone) -> ## Your application goes here console.log Backbone
というように各ライブラリのロードパスを設定した上で require 関数で読み込む。
Sinatra
slim、CoffeeScript、sass のようなプリコンパイル系の類を使うにあたって、いちいちそれらのプリコンパイラをコマンドラインから立ち上げたりするのはめんどくさい。ので Sinatra のビューテンプレートを使って
require 'bundler' Bundler.require get '/' do slim :index end get "/js/application.js" do coffee :application end get "/css/application.css" do sass :application end
てな具合で、自分が手で書き込むファイルは Sinatra にそのコンパイルを任せる。いちいち手プリコンパイルを走らせたり、あるいはエディタのフックで変換したり、別プロセスで監視したりというのが必要ないので快適。
この辺に必要な gem はもちろん bundler で管理しているので
% bundle % bundle exec ruby app.rb
ですべて入って Sinatra アプリケーションが立ち上がる。
slim + coffee + sass
この slim + coffee + sass はどれもインデントでブロックを表現しつつ冗長な記述を無くそう、という類の実装で書き味が良く似ている。ちょっとした試験アプリケーションを作りたいというときのライトな動機によくマッチしている。(coffeekup という、coffee で HTML を書けるものがあるけど自分は slim の方が冗長性がなくて好き)
doctype html
html lang="ja"
head
title Boilerplate
link href="/css/application.css" rel="stylesheet"
== yield
body
script src="/js/vendor/requirejs/require.js" data-main="/js/application"slim = HTML をこんな感じで書いて
body font-family: Georgia, Garamond, Times, "Times New Roman", serif color: #090909 margin: 0 padding: 0 background: #f0f0f0 .navbar position: relative text-align: left padding: 5px 0 10px 0
sass = CSS をこんな感じで書き
$ -> console.log 'Hello, World'
coffee = JavaScript をこんな風に書く。
まあ最近では特筆すべきことではないかもですが、ちょっとした検証コードもこの辺のツールで書けると楽でいい、でも準備がめんどくさい･･･というのがあったので以上 boilerplate を作ったのであります。
あとはテストツールの選定とそのひな形の用意もしたいところですね。
今はこのひな形コードを都度 git clone してきて使うことを想定しているのですが、コードベースの管理自体をやってくれる便利なツールなんかがあったら是非教えてください。
