No_ideaのわからん日和

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

Ruby on Rails: devise導入準備(作成してしまったUserテーブル、モデル、コントローラーの削除)...chapter12-1

次はdeviseを導入してメールやパスワードをカラムを追加して$rails db:migrateでマイグレーションを実行!!!←ここでエラーが発生する。

なので、今回はdeviseを導入する前にUsersテーブルの削除、Userモデル、コントローラーの削除をします。

 

 

①モデルの削除

$rails destroy model user

 

 

 

 

②コントローラーの削除

$rails destroy controller users

 

 

 

③テーブルの削除

$rails g migration users

db/migrate/20200615043720_users.rbを開く(先ほど作成したマイグレーションファイル)

class Users < ActiveRecord::Migration[6.0]
 def change
  drop_table :users
 end
end

drop_table :(テーブル名)とコードを書きます。

$rails db:migarete

 

 

 

 

 

④Sequel Proでテーブルが削除されているか確認

before:

 

 

after:

 

 

これでdeviseを導入できる準備ができました。

次回はdeviseを導入してログイン画面の実装をしていきます。

 

 

 

 

 

 

 

 

chapter12-2に続きます。 

以上です。

Ruby on Rails: form_withとストロングパラメーターの実験のまとめ...chapter11-2

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

https://gyazo.com/3bc5de765b8d6bcce951069d338671c5

params.require(:tweet).permit(:title, :main)ではmodelを設定する必要がある。

また、不要な情報がある場合は外されて保存される。

2.permit(:title, :main)なし

params.require(:tweet)

https://gyazo.com/5d0aa5f8ca75e72be950c29e2a1a7413

requireありでpermitなしでは保存はできない。

 

3.require(:tweet)なし

params.permit(:title, :main)

https://gyazo.com/5506a8ad1d2a4a647fb72cb85b0f36c1

requireなしではurlは必ず必要でmodelは不要。

urlとmethodを設定すれば保存はされる。

また不要情報は外されて保存される。

 

 

4.ストロングパラメーターなし

https://gyazo.com/8a3fc3d1546bfc6608ceb30e9a99f263

ストロングパラメーターなしでは保存されない。

 

 

 

 

ストロングパラメーターは送られて来た情報(ビューから送られて来た情報)が信用できるか不要な情報が入っていないかを確認する検問的な役割を果たしている。

もし不要な情報が含まれる場合は外されて保存される。

ストロングパラメーターで設定されているrequireは必要とする、permitは許可するという意味でrequireはあるがpermitがない場合は保存ができない。

またストロングパラメーターがない場合も保存できない。

 

requireにモデルを設定しフォーム(form_with)でmodelを設定することでフォームで送った内容がそのモデルのものなのかを判断できる。

そしてrequrieで設定したモデルの中で保存したい情報を保存するためにpermitで設定しなければならない。

 

参照:https://qiita.com/ozackiee/items/f100fd51f4839b3fdca8

参照:https://skillhub.jp/courses/157/lessons/829

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

 

 

 

 

編集機能の実装でform_withでmethodとmodelを設定しなかったのでエラーが続出して苦労しました。

原因はフォームの情報をPOSTデータで送っているみたいでnewではmethodの設定は必要なかったが、editではmethodを使って設定しなければならなかったみたい。

あとrequireを設定してmodelを設定してなかったので「tweetが空だぞ」とエラーが出ていました。

これを例えるなら山田太郎さんが参加できるオフ会があったとします。

そのオフ会は会場前で名札を提示する必要がある。(require)

さらに会場で会員証明書を提示する必要がある。(permit)

 

名札をつけて来たが名前を書いてなかったから門前払いをくらっている状態だった(名前書いてこい=名札が空だぞと怒られている状態)。

 

 

 

実験してみてrequireとmodelの関係性やmethodの設定など理解が深まった気がします。

また何かあったら実験しながら勉強を進めていこうと思います。

 

 

 

 

 

 

 

以上です。

Ruby on Rails: form_withとストロングパラメーターの実験...chapter11-1

編集機能の実装でform_withとストロングパラメーターで苦労したので、今回は新規作成ページと編集ページの2つで以下の順番で実験していこうと思います。

(例:

①url、model、methodあり

1. permit(:title, :main)あり

1-1 create

1-1-1 不要情報なし

1-1-2 不要情報あり

1-2 update

1-2-1 不要情報なし

1-2-2 不要情報あり

2.permit(:title, :main)なし

2-1 create

2-2 update

3.require(:tweet)なし

3-1 create

3-1-1 不要情報なし

3-1-2 不要情報あり

3-2 update

3-2-1 不要情報なし

3-2-2 不要情報あり 

4.ストロングパラメーターなし

4-1 create

4-2 update

)

 

