A

プログラミングの学習記録

【本日の学習内容:Rails課題2】

CRUD処理を実装したアプリの作成を進めました。

 

--削除機能の実装--

✅一覧表示の画面(index.html.erb)に削除ボタンを作る。

 

<%= link_to "投稿画面へ", "/users/new"%>

<%# @usersには(User.allによって)userテーブルから取得してきた全てのデータが配列になって入っている %>

<% @users.each do |user| %>

<p>

<%= user.name %>

<%= user.age %>

<%# data: {confirm: "削除しますか?"}とすると、削除ボタンを押したときにポップアップが出る %>

<%= link_to "削除", "/user/#{user.id}", method: :delete, data: {confirm: "削除しますか?"} %>

</p>

<% end %>

 

✅削除ボタンに対応するルーティングを書く

 

Rails.application.routes.draw do

  # 一覧画面へのルーティング

  get '/users', to: 'users#index'

 

  # 新規投稿画面へのルーティング

  get '/users/new', to: 'users#new'

 

  # 新規登録するためのルーティング

  # <%= form_with model:@user, url: "/users", method: :post, local: true do |f| %>と対応している

  post '/users', to: 'users#create'

 

  # 削除を行うためのルーティング

  # :idは変数のようなものだと思う

  # 削除ボタンを押したときに飛んでくるhttp://localhost:3000/user/1

  # などの最後の数字(特定のレコードのid)が:idに代入される

  delete '/users/:id' to: 'users#destroy'

end

 

ここでdeleteなどのメソッドの使い分けを確認!

ただページを遷移するだけならgetを使用するが、それ以外は行いたい処理に合わせてHTTPメソッドを変更する必要がある。

ここで一通り、どんなHTTPメソッドがあるか確認しよう。

HTTPメソッド

用途

パス

コントローラ#アクション

GET

一覧表示

/users

users#index

GET

データ登録画面

/users/new

users#new

POST

データ登録

/users

users#create

DELETE

データ削除

/users/:id

users#destroy

PATCH/PUT

データ更新

/users/:id

users#update

 

✅該当するユーザーのデータを削除する処理をコントローラに書く

HTTPメソッドはdeleteだが、usersコントローラのアクションはdestroyであることに注意。

 

class UsersController < ApplicationController

  # 一覧画面に対応するアクション

  def index

    @users = User.all

  end

 

  # 新規登録画面に対応するアクション

  def new

    # Userモデルのオブジェクトを作り、インスタンス変数に格納する

    @user = User.new

  end

 

  def create

    # String Parameter の記述

    # user_paramsメソッドで指定した条件を満たしたら、データベースのUserテーブルにデータが追加される

    User.create(user_params)

  end

 

  def destroy

   # :id番目のレコードをデータベースから取りだし、deleteメソッドで削除する

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

    user.delete

  end

 

  # UsersControllerの中でしか使わないメソッドはprivateのしたに記述する

  private

  def user_params

    # この記述により、 user のパラメータに紐づいた name や age しかデータベースに登録できないようになる

    params.require(:user).permit(:name, :age)

  end

 

end

 

上のコードに関して、 destroy アクションでインスタンス変数( @user など@マークのついた変数)を使用しない理由は、ビューにデータを受け渡す必要はないから。

destroy メソッドでは、ユーザーの情報を消すだけなので、ビューにデータを受け渡す必要はない。

そのためインスタンス変数を使用せず、 user に対して destroy メソッドを実行している。

 

✅対応するビューを書く

views/users ディレクトリにある destroy.html.erb に以下のコードを追加する。

 

--編集機能の実装--

編集機能を実装する際も、基本的には destroy と感覚は同じ。

該当するユーザーデータのidパラメータを飛ばし、それをコントローラで受け取ってupdateメソッドを実行するだけ!

✅一覧画面に編集ボタンを作る

 

<%= link_to "投稿画面へ", "/users/new"%>

<%# @usersには(User.allによって)userテーブルから取得してきた全てのデータが配列になって入っている %>

<% @users.each do |user| %>

<p>

<%= user.name %>

<%= user.age %>

<%= link_to "編集", "/users/#{user.id}/edit", method: :get %>

<%# data: {confirm: "削除しますか?"}とすると、削除ボタンを押したときにポップアップが出る %>

<%= link_to "削除", "/users/#{user.id}", method: :delete, data: {confirm: "削除しますか?"} %>

