RailsでHamlを利用する方法を現役エンジニアが解説【初心者向け】
初心者向けにRailsでHamlを利用する方法について現役エンジニアが解説しています。HamlとはHTML abstraction markup languageの略で、より簡単にHTMLを生成できるように作られたテンプレートエンジンです。Hamlの導入方法や書き方などを解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
RailsでHamlを利用する方法について解説します。
そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。
今回は、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
未入力
筆者プロフィール
| メンター稲員さん
フリーランスエンジニア。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
