rails6で超シンプルなCRUDの実装

# はじめに
railsの環境構築で苦戦しどうにかこうにかrailsのトップページが表示できた後、達成感と同時に「で、どうやってWebアプリ作ればいいの?」という気持ちになりましたので、CRUD実装までをまとめました。



# 前提
本記事ではrails環境の構築は取り上げません。
database.ymlの設定なども済んでいる状態で進めます。

# 環境

```zsh

$ sw_vers
ProductName:	macOS
ProductVersion:	11.4
BuildVersion:	20F71
$ ruby -v
ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [x86_64-darwin20]
$ rails -v
Rails 6.1.4
$ rbenv -v
rbenv 1.1.2
$ ruby-build --version
ruby-build 20210611
$ mysql --version
mysql  Ver 8.0.25 for macos11.3 on x86_64 (Homebrew)
 
```

# 概要
超シンプルなTodoアプリを作ります。（というかただただDBに対してCRUDの処理を行うだけです。）
本当にCRUDのところだけですのでログイン機能なども作りません。

- 設計
- 準備
    - model
    - view
    - controller
- CRUDの実装
    - Read
    - Create
    - Update
    - Delete




# 設計
今回やるTodoアプリで実装するCRUDの処理は以下の通り
Create:Todoを作成する処理
Read:Todoを表示する処理
Update:Todo内容を変更する処理
Delete:Todoを削除（完了)する処理

それぞれDBを操作するSQL文に置き換えるとこう
C:Todoの作成 => INSERT文
R:Todoの表示 => SELECT文
U:Todo内容の変更 => UPDATE文
D:Todoの削除 => DELETE文

完成図はこう

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/022cbbcc-8dab-f19f-5d63-09401a18d764.png">



