ユーザー情報の編集機能実装

ユーザー情報編集機能の実装

今回はユーザー情報の編集機能を実装していく。最終的な表示が下記のようになる。（今回はレイアウト調整しないため、不恰好な表示となる。）

作業の流れとしては下記の手順で行う。

コントローラのアクションを記述
ルーティングの確認
ビューの作成
動作確認

コントローラのアクションを記述

今回はusers_controllerのeditアクションとupdateアクションに記述していく。

app/controllers/users_controller.html.erb

  def edit
    @user = User.find(params[:id])
  end

  def update
    @user = User.find(params[:id])
    @user.update(user_params)
    redirect_to user_path(@user)
  end

  private

  def user_params
    params.require(:user).permit(:name, :introduction, :profile_image)
  end

解説) @user = User.find(params[:id])

URLのIDを取得し、同じIDのuser情報を取得し、@userへ代入する。

@user.update(user_params)

データベースのuser情報を更新する。

redirect_to user_path(@user)

更新したユーザーのusers/show画面に遷移する。

def user_params params.require(:user).permit(:name, :introduction, :profile_image) end

ストロングパラメータ

params ... formから送られてきたデータがparamsに入っている。

require ... 送られてきたデータをモデル名を指定し、データの絞り込みを行う。（ここではuser）

permit ... requireで絞り込みを行ったデータの中から保存を許可するカラムを指定。

まとめると、保存するデータを指定したモデルのカラムに制限しているということ。

ルーティングの確認

ルーティングにusersのeditとupdateが記述されているか確認する。

config/routes.rb(userの記述のみ抜粋)

resources :users, only: [:index, :show, :update, :edit]

上記のように記述されていれば問題ない。抜けていた場合、追記する。

ビューの作成

app/views/users/edit.html.erb

<div>
  <div>
    <div>
      <h2>User info</h2>
      <%= form_with model: @user do |f| %>
        <div>
          <%= f.label :name %>
          <%= f.text_field :name, autofocus: true, id:"inputName" %>
        </div>
        <div>
          <%= f.label :profile_image, "Image" %>
          <%= f.file_field :profile_image, accept: "image/*" %>
        </div>
        <div>
          <%= f.label :introduction %>
          <%= f.text_area :introduction, autofocus: true, id:"inputIntroduction" %>
        </div>
        <div>
          <%= f.submit "Update User" %>
        </div>
      <% end %>
    </div>
  </div>
</div>

動作確認

下記の動作を確認する。

user情報のリンクボタンから、edit画面にリンクが遷移する。
edit画面のビュー表示が問題なく表示されている。
user情報の更新が問題なくできる。(name, profile_image, introduction)
更新後の遷移先がuserのshow画面に遷移している。

以上。

アプリケーションの作成参考URL　作成するアプリケーションについて - takifugu’s blog