【Rails】初めてのHaml記法
Hamlとは
Hamlは、綺麗で簡潔なHTMLを書くためのマークアップ言語です。
PHPやRailsなど、Web系の言語・フレームワークで使われます。
Hamlの特徴
何と言っても、簡単に・綺麗に・生産的にwebアプリのビューを作ることができるのが魅力です。
この辺の特徴は、Hamlがどんな思想の元作られたのか知ると、より具体的に見えてきます。
Haml公式によると、4つのCore Principlesがあるそうです。
なるほど、綺麗に、無駄なく、分かりやすいコードが書けるように設計されてそうですね。
HamlをRailsに導入する方法
動作環境は以下の通り。
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公式より引用)
インデントは必須
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/tutorial.html
erb2hamlのgithubページ