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

ウェブデザイン

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

この記事は、「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」のリンクが表示されます。

edit

このリンクをクリックすると、記事の編集画面に飛びます。

edit-article

ここでタイトルや内容に変更を加えて、「Update Article」をクリックすると記事の内容が変更されました。

Hello, Ruby on Rails

今回は「更新機能」をつくりました。次回は、「削除機能」を実装していきたいと思います。

この記事は、「Ruby on Rails」でブログアプリをつくるシリーズの中の記事です。過去の記録もまとめてあります。

やったことを記録する地味なシリーズですが、もしよろしければご覧ください。

ウェブデザイン
スポンサーリンク
やっぱり静岡がすきだら!