動的なクラス名をつけるときに気をつけること

先日この記事で動的なクラス名をつける方法を解説したが
はまりポイントがあったため、追加で書きます。

ハマりポイント

前回の記事で解説した下記のコード、、、複数のクラス名指定ができません。

class=<%= "section#{question.id}" %>

例えばこのように

class=<%= "section#{question.id} btn btn-default" %>

書くと、class="section1" btn btn-defaulとレンダリングされてしまいます。

原因

単純なHTMLの書き方の問題です。
上記の書き方だと、レンダリングされたときにclass= section1 btnとなってしまうため、HTMLの性質上、一つしか読み込まれません。
ですので

class="<%= "section#{question.id} btn btn-default" %>"

このようにしっかり、class="<%= ~ %>"と書けば全てのクラス名が読み込まれます。

簡単な話ですが、案外気づきにくいポイントかなと思ったのでまとめてみました。

「viewからHTMLが作成されるときにどう解釈されるのか？どうコードに変更されるのか？」を意識すれば似たようなミスも防げるかと思います。