Hamlの導入とerb・haml・slimの違い
現場では？
現場ではhamlやslimを採用している企業が多い印象です。
可読性を重視するとこの2強が上がって来ます。
erbからhamlへの移行も最初は変換サービスを使用して、なれてくれば自分で書くようにすれば問題なく進めると思います。
エンジンテンプレートごとの書き方の違い
- erb
<title>クローラー</title> <table class="ui celled table"> <thead> <tr><th>ID</th> <th>選挙名</th> <th>URL</th> <th>記事ID</th> <th>Xpath</th> <th>開票日</th> <th>条件ワード1</th> <th>条件ワード2</th> <th>条件ワード3</th> <th>上段</th> <th>管理</th> </tr></thead> <tbody> <% @bots.each do |bot| %> <tr> <td><%= bot.id %></td> <td><%= link_to"#{bot.name}", bot, { :target => "_blank"} %></td> <td><%= link_to "#{bot.url.truncate(20)}", bot.url, { :target => "_blank"} %></td> <td><%= bot.article_id %></td> <td><%= bot.xpath %></td> <td><%= bot.date %></td> <td><%= bot.word1 %></td> <td><%= bot.word2 %></td> <td><%= bot.word3 %></td> <td><%= bot.upper.truncate(10) %></td> <td> <%= link_to "編集", edit_bot_path(bot.id), { :class => "ui olive button" } %> <%= link_to "削除", bot, { :class => "ui red button", method: :delete, data: { confirm: "本当に削除してもいいですか？" }} %> </td> </tr> <% end %> </tbody> </table>
%title クローラー %table.ui.celled.table %thead %tr %th ID %th 選挙名 %th URL %th 記事ID %th Xpath %th 開票日 %th 条件ワード1 %th 条件ワード2 %th 条件ワード3 %th 上段 %th 管理 %tbody - @bots.each do |bot| %tr %td= bot.id %td= link_to"#{bot.name}", bot, { :target => "_blank"} %td= link_to "#{bot.url.truncate(20)}", bot.url, { :target => "_blank"} %td= bot.article_id %td= bot.xpath %td= bot.date %td= bot.word1 %td= bot.word2 %td= bot.word3 %td= bot.upper.truncate(10) %td = link_to "編集", edit_bot_path(bot.id), { :class => "ui olive button" } = link_to "削除", bot, { :class => "ui red button", method: :delete, data: { confirm: "本当に削除してもいいですか？" }}
erbとhamlを比較すると明らかにhamlの方がコード量が少ないです。
これはhamlの場合とタグが存在しないからです。hamlは閉じタグをインデントで判断してくれます。
erbを一括でhamlにサービスもありますのでなれない時はこちらを使うのがいいかもしれません。
https://awsm-tools.com/code/html2haml
- slim
title クローラー
table.ui.celled.table
thead
tr
th ID
th 選挙名
th URL
th 記事ID
th Xpath
th 開票日
th 条件ワード1
th 条件ワード2
th 条件ワード3
th 上段
th 管理
tbody
- @bots.each do |bot|
tr
td= bot.id
td= link_to"# bot.name}", bot, { target="_blank"
td= link_to "# bot.url.truncate(20)}", bot.url, { target="_blank"
td= bot.article_id
td= bot.xpath
td= bot.date
td= bot.word1
td= bot.word2
td= bot.word3
td= bot.upper.truncate(10)
td
= link_to "編集", edit_bot_path(bot.id), { :class => "ui olive button" }
= link_to "削除", bot, { :class => "ui red button", method: :delete, data: { confirm: "本当に削除してもいいですか？" }}
slimはhamlからさらに%をのぞいた記法を採用してます。
erbからslimへの変換はこちらのサイトから可能です。
erb2slim.com
hamlを使えばerbもslimも使えるようになります。
今回はhamlを使って行きます。
それではインストールしましょう！
インストール
Gemfileに必要なGemを追加してください。
- Gemfile
source 'https://rubygems.org' ・・・・ gem 'haml-rails' group :development, :test do gem 'erb2haml' end ・・・・
インストールします。
パスにはvendor/bundleを付けましょう。
このパスの意味は bundle installの--path vendor/bundleって何？ - 現場の開発 で解説してます。
bundle install --path vendor/bundle
拡張子がerbのファイルをhamlに一括変換します。
以下のコマンドを叩いてください。
$ ./bin/rake haml:replace_erbs Running via Spring preloader in process 66385 Looking for ERB files to convert to Haml... Converting: app/views/layouts/application.html.erb... Done! Removing: app/views/layouts/application.html.erb... Removed! Converting: app/views/layouts/mailer.html.erb... Done! Removing: app/views/layouts/mailer.html.erb... Removed! Converting: app/views/layouts/mailer.text.erb... Done! Removing: app/views/layouts/mailer.text.erb... Removed! Converting: app/views/tickets/index.html.erb... Done! Removing: app/views/tickets/index.html.erb... Removed! Converting: app/views/tickets/new.html.erb... Done! Removing: app/views/tickets/new.html.erb... Removed!
※ ローカルホストを起動している場合は再起動をかけてください。