-------------------------------🧪実験内容--------------------------------------------

①url、model、methodあり

②url、modelあり

③url、methodあり

④model、methodあり

⑤urlのみ

⑥modelのみ

⑦methodのみ

⑧設定なし

 

1. permit(:title, :main)あり

1-1 create

1-1-1 不要情報なし

1-1-2 不要情報あり

1-2 update

1-2-1 不要情報なし

1-2-2 不要情報あり

2.permit(:title, :main)なし

2-1 create

2-2 update

3.require(:tweet)なし

3-1 create

3-1-1 不要情報なし

3-1-2 不要情報あり

3-2 update

3-2-1 不要情報なし

3-2-2 不要情報あり

4.ストロングパラメーターなし

4-1 create

4-2 update

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

 

①url、model、methodあり

 

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

 

 

1-1 create

 

 1-1-1 不要情報なし

 

 

 

1-1-2 不要情報あり

 

 

1-2 update

1-2-1 不要情報なし

id=3を編集する

 

  

1-2-2 不要情報あり

id=3を編集する

 

 

 

2.permit(:title, :main)なし

params.require(:tweet)

2-1 create

 

 

 

2-2 update

id=3を編集する

 

 

3.require(:tweet)なし

params.permit(:title, :main)

3-1 create

3-1-1不要情報なし

 

 

 

3-1-2不要情報あり

 

 

 

3-2 update

3-2-1不要情報なし

id=3を編集する

 

 

 

3-2-2不要情報あり

id=3を編集する

 

 

 

4.ストロングパラメーターなし

4-1 create

def new
 @tweet = Tweet.new
end

def create
 create = Tweet.create
end

 

 

 

 

 

4-2 update

def edit
 @edit_tweet = Tweet.find(params[:id])
end
 
def update
 update_tweet = Tweet.find(params[:id])
 update = update_tweet.update
end

 

id=3を編集する

 

 

 

 

 

②url、modelあり

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

 

1-1 create

1-1-1 不要情報なし

 

 

 

1-1-2 不要情報あり

 

 

1-2 update

1-2-1 不要情報なし

id=3を編集する

 

 

 

1-2-2 不要情報あり

id=3を編集する

 

 

 

2.permit(:title, :main)なし

params.require(:tweet)

2-1 create

 

 

 

1-2 update

id=3を編集する

 

 

3.require(:tweet)なし

params.permit(:title, :main)

3-1 create

3-1-1不要情報なし

 

 

 

3-1-2不要情報あり

 

 

 

3-2 update

3-2-1不要情報なし

id=3を編集する

 

 

 

 

3-2-2不要情報あり

id=3を編集する

 

 

 

4.ストロングパラメーターなし

4-1 create

def new
 @tweet = Tweet.new
end

def create
 create = Tweet.create
end

 

 

 

 

 

4-2 update

def edit
 @edit_tweet = Tweet.find(params[:id])
end
 
def update
 update_tweet = Tweet.find(params[:id])
 update = update_tweet.update
end

 

id=3を編集する

 

 

 

 

③url、methodあり

 

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

 

1-1 create

1-1-1 不要情報なし

 

 

 

1-1-2 不要情報あり

 

 

1-2 update

1-2-1 不要情報なし

id=3を編集する

 

 

 

1-2-2 不要情報あり

id=3を編集する

 

 

 

2.permit(:title, :main)なし

params.require(:tweet)

2-1 create

 

 

 

1-2 update

id=3を編集する

 

 

3.require(:tweet)なし

params.permit(:title, :main)

3-1 create

3-1-1不要情報なし

 

 

 

3-1-2不要情報あり

 

 

 

3-2 update

3-2-1不要情報なし

id=3を編集する

 

 

 

 

3-2-2不要情報あり

id=3を編集する

 

 

 

4.ストロングパラメーターなし

4-1 create

def new
 @tweet = Tweet.new
end

def create
 create = Tweet.create
end

 

 

 

 

 

4-2 update

def edit
 @edit_tweet = Tweet.find(params[:id])
end
 
def update
 update_tweet = Tweet.find(params[:id])
 update = update_tweet.update
end

 

id=3を編集する

 

 

 

 

④model、methodあり

 

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

 

1-1 create

 1-1-1 不要情報なし

 

 

 

1-1-2 不要情報あり

 

 

1-2 update

1-2-1 不要情報なし

id=3を編集する

編集ページに遷移した時点でエラー表示。

 

 

 

 

 

1-2-2 不要情報あり

