19
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【rails】hamlを初めて導入するときのミスと対処法

Last updated at Posted at 2017-05-03

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

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

19
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?