Hatena::ブログ(Diary)

naoyaのはてなダイアリー

May 03, 2013

昨今の自分用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 してきて使うことを想定しているのですが、コードベースの管理自体をやってくれる便利なツールなんかがあったら是非教えてください。

追記

その2 に続きます: http://d.hatena.ne.jp/naoya/20130504/1367640512