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
　Tweet
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
　Tweet
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>