HamlでRailsのビューを書いてみた

はじめに

こんにちは！
社会人一年目の石川です。
記事をご覧いただきありがとうございます。

本記事では、Hamlの書き方についてまとめます。

目次

1. Hamlとは？
2. 基本的なHamlの書き方
3. Hamlのメリットと注意点
4. Hamlの便利な機能
5. 最後に

Hamlとは？

Haml (HTML Abstraction Markup Language) は、HTMLを簡潔に書けるテンプレートエンジンで、Ruby on Railsでよく使用されます。

HTMLのタグや閉じタグを手動で書くのは手間が掛かり、ミスが起きやすいです。
読みやすく、保守しやすいテンプレートを書くためのHamlが使われています。

ERB

RubyコードをHTMLに埋め込むためのテンプレートエンジンです。Railsのビューで最もよく使われるテンプレートシステムの1つで、RubyコードをHTML内に直接記述できます。

基本的なHamlの書き方

ERBとHamlのコード例を以下のようにに並べました。

ERBの場合

<div class="container">
  <h1>Welcome to Qiita!</h1>
  <p>Hamlの使い方を学びましょう。</p>
</div>

Hamlの場合

.container
  %h1 Welcome to Qiita!
  %p Hamlの使い方を学びましょう。

hamlはタグ名の前に%を使い、クラス名は.、IDは#で表現します。
divタグは省略可能です。また、インデントで構造を表現していて、閉じタグが必要ありません。

%ul
  %li リストアイテム1
  %li リストアイテム2

Hamlのメリットと注意点

Hamlのメリット

可読性が高い：タグが少なく、インデントだけでHTML構造がわかる。
生産性向上：シンプルな構文で、HTMLを書く時間を短縮できる。

Hamlの注意点

インデントミスに注意：インデントが正しくないとエラーになりやすい。

Hamlの便利な機能

Hamlにはシンプルな文法以外にも便利な機能があるので、それを紹介します。

変数の挿入

RubyコードをHamlで使う場合は=を使います。

%h1= @title
%p= @description

条件付きレンダリング

条件によって表示内容を変えたい場合、Rubyの制御構文もそのまま使えます。

- if user_signed_in?
  %p Welcome back, #{current_user.name}!
- else
  %p Please log in.

最後に

最後まで読んでいただきありがとうございました。
この記事を読んでHamlの書き方について理解が深まれば幸いです。