id=3を編集する

1-2-1同様エラー表示。

 

 

 

 

2.permit(:title, :main)なし

params.require(:tweet)

2-1 create

 

 

 

2-2 update

id=3を編集する

編集画面を表示しようとしたらエラー表示。

 

 

 

 

3.require(:tweet)なし

params.permit(:title, :main)

3-1 create

3-1-1不要情報なし

 

 

 

3-1-2不要情報あり

 

 

 

3-2 update

3-2-1不要情報なし

id=3を編集する

編集ページ遷移でエラー。

 

 

 

 

3-2-2不要情報あり

id=3を編集する

編集ページでエラー

 

 

 

 

 

4.ストロングパラメーターなし

4-1 create

def new
 @tweet = Tweet.new
end

def create
 create = Tweet.create
end

 

 

 

 

 

4-2 update

def edit
 @edit_tweet = Tweet.find(params[:id])
end
 
def update
 update_tweet = Tweet.find(params[:id])
 update = update_tweet.update
end

 

id=3を編集する

編集ページでエラー。

 

 

 

 

 

⑤urlのみ

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

 

1-1 create 

 1-1-1 不要情報なし

 

 

 

1-1-2 不要情報あり

 

 

1-2 update

1-2-1 不要情報なし

id=3を編集する

 

 

 

1-2-2 不要情報あり

id=3を編集する

 

 

 

2.permit(:title, :main)なし

params.require(:tweet)

2-1 create

 

 

 

2-2 update

id=3を編集する

 

 

3.require(:tweet)なし

params.permit(:title, :main)

3-1 create

3-1-1不要情報なし

 

 

 

3-1-2不要情報あり

 

 

 

3-2 update

3-2-1不要情報なし

id=3を編集する

 

 

 

3-2-2不要情報あり

id=3を編集する

 

 

 

4.ストロングパラメーターなし

4-1 create

def new
 @tweet = Tweet.new
end

def create
 create = Tweet.create
end

 

 

 

 

 

4-2 update

def edit
 @edit_tweet = Tweet.find(params[:id])
end
 
def update
 update_tweet = Tweet.find(params[:id])
 update = update_tweet.update
end

 

id=3を編集する

 

 

 

⑥modelのみ

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

 

1-1 create

 1-1-1 不要情報なし

 

 

 

1-1-2 不要情報あり

 

 

1-2 update

1-2-1 不要情報なし

id=3を編集する

編集ページでエラーが発生。

 

 

 

 

1-2-2 不要情報あり

id=3を編集する

1-2-1と同様。エラー。

 

 

 

 

 

2.permit(:title, :main)なし

params.require(:tweet)

2-1 create

 

 

 

2-2 update

id=3を編集する

編集ページ遷移でエラー。

 

 

 

3.require(:tweet)なし

params.permit(:title, :main)

3-1 create

3-1-1不要情報なし

 

 

 

3-1-2不要情報あり

 

 

 

3-2 update

3-2-1不要情報なし

id=3を編集する

編集ページ遷移でエラー。

 

 

 

 

 

3-2-2不要情報あり

id=3を編集する

3-2-1同様、編集ページ遷移でエラー。

 

 

 

 

4.ストロングパラメーターなし

4-1 create

def new
 @tweet = Tweet.new
end

def create
 create = Tweet.create
end

 

 

 

 

 

4-2 update

def edit
 @edit_tweet = Tweet.find(params[:id])
end
 
def update
 update_tweet = Tweet.find(params[:id])
 update = update_tweet.update
end

 

id=3を編集する

編集ページでエラー。

 

 

 

⑦methodのみ

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

 

   

1-1 create

 1-1-1 不要情報なし

 

 

 

1-1-2 不要情報あり

 

 

1-2 update

1-2-1 不要情報なし

id=3を編集する

 

 

 

1-2-2 不要情報あり

id=3を編集する

 

 

 

2.permit(:title, :main)なし

params.require(:tweet)

2-1 create

 

 

 

2-2 update

id=3を編集する

 

 

3.require(:tweet)なし

params.permit(:title, :main)

3-1 create

3-1-1不要情報なし

 

 

 

3-1-2不要情報あり

 

 

 

3-2 update

3-2-1不要情報なし

id=3を編集する

 

 

 

3-2-2不要情報あり

id=3を編集する

 

 

 

4.ストロングパラメーターなし

4-1 create

def new
 @tweet = Tweet.new
end

def create
 create = Tweet.create
end

 

 

 

 

 

4-2 update

def edit
 @edit_tweet = Tweet.find(params[:id])
end
 
