押さえておきたいWeb知識 
「Railsのlayoutsファイルの使い方が分からない」、「layoutsファイルの使い方をもっと詳しく知りたい」などのお悩みを抱えている方はいないでしょうか?
このページではlayoutsファイルの基本的な使い方を解説していきます。
是非、最後まで読んでいただければと思います。
目次
1.layoutsファイルとは?
Railsではviewファイルにbodyタグ内のコードを記述するだけでWebページ全体が表示される仕組みになっています。
なぜRailsではこのようなことが可能なのでしょうか?
それはRailsではWebページ全体のHTMLテンプレートが用意されており、アクション毎のテンプレートはWebページ全体のテンプレートの中に組み込まれるようになっています。
このような仕組みになっているので、viewファイルではbodyタグ内にあるコードを記述するだけでよかったのです。
ではWebページ全体をレイアウトするHTMLテンプレートはどこにあるのでしょうか?
これは「viewsフォルダ」の「layoutsフォルダ」にあります。
「layoutsフォルダ」を開くと「application.html.erb」、「mailer.html.erb」、「mailer.text.erb」が用意されています。
これらのファイルはどのようなファイルなのでしょうか。
application.html.erb
Webページ全体に適用されるレイアウトです。
mailer.html.erb
メール送信用のレイアウトです。
mailer.text.erb
テキストメール用のレイアウトです。
この中で頻繁に使用するのが「application.html.erb」というファイルです。
2.application.html.erbとは?
それでは頻繁に使用する「application.html.erb」というファイルの中身はどのようになっているのでしょうか。
「application.html.erb」というファイルの中身を詳しく見ていきましょう。
<%= csrf_meta_tags %>
上記のタグはCSRF対策のためのタグです。
CSRF対策とは外部のサーバーからフォームに送信する悪質な攻撃のことです。
ここでは詳しく触れませんが、Railsはサイバー攻撃の対策もしっかりと行っているということも頭に入れておきましょう。
<%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %>
上記のタグはスタイルシート関係のタグです。
Railsではビューファイルに対応するスタイルシートだけでなく、アプリケーション全体のスタイルシートも読み込みます。
これらのスタイルシートを生成するのがstylesheet_link_tagメソッドです。
<%= javascript_include_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %>
上記のタグはJavascript関係のタグです。
Railsで使用するJavascriptファイルは数多く存在しています。
通常、jQuery、TurbolinkなどRailsが必要とするJavaScriptライブラリをロードするタグを都度記述しないといけません。
しかし、javascript_include_tagメソッドのみでたくさんのタグを自動生成させることができます。
<%= yield %>
上記のタグを使用することでアクションで表示されるWebページの内容を組み込むことができます。
3.レイアウトの作成方法
layoutsファイルとはどのようなものであるか全体像を理解できたかと思いますのでオリジナルのレイアウトを作成してみましょう。
「WebApp」というWebアプリケーションの作成、コントローラーの作成、ビューの作成を終えているという前提でお話を進めていきます。
Webアプリケーションの作成、コントローラーの作成、ビューの作成の仕方を知りたい方は以下の記事をご覧ください。
[入門者向け] Ruby on Railsのアプリケーション作成方法を分かりやすく解説!
[入門者向け] Ruby on Railsのcontrollerを分かりやすく解説!
[入門者向け] Ruby on Railsのviewを分かりやすく解説!
layoutフォルダ内に「sample.html.erb」というファイルを作成してみましょう。
次に「sample.html.erb」というファイル内に以下のコードを追記していきましょう。
「application.html.erb」ファイルと比較すると変化しているのはbodyタグ部分のみです。
どの部分が追加になったのでしょうか?
<%= render template: ‘layout/sample_header’ %>
<%= render template: ‘layout/sample_footer’ %>
上記のように記述することで指定したテンプレートファイルを読み込みます。
ここでは「sample_header」と「sample_footer」のテンプレートをそれぞれ読み込むという仕組みになっているので2つのファイルを作成していきましょう。
それではlayoutsフォルダ内に「sample_header.html.erb」と「sample_footer.html.erb」というファイルを作成しましょう。
「sample_header.html.erbの中身を以下のようにコードを記述しましょう。
「sample_footer.html.erb」の中身を以下のようにコードを記述しましょう。
最後にコントローラーに上記のファイルが適用されるように設定していきましょう。
sampleコントローラー内のクラスの最初に「layout ‘sample’」と付け加えましょう。
このように設定することでlayoutsフォルダ内の「sample.html.erb」がレイアウトとして使用されるようになります。
ここではオリジナルのレイアウトを用意しましたが、レイアウトを用意していない場合はデフォルトで「application.html.erb」のファイルが使用されます。
4.Ruby on Railsを学ぶことができるオススメの教材
Ruby on Railsを学習している皆様にオススメの教材をご紹介させていただきます。
現場で使える Ruby on Rails 5速習実践ガイド
以下の本はRuby on Railsの学習を一通り終えてある程度知識を身につけた方にオススメしたい本です。
「現場で使える Ruby on Rails 5速習実践ガイド」は現場で実際にどのように使われているのかという視点も交えて解説されています。
そのため、初心者の方が次のステップに進むために最適な本となっていますので、オススメです。
これらの本で是非学習を進めてみてはいかがでしょうか?
レベル別におすすめの本も紹介していますので、どのような本がオススメか知りたい方はこちらもご覧になって下さい。
[2021年最新版] Ruby on Rails を学ぶことができるおすすめの本
Udemy
UdemyではRuby on Railsを学ぶことができる講座を多数取り扱っています。
以下の記事でRuby on Railsを学ぶことができるオススメの講座をまとめていますので、よかったらご覧になって下さい。
[必見!] Udemy(ユーデミー) おすすめのRuby on Rails講座
プログラミングスクール
TechAcademy、WebCamp、CodeCamp、Tech CampなどでRuby on Railsを学ぶことができます。
それぞれ無料体験も行っているので、どのようなものか試してみるのもいいでしょう。
以下の記事で各プログラミングスクールをまとめているのでこちらもよかったらご覧になってください。
プログラミングスクール TechAcademy(テックアカデミー)とは? 特徴・口コミをまとめてみました!
プログラミングスクール DMM WebCamp ビジネス教養コースとは? 特徴・口コミをまとめてみました!
プログラミングスクール CodeCamp(コードキャンプ)とは? 特徴・料金・口コミをまとめてみました!
[感想・体験談アリ!] 実際にTech Camp(テックキャンプ)のプログラミング教養でプログラミングをやってみた!
[感想・体験談あり!] Tech Camp(テックキャンプ)のプログラミング教養の学習内容は?
働きながらTECH CAMP(テックキャンプ)で学ぶことはできるのか? 結論：可能です!
TECH CAMP(テックキャンプ)ではどのような言語・技術を学ぶことができるの?
TECH CAMP(テックキャンプ)の受講料はどのくらい? 安く通う方法もお話します!
[体験談・感想あり!]TECH CAMP(テックキャンプ)でどのようなスキルが身につくの?
5.ポイント
- layoutファイルを作成することでオリジナルのレイアウトを設定することができます
