はじめに
概要
この記事では、Ruby on Railsを使用してデータの削除機能を実装する方法について学びます。Webアプリケーションでは、不要になった情報を安全に削除する機能が必要です。削除機能の作成を通じて、Railsでどのようにデータを削除し、その結果をユーザーに反映させるかを学んでいきましょう。
目標
- データ削除機能の作成手順を理解し、実装できるようになる。
- データを安全に削除するためのRailsの基本原則を把握する。
- 削除ボタンの組み込みから削除処理の実装、完了画面の作成までの一連の流れを学ぶ。
この章では、社員情報をデータベースから削除する機能の作成方法について学びます。主な目的は、社員の詳細情報画面に「削除」ボタンを配置し、ユーザーがそのボタンをクリックすることで、選択した社員情報を削除することです。
また、削除ボタンを誤ってクリックするリスクを減らすために、削除操作を実行する前に確認メッセージが表示されるようにします。
削除完了後は、以下のように削除した社員（この場合は、西本知子さん）の名前が削除完了ページに表示されるようにします。
それでは、社員情報の削除機能の実装に取り組みましょう！
1. 削除のためのルートの確認
社員情報を削除するためには、WebブラウザからDELETE /employees/:idという形式のリクエストを送信します。このリクエストは、employeesコントローラのdestroyアクションで処理されます。
destroyアクションは、リクエストに含まれる削除対象の社員情報のidを使用して、対応する社員情報をデータベースから削除します。
config/routes.rbファイルを開き、既存の社員情報を削除するためのdestroyアクションへのルートが正しく設定されていることを確認してください。
この設定により、社員情報を削除するリクエストはemployeesコントローラのdestroyアクションに対応付けられます。
2.削除ボタンのビューへの組み込み
社員の詳細情報画面に、その社員を削除するためのボタンを追加しましょう。このボタンによって、詳細画面から直接、特定の社員の情報を削除することができるようになります。
削除ボタンを設置する最適な場所は、通常、詳細情報ページ（show.html.erb）です。このページでは、個々の社員に関する具体的な情報が表示されるため、ユーザーはその社員を削除するかどうかをより慎重に決定できます。
また、一覧画面（index.html.erb）に削除ボタンを置くと、誤って削除してしまうリスクが高まります。削除ボタンは、安全性を考慮して詳細画面に設置するのが望ましいです。
削除ボタンの実装方法
削除ボタンをHTMLで作成する際、登録や更新操作と異なり、ユーザーからの追加データ入力を必要としないため、<form>タグではなく<a>タグを使用します。
通常、<a>タグは、デフォルトでGETリクエストがサーバーに送信されます。しかし、
Railsが提供するHTML属性のdata-method属性を使用することで、サーバーに特定のHTTPメソッド（例えば、DELETE）でリクエストを送ることができます。
1
<a href="送信先URL" data-method="delete">削除</a>
技術的にはリンクですが、この記事では「削除ボタン」と呼んでいます。HTMLのaタグを使用しながらも、デザインと機能性をボタンのようにしているからです。技術的な実装詳細を抽象化し、一般的な用語を使用しています。
社員詳細情報の画面に削除ボタンを設置します。show.html.erbに以下のハイライト箇所を追加してください。送信先URLは、@employeeのインスタンス変数を利用して動的に作成します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h2>社員詳細情報</h2>
<table>
<tbody>
<tr>
<th>名前</th>
<td><%= @employee.name %></td>
</tr>
<tr>
<th>生年月日</th>
<td><%= @employee.birthday %></td>
</tr>
<tr>
<th>部署</th>
<td><%= @employee.department.name %></td>
</tr>
</tbody>
</table>
<a href="/employees">社員情報一覧に戻る</a>
<div class='employee-button'>
<a href="/employees/<%= @employee.id %>" class="delete-button" data-method="delete">削除</a>
</div>
見た目を整えるために、layout.scssファイルに以下のスタイルを追加します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body {
display: flex;
flex-direction: column;
}
// ... [中略] ...
table td {
background-color: #fff2e2;
padding: 10px 20px;
}
.employee-button {
padding-top: 20px;
margin-bottom: 60px;
}
.delete-button {
background-color: #efefef;
border-radius: 4px;
color: #333;
display: inline-block;
padding: 10px 30px;
text-decoration: none;
}
form {
margin: 25px 0;
}
// ... [後略] ...
一覧画面から「西本知子」さんの「詳細情報」のリンクをクリックし、詳細画面を表示させましょう。その際に削除ボタンが設置されているのが確認できます。
削除確認の実装
削除ボタンを誤ってクリックするリスクを減らすために、削除操作を実行する前に確認メッセージが表示されるようにします。
Railsが提供するHTML属性のdata-confirm属性を使用することで、確認ダイアログを実装できます。data-confirm属性は、ボタンをクリックした際に表示される確認ダイアログのメッセージを定義します。
1
<a href="送信先URL" data-method="delete" data-confirm="本当に削除してよろしいですか？">削除</a>
上記の削除ボタンをクリックすると、「本当に削除してよろしいですか？」というメッセージが含まれる確認ダイアログがブラウザに表示されます。ユーザーが「OK」を選択すると、削除処理が進行します。
show.html.erbの<a>タグに、data-confirm属性を設定しましょう。
1
2
3
4
5
6
7
<%# ...[中略]... %>
<a href="/employees">社員情報一覧に戻る</a>
<div class='employee-button'>
<a href="/employees/<%= @employee.id %>" class="delete-button" data-method="delete" data-confirm="本当に削除してよろしいですか？">削除</a>
</div>
削除ボタンをクリックして、「本当に削除してよろしいですか？」というメッセージが含まれる確認ダイアログがブラウザに表示されることを確認しましょう。また、削除処理はまだ実装されていないので、「OK」ではなく、「キャンセル」を選択しましょう。
3.削除処理の実装と完了画面の作成
削除処理の実装
削除ボタンから送信されたリクエストを処理するためのdestroyアクションの実装方法を学びます。削除ボタンは、ユーザーが既存の社員情報を削除するための機能を提供し、これらの削除操作はdestroyアクションを通じてデータベースに反映されます。
削除処理には、ActiveRecordが提供するdestroyメソッドを利用します。削除対象のオブジェクトに対して、destroyメソッドを呼び出します。
1
削除対象のオブジェクト.destroy
このdestroyメソッドを使用する前に、findメソッドなどで削除対象のオブジェクトを取得し、その後で削除処理を行います。
例えば、usersテーブルのidが1のレコードを削除する場合、まずfindメソッドを使って対象のオブジェクトを取得します。次に、取得したオブジェクトに対してdestroyメソッドを呼び出し、データベースからそのレコードを削除します。
1
2
user = User.find(1) #削除対象のオブジェクトを取得する
user.destroy #レコードを削除する
今回は、社員の詳細画面から削除ボタンをクリックすると、削除対象の社員のIDがdestroyアクションに渡されます。Employee.find(params[:id])で削除する社員の情報を特定し、取得します。その後、destroyメソッドを呼び出すことで、その社員の情報がデータベースから削除されます。
1
2
3
4
def destroy
@employee = Employee.find(params[:id]) # 削除対象の社員を取得
@employee.destroy # 社員情報を削除
end
app/controllers/employees_controller.rbを開いて、以下のようにdestroyアクションを編集してください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class EmployeesController < ApplicationController
# ...中略
def destroy
# 特定の社員を削除する処理
@employee = Employee.find(params[:id])
@employee.destroy
end
private
def employee_params
params.require(:employee).permit(:name, :birthday, :department_id)
end
end
完了画面の作成
削除操作が完了した後、ユーザーに対してその旨を伝えるための完了画面を作成します。ここでは、削除された社員の名前を表示し、社員情報一覧ページへのリンクを提供します。
削除処理が完了した後には、ユーザーに削除が成功したことを伝えるために、削除完了のメッセージを表示します。destroy.html.erbファイルを作成し、以下のコードを追加しましょう。
1
2
3
4
5
<h2>削除完了</h2>
<p><%= @employee.name %>さんの削除が完了しました。</p>
<a href="/employees">社員情報一覧に戻る</a>
この完了画面により、ユーザーは操作が成功したことを確認でき、次のステップへと進むことができます。
まずは、一覧画面から「西本知子」さんの「詳細情報」リンクをクリックして、詳細画面を表示させましょう。その後、削除ボタンをクリックし、表示される確認ダイアログで「OK」を選択して削除しましょう。
削除後、以下のように完了ページが表示されます。削除した社員（この場合は、西本知子さん）の名前が削除完了ページに表示されます。
一覧画面でも以下のように西本知子さんの社員情報が削除されていることが確認できます。
さいごに
本記事を通じて、社員情報の削除という、Webアプリケーションにおけるデータ削除方法の基本について学びました。削除ボタンの実装から、データの安全な削除、削除完了後の画面表示まで、データ削除機能の一連の流れを理解しました。これにより、ユーザーにとって使いやすく、安心して情報を管理できるシステムを提供できるようになります。
この記事のまとめ
- destroyアクションは、リクエストに含まれる削除対象の社員情報のidを使用して、対応する社員情報をデータベースから削除する
- 削除にはユーザーからの追加データ入力を必要としないため、formタグではなく、aタグを使用する
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します