def update
 update_tweet = Tweet.find(params[:id])
 update = update_tweet.update
end

 

id=3を編集する

 

 

 

 

 

⑧設定なし

 

1. permit(:title, :main)あり

params.require(:tweet).permit(:title, :main)

 

 

1-1 create

 1-1-1 不要情報なし

 

 

 

1-1-2 不要情報あり

 

 

1-2 update

1-2-1 不要情報なし

id=3を編集する

 

 

 

1-2-2 不要情報あり

id=3を編集する

 

 

 

2.permit(:title, :main)なし

params.require(:tweet)

2-1 create

 

 

 

2-2 update

id=3を編集する

 

 

3.require(:tweet)なし

params.permit(:title, :main)

3-1 create

3-1-1不要情報なし

 

 

 

3-1-2不要情報あり

 

 

 

3-2 update

3-2-1不要情報なし

id=3を編集する

 

 

 

3-2-2不要情報あり

id=3を編集する

 

 

 

4.ストロングパラメーターなし

4-1 create

def new
 @tweet = Tweet.new
end

def create
 create = Tweet.create
end

 

 

 

 

 

4-2 update

def edit
 @edit_tweet = Tweet.find(params[:id])
end
 
def update
 update_tweet = Tweet.find(params[:id])
 update = update_tweet.update
end

 

id=3を編集する

 

 

 

 

 

 

 

 

chapter11-2に続きます。

以上です。 

Ruby on Rails: 編集機能の実装...chapter10

 

 

間違えてツイートしてしまったものを再編集できるように実装していきます。

 

----------------------------------やったこと------------------------------------------

①ルーティングの設定(edit)

②コントローラーの設定(edit)

③ビューの作成(仮)

④詳細ページから編集ページへのリンクを作成

⑤ルーティングの設定(update)

⑥コントローラーの設定(update)

⑦ビューの作成

⑧編集内容が再保存できるか確認

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

 

 

①ルーティングの設定(edit)

editで編集ビューを表示、updateで編集したものを保存するので最初にeditの方から設定を行います。

 

get

editはビューに編集ページを映すのが役割。

HTTP動詞は 'get'。

get to:'tweet#edit'

送るコントローラーはtweetsコントローラー。

その中で送るアクションはeditアクション。

get 'tweets/:id', to:'tweet#edit'

pathはユーザーが欲しい情報のurlを書きます。

どのツイートを編集すればいいかがわかればいいから、取得したいツイートのidがわかればいいから'tweets/:id'。

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

このままではopenアクションとpathが同じなのでeditを付け、ルーターがどのパスに飛ばせば良いかを判断できるようにします。

 

 

 

②コントローラーの設定(edit)

tweets_controller.rb

def edit
end

editメソッドに処理内容を書いていきます。

def edit
end

Tweetモデルを使ってDBからツイート情報を獲得。

def edit
 Tweet.find()
end

findメソッドを使ってどの数あるツイートから編集したいツイートを探す準備。

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

ツイートを探すためには保存されているツイートのidを取得すれば探しやすいのでparamsを使ってユーザーが欲しいツイート(id)を入れる箱を用意し、:(コロン)をつけidをkey(キー)にしてユーザー側が欲しいツイート(idの数字)をvalue(バリュー:値)として紐付けます。

def edit
 @edit_tweet = Tweet.find(params[:id])
end

見つけたツイートをビューに映したいのでインスタンス変数を使い代入します。

 

 

 

③ビューの作成(仮)

app/views/tweets/edit.html.erbを作成。

<div class="tweet-edit">
 <h1>編集ページ</h1>
 <div class="tweet-edit__title">
  タイトル
  <%= @edit_tweet.title %>
 </div>
 <div class="tweet-edit__main">
  本文
  <%= @edit_tweet.main %>
 </div>
 <div class="tweet-edit__btn">
 再投稿ボタン
 </div>

 <%= render 'back-index' %>
</div>

作成したインスタンス変数@edit_tweetを使って取得したタイトルと本文を画面映すようにコードを書きます。

前に作成した一覧へ戻るため部分テンプレートを引用できるようにrenderメソッドを使って映せるようにします。

$rails s

http://localhost:3000/tweets/3/edit

 

 

 

 

 

 

④詳細ページから編集ページへのリンクを作成

app/views/tweets/open.html.erb

<div class="tweet-show">
 <h1>詳細</h1>
 <div class="tweet-show__title">
  <%= @open_tweet.title %>
 </div>
 <div class="tweet-show__main">
  <%= @open_tweet.main %>
 <div class="tweet-show__main__btn"></div>
 </div>
 <div class="tweet-show__delete">
  <%= link_to '削除', "/tweets/#{@open_tweet.id}", method: :delete %>
 </div>

 <div class="tweet-show__edit">
  <%= link_to '編集', "/tweets/#{@open_tweet.id}/edit" %>
 </div>

 <%= render 'back-index' %>