クライアントのリクエストに対してレスポンスを返すという基本的な流れは左側の部分。
DBに対して何かしらの操作(CRUD）が必要な場合はControllerがModelを呼び出してグレーの部分の処理を行います。





# 実装
CRUDの前にまずは、クライアントからのリクエストに対して静的なページを返すところまで作成します。
図にするとこう。グレーのところは通りません。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/38f90fcb-2b21-2c50-52d5-e5b57f4d63e8.png">





## Viewの作成
Viewの作成では<font color="Magenta">index.html.erb</font>の作成/todo_controller.rbの作成/routes.rbの編集を行います。
要はユーザのアクセスに対して適切なhtmlを表示するためのに必要なものをここで作ります。



### index.html.erbの作成
まずはこのコマンドを実行します。 ※以降出てくるコマンドは全てrails newで作成または実行したディレクトリの直下で実行しています。

```zsh
$ rails g controller todo
```
これを実行することでhtmlを作成するためのフォルダがapp/view/配下に作成されます。(Controllerも作成されますが、編集するのは次です。)
app/view/todo　配下に表示するhtmlファイルを作成します。

```zsh
$ touch app/views/todo/index.html.erb
```

railsでhtmlを書くときはerbという拡張機能を用いて書きます。(haml、slimもありますが今回はerbを使います。)
通常のhtmlと何が違うかというとざっくり以下の通り。


- 拡張子が違う
html.erbという拡張子になっています。

- htmlの中にrubyの記述ができる。
htmlはそのまま使うと決まった内容しか返せませんが、html.erbだと特殊なタグで囲むことによってrubyを記述することができます。
つまり、controllerで処理した結果を変数で表示したりDBの内容をループして表示したり、if文を用いた条件分岐で表示させる内容を切り替えたりできます。
まず最初はviewを表示することを考えましょう。その後にerbの記述をしていきます。


```html:index.html.erb
<h1>TOPページ</h1>
```

これだけです。
通常のhtmlで記載するhtmlやbodyタグは？と思われるかと思いますが、これだけでOKです。
(application.html.erbとyeldというタグについて調べると理解できるかと思います。)
以上で<font color="Magenta">index.html.erb</font>の作成は完了です。

### controller_todo.rbの作成と編集
<font color="Magenta">index.html.erb</font>を作成しただけではrailsはそのファイルをユーザにレスポンスとして返してはくれません。
Controllerに<font color="Magenta">index.html.erb</font>を返す処理を記載する必要があります。
Controllerは先程の「rails g controllerコマンドで作成されていて app/controllers/配下に<font color=“Crimson">todo_controller.rb</font>
があります。
ここに先程作成したindex.html.erbを表示する処理を記述します。
記載の内容は以下の通り

```ruby:app/controllers/todo_controller.rb

class TodoController < ApplicationController
    
    def index #追記

    end #追記

end


```

indexというメソッドを記述するだけです。内容はなくてもOKです。
こうすることでviewフォルダ配下の<font color="Magenta">index.html.erb</font>を返してくれます。

### routes.rbの編集
これで<font color="Magenta">index.html.erb</font>を表示する処理がかけましたが、まだユーザは<font color="Magenta">index.html.erb</font>にたどり着くことはできません。
なぜなら、<font color=“Crimson">todo_controller.rb</font>のindexメソッドにアクセスするためのルートがないからです。
ルートはconfig配下の<font color="DodgerBlue">routes.rb</font>に記載します。

```ruby:config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

  get '/todo', to: "todo#index", as: "top"  #追記

end


```
こうすることで、http://[railsのip]:[port]/にgetリクエストをした時に<font color=“Crimson">todo_controller.rb</font>のindexメソッドにルーティングされます。<font color="DodgerBlue">routes.rb</font>の書き方は他にもあるので調べてみてください。
以下のコマンドで現在のルートの確認ができます。

```zsh
$ rails routes

(結果一部抜粋)
Prefix           Verb         URI Pattern        Controller#Action
top              GET           /todo                 todo#index
```
ここに先程追加した内容が表示されればOKです。


## ここまでで
作成した<font color="Magenta">index.html.erb</font>が表示されればほとんどできたも同然です。
作成したページにアクセスしてみます。
まずはサーバのスタート

```zsh
$ rails s
```

ローカルホスト3000ポートにアクセスして先程作成したindex.html.erbが表示されればOKです。
http://localhost:3000/todo

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/8b5a1bdf-661c-9c50-9a76-7049faa32936.png">
ユーザのリクエストに対して適切なレスポンスを返すという流れが1つ出来上がっています。
ここからは、この流れにCreate/Read/Update/Deleteのリクエストに対して、適切なレスポンスを返す処理を作っていきます。



## Read処理の実装
Read処理でやることは、DBからデータを取得して取得したデータを<font color="Magenta">index.html.erb</font>内に含めてユーザに返すことです。
実際にはDBの中のtableに対してSELECT文を実行して値を取得しています。
図にするとこう.


<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/6f99d647-a766-1df6-35d0-acb23c2fe34a.png">

DBからデータを取得する処理は<font color="Crimson">todo_controller.rb</font>の中でModelのインスタンスを作成しデータを取得します。



### Modelの作成
Modelの作成では<font color="LimeGreen">todo.rb</font>/migrateファイル/database/tableを作成します。
Modelの作成は以下のコマンドで行います。

```zsh
$ rails g model Todo title:string comment:string limit:date
```
このコマンドを実行するとapp/models/配下に<font color="LimeGreen">todo.rb</font>とdb/migrate配下にXXXX_create_todos.rbファイルが作成されます。
<font color="LimeGreen">todo.rb</font>はActiveRecordというクラスを継承しておりDBとのやりとりを円滑に行うためのメソッドを使えます。
XXXX_create_todos.rbはテーブルの情報をrubyの記述で書いたものです。これをコマンドでマイグレートするとXXXX_create_todos.rbで定義したテーブルが作成できます。


### DBの準備
以下のコマンドでdatabase.ymlに記載されている情報をもとにDBを作成します。

```zsh
$ rails db:create
```
さらに以下のコマンドを実行することで先程作成したXXXX_create_todos.rbをマイグレートし、DBないにテーブルを作成します。

```
$ rails db:migrate
```

完了したらRead処理のために何か適当なデータを投入しましょう(INSERT、irb、SEEDなど、投入もとはなんでも)
今回準備したデータは以下の通り

```sql:todos
mysql> select * from todos;
+----+-------+------------+------------+----------------------------+----------------------------+
| id | title | comment    | limit      | created_at                 | updated_at                 |
+----+-------+------------+------------+----------------------------+----------------------------+
|  1 | test1 | test-todo1 | 2021-08-10 | 2021-08-07 14:10:00.736786 | 2021-08-07 14:10:00.736786 |
|  2 | test2 | test-todo2 | 2021-08-10 | 2021-08-07 14:10:15.833124 | 2021-08-07 14:10:15.833124 |
|  3 | test3 | test-todo3 | 2021-08-10 | 2021-08-07 14:10:22.733875 | 2021-08-07 14:10:22.733875 |
|  4 | test4 | test-todo4 | 2021-08-10 | 2021-08-07 14:10:30.992338 | 2021-08-07 14:10:30.992338 |
|  5 | test5 | test-todo5 | 2021-08-10 | 2021-08-07 14:10:37.590373 | 2021-08-07 14:10:37.590373 |
+----+-------+------------+------------+----------------------------+----------------------------+
5 rows in set (0.00 sec)

```




### DBからデータを取得する
<font color="Crimson">todo_controller.rb</font>のindexメソッド内に以下を記述します。

```ruby:app/controllers/todo_controller.rb
class TodoController < ApplicationController
    
    def index
        @todos = Todo.all() #追記
    end

end
```

先程作成した<font color="LimeGreen">todo.rb</font>で定義されているTodoというクラスのallというメソッドを用いてtodosテーブルのデータを全て取得して<span>@</span>todosという変数に格納しています。
@のついた変数はインスタンス変数を示す記号でインスタンスが存在する間有効な変数です。
これを指定することでこの変数を<font color="Magenta">index.html.erb</font>内で扱うことができます。
1つのテーブルにつき1つのModelが対応していて、railsにおいてテーブルとやりとりをする場合このModelを通して行います。
Controllerの記述は以上。


### index.html.erbに取得したデータを表示させる。
<span>@</span>todosは<font color="Crimson">todo_controller.rb</font>でTodoクラスのallメソッドを用いて取得したデータです。
todosテーブルから取得した全てのレコードが配列として格納されています。配列の要素一つ一つはTodoクラスのインスタントなっておりtodosテーブルの1行分のデータを持っています。
この格納されたインスタンスたち(テーブルの1行ずつ)をeach文で回しそれぞれ必要なカラムのデータを表示します。

コードはこう

```erb:app/view/index.html.erb

<h1> TOPページ </h1>

<% @todos.each do | todo |%>

    <ul>

        <li><%= todo.title %></li>
        <li><%= todo.comment %></li>
        <li><%= todo.limit %></li>
        
    </ul>

   <h1>----------</h1>

<% end %>

```

erbの詳細は省きますが、<% %>で囲まれているところはrubyの処理が書いてあります。
今回はeach文で繰り返し処理をしているので<% end %>までの記述が繰り返されています。
<%= %>で囲まれているところもrubyの処理が書いてあります。先程との違いはhtmlに表示するかしないかです。
DBから取得したTodoの内容はブラウザに表示させたいので<%= %>で囲んでいます。
eachやifの様な制御構文はブラウザに表示させる必要がないので<% %>で囲みます。

結果はこう
![スクリーンショット 2021-08-08 8.48.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/55dbc8b8-9e7c-f000-c2fd-6ce720029ba2.png)


ちゃんとDBの内容が表示されているのがわかります。
ブラウザからhtmlのソースを見てみると
ちゃんと<% <span>@</span>todos.each do | todo | %> から<%= end %>までで囲んだ箇所が繰り返されているのがわかります。
(<font color="Magenta">index.html.erb</font>には1つ分しか書いていないのに、ブラウザのソースでは取得した分ちゃんと書かれている。)


### ここまでやると
ここまでやった時の図はこうです

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/69c91fad-4c9d-3f2a-74b8-2a1db4e29275.png">

文章にするとこう

- clientがhttp://localhost:3000の"/todo"にGetリクエストを送った時、<font color="DodgerBlue">routes.rb</font>によって
<font color="Crimson">todo_controller.rb</font>のindexメソッドが実行されます。
- indexメソッドは、Todoインスタンスのallメソッドを実行しtodoテーブルから全てのデータを取得し<font color="Magenta">index.html.erb</font>に渡すためのインスタンス変数<span>@</span>todosに格納します。
- <font color="Magenta">index.html.erb</font>は受け取った<span>@</span>todosの中のデータをeachで順番に表示します。

Read処理は以上




## Create処理の実装
Create処理でやることは<font color="Magenta">index.html.erb</font>で入力フォームの作成/<font color="Crimson">todo_controller.rb</font>でcreateメソッドの作成/<font color="DodgerBlue">route.rb</font>の編集です。
実際にはDBに対してINSERT INTO分が実行されています。

### Create用ルートの編集
<font color="DodgerBlue">route.rb</font>を編集します。
先程<font color="Magenta">index.html.erb</font>のform_withで指定したurlを作成してあげます。
今回はデータの追加を行うpostメソッドを指定します(httpメソッドについて詳細は省きます)

```ruby:config/route.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  
  get '/todo', to: "todo#index", as: "top"  
  post '/todo', to: "todo#create", as:"create" #追記

end

```

### Controllerでの処理を作成
<font color="Crimson">todo_controller.rb</font>ではindexメソッドへの追記とcreateメソッド、todo_paramsメソッドの作成を行います。

```ruby:app/controllers/todo_controller.rb

class TodoController < ApplicationController
    
    def index
        @todos = Todo.all()
class TodoController < ApplicationController
    
    def index
        @todos = Todo.all()

        # Viewのformで使う空のTodoインスタンスを作成します。
        # Viewはこのインスタンスにユーザから入力された値を入れてControllerに渡します。
        @new_todo = Todo.new #追記
    end


    ### 以下追記 ###
    def create
        # Viewからの入力を受け取りインスタンスを作成します。
        @todo = Todo.new(todo_params)
       
        # DBに値を追加した時の結果よるアクションを返します。
        # 今回は成功しても失敗しても画面を更新するだけです。
        respond_to do |format|
          if @todo.save
            format.html {redirect_to request.referer}
          else
            format.html {redirect_to request.referer}
          end
        end

    end

    private

    # StorongParameterと言ってセキュリティに関係するメソッド
    # todoモデル(:todo)で入力を許可するカラムを記載する。これ以外のデータは受け付けない様になる。
    def todo_params
        params.require(:todo).permit(:title, :comment, :limit)
    end

end
```
以上で<font color="Crimson">todo_controller.rb</font>の編集は完了



### Create用にViewの編集
入力フォームを作成するときはform_withを使います。
<font color="Magenta">index.html.erb</font>の先頭に次のコードを追記

```erb:app/view/todo/index.html.erb
<h1> TOPページ </h1>


<%# todo_controller.rbで定義した空のインスタンスに値を格納しcreate_pathにPOSTします。 %>
<%= form_with model: @new_todo, url:create_path do |form| %>
    <%= form.label :title %>
    <%= form.text_field :title%>

    <%= form.label :comment %>
    <%= form.text_field :comment %>

    <%= form.label :limit %>
    <%= form.date_field :limit %>

    <%= form.submit %>
<% end %>
(省略)

```



### Createの確認
ここまでやったらブラウザの表示はこう

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/3f2fbc51-3f72-b261-933a-811b49064da1.png">
ちゃんと入力フォームができています。

この様にデータを入力してCreateTodoをクリックすると画面最下部に作成したTodoが追加されています。
ちなみにReadで取得したDBの値は取得した順番で並んでいます。新しいものを先頭にしたい場合は並べ替える必要があります。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/fd916ca5-878f-169f-699e-084a64f1a308.png">

id9のデータ　として追加されています。(テストしている時にid6,7,8と余計なデータを作成していますが気にしないでください)

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/84f01769-3034-daa9-40a8-bde403ddc5e2.png">


### ここまで
ここまでやって時の図はこうです。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/ec4ab79e-370c-b08f-944d-403f088ce7d4.png">

文章にするとこうです。
- <font color="Magenta">index.html.erb</font>の入力フォームにデータを入力してCreateボタンをクリックするとhttp://localhost:3000/todo/createにPostリクエストが送信され、<font color="DodgerBlue">routes.rb</font>によって<font color="Crimson">todo_controller.rb</font>のcreateメソッドが実行されます。
- createメソッドは<font color="Magenta">index.html.erb</font>から受け取ったデータをDBに追加し画面の更新をします。
- 画面更新により再びhttp://localhost:3000/todoにGETリクエストが送信されます。その時も<font color="Crimson">todo_controller.rb</font>のindexメソッドが実行されtodoテーブルのデータが改めて取得されるため先程追加したデータが画面に表示されてきます。

Createの実装は以上


## Updateの実装
Update処理でやることは <font color="Magenta">index.html.erb</font>で更新のリンク作成/<font color="Crimson">todo_controller.rb</font>でupdateメソッドの作成/ <font color="DodgerBlue">route.rb</font>でルートの編集です。
実施にはDBに対してUPDAET文が実行されます。

### Update用ルートの編集
<font color="DodgerBlue">route.rb</font>に追記します。
今回はデータの更新を行うpatchメソッドを指定しします。
宛先はこの後作成する<font color="Crimson">todo_controller.rb</font>のupdateメソッドを指定します。

```ruby:config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

  get '/todo', to: "todo#index", as: "top"  
  post '/todo/create', to: "todo#create", as:"create" 
  patch '/todo/update', to: "todo#update", as:"update" #追記

end
```

### Controllerでupdateメソッドを作成
<font color="Crimson">todo_controller.rb</font>に以下のメソッドを追記します。

```ruby:app/controllers/todo_controller.rb

    def update
        ## viewから変更対象のデータのIDを受け取る
        todo_id = params[:id]

        ## todosテーブルから受け取ったIDと一致するインスタンス(行)を取得
        @update_todo = Todo.find(todo_id)    

        ## 取得したインスタンスのcomment(取得した行のcommentカラム)に"完了"を格納
        @update_todo.comment = "完了"

        ## 実行した時の処理を記載(createと同じ)
        respond_to do |format|
            if @update_todo.save
                format.html {redirect_to request.referer}
            else
                format.html {redirect_to request.referer}
            end
        end

    end

```

### Update用にViewを編集

```erb:app/views/todo.index.html.erb
<h1> TOPページ </h1>

<%= form_with model: @new_todo, url:create_path do |form| %>
    <%= form.label :title %>
    <%= form.text_field :title%>

    <%= form.label :comment %>
    <%= form.text_field :comment %>

    <%= form.label :limit %>
    <%= form.date_field :limit %>

    
    <%= form.submit %>
<% end %>

<% @todos.each do | todo |%>

    <ul>
        <li>id<%= todo.id%>のデータ</li>
        <li><%= todo.title %></li>
        <li><%= todo.comment %></li>
        <li><%= todo.limit %></li>

        <%# 以下の一行を追加してリンクを表示 %>
        <%= link_to "更新", update_path(id: todo.id), method: :patch %>
        
    </ul>

    <h1>----------</h1>

<% end %>

```
追加した行により、さきほど<font color="DodgerBlue">route.rb</font>に追加したupdate_pathにpatchリクエストを送信します。
その際にidというパラメータを一緒に送信します。これにはtodo.idの値(表示しているデータのid)が入っていて、どのデータを更新するのか判別するために送信しています.
<font color="Crimson">todo_controller.rb</font>のupdateメソッド側ではtodo_id = params[:id]のところで受け取っています。

### Updateの確認
ここまでやるとブラウザの表示はこう
![スクリーンショット 2021-08-08 9.15.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/efc6dbb1-83fe-f52b-3c75-ce53da944133.png)
更新というリンクが各データの下に着きましたね。

クリックするとこう
![スクリーンショット 2021-08-08 9.16.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/c2d9a09e-9696-c87d-b860-86aa951815ce.png)

コメントを表示している箇所が"完了"に更新されるかと思います。

### ここまで
ここまでやった時の図はこうです
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/9ec93dbc-87f4-3eb4-7a1f-50a0dcb18a3d.png">

文章にするとこうです
- <font color="Magenta">index.html.erb</font>の"更新"リンクをクリックすると<span>http://localhost:3000/todo/update<span>にPATCHリクエストが送信され、<font color="DodgerBlue">routes.rb</font>によって<font color="Crimson">todo_controller.rb</font>のupdateメソッドが実行されます。
- updateメソッドは<font color="Magenta">index.html.erb</font>から受け取ったidをもとに更新対象のでーたをtodoテーブルから探します。
- updateメソッドは対象のデータの中のcommentカラムのデータを"完了"に書き換え保存し、画面更新を行います。
- 画面更新により再び<span>http://localhost:3000/todo</span>にGETリクエストが送信されます。その時も<font color="Crimson">todo_controller.rb</font>のindexメソッドが実行されtodoテーブルのデータが改めて取得されるため先程更新したデータが画面に表示されてきます。

Updateの実装は以上


## Deleteの実装
CRUDの最後になります。
Delete処理でやることは、<font color="Magenta">index.html.erb</font>で削除用のリンク作成/<font color="Crimson">todo_controller.rb</font>でdeleteメソッドの作成/ <font color="DodgerBlue">route.rb</font>でルートの編集です。
お気づきかもしれませんがUpdate処理と同じです。
<font color="Crimson">todo_controller.rb</font>で行う処理が少し違うだけですのでサラッと

### Delete用ルートの編集

```ruby:config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

  get '/todo', to: "todo#index", as: "top"  
  post '/todo/create', to: "todo#create", as:"create" 
  patch '/todo/update', to: "todo#update", as:"update" 
  delete '/todo/delete', to: "todo#delete", as:"delete" #追記
end

```
特に補足することはありませんね。

### Controllerでupdateメソッドを作成

```ruby:app/controllers/todo_controller.rb

    def delete
        ## viewから変更対象のデータのIDを受け取る
        todo_id = params[:id]

        ## todosテーブルから受け取ったIDと一致するインスタンス(行)を取得
        @delete_todo = Todo.find(todo_id)    

        ## 削除の実行実行と実行した時の処理を記載
        respond_to do |format|
            if @delete_todo.destroy
                format.html {redirect_to request.referer}
            else
                format.html {redirect_to request.referer}
            end
        end

    end

```
updateでは@update_todo.comment = "完了"として値を変更していましたが、
今回はdestroyメソッドを利用して対象のデータを削除します。


### Update用にViewを編集

```erb:app/views/index.html.erb
<h1> TOPページ </h1>

<%# todo_controller.rbで定義した空のインスタンスに値を格納しcreate_pathにPOSTします。 %>

<%= form_with model: @new_todo, url:create_path do |form| %>
    <%= form.label :title %>
    <%= form.text_field :title%>

    <%= form.label :comment %>
    <%= form.text_field :comment %>

    <%= form.label :limit %>
    <%= form.date_field :limit %>

    
    <%= form.submit %>
<% end %>

<% @todos.each do | todo |%>

    <ul>
        <li>id<%= todo.id%>のデータ</li>
        <li><%= todo.title %></li>
        <li><%= todo.comment %></li>
        <li><%= todo.limit %></li>

        
        <%= link_to "更新", update_path(id: todo.id), method: :patch %>
        <%# ここに削除のリンクを追加 %>
        <%= link_to "削除", delete_path(id: todo.id), method: :delete %>
        
    </ul>

    <h1>----------</h1>

<% end %>

```

更新用のリンクと同じくリンクを作成します。
先程<font color="DodgerBlue">route.rb</font>にdeleteメソッドを指定しているためdeleteメソッドを指定します。
また、削除対象のデータを探すためにidを渡します。

### Deleteの確認
ここまでやるとブラウザの表示はこう

![スクリーンショット 2021-08-08 9.47.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/a07e1ffc-b8cd-25dd-dd6b-b8b2e1f17b63.png)

削除のリンクが表示されていますね

クリックするとこう
id1のデータが削除されます
![スクリーンショット 2021-08-08 9.51.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/3489ee70-03f5-3112-88b5-2442df1bee9b.png)

### ここまで
ここまでやった時の図はこうです。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320230/a15d7dc4-d2c6-90bd-6b78-26a2d16286d9.png">


文章にするとこう
- <font color="Magenta">index.html.erb</font>の"削除"リンクをクリックすると<span>http://localhost:3000/todo/delete<span>にDELETEリクエストが送信され、<font color="DodgerBlue">routes.rb</font>によって<font color="Crimson">todo_controller.rb</font>のdeleteメソッドが実行されます。
- deleteメソッドは<font color="Magenta">index.html.erb</font>から受け取ったidをもとに更新対象のでーたをtodoテーブルから探します。
- deleteメソッドは対象のデータを削除します。
- 画面更新により再び<span>http://localhost:3000/todo</span>にGETリクエストが送信されます。その時も<font color="Crimson">todo_controller.rb</font>のindexメソッドが実行されtodoテーブルのデータが改めて取得されるため先程更新したデータは画面からきえています。

Deleteの実装は以上です
これで超シンプルなCRUD処理の実装は完了です。

## 最後に
長くなりましたが、以上でCRUD処理の実装は完了です。
冒頭にも申し上げた通り、超シンプルなCRUDの処理だけを実装したのでWebアプリとして使える様なものではありません。しかしWebアプリの骨になる部分はこれで作れる様になるかと思います。
あとは、ログイン機能をつけてユーザごとに異なる情報を表示したりとか、ユーザがデータの入出力をしやすい様にとか、外部のサービスと連携して便利な機能を使うとかを肉付けしていく様に勉強していくのが良いのかなーと個人的に思っています。
ここまで読んでくださった方がいらっしゃいましたら嬉しい限りです。ありがとうございます。