はじめに
Railsでフロントの実装をしていて、レイアウトは変わらないものの背景色だけ違うというパターンが出てきました。
あたらしくレイアウトファイルを作るという簡単な方法も思いつきますが、あんまりDRYじゃないなと思い、何かいい方法はないかな〜と調べた結果、考えた選択肢と今回採用した方法を記します。
選択肢
考えた選択肢は以下です。
- content_forを使う
- Controllerにインスタンス変数を書いてlayoutファイルに渡す
- 各々Viewファイルの中でdivで新しく囲んでそこでCSS指定
- あたらしくlayoutファイルを作る
結論から
結論から言うと、今回のプロジェクトでは
2. Controllerにインスタンス変数を書いてlayoutファイルに渡す
を採用しました。
それではそれぞれの解説です。
解説
1. content_forを使う
主にレイアウトに複数のコンテンツを設定したいときに使うcontent_forです。
.l-main-content class="l-main-content--#{yield(:main_content_color)}"
※上の場合divにlayout指定していますが実際にはbodyでも可能。状況次第ですね。
- content_for(:main_content_color, 'white')
- メリット
Viewのレイアウトに関することなので、content_forを使って色を変えているということが分かる
- デメリット
そもそも色だけ変えるのにこの使い方であっているのかという懸念。ちょっと仰々しい気がする。
2. Controllerにインスタンス変数を書いてlayoutファイルに渡す
これはapplication_controllerなど共通部分に変更したい背景色を書いていこうという方針です。
application_controllerのprivateメソッドで定義しておいてあとは必要箇所でbefore_actionで呼ぶだけです。
private
def set_main_content_bg_white_color
@main_content_bg_color = Settings.main_content_bg_color.white
end
.l-main-content class="l-main-content--#{@content_color}"
before_action :hoge
- メリット
Controllerに書いてスッキリ
DRYに書けて(・∀・)ｲｲ!!
- デメリット
そもそもControllerに書くべきものなのか？見た目に関することなので1のようにViewで渡したほうがいいのか…？
3. 各々Viewファイルの中でdivで新しく囲んでそこでCSS指定
単にViewファイルで
.gray-container
のように書いて対応するだけ。パッとすぐ思いつきそうな方法ですね。
おすすめはしないです。
- メリット
やりやすいくらいか…？敷居は低い。まぁ分かりやすい。
- デメリット
DRYじゃない
レイアウトに関することはレイアウトファイルでやりたい
4. あたらしくlayoutファイルを作る
色ごとにlayoutファイルを複数作って、共通部分はパーシャルにして極力DRYにしようぜという方針です。
- メリット
敷居低い。すぐ思いつく。
- デメリット
色が何パターンもあったら、その度に色だけ違うレイアウトファイルが量産される…。
おわりに
正直1,2で迷った所はあったんですが背景色だけ違う場合にDRYに書くことができました。
今回は採用されませんでしたが、
content_forは例えばこのレイアウトにはタイトルいらないんだけど〜パンくずいらないんだけど〜みたいなレイアウトに差が出てくるときに重宝しますので興味のある方は下記のリンクを読むと参考になるかと思います。