RubyonRails:脱.erb、Hamlのはじめの一歩

みなさん、Railsでアプリケーションを開発するときには、テンプレートエンジンは何を使っていますか？ Railsではデフォルトだと.erbを使うことが多いと思いますが、今回はHamlを使ってみたので導入方法や使い方をメモしておきますφ(..)

Hamlのはじめの一歩

Hamlとは？

Hamlとは、Rubyの代表的なテンプレートエンジンです。 HamlはHTML Abstraction Markup Languageの略で、 Google翻訳で約してみると、「HTML抽象化マークアップ言語」とのことです。

公式ページにもあるとおり、HTMLをより抽象的に綺麗に書くことが出来るテンプレートエンジンということですかねφ(..)

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document, without the use of inline code.
(Google翻訳)Hamlは、インラインコードを使用せずに、あらゆるWebドキュメントのHTMLをきれいに記述するためのマークアップ言語です。
File: REFERENCE — Haml Documentation より抜粋

実際にどれくらい注目されているか、erb等の他の主要テンプレートエンジンとGoogleトレンドで比較してみました。

デフォルトのerbと同じぐらい使われているみたいですね、デフォルトじゃないけどhamlに変える企業が多いということは、結構メリットも大きいのでは無いでしょうか？φ(..)

trends.google.co.jp

Hamlのメリット

私がhamlを書いて感じたメリットは、erbよりもシンプルに書ける点ですね。 例えば、同じユーザー作成フォームをhamlで書いたケースとerbで書いたケースを比較してみるとhamlの方がスッキリしてますね。
とっつきにくさはありますが慣れれば、hamlの方が書きやすいんじゃないかと思いましたφ(..)

erb

<h1>Sign up</h1>
<div>
  <%= form_for(@user) do |f| %>
    <%= render 'shared/error_messages',object: f.object %>
    <p>
      <%= f.label :name %>
      <%= f.text_field :name %>
    </p>
    <p>
      <%= f.label :email %>
      <%= f.email_field :email %>
    </p>
    <p>
      <%= f.label :password %>
      <%= f.password_field :password %>
    </p>
    <p>
      <%= f.label :password_confirmation,"Confirmation" %>
      <%= f.password_field :password_confirmation %>
    </p>
    <%= f.submit "Create my account" %>
  <% end %>
</div>

haml

%h1 Sign up
%div
  = form_for(@user, url: signup_path) do |f|
    = render 'shared/error_messages', { model: @user }
    %p
      = f.label :name
      = f.text_field :name
    %p
      = f.label :email
      = f.email_field  :email
    %p   
      = f.label :password
      = f.password_field  :password
    %p 
      = f.label :password_confirmation, "Confirmation"
      = f.password_field  :password_confirmation
    %p
      = f.submit "Create Account"

Hamlの導入方法

導入方法は、とても簡単で下記をGemfileに記述し、bundle installを行うだけです。
これだけで、rails g実行時に自動生成されるテンプレートがaction.html.hamlのようなhaml形式のファイルになります！

gem 'haml-rails'

基本的な使い方

hamlの基本的な使い方を記載しておきます。
すごくざっくり説明すると、変数を表示する場合は= @hoge、要素を挿入する場合は%divというように使用しますφ(..)

基本的な部分のerbとの対応表を記載したので、参考にしてみてください。

分類	erb	haml
HTML要素	<p></p>	%p
変数の表示	<%= @hoge %>	= @hoge
処理の実行	<% hoge = "hoge" %>	- hoge = hoge
idの指定	<p id="hoge"></p>	%p#hoge
classの指定	<p class="hoge"></p>	%p.hoge

基本的な記法については、下記のページに丁寧に記載頂いてます！m( )m

morizyun.github.io

Tips集

私が実際に使って、少し悩んだ部分をTipsとしてメモしておきますφ(..)
なんかあればまた追記します！

文字列を１行で要素に設定したい

Haml

%h1 Sign up

実際にレンダリングされるHTML

<h1>Sign up</h2>

通常の文字列と変数を１行で設定したい

Haml

%div= "#{current_user.name}さん、ようこそ"

実際にレンダリングされるHTML

<div>ログインユーザーさん、ようこそ</div>

特定の条件の場合だけ出力したい

Haml

%div= "#{current_user.name}さん、ようこそ" if current_user