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

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

 

 

 

 

 

 

 

以上です。

Ruby on Rails: タイトル一覧ページからツイート新規作成ページへ飛べるようにする...chapter5

☘前回

投稿一覧にタイトル1〜5までを表示しました。

 

今回は新規作成ボタンを作って、ツイート新規作成ページへ飛べるようにしたいと思います。

 

 

ボタンを作るためのヘルパーメソッドで思いついたのは「submit_tag」でした。

どう書くんだっけ? → 検索🔍

 

出てきたのは、

 = submit_tag 'HOGE', :name => 'hoge'

参照:https://doruby.jp/users/nakanishi/entries/image_submit_tag_submit_tag_

 

これ、雰囲気的にnew.html.erbの方に飛ばなそうじゃね???

ちょっと読んでると、どうやらこれはform_tagの中で使うみたいだ。

今回やりたいのは、ただ新規作成ページに飛びたいだけ、フォームを作りたいわけではない。

他に何かないかと検索。

あった。

       『link_to』

       『button_to』

 

確かにあったよ。二つも。

どっち使えばいいんだろ?

link_toとbutton_toの違いを調べる。

参照:https://pikawaka.com/rails/button_to#:~:text=link_to%20%E3%81%A8%20button_to%20%E3%81%AE%E9%81%95%E3%81%84,%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E7%94%9F%E6%88%90%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82&text=link_to%E3%81%AF%E4%B8%8B%E3%81%AE%E3%82%88%E3%81%86%E3%81%ABa%E3%82%BF%E3%82%B0%E3%81%8C%E7%94%9F%E6%88%90%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

。。。実際に二つ作ってみて、どう違うか自分で確かめてみよう。

 

 

 

link_toはただリンク先に飛ぶためのもの。

button_toはボタンが出来てリンク先へ飛べる。

参照ページを読んでみてまとめてみました。

 

なんかbutton_toはお問い合わせフォームのボタンとかそういうのに使ってみるみたい。

今回はただ新規作成ページに行きたいだけなので、link_toを使って送りたいと思います。

https://i.gyazo.com/ff9c2fbc682e070101c736995d428ee1.mp4

出来た。

 

 

今日は一覧ページから新規作成ページへリンクできるようにしました。

次回は詳細ページを作りたいと思います。

 

 

 

 

 

以上です。

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まで表示されました。

次回、詳細ページを作り、詳細ボタンから詳細を覗けるように実装していきたいと思います。

 次回、新規作成ボタンから新規作成のページへ飛べるようにしたいと思います。

 

 

 

 

 

 

以上です。

Ruby on Rails: ツイート新規作成画面の実装〜投稿されたツイートをDBに保存する...chapter3-3-2

▶︎newページ(ツイート新規作成)にタイトルと本文を書き込めるフォームを作成

-----------------------------今回やったこと------------------------------------------

①tweets_controllerのnewアクションにインスタンスをつくり、インスタンス変数へ代入する

②viewsのtweets/new.html.erbに投稿フォームをつくり、controllerで作ったインスタンスインスタンス変数を使ってビューに渡す

③ルーティングとcreateアクションに処理を追加

④tweetsコントローラーのcreateメソッドに処理内容を追加

⑤DBに保存できるか確認してみる

 

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

♠️ 前回

ここまで作りました。

これでは投稿ができない。フォームを作らなくては!

と言うわけで作っていきます。

 

 

①tweets_controllerのnewアクションにインスタンスをつくり、インスタンス変数へ代入する。

これ何してるの???

これでやったらどうなるの???

@tweet = Tweet.newって何してるねん。わからん。

調べてみるか...🔍 

# Tweet.new

Tweetクラス(Tweetモデルオブジェクト)のインスタンスを作成。

Tweetクラスって何や? ➡︎ イメージはゲームで言うとTweetシリーズというもの。

モデルオブジェクトって何や? ➡︎ プログラムと関連するデータをまとめたオブジェクトを一つのモデルとして把握する考え方。(つまりTweetに関するゲームをまとめたTweetシリーズ(Tweetモデル)ということかな🤔?)

参照:https://kotobank.jp/word/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%A2%E3%83%87%E3%83%AB-2069

インスタンスって何や?  ➡︎Tweetシリーズのカセット1つ1つの内容。

という解釈しました。

作者がTweetシリーズ(設計図:Tweetクラス)を作ろうと考える。今回はTweetモデル

3つに分けて作ろう。じゃあ、内容はどうするか1つ1つ内容を考える(この1つ1つの内容を考えるってのがインスタンス)。

こんな感じでいいのかな🤔???

間違ってたらごめんなさい。

 

つまりTweet.newでTweetシリーズ(大まかな設計図)が出来て、ストーリー(内容)をつくる準備が出来ました。ってこと?今はそう解釈しておくことにします。

でもTweetシリーズのゲームを準備したけど、カセットの中身は空っぽ。何でかというとビューで内容を書いてもらいたいから(タイトルと本文)。

ではこの真っ新なカセットをビューに渡すぞ!!!

 

