haml

May 07, 2013 by こすげ

こんばんわー。こすげっす。

ＧＷ 終わっちゃいましたねー。みなさん、いかがでしたでしょうか。

自分は友達に会いに名古屋に行って来ましたよー。
またもや一人旅してきました。


ゆーて名古屋は一人で行くには適さない場所なんだなーと...。

コメダ珈琲は良かったですよ！

名古屋城の前にあった屋台のかき氷も美味しかったですよ！

手羽先も美味しかったですよ！！

スタバのお姉さんも可愛くて優しかったです！


ただ自分の目的には適さない場所でした。笑
もう少し視野を広げて、伊勢神宮あたりまで頑張ればよかった。
でもやっぱ一人旅はいいですね。
今度は九州あたりに行きたいと思います。



前置きはここらへんにいたしまして、今日の本題！！！

皆さん、hamlってご存知でしょうか？
今、railsで新しいwebアプリを作成しているのですが
viewにはhamlを使用しています！

これがまた簡単にかけるんですよ。ホンマに。

ってことで、軽く紹介しちゃいます！

1.hamlとは...

まあ詳しくはHamlの公式サイトを覗いてみてください。笑
リンクはこちら→http://haml.info/

この記事もこのページを下に紹介して行きたいと思います。
簡単に紹介しますと、
マークアップ言語を美しく書くためのテンプレート
という感じだと思います。
とってもシンプルにかけちゃうんですよ、これ。
違いといえばインデントをしっかりスルこと（マジで大事！！！)
閉じタグがないコト
ですかね。自分が感じたのは。

2.ということでHTMLさんと比べてみる...

※bootstrapさんのクラス使って紹介してみます。

まずはHTMLでこんなのを表示したいなーと思う。

<div class="hero-unit">
    <h1 id="hoge">タイトル</h1>
    <p class="fuga" style="width: 100px; background-color: #fff;">説明文</p>
</div>
 

的なのね。
これをHAMLさんで書きますと...

  .hero-unit
    %h1#hoge タイトル
    %p.fuga{:style => "width: 100px; background-color: #fff;"} 説明文
   

で終了です。

3. これにrailsを付け加えてみる...

まあ先ほどのやつを.erbで書く場合と.hamlで書く場合を比べてみましょう。

※ title = "タイトル", description = "説明文"
まずは.erbで表記

<div class="hero-unit">
  <h1 id="hoge"><%= title %></h1>
  <p class="fuga" style="width: 100px; background-color: #fff;">

  <%= description %></p>
</div>
 

そしてこれを.hamlで書くと...。

.hero-unit
  %h1#hoge= title
  %p.fuga{:style => "width: 100px; background-color: #fff;"}= description
 

という感じになります。

4.しかし注意点...

これまだそこまで浸透していない気がします。
なので、viewをhamlで書くと自分がモックなり、プロトタイプなりを制作するぶんには
作業効率が上がると思われますが、いざデザイナーさんやらにお願いする時は足かせになるかもわかりません。

現在、とっても苦労しています。笑
てか最初にhamlを使いたいって意思表明しておけばよかった。
今回の開発には仕方ない理由もありますので、仕方ないですけどね!!!

5. 最後に...

ただ自分はhamlを推してます。
てか新しいモノに触れるのはいいことだと思います。

railsで開発をしているとhamlやらcoffeeやらありますが、
インデントを意識して書くというのは
ruby も haml も coffee も同じです。
同じコトを意識していればいいならとっても開発は楽になると思います！


というコトで先程 coffee という単語が出てきて、何いってんだって思ったかもしれないですが、
気になる方は

「 coffee script とは」

てきな感じでググってみてくださいな！！



社長が今日の朝会で休みは終わりましたを連呼、強調してて
社長が一番残念がってんなーって感じたコスゲでした。

ちゃんちゃん。