｢Ruby on Rails｣でブログアプリをつくる⑩Updateについて

ウェブデザイン

2021.10.12

前回は、｢CRUD｣の｢Create｣にあたる部分を実装してきましたが、今回は｢Update(更新)｣にあたる部分についてやっていきます。

｢Ruby on Rails｣でブログアプリをつくる⑨｢Create｣機能について

この記事は、｢RAILS GUIDE｣を見ながらブログアプリを制作するシリーズの中の記事です。解説などをしているわけではなく、ただやったことを記録しているメモのようなシリーズですが、ご覧いただければと思います。

｢Update｣機能について

更新のプロセスは次の通りです。

｢Update｣のプロセス

1
ユーザーがデータを編集するためのフォームをリクエストする
2
ユーザーがフォームを送信する
3
エラーがない場合はリソースが更新される。エラーがある場合は、フォームがエラーメッセージとともに再表示され、また1からプロセスが繰り返される。

このプロセスは、｢edit｣と｢update｣アクションによって処理されます。｢app/controllers/articles_controller.rb｣に以下のコードを追加していきます。

class ArticlesController < ApplicationController
  def index
    @articles = Article.all
  end

  def show
    @article = Article.find(params[:id])
  end

  def new
    @article = Article.new
  end

  def create
    @article = Article.new(article_params)

    if @article.save
      redirect_to @article
    else
      render :new
    end
  end

  def edit
    @article = Article.find(params[:id])
  end

  def update
    @article = Article.find(params[:id])

    if @article.update(article_params)
      redirect_to @article
    else
      render :edit
    end
  end

  private
    def article_params
      params.require(:article).permit(:title, :body)
    end
end

｢update｣アクションでは、検証と更新に成功すると記事のページにリダイレクトします。失敗すると、レンダリングしてエラーメッセージとともにフォームを再表示します。

パーシャルを使ってビューコードを共有する

｢edit｣フォームと｢new｣フォームは似ているので、パーシャルを使ってビューコードを共有します。

パーシャルとは、

部分テンプレートまたはパーシャルは、出力を扱いやすく分割するための仕組みです。パーシャルを使用することで、ビュー内のコードをいくつものファイルに分割して書き出し、他のテンプレートでも使いまわすことができます。
Railsガイド

｢app/views/articles/_form.html.erb｣に以下のコードを記述します。

<%= form_with model: article do |form| %>
  <div>
    <%= form.label :title %><br>
    <%= form.text_field :title %>
    <% article.errors.full_messages_for(:title).each do |message| %>
      <div><%= message %></div>
    <% end %>
  </div>

  <div>
    <%= form.label :body %><br>
    <%= form.text_area :body %><br>
    <% article.errors.full_messages_for(:body).each do |message| %>
      <div><%= message %></div>
    <% end %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>

このコードは、｢app/views/articles/new.html.erb｣で｢@article｣と記述されている部分が｢article｣に変更されているだけで、あとは同様のコードになっています。記事をコントローラーアクションで設定されたインスタンス変数としてではなく、ローカル変数としてパーシャルに渡しています。

｢app/views/articles/new.html.erb｣を更新すると、｢Edit｣のリンクが表示されます。