hamlとscssを使いこなして、早くビューを作ろう。

railsのerbとcssの記述が早く見やすくなる、hamlとscss。学習コストが惜しくて、取り入れない方もいますが、記述がシンプルで早くなるため、絶対オススメです！以下はerbとhamlの比較です。↓

sample.erb

<section class=”container”>
  <h1><%= post.title %></h1>
  <h2><%= post.subtitle %></h2>
  <div class=”content”>
    <%= post.content %>
  </div>
</section>

index.haml

%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の感覚で仮調整しようとして、レイアウトを崩していまうミスを多発していました。すでに書いてある記述を調整するときに、特にインデントを意識する必要があります。これが一番多かったミスなので、注意するだけでだいぶ時間を節約できるはずです。

sample.haml

.chat-menu
  .chat-menu__head
  .chat-menu__body

sample.haml

.chat-menu
  .chat-menu__head
    .chat-menu__body

%と＝を混同しやすい。

erbでrubyを使用する場合、<%= %>もしくは<% %>で囲む必要がありましたが、hamlではそれを省略して、=　と - で記述します。私は慣れないうちは、%と書いてしまったりしてエラーを出していました。

クラスを複数導入したいときはコンマで繋ぐ。

例えば、font-awesomeを導入するために、htmlの i class="fa fa-edit” と書きたいとします。htmlであれば、”fa fa-edit”とスペースを入れればいいのですが、hamlの場合はスペースを入れると、テキストとして認識されてしまします。この対処法は簡単でスペースの代わりにコンマを打つことでを対処することができます。

sample.html

<i class="fa fa-edit”>

上と下は同じ表記

sample.haml

%i.fa.fa-edit

省略してあるがゆえにわからないことも最初はあると思いますが、それさえわかればスピードはぐんと早くなるはずです。