【Ruby】レイアウトテンプレート
今回はレイアウトテンプレートという機能について
まとめていきたいと思います。
レイアウトテンプレートとは何か。
それはページごとにビューを作成すると思うのですが、
全てのページに共通して表示されるものってありますよね。
ヘッダーとかフッダーとか。
そういった部分に関しては全てのビューファイルに記載していたら
とっっっても面倒くさいので、一つのファイルにまとめようっていうものです。
Railsの場合どこに記載するかというと、
application.html.erbというファイルに記載しましょう。
こちらがレイアウトテンプレートに該当するファイルで、
app/views/layoutディレクトリに配置されています。
ちなみにこのファイルをレイアウトファイルとも呼びます。
このファイルを開いてみると、
ありがたいことにすでにhead要素やbody要素がすでに記載されているんです。
そしてbody要素に書いてある
<%= yield %>
について説明しましょう。
これはyieldメソッドといいます。
何かというと各ファイルに展開するためのメソッドです。
つまりindexアクションが実行されたら、index.html.erbの内容が、
newアクションが実行されたら、new.html.erbの内容が、
この<%= yield %>の部分に展開されるようになっています。
なので全てのビューファイルが
このレイアウトファイルに集約されているイメージです。
便利ですね！！！！
なのであとはレイアウトファイルのbody要素の中の
headerやfooterを編集しておけばOKです！
そして二つの間に<%= yield %>を忘れずに！
学んでおきましょう。
どうやらレイアウトテンプレートのhead要素をみてみると、
<%= stylesheet_link_tag ' application ' , media : ' all ' , ' date-turbolinks-track' : ' reload' %>
という記載があります。
まずはstylesheet_link_tagメソッドを理解していきましょう。
これは読み込むCSSを指定できるヘルパーメソッドです。
CSSファイルはapp/assets/stylesheets/ディレクトリにあります。
このコードの場合、
stylesheet_link_tag ' application '
と引数に application と書いてあるため、
これはapplication.cssを読み込むよーっていってます。
application.css
こちらの方はRailsに初めから用意されている
CSSファイルをまとめるためのファイルです。
通用マニフェストファイルです。
開いてみると色々と書いてありますが、
注目すべきは *= require_tree . という記述です。
require.treeとはなんぞとのことですが、
アルファベット順に全て読み込むよ！という機能を持ってます。
今回の引数はお分かりでしょうか？見えてますか？
. です！これ . !
このドットは、カレントディレクトリを表しています。
つまり
app/assets/stylesheets/
このディレクトリです。
なのでこの require.tree. の記載によって、
application.cssファイルに読み込まれることになります。
ではこれを踏まえてこのディレクトリに
style.cssファイルを作成しましょう。
また画像ファイルを配置したい場合は
app/assets/imagesディレクトリに配置します。
以上が、レイアウトテンプレートをはじめとする
見た目を整えるためのお話でした！