</p>

<% end %>

 

✅編集画面へ遷移するためのルーティングを書く

Rails.application.routes.draw do

  # 一覧画面へのルーティング

  get '/users', to: 'users#index'

 

  # 新規投稿画面へのルーティング

  get '/users/new', to: 'users#new'

 

  # 新規登録するためのルーティング

  # <%= form_with model:@user, url: "/users", method: :post, local: true do |f| %>と対応している

  post '/users', to: 'users#create'

 

  patch '/users/:id', to: 'users#update'

 

  # 削除を行うためのルーティング

  # :idは変数のようなものだと思う

  # 削除ボタンを押したときに飛んでくるhttp://localhost:3000/user/1

  # などの最後の数字(特定のレコードのid)が:idに代入される

  delete '/users/:id', to: 'users#destroy'

end

 

✅コントローラーに、編集対象となるユーザーのデータを取得するための処理を書く

class UsersController < ApplicationController

  # 一覧画面に対応するアクション

  def index

    @users = User.all

  end

 

  # 新規登録画面に対応するアクション

  def new

    # Userモデルのオブジェクトを作り、インスタンス変数に格納する

    @user = User.new

  end

 

  def create

    # String Parameter の記述

    # user_paramsメソッドで指定した条件を満たしたら、データベースのUserテーブルにデータが追加される

    User.create(user_params)

  end

 

  def edit

     # :id番目のレコードをデータベースから取りだす

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

  end

 

  def destroy

    # :id番目のレコードをデータベースから取りだし、deleteメソッドで削除する

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

    user.delete

  end

 

  # UsersControllerの中でしか使わないメソッドはprivateのしたに記述する

  private

  def user_params

    # この記述により、 user のパラメータに紐づいた name や age しかデータベースに登録できないようになる

    params.require(:user).permit(:name, :age)

  end

 

end

 

✅ビューを書く

 

<p>更新</p>

<%= form_with model: @user, url: "/users/#{@user.id}", method: :patch, local: true do |f| %>

  <p><%= f.text_field :name %></p>

  <p><%= f.text_field :age %></p>

<%= f.submit "送信" %>

<% end %>

 

✅編集完了画面へのルーティングを書く

 

Rails.application.routes.draw do

  # 一覧画面へのルーティング

  get '/users', to: 'users#index'

 

  # 新規投稿画面へのルーティング

  get '/users/new', to: 'users#new'

 

  # 新規登録するためのルーティング

  # <%= form_with model:@user, url: "/users", method: :post, local: true do |f| %>と対応している

  post '/users', to: 'users#create'

 

  get '/users/:id/edit', to: 'users#edit'

 

  patch '/users/:id', to: 'users#update'

 

  # 削除を行うためのルーティング

  # :idは変数のようなものだと思う

  # 削除ボタンを押したときに飛んでくるhttp://localhost:3000/user/1

  # などの最後の数字(特定のレコードのid)が:idに代入される

  delete '/users/:id', to: 'users#destroy'

end

 

✅users コントローラにデータを更新するための update アクションを追加する

class UsersController < ApplicationController

  # 一覧画面に対応するアクション

  def index

    @users = User.all

  end

 

  # 新規登録画面に対応するアクション

  def new

    # Userモデルのオブジェクトを作り、インスタンス変数に格納する

    @user = User.new

  end

 

  def create

    # String Parameter の記述

    # user_paramsメソッドで指定した条件を満たしたら、データベースのUserテーブルにデータが追加される

    User.create(user_params)

  end

 

  def edit

     # :id番目のレコードをデータベースから取りだす

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

  end

 

  def update

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

    # user_paramsメソッドで指定した条件を満たしたら、データベースのUserテーブルにデータが更新される

    user.update(user_params)

  end

 

  def destroy

    # :id番目のレコードをデータベースから取りだし、deleteメソッドで削除する

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

    user.delete

  end

 

  # UsersControllerの中でしか使わないメソッドはprivateのしたに記述する

  private

  def user_params

    # この記述により、 user のパラメータに紐づいた name や age しかデータベースに登録できないようになる

    params.require(:user).permit(:name, :age)

  end

 

✅ビューを書く

view/users ディレクトリに update.html.erb を作成し、以下のコードを記述する。

<h1>更新完了</h1>

<%= link_to "一覧画面へ", "/users" %>

 

 

 

 

これでCRUD処理の実装終了!