LoginSignup
428
486

More than 5 years have passed since last update.

@yukimura1227inpaiza株式会社

決定版!!Haml小技まとめ！！

Last updated at Posted at 2016-04-16

本記事のサマリ

あれ、これってhamlではどうするんだっけ？ってなった人に、hamlの基本が思い出せるようにまとめています。間違いや、素敵なtips等あれば是非教えてください。
(hamlの変換結果は、適宜見やすいように、空白や改行を入れているため、実際の変換結果と異なる場合がございますので、ご留意ください。)
英語が苦手じゃなければ、公式リファレンスを読みましょう！！

対象読者

hamlっていいってよく聞くけど、あんまり使ったことなくてどうしたらいいかわからない方向け。
hamlをちょいちょい使ってるけど、まだ「馴染む、馴染むぞぉぉ」ってない人向け。

動作確認バージョン

ruby --version
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin15]

rails -v
Rails 4.1.1

gem list --local | grep haml
  haml (4.0.7)
  haml-rails (0.9.0, 0.4)
  html2haml (2.0.0)

経緯

hamlを使うようになったけど、まだ「馴染む、馴染むぞぉぉ」ってない中で、
いまいち、全体像が網羅的にまとまっていそうなqiita記事が見つけられなかったので、自分の勉強がてらまとめておくことにしました。

Hamlとは？

Hamlというのは、HTML Abstraction Markup Languageの略称とのこと。html(xmlも生成できる)を生成するための、マークアップ言語です。htmlより記述量が少なくて済むことと、インデントが強制されることから、非常に綺麗に簡潔に作成することが可能です。

公式サイト
公式リファレンス

hamlの基本

「%」と「インデント」でhtmlのタグを表現しよう

%html
  %head
  %body
    Hello Haml World!!

こんなかんじで「%」と「インデント」というイディオムを覚えてしまいましょう。上記は、こんな風になります。

<html>
  <body>
    Hello Haml World!!
  </body>
</html>

タグだけじゃhtmlは表現できない...htmlの属性は！？？

htmlの属性は、ハッシュを利用するのがメインです。( ()を使って表現する、簡易的な方法もあるようです。)

%html
  %body
    %a{ :href => 'http://google.co.jp', :id => 'anchor1' }
      {}でくくってその中に表現するのだ！！
    %a{ href: 'http://google.co.jp', id: 'anchor2' }
      属性の指定は、こんな風にも書ける(Rubyのhash指定の文法に依存)
    %a( href='http://google.co.jp' id='anchor3')
      属性の間に、カンマをつけたくない人は、こんな風に()を使っても書ける
    %a(href='http://google.co.jp'){id: 'anchor4'}
      ただ、()の方は、スペース区切りゆえにできないこともあるので、両方書くことも許されている。

↓変換後↓

<html>
  <body>
    <a href='http://google.co.jp' id='anchor1'>{}でくくってその中に表現するのだ！！</a>
    <a href='http://google.co.jp' id='anchor2'>属性の指定は、こんな風にも書ける(Rubyのhash指定の文法に依存)
    <a href='http://google.co.jp' id='anchor3'>属性の間に、カンマをつけたくない人は、こんな風に()を使っても書ける</a>
    <a href='http://google.co.jp' id='anchor4'>ただ、()の方は、スペース区切りゆえにできないこともあるので、両方書くことも許されている。</a>
  </body>
</html>

超絶よく使うclass属性とid属性は、「.」と「#」で表現できる

%span#id_value.class_value1.class_value2
  こんなかんじで#でidを指定して、.でクラスを指定する。.は複数設定可

↓変換後↓

<span id="id_value" class="class_value1 class_value2">
  こんなかんじで#でidを指定して、.でクラスを指定する。.は複数設定可
</span>

超絶よく使うdivタグは、%を省略できる

%div
  こんな風にdivタグも書けるけど
.xxx
  こんな風に「.(ドット)」＋文字列と書くとxxxというクラスを指定したdivタグが生成される
