Hotwireを使った課題（案）

app/assets/stylesheets/comments.css

@@ -48,6 +48,10 @@ comments-container
     margin-left: 4px;
 }
 
+.comments-container .comment-update-form input[type="submit"] {
+    font-size: var(--global-fz-sm);
+}
+
 .comments-container form {
     margin-top: 16px;
 }

app/assets/stylesheets/scaffolds.css

@@ -144,6 +144,22 @@ h3 {
   background-color: var(--global-secondary-bgc-hover);
 }
 
+.comment-update-form button[type="submit"],
+.comment-update-form input[type="submit"] {
+  color: var(--global-c);
+  font-weight: normal;
+  background-color: var(--global-secondary-bgc);
+  border: solid var(--global-bw) var(--global-secondary-bgc-hover);
+  border-radius: var(--global-br);
+  height: 2em;
+  padding: 0 .75em;
+}
+
+.comment-update-form button[type="submit"]:hover,
+.comment-update-form input[type="submit"]:hover {
+  background-color: var(--global-secondary-bgc-hover);
+}
+
 /****************
 page-nav
 ****************/
@@ -153,12 +169,41 @@ page-nav
   --nav-mt: 24px;
   font-size: var(--nav-fz);
   margin-top: var(--nav-mt);
+  margin-bottom: var(--nav-mt);
 }
 
 .page-nav .button_to {
   margin-top: var(--nav-mt);
 }
 
+.pager-container {
+  width: 100%;
+  text-align: center;
+  margin-top: 24px;
+}
+
+.pager {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.8;
+  margin-bottom: 0px;
+  min-height: 34px;
+  min-width: 64px;
+  text-align: center;
+  user-select: none;
+  vertical-align: middle;
+  width: 250px;
+  border-radius: 8px;
+  white-space: nowrap;
+  transition: background-color 0.1s ease-out, border-color;
+  border: 1px solid var(--global-c);
+  padding: 8px 16px;
+}
+
 /****************
 Index
 ****************/
@@ -264,7 +309,7 @@ Show
 New and Edit
 ****************/
 
