RailsでHamlを利用する方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsでHamlを利用する方法について現役エンジニアが解説しています。HamlとはHTML abstraction markup languageの略で、より簡単にHTMLを生成できるように作られたテンプレートエンジンです。Hamlの導入方法や書き方などを解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

RailsでHamlを利用する方法について解説します。

Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

田島悠介

今回は、Rubyに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

RailsでHamlを利用する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

Haml(HTML abstraction markup language)とは

HamlとはHTML abstraction markup languageの略で、より簡単にHTMLを生成できるように作られたテンプレートエンジンです。

Railsでは標準でERB(.erb)が使われていますが、.erbと比べて以下の特徴があります。

  • 閉じタグ不要
  • rubyのend不要
  • インデントで階層構造を表す

もっと詳しく知りたい方はHaml公式ページを見てみると良いでしょう。また、類似のテンプレートエンジンとしてSlimというものもあるので、合わせて知っておくと良いでしょう。

Hamlの導入方法

haml-railsgemをインストールすれば、RailsにHamlを導入できます。

Gemfileに以下を追加して、bundle installすれば導入完了です。

gem "haml-rails", "~> 2.0"

 

既存のapp/views/layouts/application.html.erbをapp/views/layouts/application.html.hamlに変換するには以下のコマンドを実行すればOKです。必要に応じてbundle execを付けて実行してください。

 

$ rails generate haml:application_layout convert

 

同様に既存の.erbファイルを.hamlに変換するには、以下のコマンドを実行してください。

$ rails haml:erb2haml

 

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

Hamlの使い方

Hamlの基本的な書き方を説明します。

  • %bodyのように%から始めることで、HTMLタグを表現します
  • idは#、classは . で表現します。<span id=”id”,> は %span#id.class1.class2と書きます。
  • divタグは使うことが多いため、idやclass付きのdiv タグは省略して記載できます。<div id=”id”> は#idと省略可能です。
  • ifやeachなど、画面表示しないrubyの制御文は ? if user.present? のように ? から記載します。
  • Rubyの変数など画面表示したいものは = user.name のように = から記載します。
  • HTMLタグの階層構造や、Rubyの制御構造をすべてインデントで表現します。閉じタグや<% end %>は不要です。

マイページに入力済の情報を表形式で表示するerbを例に見てみましょう。

 

<body>
  <h1>My Page</h1>
  <div id="my_page_wrapper">
    <table class="my_page_info">
      <tr>
        <% @user.attributes.keys.each do |attr_key| %>
          <th>
            <%= attr_key %>
          </th>
        <% end %>
      </tr>
      <tr>
        <% @user.attributes.values.each do |attr_value| %>
          <td>
            <% if attr_value.present? %>
              <%= attr_value %>
            <% else %>
              未入力
            <% end %>
          </td>
        <% end %>
      </tr>
    </table>
  </div>
</body>

 

上記をhamlに変換したものがこちらです。
慣れるまでは読むのに時間がかかるかもしれませんが、行数や文字数が減ってスッキリしたのはわかるかと思います。

 

%body
  %h1 My Page
  #my_page_wrapper
    %table.my_page_info
      %tr
        - @user.attributes.keys.each do |attr_key|
          %th
            = attr_key
      %tr
        - @user.attributes.values.each do |attr_value|
          %td
            - if attr_value.present?
              = attr_value
            - else
              未入力

 

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。