# @tweet

インスタンス変数という。

@を変数へつけることでビューへ渡せる。

 

 

②viewsのtweets/new.html.erbに投稿フォームをつくり、controllerで作ったインスタンスインスタンス変数を使ってビューに渡す。

 

tweetsコントローラーから来たTweetシリーズのゲーム(内容はまだ書いていない)に内容をかけるように投稿フォームを作っていきます。

# form_with

form_forとform_tagの代わりになるもの。

viewで使うことで簡単にフォームを作れる。

入力した値を送る場所を簡単に指定できる。

コントローラーへデータを簡単に送れる。

 

# model: @tweet

これの使い方はモデルに入っているものが新しく作られたものか既存のものを呼び出したした場合で意味が変わるみたい。

今回はnewアクションに@tweetで空っぽのtweetシリーズのゲームカセットが届いて、そこにユーザーが入力して内容を書いてcreateアクションに渡してTweetモデルを使ってDBに保存する。って流れみたい。

なので、後でコントロールとルーティングに追加します。

参照:https://qiita.com/snskOgata/items/44d32a06045e6a52d11c

 

# |f|

||←これっていまいちわからなかった。

この||の中に入っている変数をブロック変数というらしい。

このブロック変数をform_with~endまでの間で使うと、情報を保持したまま使えるっぽい。

だから、f.〇〇って書くとゲームカセット内に情報が追加されていくって感じかな?

 

# f.label, f.text_filed, f.text_area + カラム名

先ほどのブロック変数でカラムを指定して@tweet内のどのカラムに情報を入れるかを示してるらしい。

 

# f.submit

そして、これらの入力した情報を保持したままtweetsコントローラー内のcreateアクションへ情報を送り、Tweetモデルを伝ってDBへ保存って流れっぽい。

 

③ルーティングとcreateアクションに処理を追加。

ルーティングにtweetsコントローラーのcreateアクションを使えるように追加する。

http://localhost:3000/tweets/newで確認してみる。

エラーが出た。。。何で??????わからん。

原因を調べてみると、newアクションでは投稿ページをget(HTTP動詞)を使って画面に出力したが、createはpostを使ってデータを保存するので、画面にcreateは画面に出ないってことになる。

今回のこのルーティングの書き方↓

get 'tweets/new', to: 'tweets#new'
post 'tweets/create', to: 'tweets#create'

☘ get, post...これはHTTP動詞でどの処理をするかを決めるもの。

☘ 'tweets/〇〇...この部分はURL。だからtweets/createとかいても画面に映すものはないので、エラーになってしまう。でもpostだけ指定してもどのコントローラーへ情報を渡せばいいかわからないので、tweetは書かなければならない。

post 'tweets'

そして、どのアクションに飛ばせばいいかも分からないので、to: 'tweets#create'を書く。

post 'tweets', to: 'tweets#create'

これでもう一度確認してみる。

エラーが解消され、画面に表示されたぞ(^^)!

でもまだ、コントローラーにcreateメソッドは作ってあるけど、処理内容は空っぽなのでDBに保存できません。

次で保存できるようにします。

 

④tweetsコントローラーのcreateメソッドに処理内容を追加。

どうすればtweetsテーブルにデータが保存できるのか?

モデルをまず指定する。

def create
end

あとはどうすればいいのか。調べますw

def create
@post = Post.new(post_params) #paramsメソッドを利用 ストロングパラメータを引数として記述
@post.save
redirect_to @post #createしたidのshowページにリダイレクト
end

private #private以下にストロングパラメータの定義を記述

def post_params #ストロングパラメータを定義していく
params.require(:post).permit(:title, :body, :category) #requireメソッドとpermitメソッドを利用
end

参照:https://qiita.com/s56258/items/a75fdb4d22a0b7ff58ce

見つけた。けど、けど、けど、、、どんな処理なの?これ???

ごちゃごちゃ書いてあって知識ないマンにとっては理解が難しい。。。と思ったらもう一つ見つけた。

 

def create
# データはparamsという変数に渡されてくる
# create は、Postモデルのクラスメソッド
Post.create(post_params)
end

private

# paramsから欲しいデータのみ抽出
def post_params
params.require(:post).permit(:name, :title, :content)
end

privateから下の書き方は同じ感じ。

createメソッド内の書き方がなんか違う。先に見つけたの方が多い。どう違うのこれ?何で下は一行しかかかれてないの?

 

-----------------------------------調べた結果-----------------------------------------

 # post_paramsメソッド内

✍️params

これは前に書いた値を受け取るための箱みたいなもの。

✍️require(:モデル名)

requireでパラメーターの中にモデルに対応するキーがあるか確認して存在する場合はバリューを返す。

このキーとバリューを調べる方法はgemに 'pry-rails'を追加し、$bundle install後にコントローラーの調べたい場所にbinding.pryを書いて処理を途中で止めて確かめる。

✍️permit(:カラム名)

データで保存したくないものを保存されないように使われる。

参照:https://pikawaka.com/rails/permit

✍️private

