RailsにおけるHaml記法について調べてみた

Hamlについて

Ruby on Railsを勉強し始めて数か月が経ちますが、なにやら「Haml記法」という独自の記法が有るらしい…という事を最近知り、現場でも結構導入されているようなので自分なりに調べてみました。

スポンサードリンク

Hamlとは

Hamlとは、「HTML avstraction markup langage」の略で、直訳したら「HTMLを抽象化したマークアップ言語」ということになります。要はHTML/XHTMLを生成するための記法の1つで、HTML/XHTMLよりも効率的かつ短くコードが書ける…といった感じでしょうか。

Hamlをさらに簡易にしたようなSlimという記法もあるみたいですがこれはまたHamlを勉強した後にじっくり調べようかなーと思います。

Hamlの記述方法

!!!
%html{lang: "ja"}
  %head
    %meta{charset: "utf-8"}
  %body#main.mainbody
    hello Haml!

!!!

<!DOCTYPE html>と同値です。

%

タグを表します。「%タグ名」で<開始タグ><終了タグ>を表します。この記法こそHamlの核心じゃないかなと思ってます。めちゃくちゃ便利ですねこれ…。

{属性名: “属性”}

属性を指定するには{ }を使います。タグ名の後にRuby風にシンボルで記述する事が出来るようです。

#と.(idとclassの指定)

CSSの指定と同様に「#」と「.」を使ってidとclassを指定できます。

注意:インデント

インデントを必ず入れる事。終了タグが無い事による弊害でしょうか。そもそもHTMLでもインデントで整形するのは当たり前なので弊害とは言えないでしょうが、インデントを入れ忘れた際に上手くマークアップできないという欠点があります。

Hamlで改行を表すには

%p
  Haml

これは次のようなHTMLに変換されます。

<p>
  Haml
</p>

HTMLに変換した時に1行にしたい場合は

%p Haml

と記述すると1行で整形されます。また、Haml記法でインデントを入れて分かりやすくしたいが、HTMLでは1行で表示したい!となったときの記法も存在します。タグ名の後に「<」を入れるとHTMLでは1行に整形されます。

%p<
  Haml

上の2つは次のようなHTMLに変換されます。

<p>Haml</p>

スポンサードリンク

Hamlのコメントについて

Hamlのコメントについては2種類の書き方が有るようです。1つがHTML風に記述する通常の書き方。

/コメント

複数行に渡って記述したい場合、インデントを除去してコメントを書きます。

/コメント
コメント
コメント

2つ目の記法は、HTMLには反映させないけど、Hamlの中では反映させたい場合。こんなこともできるんですね。

-#コメント

この記法を使うことでブラウザのソースを表示で見せないようにすることが出来ます。

尚、複数行書きたい場合は上の方法と同様にします。

StyleタグやScriptタグについて

Styleタグ、Scriptタグについては以下の様に記述します。

:css
  #main {
    background-color: black;
  }
:javascript {
  x = 1;
  if(x == 1) {
    alert("OK!")
  }
}

感想

Hamlってめっちゃ便利ですね。

%とインデントを使うことで記述量が大幅に減少します。しかも覚えることがかなり少ないので慣れたらすぐに使いこなせそうです。

今回の記事の作成に当たり、こちらの記事を参考にさせて頂きました。

現在書いているコードをコピペでHamlに変換してくれるブラウザツールもあるようなので、Hamlに移行したい方は簡単にできるのも良いですね。

これから少しずつ慣れていこうと思います。

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です