Ruby on Rails: 詳細ページの作成〜一覧から詳細ページへ遷移できるようにする...chapter6
今日は詳細ページを作成します。
詳細ページといえば、showアクションだがアクション名を変更してやってみたいと思います。
------------------------------------やること------------------------------------------
①tweetsコントローラーのshowアクションをopenアクションへと変更
②ビューにopen.html.erbを追加し、詳細ビューの仮作成
③ルーティングを設定する
④コントローラーのopenメソッド内を編集
⑤open.html.erbの編集
⑥詳細ビューの確認
⑦一覧ページから詳細ページへ遷移できるようにする
⑧一覧ページから詳細ページへ遷移できるか確認
---------------------------------------------------------------------------------------
①tweetsコントローラーのshowアクションをopenアクションへと変更
↓
私がスクールに通ってくる頃の話だが、最終課題までずっとshowアクションはshowアクション以外の名前をつけることは出来ないと思ってました。
ルーティングやコントローラー、ビューでshowアクションと同じように書けば同じ動きをする。なので、showアクションをopenアクションに変更してみました。
②ビューにopen.html.erbを追加し、詳細ビューの仮作成。
③ルーティングを設定する
ここが問題。
各ツイートの詳細に飛ばす方法を考えないといけない。
詳細はビューに映すだけなのでHTTP動詞は 'get' で良さそう。
一番左のコントローラー名#アクション名はtweets#openで大丈夫。
じゃあ、URL(path)はどうすればいいのか?
詳細ページって一覧ページや新規作成ページと違ってツイート一つ一つでページが違うようにしないといけない。
では、どうやってそれを選別できるのか。
このDBをみるとレコード(行)によって保存されてるものは異なるが、タイトルや本文は同じ内容で保存してしまったらどっちだか判断がつかなくなってしまう。
では、他に違うところといえばid、created_at、updated_atがある。
created_at, updated_atこの2つ使えそうな気がするがごちゃごちゃ書いてあって、ちゃんとビューまで飛べてるか確認するときに手こずりそう。
残るのはid。これなら1や2...と簡単に確かめることが出来そう。
思いた書き方は
1. get 'tweets/id', to: 'tweets#open'
2. get 'tweets/:id', to: 'tweets#open'
3. get 'tweets/id:', to: 'tweets#open'
4. get 'tweets/show/id', to: 'tweets#open'
5. get 'tweets/show/:id', to: 'tweets#open'
6. get 'tweets/show/id:', to: 'tweets#open'
7. get 'tweets/show/params[id]', to: 'tweets#open'
8. get 'tweets/show/params[:id]', to: 'tweets#open'
9. get 'tweets/show/params[id:]', to: 'tweets#open'
この9つ。
実験的に一つずつやってみました。
1. get 'tweets/id', to: 'tweets#open'
http://localhost:3000/tweets/1
https://gyazo.com/bcb397d204fc3628ce405f54adb62a03
2. get 'tweets/:id', to: 'tweets#open'
http://localhost:3000/tweets/1
Prefix Verb URI Pattern Controller#Action
tweets_index GET /tweets/index(.:format) tweets#index
tweets_new GET /tweets/new(.:format) tweets#new
tweets POST /tweets(.:format) tweets#create
GET /tweets/:id(.:format) tweets#open
3. get 'tweets/id:', to: 'tweets#open'
http://localhost:3000/tweets/1
https://gyazo.com/f5e0a6dbd0dd202dea44cc02aae8065b
4. get 'tweets/show/id', to: 'tweets#open'
http://localhost:3000/tweets/show/1
https://gyazo.com/bdeba4ad782aee3eebd209c5caffde7a
5. get 'tweets/show/:id', to: 'tweets#open'
http://localhost:3000/tweets/show/1
Prefix Verb URI Pattern Controller#Action
tweets_index GET /tweets/index(.:format) tweets#index
tweets_new GET /tweets/new(.:format) tweets#new
tweets POST /tweets(.:format) tweets#create
GET /tweets/show/:id(.:format) tweets#open
6. get 'tweets/show/id:', to: 'tweets#open'
http://localhost:3000/tweets/show/1
https://gyazo.com/73bc1b512cf3efedb16a392f17e804cf
7. get 'tweets/show/params[id]', to: 'tweets#open'
http://localhost:3000/tweets/show/params[1]
https://gyazo.com/db048ef522c2ee640a4d0bfe8cdc5f94
8. get 'tweets/show/params[:id]', to: 'tweets#open'
http://localhost:3000/tweets/show/params[1]
Prefix Verb URI Pattern Controller#Action
tweets_index GET /tweets/index(.:format) tweets#index
tweets_new GET /tweets/new(.:format) tweets#new
tweets POST /tweets(.:format) tweets#create
GET /tweets/show/params[:id](.:format) tweets#open
9. get 'tweets/show/params[id:]', to: 'tweets#open'
https://gyazo.com/cef815cb60fb41610d715b9e15cb4cda
結果:
・pathが通ったものに関して共通してるものは:idだと通る。
・$rails s してみるとprefixのところは空白になっている。
。。。:idこれ何?、prefixってどんなんだっけ?
調べたら:←このコロンについて理解するのは時間がかかりそうなので、先にprefixの方を調べる。
見つけた!
参照:https://qiita.com/pinecode1/items/32bbe72ee051eeb9cd91
理由:prefixが空欄の場合、上と同じだから省略されてる。
ちょっと待った。その前にprefixってなんだっけ?
URl Patternとの違いは?
調べてみる。
参照:https://qiita.com/akk11_k/items/5f8cbafb17f5991d5f88
prefix...パスの指定方法の一つ。URl Patternとの違いはparamsを含むか。
だから先ほどの実験でtweets/show/:idやtweets/show/params[:id]でも通るし、tweets/:idでも通ったのか。なるほど。
では、paramsを含まないindex(一覧ページ)やnew(新規作成ページ)ではprefixをurlに設定してもそのページに飛べるのか。
やってみよう!
まずは、indexの方から。
http://localhost:3000/tweets_index
飛べてる!
次はnew。
http://localhost:3000/tweets_new
飛べた!
prefixの使い方がわかったぞ!
続いて:idについて
:(文字列)これをシンボルというらしく、ハッシュと組み合わせて使うことが多いらしい。
# ハッシュ
・複数のデータをまとめて収納できる。
・キーとバリュー(値)がペアとなって保存できる。
# シンボル
・文字列の前にコロンを置いて定義したもの。
・ハッシュと組み合わせる場合は文字列の後ろに置いてもシンボルとなるケースもある。
参照:https://qiita.com/ryosuketter/items/257d672eb83210b5f8dc
つまり、:idと定義するとDBに保存されているidがキー、1や2などの値(バリュー)となりDBから情報が引き出されて各タイトルの詳細ページへ飛べるということでいいのかな🤔?
今回はこういうことにしておこう。
routes.rbに設定する。
④コントローラーのopenメソッド内を編集。
Tweetモデルを使ってTweetsテーブルから情報を持ってくる。
検索するためのメソッドを調べるとfind、find_by、whereがある。
今回検索したいのはidであり、具体的に取得したいものが決まっているので(id=1,2...)、findを使用しました。
URLからルーティングから来た時欲しいパラメーター(例) /tweets/1←これ)idを取得したいのでparamsを使ってidを取得。
openビューへ取得した情報を渡すためインスタンス変数を追加します。
⑤open.html.erbの編集
④で情報を受け取る準備ができたので、open.html.erbでビューに映せるように編集していきます。
⑥詳細ビューの確認
http://localhost:3000/tweets/1
⑦一覧ページから詳細ページへ遷移できるようにする
1. tweets_controllerのindexメソッドの処理を変更
今の状態だと、DBからタイトルだけの情報しか持ってこられてないのでツイートごとのidを取得しないとエラーが起きてしまいます。
なので、indexメソッドの処理にid情報も持ってこられるように"id"を追加します。
2. app/views/tweets/index.html.erbを編集
詳細ページに飛べるようにリンクを貼る。
#{}...式展開。
ダブルクオーテーション(")の中で変数や式を呼び出したい時に使える。
今回はツイートの各idを呼び出したいので#{tweet.id}としました。
⑧一覧ページから詳細ページへ遷移できるか確認
http://localhost:3000/tweets/index
詳細へ飛んでみると...
成功!
詳細ページはビューへ映すだけだけどid取得したりしないとだから難しかった😂
次回は詳細や新規作成ページから一覧ページへ戻れるようにしたいと思います!!!
以上です。