</div>

link_toを使って編集ページへのリンクを貼りました。

編集ページを映すだけなのでmethodはデフォルトのままなので記述する必要はないです。

 

 

 

 

⑤ルーティングの設定(update) 

routes.rb

 
Rails.application.routes.draw do

get '/tweets/index', to: 'tweets#index'
get 'tweets/new', to: 'tweets#new'
post 'tweets', to: 'tweets#create'
get 'tweets/:id', to: 'tweets#open'
delete 'tweets/:id', to: 'tweets#destroy'
get 'tweets/:id/edit', to: 'tweets#edit'
patch

end

とりあえずHTTP動詞を指定。

patch...更新や変更、修正で使用。

put...更新よりは置換で使用。

よってpatchを定義。

patch to: 'tweets#update'

コントローラーの指定はtweetsコントローラー。

アクションはupdate。

patch 'tweets/:id', to: 'tweets#update'

updateは画面に映すものではないのでcreateアクションに似ています。

しかし、createアクションと違って今回は既存しているツイートなのでidを指定する必要があるのでidをシンボル(:)としてキーにしてあげてツイートのid(数字)をバリューとして渡してあげられるようにします。

 

 

 

 

 

⑥コントローラーの設定(update)

app/controllers/tweets_controller.rb

def update
end

ルーティングによってupdateに処理が渡されたのでupdateメソッドに処理内容を設定していきます。

def update
end

Tweetモデルを記述し、Tweetsテーブルに編集したツイートを渡せるようにします。

def update
 Tweet.find()
end

どのツイートをなのかを探せるようにfindメソッドを記述。

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

paramsを使ってidを受け取り、Tweetsテーブルに編集したツイートを保存できるようにします。

def update
update_tweet = Tweet.find(params[:id])
 
end

変数update_tweetに代入。

アップデートできるメソッドを検索。

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

updateメソッド...データに既存する情報を更新し保存できる。

def update
 update_tweet = Tweet.find(params[:id])
 update_tweet.update
end

updateメソッドを使い、変更したいツイートを更新し保存できるようにします。

def update
 update_tweet = Tweet.find(params[:id])
 update_tweet.update(tweet_params)
end
 
private

def tweet_params
 params.require(:tweet).permit(:title, :main)
end

保存する際に新規作成同様に要らない情報まで保存されないようにストロングパラメーターを使用。

 

 

 

 

 

⑦ビューの作成

app/views/tweets/edit.html.erb

<div class="tweet-edit">
 <h1>編集ページ</h1>
 <div class="tweet-edit__title">
 タイトル
 <%= @edit_tweet.title %>
 </div>
 <div class="tweet-edit__main">
 本文
 <%= @edit_tweet.main %>
 </div>
 <div class="tweet-edit__btn">
 再投稿ボタン
 </div>

 <%= render 'back-index' %>
</div>

 編集ページのイメージ図:

イメージができたのでコードを記述していきます。

 

<%= form_with url: "/tweets/#{@edit_tweet.id}", model: @edit_tweet, method: :patch do |f| %> ~<% end %>

・form_with...で入力フォームを用意する。

・url: ...このフォームで入力した情報を渡す場所を書く。

・'/tweets/#{@edit_tweet.id}' ...今回渡したいurlはupdateのpath。つまりルーティングのupdateに書いたpath。

・model: ...渡したいモデルの場所を指定できる。@edit_tweetにはモデルの情報があるのでインスタンス変数を使用。

・method: ...デフォルトHTTP動詞はPOSTになっているので、methodでpatchと指定してあげることでpatchと認識してupdateアクションへ処理を渡せるようになる。

 

・|f|... フォームで書いたものを同じurlに送りたいので|と|で挟んで f をブロック変数として、これを送りたいメソッドの先頭に(f.○○○)書く。

 

<%= f.label :関連付けたいカラム名, '表示したい項目名' %>

f.label ...これを使うとフォームを押さなくても表示したい項目名をクリックするだけでフォーム入力できるようになる。

例) 新規登録フォーム →https://gyazo.com/05e7d98097105efe433f4a079a32e651

参照:https://qiita.com/tomoharutt/items/0f89abcd55bbbd1b9921

 

<%= f.text_field :title, value: @edit_tweet.title %>

<%= f.text_area :main, value: @edit_tweet.main %>

