↓の続き

今回やること

今回は、CRUD の R (Read) ということで、ToDo の一覧を表示するところまでを開発していきます。

トップページを作成する

まず初めに、タイトルだけのシンプルな HTML を表示できるようにしていきます。

そのために、

コントローラーの作成
ルーティングの設定
ビューファイルの作成

を行っていきます。

コントローラーの作成

コントローラーは、rails generateコマンドで作成することができます。
（generateの部分はgと省略可能）
このコントローラーの名前はTodosControllerとしています。

$ docker-compose run rails rails g controller todos

app/controllers/todos_controller.rbというファイルが作られました。
このファイルの中身を編集していきます。

class TodosController < ApplicationController
  def index
  end
end

indexメソッドを追加しました。
メソッドは空のままでいいです。

ルーティングの設定

続いて、ルーティングの設定を行います。
Rails でのルーティングの設定は、config/routes.rbファイルに追記します。

root 'todos#index'

ビューファイルの作成

次に、ビューファイルを作成していきます。

app/views/todos/index.html.erbファイルを作成し、中身を編集します。

<h1 class="my-5 text-center">
  ToDo リスト
</h1>

とりあえずは、「ToDo リスト」という文字だけを表示するようにしています。
また、Bootstrapを使って簡単な装飾を行っています。

ここまでで、http://localhost:3000にアクセスすることで、「ToDo リスト」という文字が書かれた白いページが表示されるようになりました。

ToDo モデルの作成 & テストデータ追加

次は、モデルを作成し、テストデータを追加していきます。

初めに、Todoモデルを作成します。
モデルもコントローラー同様に、rails gコマンドで作成することができます。

$ docker-compose run rails rails g model todo title:string description:string status:string

Todoモデルには、タイトル、説明、状態の3カラムを持たせています。
このほかに、idとタイムスタンプが自動で付与されています。

モデルのスキーマをデータベースに反映させるために、マイグレーションを実行します。

$ docker-compose run rails rails db:migrate

これで、Todoモデルを作成し、DBにもテーブルが作成されました。

ここで、いくつかテストデータをDBに追加しておきます。
rails cコマンドで、インタラクティブなコンソールでRailsを操作することができます。
これを利用して、データを追加します。

$ docker-compose run rails rails c

Railsコンソールで以下を実行することで、３つのデータを追加できます。

Todo.create(title: "Running", description: "Sample Todo 1", status: "In progress")
Todo.create(title: "Reply", description: "Sample Todo 2", status: "Completed")
Todo.create(title: "Washing dishes", description: "Sample Todo 3", status: "In progress")

ToDo 一覧を表示

上で追加したTodoデータを、ビューで表示できるようにしていきます。

コントローラーでデータ取得

まずは、TodosControllerのindexメソッドを変更します。

class TodosController < ApplicationController
  def index
    @todos = Todo.all
  end
end

Todo.allでTodoモデルから全データを取得します。

ビューでTodo一覧表示

app/views/todos/index.html.erbを変更します。

<h1 class="my-5 text-center">
  ToDo リスト
</h1>
<% @todos.each do |todo| %>
  <div class="card mx-auto w-50 mb-3">
    <h6 class="card-header <%= todo.status == 'In progress' ? 'bg-warning' : 'bg-success' %>">
      <%= todo.status %>
    </h6>
    <div class="card-body">
      <h5 class="card-title">
          <%= todo.title %>
      </h5>
      <p class="card-text">
        <%= todo.description %>
      </p>
      <a href="#" class="btn btn-secondary">
        Edit
      </a>
      <a href="#" class="btn btn-danger">
        Delete
      </a>
    </div>
  </div>
<% end %>