-form:not(.button_to) {
+form:not(.button_to, .comment-update-form) {
   --main-button-fz: 16px;
   --main-button-w: 160px;
   --main-button-h: 44px;

app/controllers/books/comments_controller.rb

@@ -3,11 +3,12 @@
 class Books::CommentsController < ApplicationController
   def create
     book = Book.find(params[:book_id])
-    comment = book.comments.build(comment_params)
-    comment.user = current_user
+    @comment = book.comments.build(comment_params)
+    @comment.user = current_user
     # NOTE: 実装を複雑にしないよう、あえて保存失敗時の処理を考慮しないことにした（失敗時はシステムエラーとする）
-    comment.save!
-    redirect_to book, notice: t('controllers.common.notice_create', name: Comment.model_name.human)
+    @comment.save!
+    @commentable = book
+    render 'shared/comment_create'
   end
 
   private

app/controllers/comments_controller.rb

@@ -1,10 +1,29 @@
 # frozen_string_literal: true
 
 class CommentsController < ApplicationController
+  before_action :set_comment
+
+  def show; end
+
+  def edit; end
+
+  def update
+    # NOTE: 実装を複雑にしないよう、あえて保存失敗時の処理を考慮しないことにした（失敗時はシステムエラーとする）
+    @comment.update!(comment_params)
+  end
+
   def destroy
-    comment = current_user.comments.find(params[:id])
-    commentable = comment.commentable
-    comment.destroy
-    redirect_to commentable, notice: t('controllers.common.notice_destroy', name: Comment.model_name.human)
+    @commentable = @comment.commentable
+    @comment.destroy
+  end
+
+  private
+
+  def set_comment
+    @comment = current_user.comments.find(params[:id])
+  end
+
+  def comment_params
+    params.require(:comment).permit(:content)
   end
 end

app/controllers/reports/comments_controller.rb

@@ -7,7 +7,8 @@ def create
     comment.user = current_user
     # NOTE: 実装を複雑にしないよう、あえて保存失敗時の処理を考慮しないことにした（失敗時はシステムエラーとする）
     comment.save!
-    redirect_to report, notice: t('controllers.common.notice_create', name: Comment.model_name.human)
+    @commentable = report
+    render 'shared/comment_create'
   end
 
   private

app/views/books/_book_item.html.erb

@@ -0,0 +1,6 @@
+<div class="index-item">
+  <%= render book %>
+  <p>
+    <%= link_to t('views.common.show', name: Book.model_name.human.downcase), book %>
+  </p>
+</div>

app/views/books/index.html.erb

@@ -1,18 +1,11 @@
 <h1><%= t('views.common.title_index', name: i18n_pluralize(Book.model_name.human)) %></h1>
 
+<nav class="page-nav">
+  <%= link_to t('views.common.new', name: Book.model_name.human.downcase), new_book_path %>
+</nav>
+
 <div id="books" class="index-items">
-  <% @books.each do |book| %>
-    <div class="index-item">
-      <%= render book %>
-      <p>
-        <%= link_to t('views.common.show', name: Book.model_name.human.downcase), book %>
-      </p>
-    </div>
-  <% end %>
+  <%= render partial: 'book_item', collection: @books, as: :book %>
 </div>
 
-<%= paginate @books %>
-
-<nav class="page-nav">
-    <%= link_to t('views.common.new', name: Book.model_name.human.downcase), new_book_path %>
-</nav>
+<%= render 'shared/pager', records: @books %>

app/views/books/index.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.append "books", partial: 'book_item', collection: @books, as: :book %>
+<%= turbo_stream.replace "pager", partial: 'shared/pager', locals: { records: @books } %>

app/views/comments/destroy.turbo_stream.erb

@@ -0,0 +1,6 @@
+<%= turbo_stream.remove @comment %>
+<% unless @commentable.comments.exists? %>
+  <%= turbo_stream.update 'no-comments' do %>
+    <%= render inline: t('shared.comments.no_comments') %>
+  <% end %>
+<% end %>

app/views/comments/edit.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag(@comment, 'form') do %>
+  <%= render 'shared/comment_form', commentable: @comment.commentable, comment: @comment %>
+<% end %>

app/views/comments/show.html.erb

@@ -0,0 +1 @@
+<%= render 'shared/comment_content', comment: @comment %>

app/views/comments/update.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.replace @comment, partial: 'shared/comment_content', locals: { comment: @comment } %>

app/views/reports/_report_item.html.erb

@@ -0,0 +1,6 @@
+<div class="index-item">
+  <%= render report %>
+  <p>
+    <%= link_to t('views.common.show', name: Report.model_name.human.downcase), report %>
+  </p>
+</div>

app/views/reports/index.html.erb

@@ -1,18 +1,11 @@
 <h1><%= t('views.common.title_index', name: i18n_pluralize(Report.model_name.human)) %></h1>
 
-<div id="reports" class="index-items">
-  <% @reports.each do |report| %>
-    <div class="index-item">
-      <%= render report %>
-      <p>
-        <%= link_to t('views.common.show', name: Report.model_name.human.downcase), report %>
-      </p>
-    </div>
-  <% end %>
-</div>
-
-<%= paginate @reports %>
-
 <nav class="page-nav">
   <%= link_to t('views.common.new', name: Report.model_name.human.downcase), new_report_path %>
 </nav>
+
+<div id="reports" class="index-items">
+  <%= render partial: 'report_item', collection: @reports, as: :report %>
+</div>
+
+<%= render 'shared/pager', records: @reports %>

app/views/reports/index.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.append "reports", partial: 'report_item', collection: @reports, as: :report %>
+<%= turbo_stream.replace "pager", partial: 'shared/pager', locals: { records: @reports } %>

app/views/shared/_comment_content.html.erb

@@ -0,0 +1,12 @@
+<li id="<%= dom_id(comment) %>">
+  <%= turbo_frame_tag(comment, 'form') do %>
+    <%= comment.content %>
+    <small>
+      (<%= link_to comment.user.name_or_email, comment.user %> - <%= l comment.created_at, format: :short %>)
+      <% if comment.user == current_user %>
+        <%= link_to t('.edit'), [:edit, comment] %>
+        <%= button_to t('.delete'), [comment], method: :delete, data: { turbo_confirm: t('views.common.delete_confirm') } %>
+      <% end %>
+    </small>
+  <% end %>
+</li>

app/views/shared/_comment_form.html.erb

@@ -0,0 +1,15 @@
+<% comment ||= commentable.comments.new %>
+<% model = comment.new_record? ? [commentable, comment] : comment %>
+<% form_class = comment.new_record? ? 'comment-create-form' : 'comment-update-form' %>
+<%= form_with model: model, class: form_class do |f| %>
+  <%# NOTE: ブラウザ側で必須チェックを行い、サーバーサイドの検証エラーを起きにくくする %>
+  <%= f.text_field :content, required: true %>
+  <% if comment.new_record? %>
+    <%= f.submit t('.create') %>
+  <% else %>
+    <small>
+      <%= f.submit t('.update'), class: 'comment-update' %>
+      <%= link_to t('.cancel'), comment %>
+    </small>
+  <% end %>
+<% end %>

app/views/shared/_comments.html.erb

@@ -1,25 +1,15 @@
 <div class="comments-container">
   <strong><%= Comment.model_name.human %>:</strong>
-  <% if (comments = commentable.comments.order(:id).includes(:user).presence) %>
-    <ul>
-      <% comments.each do |comment| %>
-        <li>
-          <%= comment.content %>
-          <small>
-            (<%= link_to comment.user.name_or_email, comment.user %> - <%= l comment.created_at, format: :short %>)
-            <% if comment.user == current_user %>
-              <%= button_to t('.delete'), [comment], method: :delete, data: { turbo_confirm: t('views.common.delete_confirm') } %>
-            <% end %>
-          </small>
-        </li>
-      <% end %>
-    </ul>
-  <% else %>
-    (<%= t('.no_comments') %>)
-  <% end %>
-  <%= form_with model: [commentable, commentable.comments.new], local: true do |f| %>
-    <%# NOTE: ブラウザ側で必須チェックを行い、サーバーサイドの検証エラーを起きにくくする %>
-    <%= f.text_field :content, required: true %>
-    <%= f.submit t('.create') %>
-  <% end %>
+  <% comments = commentable.comments.order(:id).includes(:user).presence %>
+  <div id="no-comments">
+    <%= t('.no_comments') unless comments %>
+  </div>
+  <ul id="comments">
+    <% Array(comments).each do |comment| %>
+      <%= render 'shared/comment_content', comment: comment %>
+    <% end %>
+  </ul>
+  <div id="comment_form">
+    <%= render 'shared/comment_form', commentable: commentable %>
+  </div>
 </div>

app/views/shared/_pager.html.erb

@@ -0,0 +1,5 @@
+<div id="pager" class="pager-container">
+  <% if records.next_page %>
+    <%= link_to t(".load_more"), path_to_next_page(records), data: { turbo_stream: "" }, class: "pager" %>
+  <% end %>
+</div>

app/views/shared/comment_create.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.update 'no-comments' do %>
+  <%= render inline: '' %>
+<% end %>
+<%= turbo_stream.append 'comments', partial: 'shared/comment_content', locals: { comment: @comment } %>
+<%= turbo_stream.update "comment_form", partial: 'shared/comment_form', locals: { commentable: @commentable } %>

app/views/users/_user_item.html.erb

@@ -0,0 +1,6 @@
+<div class="index-item">
+  <%= render user %>
+  <p>
+    <%= link_to t('views.common.show', name: User.model_name.human.downcase), user %>
+  </p>
+</div>

app/views/users/index.html.erb

@@ -1,14 +1,7 @@
 <h1><%= t('views.common.title_index', name: i18n_pluralize(User.model_name.human)) %></h1>
 
 <div id="users" class="index-items">
-  <% @users.each do |user| %>
-    <div class="index-item">
-      <%= render user %>
-      <p>
-        <%= link_to t('views.common.show', name: User.model_name.human.downcase), user %>
-      </p>
-    </div>
-  <% end %>
+  <%= render partial: 'user_item', collection: @users, as: :user %>
 </div>
 
-<%= paginate @users %>
+<%= render 'shared/pager', records: @users %>

app/views/users/index.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.append "users", partial: 'user_item', collection: @users, as: :user %>
+<%= turbo_stream.replace "pager", partial: 'shared/pager', locals: { records: @users } %>

config/locales/ja.yml

@@ -212,10 +212,17 @@ ja:
       menu: メニュー
       sign_in_as: "%{user} としてログイン中"
   shared:
+    comment_content:
+      edit: 編集
+      delete: 削除
     comments:
+      no_comments: (コメントはまだありません)
+    comment_form:
       create: コメントする
-      delete: 削除
-      no_comments: コメントはまだありません
+      update: 更新する
+      cancel: キャンセル
+    pager:
+      load_more: さらに読み込む
   reports:
     mentions:
       title: この日報に言及している日報

config/routes.rb

@@ -12,6 +12,6 @@
       resources :comments, only: :create
     end
   end
-  resources :comments, only: :destroy
+  resources :comments, only: %i(show edit update destroy)
   resources :users, only: %i(index show)
 end