・text_field ...短い文(一行で済むもの)を入力したいところに使う。なのでタイトルに使用。

・text_area ...複数行入力させたいところに使う。よって本文へ使用。

value ...ここに書くとすでに表示させたいものを入力フォームに表示しておくことができる。今回はすでに保存してあるツイートがどんなものだったのかを表示させたかったのでvalueを使用し表示させている。

 

<%= f.submit '〇〇' %>

・submit... ボタンを作成できる。

・'〇〇'...ここにボタンに表示したいボタン名を定義。今回は'再投稿'。

 

そして<% end %>でform_withが働く範囲を閉じる。

 

 

 

 

 

⑧編集内容が再保存できるか確認

$rails s

編集ページへ行って。。。

タイトルと本文を編集して再投稿して一覧へ戻ると。。。

 

タイトルが変更されている。

詳細ページも見てみる

大丈夫そう!

編集機能の実装終了!

これで基本の7つのアクションの学習は終了!

 

 

 

 

 

 

 

 

 

 

以上です。

Ruby on Rails: 新規作成機能の欠陥を直す!原因は。。。...chapter9

前回、このアプリには欠陥があると言ったがタイトルに書いたとおり新規作成に欠陥があります。

http://localhost:3000/tweets/newで新規作成ページからツイートしてみると。。。

 

投稿を押して、一覧へ戻ると、

 

投稿できてるが。。。

 

一覧ページから新規作成へアクセスし、ツイートしてみるが。。。

↓ 投稿を押してから一覧へ戻るを押してみると。。。

できてない!!!

https://gyazo.com/d5098fe7b0b85c0e294fbde19184c527

 

 

原因はズバリ!

 

         『Turbolinks』

 

これ、スクールで出てきた。。。

けど、、、けど、、、理解全然できてない!

何?って聞かれたら

 

       _人人人人人人人_
       > わからん! <
        ̄Y^Y^Y^Y^Y^Y ̄

 

って言うしかない。。。(_ _|||))))

Google先生を頼って様々なサイトを見て、なんとなくTurbolinksってのが問題だとわかったが、Turbolinksについて理解できてなかったので時間が掛かりました。

 

本日は

◇Turbolinksとは何者なのか

◇欠陥の修正

をやっていこうと思います。

 

 

 

◇Turbolinksとは何者なのか

Turbolinksを理解する前に最初に欲しい情報をブラウザに映すまでの流れを勉強します。

(ブラウザ...Google ChromeSafariInternet Explorer(IE)、Microsoft EdgeなどのWebサイトを閲覧する時に使うソフトのこと)

 

〜ブラウザに欲しい情報が表示されるまでの流れ〜

1. 欲しい画面のHTML(画面を構成する骨組み)をダウンロード

 

2.そのHTMLを装飾するもの(カッコよくしたり、可愛くしたり見た目をよくする)をダウンロード

この装飾するもの(スタイルシートJavascript、画像)

3.レンダリング(1と2をくっつけて画面に映す)

(レンダリング...元になる情報を整形して表示すること)

 

 

こんな感じでサイトをみることができるようになります。

この2. の作業で複数のスタイルシートJavascriptのフォルダが複数存在すると、ブラウザとのやりとりに時間がかかってしまい表示されるのが遅くなってしまう。

そんな問題を解決するための仕組みが存在する。

それが『アセットパイプライン(asset pipeline)』!

アセットパイプラインによって高速に画面を遷移させています。仕組みとしては画面全体を変えているわけではなく一部だけを変えることによって高速化させています(この一部だけ変更する方法をAjax(エイジャックス)と言いいます)。

この高速化させる方法として2.の複数存在するファイルを1つにまとめている。

 

そしてこのアセットパイプラインに追加された機能として『Turbolinks』があります。

 

~Turbolinks~

Turbolinksはページを遷移させる時に現在見てるページの『title』と『body』だけを新しいページの『title』と『body』と交換してブラウザを取得し直すことを省く機能を持っている。

 

 

今回の一覧ページから新規作成ページへ遷移する時もturbolinksが動いている。

ダブルクリック(mac)をして検証をクリックして、Networkを開いてみます。

Networkはページのリクエストページのリクエストをしてからの通信内容を一覧で表示できる。

参照:https://www.buildinsider.net/web/chromedevtools/01#page-4

一覧ページから新規作成ページへ飛んでみます。

一番右下を見ると。。。

turbolinksが動いているのがわかります。

https://gyazo.com/1e2111c868be1bd11a6d635ee7777b75

 

Turbolinksの後をみると.jsと書いてある。

