node.jsのいろいろなモジュール10 – haml-coffee

2012.02.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

hamlとは?

hamlはHTMLを生成するためのマークアップ言語です。
インデントとタグを簡略化した構文を使うことにより、簡潔な記述でHTMLが記述できます。
元はRuby on Railsのビューで使用されていたようですが、現在はnode.jsとはじめ、いろいろな言語のテンプレートエンジンとして使用できるようです。

このようにhamlで記述すると、

!!!
%html
  %head
    %title Hello, Haml!
  %body
    #header
      %h1 Hello, Haml!
    #content
      %p
        I use Haml
        %span.version= Haml::VERSION

こういうHTMLとして解釈されます。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, Haml!</title>
  </head>
  <body>
    <div id='header'>
      <h1>Hello, Haml!</h1>
    </div>
    <div id='content'>
      <p>
        I use Haml
        <span class='version'>3.1.0.alpha.147 (Bleeding Edge)</span>
      </p>
    </div>
  </body>
</html>

hamlでcoffee script

今回ご紹介するhtml-coffeeは、haml形式のビューにインラインでcoffee scriptのコードが書けるようになるモジュールです。
サンプルを元にご紹介していきます。

環境構築

今回使用した動作環境は以下のとおりです。

  • OS : MacOS X 10.7.3
  • Node.js : v0.6.10
  • npm : 1.1.0-3

適当なディレクトリを作成し、そこでnpmを使用してインストールしましょう。

まずはexpress,coffee-scriptをモジュールをインストールします。

%npm install -g express                               
%npm install -g coffee-script

次にexpressコマンドでプロジェクトのひな形を作成し、haml-coffeeもインストールします。

% express haml-coffee
% cd haml-coffee
% npm install 
% npm install haml-coffee

ソースファイル作成

まずは新しくapp.coffeeファイルを作成し、下記のように記述します。

#モジュール読み込み
express = require 'express'
hamlc = require 'haml-coffee'

app = module.exports = express.createServer()

# 設定
app.configure ()->
  app.set 'views', __dirname + '/views'
  app.use express.bodyParser()
  app.use express.methodOverride()
  app.use express.static __dirname + '/public'

# haml-coffee設定
app.register '.hamlc', hamlc


#ルーティング設定
app.get '/', (req, res) ->
  res.render 'index.hamlc', {name: 'haml-coffee user',languages:[
    {name:"Java",visible:true,desc:"desc 1"},
    {name:"html",visible:false,desc:"desc 2"},
    {name:"haml",visible:true,desc:"desc 3"},
    {name:"Javascript",visible:true,desc:"desc 4"}
  ]}

app.listen 3000
console.log "Express server listening on port %d in %s mode", app.address().port, app.settings.env

html-cofee設定を読み込んだ後、expressのテンプレートとしてapp.register関数を呼び、hamlcファイルを関連付けています。
また、ルートへのアクセスがきたら、nameとlanguragesプロパティを指定し、index.hamlcを表示するように指定しています。

expressはデフォルトでレイアウトファイルを使用するので、layout.hamlcを作成します。
@body部分に指定したhamlcファイルの内容が入ります。!=は内容をエスケープしたくないときに使用します。

!!!
%head
  %title Express App
  %script{:src='http://code.jquery.com/jquery-1.7.1.js'}
%body
  != @body

次は実際に表示される中身のindex.hamlcファイルを作成します。

%h1= "No1.Welcome #{ @name }"

:javascript
  $(function(){
    //btn#onclick
    $("#btn").click(function(){
        alert("hello");
        return false;
    });
  });

%h2= "No2.show collections"
-# show collection
- for lang in @languages
  - if lang.visible
    %= lang.name
    %&= lang.desc + "(escape HTML)"


%h2= "No3.use coffee function"

- msg = (x,y)->
  %h3= x
  %h3= y

%h1= msg "Hello","haml"
%h1= msg "hi","coffee-script"


%h2= "No4.use javascript"
%input#btn{:type=>'button',:value=>'push'}

1行目は、サーバサイドから渡されたnameパラメータを表示しています。haml-coffeeで変数をバインドするには@を使用します。
12行目〜17行目は、coffee scriptのコードを記述しています。行の先頭に-をつければcoffee scriptを記述することができます。
また、20行目〜27行目では、coffee scriptで関数を定義してそれを使用しています。

30行目〜31行目ではボタンに対して3行目の:javascriptフィルター(hamlが持っている機能)を使用して、jQueryでイベントを割り当てています。
このように、通常のjavascriptも使用することができます。

実行

coffee scriptファイルをコンパイルしてnode.jsを起動します。

$ coffee -c app.coffee
$ node app.js
Express server listening on port 3000 in development mode

localhost:3000にアクセスすれば結果が表示されます。

まとめ

さて今回はhamlでcoffee scriptが使えるモジュール、haml-coffeeをご紹介しました。
node.js(express)ではhaml以外にもEJSやJadeなど、色々なテンプレートエンジンが使用できます。
シンプルなものから高機能なものまでありますので、試してみてください。

参考サイトなど