Ruby on Rails: ツイートタイトルを一覧表示する...chapter4
------------------------------今回やったこと-----------------------------------------
①コントローラーのindexメソッドに扱いたい情報を追加する
②app/views/tweets/index.html.erbを編集
③$rails sでサーバーを立ち上げて、http://localhost:3000/tweets/indexで出来てるか確認。
---------------------------------------------------------------------------------------
前回までで投稿機能の実装は終わりました。
今回は今まで投稿したツイートのタイトル全部を一覧にして表示したいと思います。
前回で1件だけしか保存してなかったので、一覧になってるか確かめるために準備します。
5件分、投稿しておきました。
そして現段階での一覧のビューはこんな感じ。
http://localhost:3000/tweets/index
まだ、設計図状態です。
DBからタイトル情報を持ってきたいと思います。
①コントローラーのindexメソッドに扱いたい情報を追加する
ルーティングにはすでにtweetsコントローラーのindexにとべるようにしてあるので、コントローラーの方からやっていきたいと思います。
1. Tweetモデルを使って、tweetsテーブルから情報をもらう
2. .select("title")を追加
欲しい情報はtweetsテーブルのタイトルのみ表示したいので、select("title")を追加。
3. インスタンス変数へ代入
2.でタイトルのみを取得できたがこれだけでは一覧表示できないので、この情報をビューへ飛ばす。
飛ばすために、@をつけインスタンス変数にして値を代入。
。。。さっきとインスタンス変数の書き方が違う?何が違うの?
@tweetと@tweets何が違うんだよ!!!
『わからん。』
と前はなってました。
別に@tweet = Tweet.select("title")と書いてもいいんです!!!
変数名は自分で好きなように決められます。
だから@aでもいいし@wakaranでもいいんです!!!
じゃあ何で、@tweetsってしたんだよ!って話ですよね。
それは理由があってタイトルを一覧表示するためにツイートされた情報を全部持っていきたいので複数形にしただけです。ただそれだけです。なるべく作ってる人が後であれ?この変数なんだよってならないようにつけておけば後で楽ですよね。
なので変数名とかはわかりやすいようにしておくといいと思います。
次はビューをいじります。
②app/views/tweets/index.html.erbを編集
わからんわからんわからんとなってる人もいるかもしれない。
一人がわからなければ他にもわからない人がいるって昔小学校の先生が言ってた。
自分、わからなかった。これ...何してるの...?
自分なりの解釈ですが、説明します。アウトプット!大事です!!!
---------------------------------------------------------------------------------------
# @tweets.each do |tweet|
・@tweets...これはtweets_controllerのindexで書いた処理をビューで使えるようにしてます。
・each do |変数|...繰り返し処理。欲しい情報を最初から最後まで一つ一つ変数に入れてくれる(今回は変数tweetにtweetsテーブル情報を使えるように入れてる)。
<% @tweets.each do |each| %>〜<% end %>中でのみ変数は有効。
またここでの変数名も何でもおkですよ。自分がわかりやすいように!
# <%= tweet.title %>
画面に映したいものは<%= %>を使用する。
先ほどの@tweets.each do |tweet|でtweetという変数を使い、テーブルの情報を扱えるようにした。
その中でもタイトルを表示したいのでカラム名(title)をかく。
---------------------------------------------------------------------------------------
では、次でビューに出るかやってみます。
③$rails sでサーバーを立ち上げて、http://localhost:3000/tweets/indexで出来てるか確認。
出来てます。タイトル1〜5まで表示されました。
次回、詳細ページを作り、詳細ボタンから詳細を覗けるように実装していきたいと思います。
次回、新規作成ボタンから新規作成のページへ飛べるようにしたいと思います。
以上です。