文系人間がエンジニアを目指すブログ

大学の文系学部を卒業した私が、ソフトウェアエンジニアになって、一人前を目指す過程を書くブログです。

【Rails】初めてのHaml記法

Hamlとは

Hamlは、綺麗で簡潔なHTMLを書くためのマークアップ言語です。

PHPRailsなど、Web系の言語・フレームワークで使われます。

Hamlの特徴

何と言っても、簡単に・綺麗に・生産的にwebアプリのビューを作ることができるのが魅力です。

この辺の特徴は、Hamlがどんな思想の元作られたのか知ると、より具体的に見えてきます。

Haml公式によると、4つのCore Principlesがあるそうです。

  1. マークアップは美しくあるべき
  2. マークアップはDRYであるべき
  3. マークアップは整然とインデントされているべき
  4. HTMLの構造が分かりやすくあるべき

なるほど、綺麗に、無駄なく、分かりやすいコードが書けるように設計されてそうですね。

HamlRailsに導入する方法

では、RailsHamlを導入していきましょう。

動作環境は以下の通り。

rails '~> 5.1.6'
ruby '2.3.1'

GemfileにHamlを入れる

gem 'haml-rails'
gem 'erb2haml'

'erb2haml'は、その名の通り、erbをhamlに(erb to haml)変換するgemです。

READMEを見てみると、「ERBをHamlに変換したり、置き換えたりするRake tasksを提供するよ」と書いてあります。

rakeコマンドを使って変換できるようになるみたいですね。

GitHub - dhl/erb2haml: Simple script to bulk covert ERB files in a Rails app to Haml

コマンド一つでerbファイルをhamlファイルに変えることが可能

'erb2haml'のおかげで、コマンド一つで簡単にビューファイルをHamlにしちゃうことが可能。

元々あったerbファイルを残しておきたい場合

rake haml:convert_erbs

erbファイルを消して、Hamlファイルに置き換えちゃいたい場合

rake haml:replace_erbs

Hamlの基本的な使い方をHaml公式チュートリアルで見てみる

ここからは基本的な使い方を書いていきますよ。

"%"と"="を使って書く

Hamlでは、普通のhtmlファイルやerbファイルと違い、タグで要素を囲むことはしません。

例えば、headerとhタグだけの簡単なhtmlだと、

%header
  %h5 hello world

このようになります。タグで囲む代わりに、「%タグ名」と書くことになります。

Railsの場合だと、ビューファイルで埋め込みRubyを使うことがあると思いますが、そんな時は以下のように書きます。

%strong= item.title

これはerbで言う所の、

<strong><%= item.title %></strong>

です。(コード例はHaml公式より引用)

Haml :: Tutorial

インデントは必須

erbや普通のhtmlと違うのは、入れ子構造になっている際にはインデントが必須となっていること。

インデントされていないと正しく認識してくれませんので、ご注意を。

classとか付けるにはどうするの?

続いて、haml記法でclassなどの属性を付けていきます。

%div{:class => "myclass", :id => "myid"} Hello World

このようにします。

divタグ、class、idの省略した書き方がある

先ほどのコードですが、divタグ、class、idはあまりにたくさん出てくるので、css風に省略して書くことができるようにしてくれています。

.myclass#myid Hello World

なんと、%まで省略可能!これはコードがスッキリしそう。

参考サイト

Haml公式サイト

http://haml.info/

Haml公式チュートリアル

http://haml.info/tutorial.html

erb2hamlのgithubページ

https://github.com/dhl/erb2haml