個人アプリを作る時に、hamlを使って作るか迷った

はじめに

　ruby,railsでプログラミングを学習をはじめた頃、自分の周りでこんな意見をよく聞きました。
「個人でアプリを開発していく段階になった時に、hamlとerbのどちらで作った方がいいのだろうかと迷う。」
「hamlでの書き方を検索するけど、全然見つからない。」
「hamlって自走した時に本当に使うのか。」

　両方の記法でアプリを作って、hamlとerbのどちらを使うかの判断材料についてふりかえってみました。どちらがいいかを解説しているわけではないです。

判断材料

下の「記法の違い」を参照しながら見てもらえればと思います。

• コード量
  　hamlの方が圧倒的に記述量が少なく済みます。少ないと言うことは記述時間も短縮できます。慣れると、速く、見やすいコードを書くことができます。

• 構造理解
  　hamlは要素の構成の書き方がはっきり決まっています。と言うのも、hamlは親子要素をインデントで判断しています。半角スペース１つずれているだけでエラーが発生します。
  　一方で、書き方に従ってセレクタ名を記述すれば、SCSSでセレクタをネストさせて、お互いの構造を合わせることが可能です。後から、セレクタを探しやすいです。
  　記法がちゃんと頭に入っていれば、他人が書いたコードを見る時に理解しやすくなると思います。ただ、メンバー同士で書き方をきちんと守らないと読みにくくなったりもします。

• Javascript
  　JavascriptはHTML記法でないと要素を扱えないので、erbだと要素をそのまま使えますが、hamlではそうもいきません。hamlだとhaml記法をhtml記法に直してから記述することになり、変換に一手間かかってしまいます。
  　最近のWeb開発でJavascriptを全く使わないと言うことは考えにくいので、１つの判断材料になると思います。

• 検索結果の情報量
  　HTMLが基本です。hamlもerbは、railsを使った開発で検索するとよく見かけますが、htmlと比べると情報量は少ないです。
  　そのため、初めの頃は、HTMLで書いていることをHAMLではどう書くのかいちいち調べないといけないし、調べても出てこないことが多い。<script></script>の変換なんかはめんどくさいです。さらに、erbをhamlではどう書くのか意外とわからず悩んだりします。（変換サイトありますが、覚えたては意味を理解せずに変換すると自力で書く力がつかないし、、、）
  　また、他言語の学習としてVue.jsを使ったときは、検索した記事は全てHTMLで記載されていました。公式もHTMLです。

記法の違い

次の物を作成した場合

コード

.outer
  .outer__inner
    %p.text
      = link_to root_path, class: "text-link" do
        Hello New World!

<div class="outer">
  <div class="outer__inner">
    <p class="text">
      <%= link_to root_path, class: "text-link" do %>
        Hello New World!
      <% end %>
    </p>
  </div>
</div>

スタイリング

.outer {
  height: 150px;
  width: 500px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
  &__inner {
    height: 100px;
    width: 400px;
    background-color: lightyellow;
    display: flex;
    justify-content: center;
    align-items: center;
    .text {
      height: 50px;
      width: 200px;
      background-color: lightpink;
      text-align: center;
      line-height: 50px;
    }
  }
}

.outer {
  height: 150px;
  width: 500px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
}
.outer__inner {
  height: 100px;
  width: 400px;
  background-color: lightyellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  height: 50px;
  width: 200px;
  background-color: lightpink;
  text-align: center;
  line-height: 50px;
}

スタイリングは必ずこの違いになるわけではありません。
ただ、hamlを使うと、scssを使うことでお互いの構造を合わせやすくなります。CSSでも書けます。