これはJavascriptと言うプログラミング言語の拡張子(Javascriptのファイルだよって示すもの)。

つまりこのturbolinksはJavascriptで動いていると言うこと。

ではこのJavascriptプログラミング言語を使うとHTMLや CSSの要素で作用して新しい HTMLやCSSが生成されることによって、新しいコンテンツが表示されたり、変化したりします。

(要素...開始タグ〜終了タグまでの全体の構成のこと。例)HTMLでは ここから→<p>~</p>←ここまで)

 

〜一覧ページから新規作成ページへ遷移後ツイート作成し、保存されるまでの経緯〜

<正常の場合>

1. 一覧ページから新規作成ページへ遷移する時この要素を変化させるJavascriptが使われているTurbolinksが発動

2. この新規作成ページでJavascriptがある要素(今回はform要素)を支配

3. タイトルや本文を保存しようと投稿ボタンを押す

4. Javascriptが動きツイートがcreateアクションへ行き、モデルを通ってDBへ保存される

 

~今回保存できなかった原因〜

原因:

一覧から新規作成ページへ遷移後、保存できなかった原因はformタグの開始タグと終了タグが変化させたいところ(作用させたい場所まで)を囲っていなかったから。

 

実際に見てみます。

検証を開き、今度はElementsを見てみます。

https://gyazo.com/e3cd7e695b56e612b33749fae90cbce1

https://gyazo.com/ab89bfc224f6383e5233c0d092f63919

2行目の<form action="/tweets" accept-charset="UTF-8" data-remote="true" method="post"> ~</form>をみると<input>~<br>のところまでしか囲っていない。

つまりJavascript(Turbolinks)はここまでしか作用していないことになります。

このJavascriptが作用させたいのは<div class="tweet-new__titile">~一番下の</div>まで(<div class="tweet-new__btn">の終了タグまで)。

なので、次でnew.html.erbを修正してJavascript(Turbolinks)が正常に動くようにしていきます。

 

ちなみに、 Turbolinksがどの要素に作用しているかを確かめる方法としてElementsで表示されているdata-remoteを見ればいいみたいです。

https://gyazo.com/b7018109471309bab2076314c7d47f64

今回このformタグをみると data-remote="true"となっている。

これが "ture" になっているとフォームの送信がブラウザによる通常の送信方法ではなくAjaxによって (今回はTurbolinks)送信されるようになると言うことを意味しているらしいです。

 

 

 

 

◇欠陥の修正

では、修正していきます。

↓ app/views/new.html.erbは現在こんな感じなってます。

https://gyazo.com/dd7c49a49a44944a3329fca11505f8c6

 

<%= form_with model: @tweet do |f| %>を<div class="tweet-new__title">の上へ。

<% end %>を</div>の下へ(<div class="tweet-new__btn">の終了タグの下へ)修正します。

https://gyazo.com/8bd504d1584c1397f04e431bfca9cdbd

 

 

実際に保存できるか確かめてみます。

http://localhost:3000/tweets/index

↓ 新規作成へ飛んで

↓ 投稿をクリック後、一覧へ戻るで戻ってみる

保存できてる!

 

 

 

 

 

一覧から新規作成ページに飛んでからツイートすると保存できなかったのに、新規作成ページをリロード(再読み込み🔄 )すると保存できた理由としてはTurbolinksが働いていなかったからみたい。

検証のNetworkを開き、リロードして見てみるとTurbolinksが動いてないことがわかる。

 

 

 

アセットパイプライン(asset pipeline)、Turbolinks、TurbolinksとDBへの保存の関係性を理解するのに時間がかかってしまった😅

↓ 下に調べたサイトのリンクを貼っておきます ↓

 

今回原因がTurbolinksとわかったきっかけの質問

参照:https://teratail.com/questions/237566?whotofollow=

 

Turboliknksについて

参照:https://www.ryotaku.com/entry/2019/01/15/213420

参照:https://www.techscore.com/tech/Ruby/rails-4.0/turbolinks/ 

 

アセットパイプラインについて

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

参照:https://www.transnet.ne.jp/2016/02/28/rails%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8Dcolnr%E3%80%8C%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/

 

Ajaxについて

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

 

タグや要素とは

参照:https://allabout.co.jp/gm/gc/23843/

 

次回はツイート編集機能についてやってみる予定です。

 

 

 

 

 

 

 

 

 

 

以上です。

Ruby on Rails: ツイート削除...chapter8

-----------------------------------やったこと-----------------------------------------

①ルーティングを編集

②コントローラーを編集

③ビューを編集

④ビューの確認

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

今日はツイートを削除できるように実装していこうと思います。

