迷い人

日々勉強。勉強の先に何か見つかるといいなぁ

【rails】部分テンプレート化。ついでにステータスも追加で。

Ruby on Rails

本日は部分テンプレートと、ついでにタスクのステータスを追加を行いたいと思います。

 

部分テンプレートとは、view内の共通部分を切り出して別ファイルで管理することで

  • viewファイルの見通しがよくなり保守性が向上
  • 様々なviewで再利用できる
  • eachで繰り返し表示するよりもrenderでまとめて表示することで高速化

のようなメリットがあります。

 

サイト利用者からすると見た目は変りませんが、作り手側からするとメリットが大きいため、今回部分テンプレート化を行いたいと思います。

 

（ついでタスクのステータスも追加します）

 

本日のお品書き

  1. tasksテーブルにstatusを追加
  2. statusカラムで新規追加、更新、表示できるようにする
  3. 部分テンプレート化する

 

1.tasksテーブルにstatusを追加

これまで何度も行ってきました以下のコマンドでtasksテーブルにstatusを追加します。

 

$rails g migration AddStatusToTasks status:string

 

「rails g migration Add追加カラムTo追加先テーブル 追加カラムの型」の形式でコマンドを打ちます。

 

以下のマイグレーションファイルが作成されたことを確認後、マイグレートします。

ファイルはdb/migrate/2019************.rbです。

 

class AddStatusToTasks < ActiveRecord::Migration[5.2]
  def change
    add_column :tasks, :status, :string
  end
end

 

$rails db:migrate

 

2.statusカラムで新規追加、更新、表示できるようにする

まずは新規追加、更新できるようにします。修正するファイルはapp/views/tasks/_form.html.erbです。

ちなみにこれまで解説してきませんでしたが、この_form.html.erbも実は部分テンプレートです。新規登録するとき(create)と更新する時(update)の両方で活用しています。

 

_form.html.erb

<%= form_with(model: task, local: true) do |form| %>
 
  #省略

  <div class="field">
    <%= form.label :status %>
    <%= form.select :status, ["New","WIP","Done","Pending"] %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

 

statusについては、自由に登録するのではなくあらかじめ決められた値を登録できるようにセレクトボックス形式にします。

form_withでは簡単にセレクトボックスを導入することができます。

 

各ステータスの意味は

  • New　新規
  • WIP(Work In Progress)　着手中
  • Done　完了
  • Pending　保留、一時停止

になります。

（英語が苦手なので調べましたw）

 

次に一覧画面にタスクステータスを表示させます。修正するファイルはapp/views/tasks/index.html.erbです。

 

index.html.erb

<table>
  <thead>
    <tr>
      <th>Content</th>
      <th>UserName</th>
      <th>Status</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @tasks.each do |task| %>
      <tr>
        <td><%= task.title %></td>
        <td><%= task.user.name %></td>
        <td><%= task.status %></td>

　　　　　#省略

        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

 

<th>status</th>と<td><%= task.status%></td>を追加します。

 

3.部分テンプレート化する

いよいよ本題の部分テンプレート化です。_task.html.erbというファイルを作成し、以下のように記述します。ファイル名の頭に「_(アンダーバー)」を必ず入れるようにして下さい。

 

_task.html.erb

<tr>
  <td><%= task.title %></td>
  <td><%= task.user.name %></td>
  <td><%= task.status %></td>
  <td><%= link_to 'Show', task %></td>
  <% if user_signed_in? && task.user.id == current_user.id %>
    <td><%= link_to 'Edit', edit_task_path(task) %></td>
    <td><%= link_to 'Destroy', task, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  <% end %>
</tr>

 

index.html.erbの該当部分をコピペすればOKです。

次にindex.html.erbを以下のように修正します。

 

<table>

  #省略

  <tbody>

    <%= render :partial => 'task', :collection => @tasks %>

  </tbody>
</table>

 

部分テンプレートで切り出した部分を全て削除し、代わりにrenderを記述します。

partialで読み込むファイル名を指定しています。この時アンダーバーは記述しないようにします。

またcollectionで一覧表示させるtaskの情報を渡しています。

 

おつかれさまでした。以上で部分テンプレート化が完了です。

 

次回はついでに追加したstatusを使って何か機能を追加していきたいと思います。