PicTweet ツイートを編集

CRUDのU（UPDATE）を体験す
HTTPメソッドのPATCHを体験
editアクションの処理を理解
updateアクションの処理を理解

ツイート編集機能の実装

ツイートの編集機能を実装します。ツイートの編集は、7つのアクションのうち以下の2つが該当します。

index一覧表示
show詳細表示
new生成
create保存
edit編集
update更新
destroy削除

編集を行う際には編集ページを用意して、そのページから編集を行うようにします。

1. ツイート編集画面のルーティングを設定する

2. 編集ボタンをビューに追加する

3. editアクションをコントローラーに定義する

4. 編集画面のビューファイルを作成する

5. ツイートの更新を行うためのルーティングを設定する

6. updateアクションをコントローラーに定義する

新規投稿とほぼ同じだね！

editアクションのルーティングを設定

config/routes.rb　ファイルへ
Rails.application.routes.draw do
root to: 'tweets#index'
resources :tweets, only: [:index, :new, :create, :destroy, :edit]　　←ここ
end

編集ボタンを投稿一覧に追加しよう

削除ボタンと同じように、link_toメソッドを使用

index.html.erbを編集

app/views/tweets/index.html.erb　ファイルへ
<div class="contents row">
<% @tweets.each do |tweet| %>
<div class="content_post" style="background-image: url(<%= tweet.image %>);">
<div class="more">
<span><%= image_tag 'arrow_top.png' %></span>
<ul class="more_list">
<li>　　←ここ
<%= link_to '編集', edit_tweet_path(tweet.id) %>　　←ここ
</li>　　←ここ
<li>
<%= link_to '削除', tweet_path(tweet.id), data: { turbo_method: :delete } %>
</li>
</ul>
</div>
<p><%= tweet.text %></p>
<span class="name">
<%= tweet.name %>
</span>
</div>
<% end %>
</div>

確認用URL
http://localhost:3000/tweets

editアクションをコントローラーに定義

tweetsコントローラーにeditアクションを定義

新規投稿時と異なる点は、編集→更新の場合はすでに存在しているレコードを選択して中身を書き換えるという点
そのため、editアクションでは編集したいレコードを@tweetに代入し、ビューに受け渡すことで編集画面で利用できるように

つまり、以下のようにform_withで使用する@tweetを中身が入った状態にしておくということ！

でた！インスタンス変数＠

app/controllers/tweets_controller.rb　ファイルへ
class TweetsController < ApplicationController

def index
@tweets = Tweet.all
end

def new
@tweet = Tweet.new
end

def create
Tweet.create(tweet_params)
redirect_to '/'
end

def destroy
tweet = Tweet.find(params[:id])
tweet.destroy
redirect_to root_path
end

def edit　　←ここ
@tweet = Tweet.find(params[:id])　　←ここ
end　　←ここ

private
def tweet_params
params.require(:tweet).permit(:name, :image, :text)
end
end

編集画面のビューを作成

HTTPメソッド
GET
サーバーからブラウザに情報を返す。単にウェブサイトを閲覧する際など、情報を取得するために利用される。

POST
ブラウザからサーバーに情報を送信し、サーバーに情報を保存する。情報を登録する際など、サーバーに情報を送信するために利用される。

DELETE
ブラウザからサーバーに情報を送信し、サーバーの情報を削除する。アカウントを削除する際など、サーバー内のデータを削除するために利用される。

PATCH
ブラウザからサーバーに情報を送信し、サーバー内の情報を置き換える。登録情報を更新する際など、サーバー内のデータを更新するために利用される。

※フォームの初期値として、「編集前のツイート情報」を表示

edit.html.erbを作成

app/views/tweets/edit.html.erb　ファイルへ
<div class="contents row">
<div class="container">
<h3>編集する</h3>
<%= form_with(model: @tweet, local: true) do |form| %>
<%= form.text_field :name, placeholder: "Nickname" %>
<%= form.text_field :image, placeholder: "Image Url" %>
<%= form.text_area :text, placeholder: "text", rows: "10" %>
<%= form.submit "SEND" %>
<% end %>
</div>
</div>

確認用URL
http://localhost:3000/tweets/2/edit

編集してもまだ反映されないよ

ツイート更新処理の実装

いよいよ
編集作業の第二段階である、テーブルのデータを更新する処理

updateアクションのルーティングを設定

tweetsコントローラーのupdateアクションが実行

config/routes.rb　ファイルへ
Rails.application.routes.draw do
root to: 'tweets#index'
resources :tweets, only: [:index, :new, :create, :destroy, :edit, :update]　←ここ
end

updateアクションをコントローラーに定義

app/controllers/tweets_controller.rb　ファイルへ
class TweetsController < ApplicationController

def index
@tweets = Tweet.all
end

def new
@tweet = Tweet.new
end

def create
Tweet.create(tweet_params)
redirect_to '/'
end

def destroy
tweet = Tweet.find(params[:id])
tweet.destroy
redirect_to root_path
end

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

ここから
def update
tweet = Tweet.find(params[:id])
tweet.update(tweet_params)
redirect_to root_path
end
ここまで

private

def tweet_params
params.require(:tweet).permit(:name, :image, :text)
end
end

インスタンス変数は使用しない
ビューファイルへツイート情報を受け渡す必要がないため

確認用URL
http://localhost:3000/tweets

新規投稿　@tweet  が空
 new　
つまり、
＠tweet=tweet .newの時は
勝手に
create アクションを選択してくれる！

編集は　@tweet  に何か入ってる
 
つまり、
＠tweet=tweet .find(・・・id)の時は
勝手に
update アクションを選択してくれる！

modelってすごいね。いちいちリンク貼らなくても振り分けしてくれる！