自分で考えながら実装し、わからなくなったらGoogle先生に頼っていくスタイルでいくのでよろしくお願いします!

 

①ルーティングを編集

削除のHTTP動詞はdelete。

右のアクションの指定は削除機能をtweetsコントローラーのdestroyアクションの方で記述していくのでtweets#destroy。

pathはツイートを一件一件消すのでidをパラメーターとして取得しなければならないので、tweets/:id。

 

②コントローラーを編集

app/controllers/tweets_controller.rb

TweetモデルからDBへアクセスしてコントローラーに渡すので、Tweetモデルを指定。

 

ツイートのidを取得しないとどのツイートを削除すればいいかわからないのでfindメソッドで検索し、paramsを使ってidを取得する。

 

今回は削除なのでビューに何かを映したいというわけではないので、インスタンス変数を使わないでただの変数を使ってtweetに代入。

 

destroyメソッドで先ほど代入した削除したいツイートのレコード(行)を削除できるらしい。

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

 

 

③ビューを編集

今回は詳細ページから削除できるようにしたいと思うので、open.html.erbを編集。

app/views/open.html.erb

link_toを使って実装。

pathはroutes.rbで指定したように#{}(式展開)を使用。

式展開に書く内容は詳細を作る時にopenアクションで書いた処理内容で情報を渡したインスタンス変数(@open_tweet)。

このインスタンス変数にはidも入ってるので、@open_tweet.idでidを取得しpathしてる。

 

ここで 注意!!!

link_toはデフォルトではHTTP動詞は 'get' なのでmethod: でdeleteを指定!

ちなみにmethodを指定しないでやってみると。。。

ビュー見る限り一見できてそうだが、削除を押して一覧へ戻るを押すと。。。

消せてない!!!

だからまた詳細へ行けちゃう!!!

https://gyazo.com/33a22e8fb3b3c9a0322020ac128928ee

 

さて、設定を戻しておきます。

<div class="tweet-show__delete">
<%= link_to '削除', "/tweets/#{@open_tweet.id}", method: :delete %>
</div>

 

 

 

 

④ビューの確認

できてるかビューで確認してみる。

https://gyazo.com/7d5d239120e3d3c91abfc5d9211d3b06

削除できてる!

↓gifが見れない方は画像でどうぞ!(gifではタイトル1の内容を削除してますが、画像ではタイトル2の方を削除してます。)

詳細へ飛んで。。。

削除を押して一覧へ戻るを押して削除されてるか確認。

なくなってる!削除できた!

 

 

 

今回はツイートを削除する機能を実装しました。

今回実装してる時気付いたのですが、このツイート機能には欠陥がありますw

次回で直していこうと思います。

 

 

 

 

 

 

 

 

以上です。

Ruby on Rails: 部分テンプレートを使って一覧ページへ戻る...chapter7

--------------------------------やったこと--------------------------------------------

①部分テンプレートを作成

②renderを使って一覧ページへ戻れるように編集

③実際に遷移するかテスト

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

部分テンプレートはヘッダーやフッターを作る時に一つのファイルに書くとごちゃごちゃと増えてしまって見にくくなってしまうし、ヘッダーやフッターはいろいろなページで使い回すことが多いので、ファイルを分けて見やすくし、メソッドを使って楽に他のファイルからフッターやヘッダーを呼び出そうというもの。

今日は練習のために部分テンプレートで一覧ページに戻るリンクを作ってそれを詳細や新規作成ページで呼び出して見たいと思います。

 

①部分テンプレートを作成

1. app/views/tweets/_back-index.html.erbを作成

部分テンプレートファイル作成はファイル名の最初に_(アンダーバー)をつけるのがルール。

 

2. _back-index.html.erbを編集

<%= link_to '一覧へ戻る', "/tweets/index" %>でも可能。

 

②renderを使って一覧ページへ戻れるように編集。

詳細ページ(open.html.erb)と新規作成ページ(new.html.erb)に↓を追加編集。

<%= render 'back-index' %>

 

open.html.erb

new.html.erb

 

renderはテンプレートを呼び出すためのメソッド。

今回は同じフォルダの中に_back-index.html.erbを作ったので、最初のアンダーバーとhtml.erbを抜いたback-indexだけをrenderの後に書きます。

 

③実際に遷移するかテスト

              

詳細はおk!

 

新規作成ページの方もおk!

https://gyazo.com/516505278af3b5b09e71a21a8addecd6

↑gifでテストしてるところが見れます。

 

 

 

今回は部分テンプレートを使う練習をしました。

次回はツイートを削除できるように実装します。

 

 

 

 

以上です。