#zzz
  こんな風に「#(シャープ)」＋文字列と書くとzzzというidを持ったdivタグが生成される

↓変換後↓

<div>
  こんな風にdivタグも書けるけど
</div>
<div class='xxx'>
  こんな風に「.(ドット)」＋文字列と書くとxxxというクラスを指定したdivタグが生成される
</div>
<div id='zzz'>
  こんな風に「#(シャープ)」＋文字列と書くとzzzというidを持ったdivタグが生成される
</div>

rubyのコードは「-」や「=」で

ループしたい？「-」使いましょう

- 3.times do |i|
  %p #{i}

↓変換後↓

<p>1</p>
<p>2</p>
<p>3</p>

分岐したい？「-」使いましょう

- 3.times do |i|
  %span
    - if i.odd?
      odd!!
    - else
      even!!

↓変換後↓

<span>
  even!!
</span>
<span>
  odd!!
</span>
<span>
  even!!
</span>

rubyで処理した結果を出力したい？「=」使いましょう

erbで言う所の、<%= %>に当たるのが「=」です。

= link_to 'Go To Google', 'http://google.co.jp'

↓結果

<a href="http://google.co.jp">Go To Google</a>

変数定義したい？「-」使いましょう

- my_variable = '変数使ってみる'
= "こんな風に、#{my_variable}ことができます"

↓結果

こんな風に、変数使ってみることができます

とりあえず、プログラム的なことがしたくなったら、まずは「-」使うイメージで良いと思います。
そして、結果を画面に反映したい場合は、「=」を使いましょう

コメントは、「-#」か「/」で

ブラウザのソースを表示で見せたいコメントは「/」

/ここはコメントです。

↓結果

<!-- ここはコメントです。 -->

ブラウザのソースを表示で見せないコメントは「-#」

-#これもコメントです。(ただし、htmlには反映されません。)

↓結果

(html上は、何も見えない)

応用編

よくつかうテクニック

htmlのエスケープをしたい場合は、「&=」

「=」で出力しようとした場合に、htmlのエスケープ(&を&ampなどに変換するやつ)をするかしないかは、hamlの設定によって挙動が変わるのですが、意図的にhtmlのエスケープをしたい場合は、「&=」を使いましょう。

&= "I like cheese & crackers"は、I like cheese &amp; crackersに変換されます。

htmlのエスケープをしたくない場合は、「!=」

「&=」とは逆に、「!=」を使うことで、エスケープさせないように制御することが可能です。
!= "I like cheese & crackers"は、I like cheese & crackersに変換されます。

「-」や「=」から始まる文字列を出力したいなら(バックスラッシュ)

1
+
1
\=
2
%br/
1
\-
1
\=
0
上記のように、=や-を行の先頭文字にしたい場合は、\(バックスラッシュ)にてエスケープする

1+1=2
<br/>
1-1=0
上記のように、=や-を行の先頭文字にしたい場合は、\(バックスラッシュ)にてエスケープする

html5のカスタムデータは、「:data」で美しくかける

属性を書くときは、Hashを利用するのがセオリーですが、Hashのキーをシンボルにする場合、-(ハイフン)が使えないという欠点があります。
一方で、html5のカスタムデータを使う場合は、属性名が「data-hogehoge」という規則になるため、相性がすこぶる悪い。
どういうことかというと
<span data-hogehoge = 'mokemoke'/>のように表現したい場合

%span{data-hogehoge: 'mokemoke'}とか
%span{:data-hogehoge => 'mokemoke'}とかは、エラーになる。
:data-hogehogeというのは、Rubyのシンボルというものなのですが、シンボルに「-」を含めるには、ダブルクォートでくくる必要があるため、ただしくは、以下のような記述になる

%span{"data-hogehoge": 'mokemoke'}とか

%span{:"data-hogehoge" => 'mokemoke'}

