0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

レイアウトテンプレートについて

Posted at

レイアウトテンプレートとは

アプリケーションにおけるビューファイルをまとめたものです。
レイアウトテンプレートにheadの情報などの共通部分をまとめるで、
各ファイルで同じことを記述する必要がなくなります!

Railsの場合はapplication.html.erbというファイルがレイアウトテンプレートになります。
以下は新規アプリケーションを作成した時のapplication.html.erbファイルの中身です。

qiita.rb

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

このようにhead要素、body要素があらかじめ作成されているので、中身を修正して使用します。
繰り返しになりますが、ヘッダーやフッターなどの共通部分はここに書いてしまえば、ビューファイルの全てに同じような書き込みをする必要がなくなり、記述ミスの削減・可読性の向上が見込めます!

なぜここに書き込めば他のファイルで記述する必要がなくなるかというと、
body要素内にあるyieldが関係しています!

yieldメソッドについて

yieldメソッドとは、レイアウトテンプレートを各ファイルに展開するためのメソッドです!

この部分ですね。

qiita.rb
<body>
  <%= yield %>
</body>

このyieldという部分に、indexアクションが起きればindex.html.erbが、newアクションが起きればnew.html.erbファイルの内容が集約されるため、head要素やヘッダー・フッターの内容などを書く必要がなくなるというわけです。

以上がレイアウトテンプレートについての概要です。
続いてCSSファイルを適用するための記述になります。

stylesheet_link_tagメソッド

この部分についてです。

qiita.rb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

CSSファイル読みこむヘルパーメソッドです。
CSSファイルはapp/assets/stylesheets/というディレクトリに配置します。

stylesheet_link_tagの引数にapplicationと書いてあるため、app/assets/stylesheets/ディレクトリ内のapplication.cssというCSSファイルが読み込めます。

まとめ

①レイアウトテンプレレート使えば、共通の記述をひとまとめにできる
②yieldメソッドが記述されてるため、各ファイルに共通の記述が展開できる
③stylesheet_link_tagはCSSを読みこむメソッド

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?