private以降に書くと呼び出しを制限でき、クラス外から呼び出しできない。またこれ以降に書くと関数形式で呼び出しができる。

参照:https://26gram.com/private-protected-in-ruby

 

✍️create

createメソッド。△△.create(○○)と書くと、()内にあるカラムに情報があれば(入力されたものがあれば)DBにこれ一行で保存できる。

 

🖐createとsaveの違い

create...一行でインスタンス生成からDBに保存までできる。

save...インスタンス生成と保存は別でないとできない。

 

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

 

 

今回は下の方法で書いてみる。

 

⑤DBに保存できるか確認してみる。

投稿ボタンを押して、、、Sequel Proを再読み込みして保存できてるか確認。

 

 

やったぜ!出来てる!!!

 

 

やっと投稿機能が完成しましたっ٩( ᐛ )وイエイっ!!!

次回は今までツイートしたタイトルを一覧できるようにしていきたいと思います。

 

 

 

 

 

 

以上です。

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に続きます。 

以上です。

Ruby on Rails: ルーティング...chapter3-2

🧵手順

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

 

 

今回はルーティングをつくる。

 

②ルーティングの作成

ルーティングはユーザーがリクエストした時、はじめて動く部分。

そしてどのコントローラーを動かせば良いのか、アクションを動かせば良いのかをユーザーが送って来たURLから決める。

 

んーなるほど。自分の中でルーティングのイメージ。

   

早速作ってみます。

1.ルーティングファイルに移動

config/routes.rbが今回編集するファイル。

 

2.routes.rbに記述

今回の目的はツイート投稿機能、ツイート一覧機能の実装。特にツイート投稿機能を作りたい。

なので、routes.rbに↓のように記載しました。

これでルーティングの設定はおkらしい。。。。

getとか書くのは知ってた。他にもpost、put、patch、deleteがあるのも知ってる。でもこれらが何してるのかわからない。

🔍調べた結果:

get...URLのデータを取得(ただページを映す)。

post...URLを追加したい時とかに使う(投稿したりする時に記述)。

put...URLの内容を作成したり、置換したりする。

patch...内容を部分的に更新する時に使う(タイトルだけ更新、本文だけ更新)。

delete...URLの削除(退会とかツイート削除とか)。

 

参照:https://web-camp.io/magazine/archives/16815

こんな感じかな🤔???

確かにindex(ツイート一覧ページ)とnew(ツイート新規作成ページ)はそのページを映すだけだからgetでおk。

 

ちなみにget, post, patch, put, deleteを総称してHTTP動詞(HTTP verb)と言うらしいです。

 

あと上から下にルーティングを読んでいくらしいです。

うーーん、今思うとスクールで習ったような...忘れてた。

同じHTTP動詞があったら先にあった方が読まれちゃうらしいっぽい。

 

気をつけなくちゃ。。。。。。

 

 

 

 

 chapter3-3-1に続きます。

以上です。

Ruby on Rails: コントローラー...chapter3-1

前回まででDBにカラムを作ったところまで行きました。

 

次やることはビューに映すところまでやりたいと思います。

そこで重要になるのはルーティング、コントローラー、ビューの3つ。

先に何をしたい?って考えたときに、画面を開いたときに今まで投稿したツイートを並べるようにしたい。

ということで、ツイート一覧を作るにはツイートを書かなければ始まらない。

よって、最初にツイートを投稿できるようにしてDBに保存できるようにしたいと思います。

 

🧵手順

 コントローラー➡︎ルーティング➡︎ビュー の順番で作っていこうと思います。

 

①コントローラー作成

ツイートに関することなので、ツイートのコントローラーを作る。

1. $rails g controller ○○

○○は基本的に複数形にする。←※別に単数形でも良い。

理由:

その理由は、resourcesなどのデフォルトのルーティングジェネレータがそのまま利用できるのと、名前付きルーティングヘルパーの用法がアプリケーション全体で一貫するからです。コントローラ名の最後が複数形になっていないと、たとえばresourcesで簡単に一括ルーティングできず、:path:controllerをいちいち指定しなければなりません。

参照:https://railsguides.jp/action_controller_overview.html

 

なので今回は$rails g controller Tweetsとします。

 

2. 7つのアクションのメソッドをつくる

app/controllers/tweets_controller.rbに7つのアクションのメソッドを作ります。

これは後からでも変更できますので、今回はアクションを覚えるために7つ書いてみました(後でメソッド名も変更しました)。

最初destroyをdeleteと覚えていました。。。。。deleteはdestroyの(GET、PUTなどの) 各種HTTP動詞の方です。

参照:https://railsguides.jp/action_controller_overview.html

 

 

 

✏️コントローラーの役割

コントローラーはモデルを介してDBから情報を受け取ったり、渡したりします。

また、ユーザーからリクエストが来たらそれによってルーティングやビューに情報を渡してユーザーに結果を返す役割をする。

 

 

 

参照:https://pikawaka.com/rails/mvc

 

 

 

 

 

 

 

 

 

 

 

 

 chapter3-2に続きます。

以上です。