[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-3(Todoリスト新規作成編)

## 前回のあらすじ
ここまでみていただきありがとうございます！
前回はTodoリスト一覧表示編でTodoリストの一覧表示ができるようになりました。
[[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-2(Todoリスト一覧表示編)](https://qiita.com/streasure0426/items/180e0954a2af402b4a8c)

今回は本当に一覧表示ができているか
早速始めてみましょう。

## 事前準備
Dockerを一度止めている方はこちらのコマンドでDockerを起動し、コンテナに入りましょう。
``` bash
docker-compose up -d
docker-compose exec app bash
```

## ビューの編集
まずはindexページにtodoを追加するボタンを設置します。

```diff_slim: app/views/todos/index.html.slim
h1 Todo一覧

+ = link_to  "Todo追加", new_todo_path, class: "btn btn-primary"

table.table
  thead
    tr
      th scope="col" 題名
      th scope="col" 詳細
  tbody
    - @todos.each do |todo|
      tr
        td = todo.title
        td = todo.description
```

ボタンがあるか確かめてみましょう
http://127.0.0.1:3050
![スクリーンショット 2023-04-12 18.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982962/b35970f6-e02d-197f-df1f-026e8a310827.png)
上の画像のようにボタンが設置されていれば成功です。

## コントローラーの編集
ボタンを押したら新規追加画面に遷移しないといけないので新規追加画面に遷移できるようにコントローラーを編集します。

``` diff_ruby: app/controllers/todos_controller.rb
class TodosController < ApplicationController
  def index
    @todos = Todo.all
  end
+ def new
+   @todo = Todo.new
+ end
end
```

`Todo.new`：新しいTodoデータを作成していることになります。

こちらで新規追加画面に移動できるようになりました。

## 新規追加画面の作成
まずはファイルを作成しましょう
``` bash
touch app/views/todos/new.html.slim
```
新規追加画面を作成します。
``` slim: new.html.slim
 h1.text-center.mt-5 新規作成

.row
  .col-3
  .col-6
    = form_for(@todo) do |form|
      .form-group
        = form.label :タイトル
        = form.text_field :title, class: 'form-control'
      .form-group
        = form.label :内容
        = form.text_area :description, class: 'form-control'
      = form.submit '作成', class: 'btn btn-primary mt-3'
      = link_to "戻る", todos_path, class: 'btn btn-secondary mt-3'
```

こちらで新規作成画面が完成しました。
イメージは以下の画像のようになっています。
![スクリーンショット 2023-04-14 17.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982962/51f9c86d-e551-c78a-3ff5-c2c70c5d9009.png)

## データベースの新規追加
画面が出来上がったら実際にTodoをデータベースに登録するコードを書いていきます。

コントローラーでcreateメソッドを作成します
``` diff_ruby: app/controllers/todos_controller.rb
class TodosController < ApplicationController
  def index
    @todos = Todo.all
  end
  
  def new
    @todo = Todo.new
  end

+ def create
+   @todo = Todo.create(todo_params)
+   redirect_to todos_path
+ end
+
+ private
+   def todo_params
+     params.require(:todo).permit(:title, :description)
+   end
end
```

コードの説明をします。
`Todo.create`：新しいTodoデータを作成し、データベースに保存させています。
`redirect_to todos_path`：todos_path今回のメイン画面に遷移します。
`todo_params`：データを作成する際にtitleとdescriptionのみを追加させるようにしています。

以上でtodoの新規追加機能を作ることができました。
実際に検証してみましょう。

## 検証
今回は前回行ったTodoの一覧表示と新規作成を行なってみます。
まず一覧画面からTodo追加ボタンを押して新規追加画面に移動します。
その後にタイトルと内容を入力して作成ボタンを押します。
![スクリーンショット 2023-04-14 17.41.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982962/3e767756-2d2b-1f49-ad88-bb5900f33c21.png)

作成ボタンを押したら一覧画面に遷移し、追加したTodoが表示されていたら成功です。
![スクリーンショット 2023-04-14 17.43.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982962/a6405fb8-5ae6-8535-88e3-f4f7b0a765d6.png)

何個か追加してみてみましょう。
![スクリーンショット 2023-04-14 17.44.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982962/56100f5c-f7a3-cfa2-19d4-e004b22048dc.png)

今回はここまで！

続けて読んでくれるとありがたいです！
[[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-4(Todoリスト編集編)](https://qiita.com/streasure0426/items/ca2c8b71cf106922558c)