押さえておきたい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のアプリケーション作成方法を分かりやすく解説!](https://www.web-knowledge-info.com/wp/wp-content/themes/sango-theme/library/images/default_small.jpg)
[入門者向け] 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速習実践ガイド」は現場で実際にどのように使われているのかという視点も交えて解説されています。
そのため、初心者の方が次のステップに進むために最適な本となっていますので、オススメです。
これらの本で是非学習を進めてみてはいかがでしょうか?
レベル別におすすめの本も紹介していますので、どのような本がオススメか知りたい方はこちらもご覧になって下さい。
【2022年最新版】Ruby on Railsを学ぶことができるおすすめの本/参考書
Udemy
UdemyではRuby on Railsを学ぶことができる講座を多数取り扱っています。
以下の記事でRuby on Railsを学ぶことができるオススメの講座をまとめていますので、よかったらご覧になって下さい。
【安すぎ】Udemy(ユーデミー)で学べるおすすめのRuby on Rails講座をご紹介!
プログラミングスクール
TechAcademy、WebCamp、CodeCamp、Tech CampなどでRuby on Railsを学ぶことができます。
それぞれ無料体験も行っているので、どのようなものか試してみるのもいいでしょう。
以下の記事で各プログラミングスクールをまとめているのでこちらもよかったらご覧になってください。
【働きながらOK】TechAcademy(テックアカデミー)の評判・口コミは? いくらなの?
【難しい?】働きながらOK! DMM WEBキャンプの評判・口コミは?
【課題が難しい?】CodeCamp(コードキャンプ)の評判・口コミは?
【無料体験実施中】テックキャンプ「プログラミング教養」でプログラミングをやってみた!
【体験談】テックキャンプ「プログラミング教養」の学習内容は?
働きながらテックキャンプで学ぶことは可能? 結論：可能です!
【無料カウンセリング実施中】テックキャンプではどのような言語・技術を学ぶことができるの?
テックキャンプの受講料はどのくらい? 安く通う方法も解説!
【体験談/感想】テックキャンプでどのようなスキルが身につくの?
5.ポイント
- layoutファイルを作成することでオリジナルのレイアウトを設定することができます
