hamlとscssを使いこなして、早くビューを作ろう。
railsのerbとcssの記述が早く見やすくなる、hamlとscss。学習コストが惜しくて、取り入れない方もいますが、記述がシンプルで早くなるため、絶対オススメです!以下はerbとhamlの比較です。↓
<section class=”container”>
<h1><%= post.title %></h1>
<h2><%= post.subtitle %></h2>
<div class=”content”>
<%= post.content %>
</div>
</section>
%section.container
%h1= post.title
%h2= post.subtitle
.content
= post.content
erbでは、class=“ “、id=“ “、<%= %>であったのが、hamlではそれぞれ . と # と = になります。断然楽ですよね?
Haml公式
http://haml.info/
railsへのhamlの導入
https://github.com/indirect/haml-rails
なお、以下のコマンドを入力することでerbファイルを一括でhamlファイルに変更することができます。
$ bundle exec rake haml:replace_erbs
ただ、最初は慣れずにエラーが多発してしまうことも。私が実際に起こしたミスとその対処法を置いておきます。
インデントに対する意識が大事。
hamlはインデントにより階層構造を管理しています。私はhtmlの感覚で仮調整しようとして、レイアウトを崩していまうミスを多発していました。すでに書いてある記述を調整するときに、特にインデントを意識する必要があります。これが一番多かったミスなので、注意するだけでだいぶ時間を節約できるはずです。
.chat-menu
.chat-menu__head
.chat-menu__body
.chat-menu
.chat-menu__head
.chat-menu__body
%と=を混同しやすい。
erbでrubyを使用する場合、<%= %>もしくは<% %>で囲む必要がありましたが、hamlではそれを省略して、= と - で記述します。私は慣れないうちは、%と書いてしまったりしてエラーを出していました。
クラスを複数導入したいときはコンマで繋ぐ。
例えば、font-awesomeを導入するために、htmlの i class="fa fa-edit” と書きたいとします。htmlであれば、”fa fa-edit”とスペースを入れればいいのですが、hamlの場合はスペースを入れると、テキストとして認識されてしまします。この対処法は簡単でスペースの代わりにコンマを打つことでを対処することができます。
<i class="fa fa-edit”>
上と下は同じ表記
%i.fa.fa-edit
省略してあるがゆえにわからないことも最初はあると思いますが、それさえわかればスピードはぐんと早くなるはずです。