Ruby on rails を初心者向けに解説⑤ ~データベースの編集と削除~

#はじめに
今回は以前の記事の続きになります。

よろしければ、以前の記事も御覧ください。


[Ruby on rails を初心者向けに解説①](https://qiita.com/renesisu727/items/c81e29c619dbd4b5ea76)

[Ruby on rails を初心者向けに解説②　~リンクの作成~](https://qiita.com/renesisu727/items/d729616473981e763fdd)

[Ruby on rails を初心者向けに解説③　~データベースの作成~](https://qiita.com/renesisu727/items/c647582a59cfd7bf0a98)

[Ruby on rails を初心者向けに解説④ ~命名規則とform_Tagの使い方について~](https://qiita.com/renesisu727/items/f0f3de5377358f8768ed)

##データベースのデータ一覧の表示
以下のコードでusersテーブルのデータを取得して表示しましょう。

```index.html.erb
 <% @users.each do |user| %>
   <p>name</p>
   <div class="ruby-name"><%= user.name %></div>
 <% end %>
```

インスタンス変数@usersを使用するために、コントローラ内で渡しています。

```users_controller.rb
def index
  @users = User.all
end
```

以下のような画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/89a36eab-174b-6fca-4db7-b21d218eb8b0.png)

また、以下のようにcssを指定しています。

```users.scss
.ruby-name {
    color: purple;
    display: inline-block;
    font-weight: bold;
}
```



##データベースの削除
それではデータベースの削除を実装してみましょう。

以下のようにコードを書き換えてください。

```index.html.erb
 <% @users.each do |user| %>
   <p>name</p>
   <div class="ruby-name">
     <%= user.name %>
     <%= link_to("削除", "/users/#{user.id}/destroy", {method: "post"})%>
   </div>
 <% end %>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/1e570823-a07b-2aff-e274-472a62cc7eb9.png)

削除ボタンをクリックすると、要素を削除することができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/86657d04-560c-d9b0-e1ca-89a0bd05fb71.png)

具体的な処理を見ていきましょう。index.html.erbに、以下のコードが追記されています。

```
<%= link_to("削除", "/users/#{user.id}/destroy", {method: "post"})%>
```

これにより、削除をクリックすると、第二引数の処理が実行されます。

第二引数の"/users/#{user.id}/destroy"は、usersコントローラーのdestroyアクションへのルーティングに、データベースのidを含めたものになっています。このようにURLを指定することで、コントローラーは削除したいデータベースのidを受け取ることができます。

第三引数は、これがgetリクエストではなく、postリクエストであることを指定しています。

以下のようにルーティングしてください。

```routes.rb
post "users/:id/destroy" => "users#destroy"
```

:id の部分は、任意の数字を受け取ることができます。受け取った数字は、usersコントローラーにおいて、`params[:id]`の中に格納されます。

以下のようにコントローラーをコーディングしてください。

```users_controller.rb
def destroy
  user = User.find_by(id: params[:id])
  user.destroy
  redirect_to("/users/index")
end
```

`user = User.find_by(id: params[:id])`の部分で、データベースからモデルを使ってデータを抜き出します。index.html.erbから送られてきたidと同じidのデータをデータベースから抜き出し、userに格納します。

`user.destroy`の部分でそのデータを削除しています。

`redirect_to("/users/index")`の部分で、index.html.erbにリダイレクトしています。今回は、index.html.erbから削除リンクをクリックしたときの動作であるので、リロードになります。

ここまでで、データベースからデータを削除することができました。

##データベースの編集
次はデータベースの編集を行っていきましょう。

次のように`index.html.erb`を編集してください。

```index.html.erb
 <% @users.each do |user| %>
   <p>name</p>
   <div class="ruby-name">
     <%= user.name %>
     <%= link_to("削除", "/users/#{user.id}/destroy", {method: "post"})%>
     <%= link_to("編集", "/users/#{user.id}/edit") %>
   </div>
 <% end %>
```

今回新たに追加されたのは`<%= link_to("編集", "/users/#{user.id}/edit") %>`の部分です。

これにより、新たに`users/edit`というviewファイルへ移動します。

そのときに、そのviewファイルに編集したいデータベースのidを渡すことになります。

次のようにルーティングしてください。

```routes.rb
get "users/:id/edit" => "users#edit"
```

次のパスに以下のviewファイルを準備してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/884f4aa2-edf9-9626-3f57-f53164e47e70.png)

```edit.html.erb
<%= form_tag("/users/#{@user.id}/update") do  %>
  <input type="text" value="<%=@user.name%>" name="new_name">
  <input type="submit" value="送信">
<% end %>
```

試しに以下のindex.html.erbファイルの編集と書いてある部分をクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/97e6fbfd-930b-d648-553b-bb645b7ad7bc.png)

以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/78412950-2bee-1039-dec8-edb3b5f71f59.png)

ここで、edit.html.erbファイルについての解説です。

`form_tag("/users/#{@user.id}/update")`の部分で、どのコントローラーのどのアクションを使うかを指定しています。

今回は、usersコントローラーのupdateアクションを使用します。また、データベースの編集を行うため、編集したいデータベースのidも送ります。form_tagはpostリクエストになるのでしたね。

`<input type="text" value="<%=@user.name%>" name="new_name">`の部分で、inputタグの初期値と名前を設定しています。`@user`はusersコントローラーのeditアクションから送られてきたものです。

```users_controller.rb
def edit
  @user = User.find_by(id: params[:id])
end
```

`@user`には、データベースからidに応じて探してきた値が格納されています。

それでは、下のように値を変更して送信してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/4f918479-06b3-70dc-2fac-6efea5970dd2.png)

そうすると、以下のルーティングにより、usersコントローラーのupdateアクションが実行されます。

```routes.rb
post "users/:id/update" => "users#update"
```

```users_controller.rb
def update
  user = User.find_by(id: params[:id])
  user.name = params[:new_name]
  user.save
  redirect_to("/users/index")
end
```

updateアクション内では、送られてきたidに応じてデータベースからデータを探索し、ローカル変数userに格納した後、nameカラムのデータを送られてきた新しい名前に書き換えて、`user.save`でセーブした後に、`/users/index`にリダイレクトしています。

そのため、以下のように変化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/e558011b-80d5-f052-b1bb-dfe0514649d5.png)

#終わりに
ここまでで今回の記事は終了です。

お付き合い頂きありがとうございました。

よろしければ以下の記事も御覧ください。


[Ruby on rails を初心者向けに解説⑥　~バリデーションの作成~](https://qiita.com/renesisu727/items/cee8bbea1147ff78b72d)

[Ruby on rails を初心者向けに解説⑦　~フラッシュの実装~](https://qiita.com/drafts/fd36234d669283c87048/edit)