#プログラミングの勉強日記
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>