Rails での link_to , button_to に対する css の適用について
rails アプリケーションを作成中なのですが、妙な所で躓いたのでメモ。
link_to と button_to への css の適用についてです。
まずは正解(?)というか、適用できた時(最終的にこうなっただけ)のソースから。
このように、:controller と :action を {} で括っています。
:class オプションで指定している"btn btn-***"
という要素については、
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
を参照してください。
ちなみにこの場合、 css は適用されますので、実行画面上ではこういう風になります。
僕自身、rails 初心者という事もあって、この場合の {} の有無がそれほど重要だとは思っていなかったので、作成当初は以下のように記述しました。
するとどうでしょう。bootstrap が適用されるはずのリンクに、 css が適用されませんでした。
さっぱりわけが解らなかったので、google先生に働いてもらったり、API等をチラッと読みに行ったりしたのですが、スッキリするような答えは得られず。
しかしその時点での僕の考えとしては、 {} の有無によって rails 側での解釈のされ方が変わるからなのだろう、と思っていました…(確信はない)。
ようやくそれらしき資料を発見し調べたところによると、
第2引数の中にある予約パラメータ以外のものは、クエリとして渡される
らしいです。
つまり、{} をつけない場合、予約語である controller と action がURLとして、予約語ではないオプションの class はURLに付随するクエリとして、渡されることになる、ということらしいです。
例:/users/new?class=btn%20btn-***
になるわけです。(%20はパーセントエンコーディングされた半角スぺ―スです)
更にそこで、
第2引数をハッシュにすればURL情報であることを明示でき、また第3引数が確実にhtml属性になる
という情報を得ました。
ここでおさらい。
ハッシュとは
ハッシュとは、簡単に言うと「連想配列」の事です。通常の配列と同じように複数のオブジェクトへの参照をまとめて管理することが出来ますが、配列と大きく異なる点として、配列がインデックスを使って要素を区別していたのに対し、ハッシュでは「キー」と呼ばれるものを使用する、という特徴があります。
キーに対応した値を一般に「バリュー」と言います。
例:{ key1 => value1, key2 => value2 ...}
本題に戻ります。
先ほど得た「第2引数をハッシュにすればURL情報であることを明示でき、また第3引数が確実にhtml属性になる」という情報を基に、第二引数をハッシュにすると、最初に載せたコードに辿り着きますね。
:controller と :action を {} で囲みハッシュとして扱うことで、まとめて第2引数にしているわけです。
それにより、第3引数となった :class => 'btn btn-***' が無事に html 属性として解決されたわけです。
button_to の場合でも、上記の方法で css を適用させることができました。
因みに button_to だと、bootstrap を使うと改行されてしまうようですが、該当部分のcssを { display: inline-block; }とすると、改行は弾けるはずです。
参考記事:
Rails - link_to の引数と展開の違いまとめ - Qiita