layoutファイルの仕組み
layoutファイルの仕組み
webページを閲覧する際に利用されるChromeやSafariなどのソフトはブラウザと呼ばれており、HTMLやCSSなどの言語を解釈し人間が見やすいように、色を付けたり、文字を大きくしたりとレイアウトしてくれる。
ブラウザが認識できる言語は、[HTML,CSS,JS]の3種類。
Railsは、出力用のHTMLファイルを生成する際に[layoutファイル+テンプレートファイル]が足し合わさっている。
layoutファイルは、何も指定がなければ[application.html.erb]ファイルが選択されるようになっている。
HTMLでは、そのページで必要となる読み込みファイルをheadタグ内で読み込む。
Railsでは、CSSファイルの読み込みは[stylesheet_link_tag]、JSファイルの読み込みは[javascript_include_tag] というヘルパーメソッドを用いて行われており、それぞれ[layout/application.html.erb]に記載がなされているのですが、デフォルトで読み込んでいるのは、[application.css], [applicaiton.js]という2種類。
以下のように記載がある。
[app/views/layouts/application.html.erb] <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %>
また、[app/assets/stylesheets/application.css]と[app/assets/javascripts/application.js]に以下のような記載がある。
[app/assets/stylesheets/application.css] *= require_self *= require_tree .
[app/assets/javascripts/application.js]
//= require_tree .
それぞれの意味は、以下のようになる。
layoutファイルで読み込まれる時の流れ
[app/views/layouts/application.html.erb]のheadタグ内で、[app/assets/stylesheets/application.css],[app/assets/javascripts/application.js]を読み込む。
↓
[app/assets/stylesheets/application.css],[app/assets/javascripts/application.js]内で、どのファイルを読み込むかを取りまとめ(初期状態では同階層の全てのファイルと自身を読み込むように定義)、必要なファイルが読み込まれる。
[application.css],[application.js]のように、どのファイルを読み込むのかを取りまとめたファイルをマニフェストファイルという。
※注意
require_treeを使うと同ディレクトリのcssファイルをすべて読みこんでしまうため、ファイルを読み込む順番が分からなくなります。
それを防ぐために、@importを使って必要なファイルのみ読み込む方がファイル管理を安全にできます。
ex)
// BAD //= require_tree . // GOOD @import 'top';
