Railsでのhamlの書き方。viewの書き方はerbだけじゃない❗️
hamlとは何か
Rubyで書かれたマークアップ言語で、Railsではビューテンプレートの言語として使われています。スクールなどでRubyを学習された方だとerbを使ったことある方が多いかもしれないです。erbの仲間みたいな感じですね。
hamlのメリット
hamlのおかげでHTMLがより簡単に書けます。hamlは閉じタグがないのが特徴です。
haml導入
Railsのデフォルトはerbなので、Gemfileでインストールします。
gem 'haml-rails'
その後bundle iinstallします。
bundle install
ファイル名がindex.html.hamlのような書き方になります。
erbを自動でhamlに変換
gemを使って自動でerbをhamlに変換することができます。
gem 'erb2haml'
- erbファイルを残して変換
rake haml:convert_erbs
- erbを削除して変換
rake haml:replace_erbs
基本的な書き方
hamlの書き方を見ていきます。hamlには閉じタグがないのが特徴です。
%タグ名と記述することで、開始タグと閉じタグの両方が使えます。
%html
%body
%div
%h1 プログラミング
%ul
%li Rails
%li Laravel
%li React
%p 上3つはフレームワークです
これをhtmlに修正してみます。
<html>
<body>
<div>
<h1>プログラミング</h1>
<ul>
<li>Rails</li>
<li>Laravel</li>
<li>React</li>
</ul>
<p>上3つはフレームワークです</p>
</div>
</body>
</html>
注意
インデントの文字数がおかしいとエラーになってしまうみたいです。
ここがHTMLと違うとこですね。
各タグの書き方
hamlとHTMLタグを比較してみました。
| haml | HTML |
|---|---|
| %html | <html></html> |
| %meta | <meta></meta> |
| %head | <head></head> |
| %title | <title></title> |
| %body | <body></body> |
| %header | <header></header> |
| %footer | <footer></footer> |
| %table | <table></table> |
| %h1 | <h1></h1> |
| %p | <p></p> |
| %a | <a></a> |
| %ul | <ul></ul> |
| %li | <li></li> |
| %ol | <ol></ol> |
| %div | <div></div> |
| %img | <img></img> |
| %form | <form></form> |
| %label | <label></label> |
| %input | <input></input> |
| %button | <button></button> |
| %br | <br></br> |
属性の書き方
ChatGPTで調べてみました。基本上はhamlで下がHTMLまたはerbです。
1.キーと値
%a(href="http://www.programming.com" title="Link Title") Click me
%img(src="/images/example.jpg" alt="Example Image")
<a href="http://www.programming.com" title="Link Title">Click me</a>
<img src="/images/example.jpg" alt="Example Image">
2.キーの省略
- haml
%input(type="text" name="太郎")
%p{ class: "highlight", data: { toggle: "tooltip", placement: "top" } } This is a paragraph
- html
<input type="text" name="太郎">
<p class="highlight" data-toggle="tooltip" data-placement="top">This is a paragraph</p>
3.Rubyコードを使った属性の動的な設定
%a{ href: "/path", title: "#{user.name}'s Profile" } View Profile
- html
<a href="/path" title="<%= user.name %>'s Profile">View Profile</a>
- erb
<%= link_to "View Profile", "/path", title: "#{user.name}'s Profile" %>
4.ショートカット記法
- haml
%input#username
%div.container
- html
<input id="username">
<div class="container"></div>
5.HTML5の data 属性
- haml
%div{ data: { toggle: "modal", target: "#myModal" } } Click me
- html
<div data-toggle="modal" data-target="#myModal">
Click me
</div>
6.複数行の属性
%a{
href: "/path",
title: "Link Title",
data: {
toggle: "tooltip",
placement: "top"
}
} Click me
<a
href="/path"
title="Link Title"
data-toggle="tooltip"
data-placement="top"
>
Click me
</a>
7.クラスとID
#はIDで、.はクラスです。
下はidの指定です。
%div#baseball
野球
下はクラスの指定です。
%div.soccer
サッカー
HTMLで表すと
<div id="baseball">野球</p>
<div class="soccer">サッカー</p>
複数定義もできるみたいです。
%div#baseball.homerun.pitcher
野球
%div.soccer.keeper
サッカー
<div id="baseball" class="homerun pitcher">野球</p>
<div class="soccer keeper">サッカー</p>
8.コメント
/ コメント
コメント
コメント2
<!-- コメント
コメント
コメント2 -->
9.条件分岐
- if user_signed_in?
%p Welcome, #{current_user.username}!
- else
%p Please sign in.
<% if user_signed_in? %>
<p>Welcome, <%= current_user.username %>!</p>
<% else %>
<p>Please sign in.</p>
<% end %>
10.ループ
- @items.each do |item|
%li= item.name
<ul>
<% @items.each do |item| %>
<li><%= item.name %></li>
<% end %>
</ul>
11.フィルタ
:markdown
# Heading
* List item 1
* List item 2
<h1>Heading</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
Rubyの書き方
erbで<%などありますが、下のように書きます。
1.<%= ... %>は = ...
2. <% ... %>は - ...
<% @posts.each do |article| %>
<p><%= post.title %>
<p><%= post.body %>
<% end %>
- @posts.each do |post| %>
%p= post.title %>
%p post.body %>
資料には変数の書き方も記載されていました。以下のように定義します。
- name = '大谷'
%p= "二刀流の選手は#{name}選手です。"
<p>二刀流の選手は大谷選手です。</p>
補足(slim)
slimという書き方も世の中にはあります。以下の記事も参考にしてください。
初学者の方はerbから入る方がいいですね。
参考資料
Discussion