つぶやきアプリを作ってみよう⑥

今回はツイートを編集していきます。

まずツイート編集ページへ遷移する処理をeditアクションを使って実装します。

ルーティングを設定

config/routes.rb

Rails.application.routes.draw do
https://guides.rubyonrails.org/routing.html
  root to: 'tweets#index'
  resources :tweets, only: [:index, :new, :create, :destroy, :edit]
end

editアクションへのルーティングができました。

ビューに編集ボタンと編集ページへのリンクを設定します。

app/views/tweets/index.html.erb

<div class="contents row">
  <% @tweets.each do |tweet| %>
    <div class="content_post" >
      <p><%= tweet.text %></p>
       <p><%= image_tag tweet.image.variant(resize: '500x500'), class: 'tweet-image' if tweet.image.attached?%></p>
      <span class="name">
        <%= tweet.name %>
      </span>
      <%= link_to '編集', edit_tweet_path(tweet.id), method: :get %>
      <%= link_to '削除', "/tweets/#{tweet.id}", method: :delete %>
    </div>
  <% end %>
</div>

コントローラーにeditアクションを定義しましょう。

新規投稿時と異なる点は、すでに存在しているレコードを選択して中身を上書きする点です。
編集したいレコードを@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)
  end

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

  def edit
    @tweet = Tweet.find(params[:id]) #編集したいつぶやきを取得して@tweetへ代入
  end

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

次はビューファイルの作成です。
app/views/tweetsディレクトリの中にedit.html.erbというビューファイルを作成します。

app/views/tweets/edit.html.erb

<div class="contents_form">
  <div class="container_box">
    <h3>編集する</h3>
    <%= form_with(model: @tweet, local: true) do |form|  %>
      <%= form.text_field :name, placeholder: "ニックネーム", class: 'container'%>
      <%= form.text_area :text, placeholder: "text", rows: "10", class: 'container'%>
      <%= form.file_field :image %>
      <%= form.submit "つぶやく", class: 'container'%>
    <% end %>
  </div>
</div>

次につぶやきの更新機能を実装します。

ルーティングの設定をします

つぶやきを更新する際には、/tweets/《編集するツイートのid》にPATCHメソッドでアクセスします。
tweetsコントローラーのupdateアクションが実行されるようにします。

config/routes.rb

Rails.application.routes.draw do
  root to: 'tweets#index'
  resources :tweets, only: [:index, :new, :create, :destroy,:edit,:update]
end

rails routesでパスを確認してみましょう。

PATCH        /tweets/:id(.:format)               tweets#update

とHTTPメソッドのPATCH が表示されていますね。こちらを使います。

次はコントローラーを設定します。

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)
  end

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

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

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

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

end

app/views/tweetsディレクトリの中にupdate.html.erbというビューファイルを作成します。

app/views/tweets/update.html.erb

<div class="contents row">
  <div class="success">
    <h3>更新が完了しました。</h3>
    <a class="btn" href="/">投稿一覧へ戻る</a>
  </div>
</div>

以下の挙動になっていれば成功です。