【初心者用】Ruby on Railsの勉強【編集機能の実装の仕方】

プログラミング プログラミング

今回はRailsにおける編集の仕方について学んでいきたいと思います。

一度、投稿したものを再編集したい時ってありますよね。そんな時に役立つのがCRUDのU(UPDATE)です。CRUDってなんぞ?って人は別記事にて解説していますのでご覧になってください。

【初心者用】Ruby on Railsの勉強【CRUDとindexアクション】
今回はCRUDとindexアクションについての記事です。indexアクションの種類と役割などをみていきましょう。※この先、コードの記述の際に「モデル名」と書いてあるところは自分で設定したファイルやモデル名になります。...

 

本記事の内容は

  • CURDの(UPDATE)について学ぶ
  • HTTPメソッドの1つPATCHを学ぶ
  • editアクションの使用方法
  • updateアクションの使用方法

 

それでは早速みていきましょう。

 

編集機能を実装するためのアクション

編集機能を実装するためのアクションはeditとupdateです。行う処理の形としては以下の通り。

  1. 編集画面のルーティングを行う
  2. 編集するためのボタンをビューに追加する
  3. editアクションをコントローラーに定義する
  4. 編集を行うための画面をビューファイルで作成する
  5. 更新するためのルーティングを設定する
  6. 更新(update)アクションをコントローラーに定義する
  7. 更新完了画面を用意する

 

新規投稿する際とかなり似ています。流れはこんな感じです。

editアクションの流れ

 

編集ページを作る

 

✔︎editアクションのルーティング方法

データを編集するためにはまず、編集画面にアクセスしなければなりません。編集画面にアクセスされた時のルーティングを作ります。

以下のように編集するとeditアクションのルーティングが行えます。

routes.rbにresourcesメソッドを用いて記述しましょう。resources :モデル名, only: [:edit]という感じです。

resourcesメソッドがわからないという人は別記事(CRUDとは)にて解説していますのでそちらをご覧ください。
>>【初心者用】Ruby on Railsの勉強【CRUDとindexアクション】

これでルーティングは完了です。

 

 

✔︎編集ボタンをトップページ(一覧表示)に追加しよう

リンクを追加したい場合はlink_toメソッドを使用します。また、今回は遷移先をPrefixにて指定します。Prefixがわからない場合は別記事にて解説しているの参照ください。

link_toメソッドの使い方は<%= link_to ‘編集’, edit_Prefix名_path(テーブル名.id), method: :get %>といった感じです。
使用するHTTPメソッドはgetです。以上のように記述することでテーブルの中の1つのカラムに対してデータを新しく送信といった命令になっています。

 

自分の作っているアプリに導入して編集ボタンが作成されたか確認してみましょう。

 

 

✔︎editアクションをコントローラーに定義しよう

今回、行う「編集して更新(edit→update)」となっています。新規投稿する際の「入力して投稿(new→create)」の流れに似ていますね。この流れは他のアクションでも使用しますので覚えておきましょう。異なる点は新規投稿する場合は全てのデータに対して更新しますが、今回は1つのデータに対して更新をかけているという点です。以下のように編集してみましょう。

 

def edit

 @~~(インスタンス変数を作成。モデル名を使うのが一般的) = モデル名.find(params[:id])

 end

 

今回、Active Recordメソッドはfindを使用しています。これで1つのデータに対して命令を下すことが可能です。トップページの更新など全てのデータに対して行うときはallを使用します。

 

✔︎編集画面を用意しよう

更新したい情報を入力するためのフォームが必要なので編集用の画面を作ります。新しいビューファイルを用意しましょう。今回はデータを送信するのでPATCHというHTTPメソッドを用います。PATCHメソッドの。

PATCH ブラウザからサーバーに情報を送信し、サーバー内の情報を置き換える。登録情報を更新する際など、サーバー内のデータを更新するために利用される。

 

新しいビューファイルを作成しましょう。ビューファイルのレイアウトはなんでもいいですが必要な情報が入力できるようにしましょう。

例えばこんな感じでform_withメソッドを使用して入力フォームを作成します。

     <%= form_with(model: @~~(コントローラーで定義した変数名), local: true) do |form| %>
      <%= form.text_field :name, placeholder: "name" %>
      <%= form.text_area :text, placeholder: "text" %>
      <%= form.submit "送信" %>
    <% end %>

これで名前と文章を書くことができるフォームが出来上がります。他にも数字やURLなどの情報を入力したい場合は追加して書きましょう。

 

 

更新処理を実装しよう

 

更新情報を入力できるところまで完成しました。次は入力した情報を送信した場合、どんな処理を行うかを決めていきます。

updateアクションの処理

 

✔︎updateアクションのルーティングを設定する

resources :モデル名, only: [:edit, :update]

上記のように編集することでルーティングが行えます。

 

✔︎コントローラーにupdateアクションを定義しよう

class 〜〜〜Controller < ApplicationController

  def edit
    @~~ = モデル名.find(params[:id])
  end
  def update
     ~~ = モデル名.find(params[:id])
     ~~.update(テーブル名_params)
  end

end

このアクションはeditアクションのようにビューファイルに情報を受け渡す必要がないのでインスタンス変数を使用しません。上記の記述によりテーブルの1つのデータを指定して更新をかけるという意味になります。

 

✔︎更新完了画面のビューファイルを作成する

ビューファイルに関しては好きなように作ってください。大きな文字で「更新完了」といったものと「トップに戻る」みたいな意味合いのボタンさえあればOKです。トップに戻るリンクも忘れずに設定しましょう。

 

これで編集機能の実装が完成します。機能実装の流れは分かったでしょうか。今後もRailsの機能追加についての記事作成をしていきますのでご覧になってください。最後まで読んでいただきありがとうございました。

Follow me!

コメント

PAGE TOP
タイトルとURLをコピーしました