これが許せる人なら、これでも構わないのですが、個人的には美しくないなぁと感じてしまいます。
そういった人のために、ハッシュを階層化することで、Haml側では自動的に「-」区切りしてくれるようになっています。

%span{ data: { hogehoge: 'mokemoke' } }

%span{ :data => { :hogehoge => 'mokemoke' } }

のように指定することができます。

ちなみに、これは、dataだけが特別なのではなく、属性として指定するHashの階層は、ハイフンで繋げられるようです。
%span{ fuga: {hoge: { piyo: 'mokemoke' } } }
-> この場合、fuga-hoge-piyo = 'mokemoke'という属性が指定される。
特に、カスタムデータを複数指定したい場合が以下のように記述できるため、よりスマートに記述することが可能です。

%span{"data-hoge": 'data1' , "data-fuga": 'data2' , "data-piyo": 'data3'}

これが、
%span{ data: { hoge: 'data1', fuga: 'data2', piyo: 'data3'} }

こんな風に記述できて、どちらも以下のような変換結果になる。
<span data-fuga="data2" data-hoge="data1" data-piyo="data3"></span>

Doctype: !!!

htmlの冒頭に記載する、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
みたいな文を生成してくれるのが「!!!」です。いろいろあるので、詳しくは、公式リファレンスのDoctypeの章を確認してください。

条件付きコメントを表現しなければいけない呪いにかかっているのなら。。。

この章を見ているということは、きっとあなたは、古いIEを救ってあげる勇者さま？
hamlでも、条件付きコメントをサポートしています。
条件付きコメントを利用する場合は、「/[]」を使いましょう。
参考：Wikipedia:条件付きコメント

/[if lt IE 9]
  %script{ type: 'text/javascript', src: 'http://html5shim.googlecode.com/svn/trunk/html5.js'

↓結果

<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Helper Methods

Hamlが提供している便利なヘルパーメソッドがありますので、興味が有る方は、以下をご参照ください。
Hamlの提供するヘルパーメソッド
(自分も調査中です。。。)

hamlの中にhamlじゃない情報を載せる(フィルター機能)

:javascriptなどのフィルターと呼ばれる機能を利用すると、hamlではない記述方法を織り交ぜることができます。
使い方は、以下のとおりです。
①宣言する
②インデントを一段さげた部分は、それぞれのフィルターが適用される
よく使いそうなものは、こちらにまとめていますが、他にもあるので、詳しくは、公式リファレンスを参照しましょう。

coffeescirpt、javascriptをベタ書きしたい？「:coffee」「:javascript」でできます

:coffee
  alert('coffee!!')

これは、以下の様なjavascriptに変換されます。

<script>
  (function() {
    alert('coffee!!');

  }).call(this);
</script>

:javascript
  alert('javascript!!');

これは、以下の様なjavascriptに変換されます。

<script>
  alert('javascript!!');
</script>

sass,scss,cssをベタ書きしたい？「:sass」「:scss」「:css」でできます

使い方は同上、なので、省略します。

嘘でしょ？hamlなのに、erbで書きたいの？？「:erb」でできます

まぁ、そんな場合は、「:erb」を使いましょう
使い方は、同上なので省略します。

マークダウン記法を使いたい！？なんてわがままな。。。「:markdown」でできます

これは、地味に嬉しいかも？
使い方は同上です。

「-」を使わずにrubyのコードを書きたいだって！？「:ruby」でできます

あまり、viewに複雑なことをさせるのはよくないので、これを使いたい場合は、ちょっと実験したいとかくらいにとどめておいたほうがよいと思いますが。。。
:rubyを使うと、Rubyのコードがそのまま記述ができます。

htmlをhamlに変換したい

htmlをhamlに変換したい場合は多々あると思います。
その場合は、html2hamlというgemがあれば、コマンド一発で変換してくれますので、おすすめです。
もしくは、
htmlをhamlに変換してくれるwebサイトを使うのもありです。
私は、前者をよく利用しています。

うん、これで自分が欲しい情報はまとまったきがする！！

428
486
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
428
486