ヒビカワル

人生100年時代に向けて日々変わることを決意したオッサンのブログです！

Hamlについてまとめてみた

〜してみた

こんにちは、チャビです。今日はHamlについてまとめたいと思います。環境はmac_Rails5.1.6_ruby2.5.1です。

Hamlとは

一言でいうと「HTML」を簡単に書く記法です。英語で文章を手書きする時に慣れたら筆記体で記法した方が早いと思いますよね。そんな感じです。

Hamlの導入方法

HamlのgemをGemfileへ追加します。

gem 'haml-rails'

bundle installでgemをインストールし準備完了。

また、railsではデフォルトでhtml.erbファイルが作成されるため、html.hamlファイルへ変換できるerb2hamlというgemを用意すると便利です。

gem 'erb2haml'

bundle installでgemをインストールし準備完了。 html.erbファイルを変換する際はターミナルを開いてrake haml:replasce_erbs をコマンド入力するとファイルが変換されます。

Hamlの３大特徴

  1. 開始タグと終了タグをいちいち書かなくていい
  2. クラスとidを作成する際の記述がめっちゃ楽
  3. divタグを作成する際の記述がめっちゃ楽

Hamlの書き方

①要素を作る

Haml

%p Hello World

要素の前に「%」を書くだけ

Html

<p>Hello World</p>

タグはいらないよ

②インデント

Haml

%html
  %head
  %body
    %p
      Hello World

半角スペースを２つ使ってインデント

Html

<html>
  <head></head>
  <body>
    <p>
      Hello World
    </p>
  </body>
</html>

ネストされて親子関係になるよ

③属性指定

Haml

%p{class: 'paragraph', id:1} 
  Hello World

{}でハッシュ風に書く

Html

<p class="paragraph" id="1">
  Hello World
</p>

いい感じ

④属性指定（classとid限定）

Haml

%p.paragraph#1
   Hello World!

classを付与する先頭に「.」を書く idを付与する先頭に「#」を書く

Html

<p class="paragraph" id="1">
  Hello World!
</p>

すげーっ

⑤divを作る

Haml

.sample
#sample

%も省略できるんです

Html

<div class="sample"></div>
<div id="sample"></div>

感動すら覚える

公式リファレンス

haml.info

おすすめ記事

qiita.com

コンパイルできちゃいます

Haml to ERb/HTML online converter – haml2erb.org

Convert HTML to HAML

まとめ

  • 一言でいうと「HTML」を簡単に書く記法
  • 高頻度で使用するdiv、classとid指定が圧倒的に楽に記述できます
  • 使わないと損します