No_ideaのわからん日和

✏️...プログラミングが全然出来ない奴がわからんわからん言いながら様々な構文(記述方法やエラー構文など)と奮闘しながら成長していく成長記録です🐢

Ruby on Rails: 詳細ページの作成〜一覧から詳細ページへ遷移できるようにする...chapter6

今日は詳細ページを作成します。

詳細ページといえば、showアクションだがアクション名を変更してやってみたいと思います。

------------------------------------やること------------------------------------------

①tweetsコントローラーのshowアクションをopenアクションへと変更

②ビューにopen.html.erbを追加し、詳細ビューの仮作成

③ルーティングを設定する

④コントローラーのopenメソッド内を編集

⑤open.html.erbの編集

⑥詳細ビューの確認

⑦一覧ページから詳細ページへ遷移できるようにする

⑧一覧ページから詳細ページへ遷移できるか確認

---------------------------------------------------------------------------------------

①tweetsコントローラーのshowアクションをopenアクションへと変更

def show
end

def open
end

私がスクールに通ってくる頃の話だが、最終課題までずっとshowアクションはshowアクション以外の名前をつけることは出来ないと思ってました。

ルーティングやコントローラー、ビューでshowアクションと同じように書けば同じ動きをする。なので、showアクションをopenアクションに変更してみました。

 

②ビューにopen.html.erbを追加し、詳細ビューの仮作成。

 

 

 

③ルーティングを設定する

ここが問題。

各ツイートの詳細に飛ばす方法を考えないといけない。

詳細はビューに映すだけなのでHTTP動詞は 'get' で良さそう。

get

一番左のコントローラー名#アクション名はtweets#openで大丈夫。

get      , to: 'tweets#open'

じゃあ、URL(path)はどうすればいいのか?

get (ここがわからない) , to: 'tweets#open'

詳細ページって一覧ページや新規作成ページと違ってツイート一つ一つでページが違うようにしないといけない。

では、どうやってそれを選別できるのか。

この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に設定する。

 get 'tweets/:id', to: 'tweets#open'

 

 

④コントローラーのopenメソッド内を編集。

def open
end

Tweetモデルを使ってTweetsテーブルから情報を持ってくる。

 

def open
Tweet.find()
end

検索するためのメソッドを調べるとfind、find_by、whereがある。

今回検索したいのはidであり、具体的に取得したいものが決まっているので(id=1,2...)、findを使用しました。

def open
 Tweet.find(params[:id])
end

URLからルーティングから来た時欲しいパラメーター(例) /tweets/1←これ)idを取得したいのでparamsを使ってidを取得。

def open
 @open_tweet = Tweet.find(params[:id])
end

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取得したりしないとだから難しかった😂

次回は詳細や新規作成ページから一覧ページへ戻れるようにしたいと思います!!!

 

 

 

 

 

 

 

以上です。