Hamlに入門して「. 」（ドット）がエラーになってハマった話

はじめに

現在復習ととポートフォリオ作成のためにRails Tutorialをもう一周しています。

そんな中でただ2周目をするのでは勿体無い気がしてerbではなくhamlを使ってみようと導入してみました。

右も左も分からない中、第３章の「3.2.2 静的なページの調整」でやらかしてしまったので備忘録として。

ハマったところ

お手本はerbなので脳内変換頑張ってやったコードがこちら。

お手本

<h1>Help</h1>
<p>
  Get help on the Ruby on Rails Tutorial at the
  <a href="https://railstutorial.jp/help">Rails Tutorial help page</a>.
  To get help on this sample app, see the
  <a href="https://railstutorial.jp/#ebook"><em>Ruby on Rails Tutorial</em>
  book</a>.
</p>

脳内変換したもの

%h1 Help
%p
  Get help on the Ruby on Rails Tutorial at the
  %a{ :href => 'https://railstutorial.jp/help'} 
    Rails Tutorial help page 
  . To get help on this sample app, see the
  %a{ :href => 'https://railstutorial.jp/#ebook'} 
    %em Ruby on Rails Tutorial
  book.

その結果

Illegal element: classes and ids must have values.

解決方法

グーグル先生に聞いたところによると、Hamlでは「.」でクラスを指定することができるみたい。

ということは上では「.」の後にすぐスペースがきているので「はよちゃんとしたクラス指定せんかい！」って怒ってるわけですね。

エラーメッセージ見てもクラスと値には必ず値を設定してねって書いてあるし。

ということで下記のように「.」をバックスラッシュでエスケープすることで解決しました！

%h1 Help
%p
  Get help on the Ruby on Rails Tutorial at the
  %a{ :href => 'https://railstutorial.jp/help'} 
    Rails Tutorial help page 
  \. To get help on this sample app, see the
  %a{ :href => 'https://railstutorial.jp/#ebook'} 
    %em Ruby on Rails Tutorial
  book.

Hamlは文量少ないしわかりやすくてとても便利！
もっと早く脳内変換できるようにがんばろー