Ruby on Rails: ビュー(時々ルーティングの見方)...chapter3-3-1

🧵手順

コントローラー➡︎ルーティング➡︎ビュー

モデルができた→DBとコントローラーの間の橋ができた。

ルーティングができた→これでユーザーがリクエストすればコントローラーに飛ばせる。

コントローラーができた→モデルもできるのでDBとのやりとりができる。ルーティングもあるのでリクエストがコントローラーまで届く。

あとは、そのリクエストの結果を出すビューを作ればおk！

というわけでビューの作成をしていきます。

③ビューの作成

app/views/の中にすでにtweetsフォルダが作成されている。これはtweetsコントローラーを作った時に自動的に作られてる。

では、このtweetsフォルダに映したいビューを作成して行きたいと思います。

1. index.html.erbとnew.html.erbの作成

ツイート一覧ページとツイート新規作成ページが欲しい。

なのでapp/views/tweets内にindex.html.erbとnew.html.erbを作成。

2. それぞれのビュー内容を作成

今回はビューにはこだわる予定はないので、最低限の実装で終わりにします。

なのでページをオシャレにしようとか整えようとか考えていません。

よってscssをいじる予定はないです。

では、実装していきます。

index.html.erb

new.html.erb

3. $rails sでサーバーを立ち上げる

ビューを見るにはサーバーを立ち上げなくてはいけない。

コマンドで$rails sをした後に、URLを入れるところ(アドレスバー)にhttp://localhost:3000/を入れます。

すると、

画面に出て来ました。

ここからどんな感じにビューがなってるか見てみます。

4. $rails routesでpathを見てみる

index.html.erbの方からみたいと思います。

いきなりアドレスバーにhttp://localhost:3000/indexと入れてみると

エラーが出て来た。

これでも、Routes match in priority from top to bottomの下にpathやHTTP動詞、コントローラーやアクションが書かれているが今回はコマンドでルーティングを見てみようと思う。

ターミナルに$rails routesとコマンドを打つ。

結果↓

と出てくる。

ツイートのindexのビューとnewのビューが見たいので探す。

↓あった

       Prefix              Verb 　　　　　  URI Pattern                          Controller#Action

tweets_index       GET            /tweets/index(.:format)               tweets#index

tweets_new         GET            /tweets/new(.:format)                  tweets#new

PrefixとURl Patternの違いとは？どっちもpathするものだよね？？？

どちらを使えばいいんや？

その前にpathって何？という方へ

私も最初わかりませんでした。私なりですが、

pathはそのファイルやフォルダが置いてある場所で、そのpathしたところを見にいくと各々のフォルダやファイルを見にいける

と、こんな感じに理解してます。

話は逸れましたが、PrefixとURl Patternの違いを調べてみました。

✏️PrefixとURl Patternの違い

結果：paramsがあるかないか

参照：https://qiita.com/akk11_k/items/5f8cbafb17f5991d5f88

。。。待て待てparamsって何なの？

調べました▶︎params...パラメーターを入れる箱。

。。。待て待てパラメーターって何なの？

調べました▶︎パラメーター...ユーザーが送って来た値。

→paramsがあるかないかとはユーザーが送って来た値を入れる箱があるかないかってこと。

参照：https://qiita.com/tomoharutt/items/46e6358acc8b45cd7db1

よし、paramsがわかったところでどっちがparamsがあるの？

結果： URl Pattern

さて、アドレスバーに使うのはどっち？　=>  URl Pattern

5でアドレスバーURLを入れてみます。

5. http://localhost:3000/tweets/〇〇をアドレスバーに入れてビューを見てみる

index.html.erbの方をみたい場合

http://localhost:3000/tweets/index

new.html.erbの方がみたい場合

http://localhost:3000/tweets/new

ビューに出力されました。

あとは、new.html.erbをいじってタイトルをかける場所、本文をかける場所、それをDBに送って保存するために必要な投稿ボタンを実装していきます。

index.html.erbはタイトルを表示する、詳細を見られるようにする。ツイート新規作成できるようにnew.html.erbに飛べるようにする。

今回はアドレスバーにURLを入れてビューを出すところまでしました。

次回は新規作成フォームにタイトルと本文を入れてDBに保存するところまでやってみたいと思います。

---------------------------今回やったことのまとめ-----------------------------------

1. index.html.erbとnew.html.erbの作成

➡︎ app/views/に作成

2. それぞれのビュー内容を作成

3. $rails sでサーバーを立ち上げる

➡︎ アドレスバーにhttp://localhost:3000/

4. $rails routesでpathを見てみる。

➡︎  URl Patternをみる。

5. http://localhost:3000/tweets/〇〇をアドレスバーに入れてビューを見てみる

➡︎index.html.erbのビューを見たい：http://localhost:3000/tweets/index

➡︎new.html.erbのビューを見たい： http://localhost:3000/tweets/new

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

chapter3-3-2に続きます。 

以上です。