sugulogの日記

Rails、レイアウトテンプレート!投稿一覧ページを実装しよう!!

スポンサードリンク

f:id:sugulog:20201004143312p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、Railsのレイアウトテンプレートや

  • 投稿一覧ページ

について簡単に解説します!!

その為このブログを読むことで、投稿一覧ページ作成の復習になるのはもちろん、レイアウトテンプレートについての理解も深まります。

是非最後までご愛読ください。

 

今回は、

  • モデルを作成しよう

  • 投稿一覧ページを実装しよう

  • レイアウトテンプレート

  • stylesheet_link_tagメソッド

の順で解説していきます。

また、前回のブログの内容を引き継いで記述しています。

そのため、前回のブログを必ず1度読んでからお読みください。 

sugulog.hatenadiary.jp

では早速、みていきましょう!!

・モデルを作成しよう

ではここは復習になりますので、さら〜っといきますね! 

投稿(tweet)に対するモデルを作成していくため、rails g model tweetを実行しました。

またマイグレーションファイルでは、以下のように記述しました。

f:id:sugulog:20201002003901p:plain

今回は投稿した際に、投稿者の名前・投稿文・画像を表示させたいため、ひとまず上記のように記述しています。

rails db:migrateでマイグレートしましょう!

name、text、imageの3つのカラムが作成されましたね!!

・投稿一覧ページを実装しよう

ルーティングでは、以下のように記述しました。

f:id:sugulog:20201002004738p:plain

前回のブログで解説したresourcesメソッド、onlyオプションを使い、とりあえずは投稿一覧ページを表示させるためのアクションであるindexのルーティングのみを自動生成しています。

次にrails g controller tweetsを実行し、tweetsコントローラーを生成しましょう。

またコントローラーでは、以下のように記述しました。

f:id:sugulog:20201002010800p:plain

現段階では一覧表示させるために、@tweets(インスタンス変数)にtweetsテーブルのレコードを全て代入しています。

またこのタイミングでSequel Proやコンソールからデータを入力し、データベースに保存しておきましょう!

※この際、画像(image)については保存しなくてOKです!!

では最後にビューを作成しましょう。

 app/views/tweets/index.html.erbを作成し、以下のように記述しました。

f:id:sugulog:20201003175420p:plain

コントローラーで定義したインスタンス変数を使い、ビューに全てのレコードの情報を持ってきています。

そのインスタンス変数をeachで1つずつレコードごとに取り出し、その中のtextカラムとnameカラムを表示しています。

そのため今ブラウザ上では、以下のように表示されています。

f:id:sugulog:20201003175753p:plain

・レイアウトテンプレート

アプリケーションのビューファイルの共通部分をまとめたもの。ヘッダーやフッターなど全てのビューで共通となる部分を記述することで、各ビューに適用させることができる。

Railsにおけるレイアウトテンプレートファイルは、application.html.erbです。

つまりこのファイルに記述することで、全てのビューファイルにも適用させることができます!

では実際にファイルの中をみた後に、ヘッダーとフッターを記述していきましょう!!

f:id:sugulog:20201003181702p:plain

 中をみてみると、上記のようなことが予め記述されています。

ここで注目してもらいたいのが、ピンクの文字で記述されているyieldメソッドです。

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

つまり、このyield部分は適用させるそれぞれのビューファイルを示しています。

現段階だと、index.html.erbが適用されます。

またnewアクションやcreateアクションなどのビューを作成すると、new.html.erbやcreate.html.erbも適用され、それぞれのパターンのビューが作成されます。

そして今回は、以下のように記述しました。

f:id:sugulog:20201004140948p:plain
ヘッダーのリンクをつなげる際の"/"は、ルート(localhost:300)を表しています。

また、まだnewアクションは定義していませんがこの後定義するため、newアクションに対するリンクも予め繋いでいます。

そしてyieldの上にheader(ヘッダー)を記述し、下にfooter(フッター)を記述しています。

そのためビューでは、以下のように表示されます。

f:id:sugulog:20201003205945j:plain

分かりやすくするために、header、yield、footerに分けてみました!

ビューからもyieldに、index.html.erbが適用されていることが分かりますね!!

・stylesheet_link_tagメソッド

読み込むCSSファイルを指定できるヘルパーメソッド。読み込むためのファイルは、app/assets/stylesheets/というディレクトリ内に配置する。

実は先程の、application.html.erb内のhead部分でも使用されていました。

f:id:sugulog:20201003211955p:plain

stylesheet_link_tagの後に"application"という記述があるため、application.html.erbはapplication.cssを読み込んでいることがわかります。

因みにapplication.cssは、アプリケーション全体に適用するCSSを指定するファイルです。

では実際に、ファイルの中身を1度みてみましょう。

f:id:sugulog:20201004014602p:plain

ここで注目して欲しいのが、13行目のrequire_tree .という記述です。

require_treeは引数として与えられたディレクトリ以下のCSSファイルを、アルファベット順に全て読み込むという機能を持ちます。

もともと引数として.(ドット)が与えられており、これはカレントディレクトリを表しています。

そのため、app/assets/stylesheets/というディレクトリにあるCSSファイルは、全てapplication.cssに読み込まれることになります。

つまり、全てのビューに反映されるということです!

以上を踏まえ今回はapp/assets/stylesheets/style.cssを作成し、全てに共通するヘッダーとフッターにCSSを適用させました!!

その結果ブラウザでは、以下のように表示されています。

f:id:sugulog:20201004141453p:plain

ヘッダーとフッターにCSSが適用されているのがわかりますね!

また、CSSについては自分自身で記述してみましょう!!

 

以上、今回のブログでした。

投稿一覧ページ作成の復習になり、レイアウトテンプレートについての理解も深まりましたか??

レイアウトテンプレートをうまく使えば、実装が楽になります!

是非、積極的に取り入れていきましょう(≧∀≦)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!