PicTweet ツイートを編集

SyosenPS

2024年5月30日 15:59

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

ツイート編集機能の実装

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

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

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

ツイート編集画面のルーティングを設定する
編集ボタンをビューに追加する
editアクションをコントローラーに定義する
編集画面のビューファイルを作成する
ツイートの更新を行うためのルーティングを設定する
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

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