layoutファイルの仕組み

layoutファイルの仕組み

webページを閲覧する際に利用されるChromeSafariなどのソフトはブラウザと呼ばれており、 HTMLやCSSなどの言語を解釈し人間が見やすいように、色を付けたり、文字を大きくしたりとレイアウトしてくれる。 ブラウザが認識できる言語は、[HTML,CSS,JS]の3種類。 Railsは、出力用のHTMLファイルを生成する際に[layoutファイル+テンプレートファイル]が足し合わさっている。 layoutファイルは、何も指定がなければ[application.html.erb]ファイルが選択されるようになっている。

HTMLでは、そのページで必要となる読み込みファイルを~内で読み込む。 Railsでは、CSSファイルの読み込みは[stylesheet_link_tag]、JSファイルの読み込みは[javascript_include_tag] というヘルパーメソッドを用いて行われており、それぞれ[layout/application.html.erb]に記載がなされているのですが、デフォルトでここから読み込んでいるのは、application.css / applicaiton.jsという2種類。 以下のように[layout/application.html.erb]記載がある。

 <%= stylesheet_link_tag    'application', media: 'all'  %>
  <%= javascript_include_tag 'application' %>

また、[application.css]と[application.js]に以下のような記載がある。 [application.css]

 *= require_self
 *= require_tree .

[application.js]

//= require_tree .

それぞれの意味は、以下のようになる。 [layout/application.html.erb]の~内で、[application.css],[application.js]を読み込む。 ↓ [application.css],[application.js]内で、どのファイルを読み込むかを取りまとめ(初期状態では同階層の全てのファイルと自身を読み込むように定義)、必要なファイルが読み込まれる。

[application.css],[application.js]のように、どのファイルを読み込むのかを取りまとめたファイルをマニフェストファイルという。

※注意
require_treeを使うと同ディレクトリのcssファイルをすべて読みこんでしまうため、ファイルを読み込む順番が分からなくなります。それを防ぐために、@importを使って必要なファイルのみ読み込む方がファイル管理を安全にできます。
ex)

// BAD
//= require_tree .

// GOOD
@import 'top';

Sassの説明:

https://sass-lang.com/guide

Helperを使ってよりDRYなviewを書こう:

https://qiita.com/shunsuke227ono/items/21f5968ca7ca0391b583