プログラミングの勉強日記
2020年7月29日 Progate Lv.226
概要
こちらの記事で扱ったgemのhamlを説明する。hamlはHTML Abstraction Markup Languageの略で、簡単にHTMLのコードを書くことができる。erbと同じでRubyのコードを埋め込むこともできる。
hamlには閉じタグが存在しないので、コードを簡単かつすっきり書くことができる。
使い方
hamlを使うためにGemfileを編集する
Gemfile
gem 'haml-rails'
Gemfileを編集したら、hamlをインストールする。
ターミナル
bundle install
これで、index.html.hamlといったビューファイルの拡張子にhamlを使えるようになる。
すでにあるerbファイルをhamlファイルに変えたい場合
Gemfile
gem 'haml-rails'
gem 'erb2haml'
ターミナル
erbファイルを残して変換
$ rake haml:convert_erbs
erbを削除して変換
$ rake haml:replace_erbs
基本的な書き方
%タグ名と記述することで、開始タグと閉じタグに変換する。
index.html.haml
%html
%body
%div
Hello World!
HTMLで以下のように変換されている
index.html
<html>
<body>
<div>
Hello World!
</div>
</body>
</html>
hamlの書き方
各タグの書き方
| hamlでの書き方 | コンパイル後のコード(HTML) |
|---|---|
%div |
<div></div> |
%html |
<html></html> |
%meta |
<meta></meta> |
%header |
<header></header> |
%footer |
<footer></footer> |
%table |
<table></table> |
%h1 |
<h1></h1> |
%p |
<p></p> |
%a |
<a></a> |
%ul |
<ul></ul> |
%li |
<li></li> |
属性の書き方
タグ内の属性は2つの書き方がある。
haml
%a(href='http://www~')
リンク先の名前
%a{ href: 'http://www~' }
リンク先の名前
HTMLでは以下のように変換されている
html
<a href="http://www~">
リンク先の名前
</a>
IDとclassの書き方
haml
# idの指定
%div#id_name
idを指定する
# クラスの指定
%div.class_name
クラスを指定する
HTMLでは以下のように変換されている。
html
<div id="id_name">idを指定する</div>
<div class="class_name">クラスを指定する</div>
idとクラスを両方指定することもできる。
haml
%div.contemt#content1
HTMLでは以下のように変換されている。
html
<div class="content" id="content1">
</div>