投稿一覧を任意の場所に表示させる

ページの下部にposts/indexの投稿一覧を表示したい場合、通常は別の部分テンプレートを使用して、それを button_presses/index ページに組み込むことができます。以下のステップで実現できます。

1. まず、app/views/button_presses フォルダ内に \_post.html.erb という名前の部分テンプレートを作成します。この部分テンプレートは、各投稿を表示するためのコードを含む必要があります。

# app/views/button_presses/_post.html.erb

<tr>
  <td><%= post.title %></td>
  <td><%= post.content %></td>
</tr>

1. 次に、app/views/button_presses/index.html.erb ファイル内で、部分テンプレートをループして表示するコードを追加します。具体的には、@posts 変数を使用して投稿の一覧を取得し、部分テンプレートをループして表示します。以下はその例です：

# app/views/button_presses/index.html.erb

<h1 class="text-center">挑戦回数: <%= @button_press.count %></h1>
<div class="text-center">
  <div class="btn-group">
    <%= link_to 'プラス', increment_button_presses_path, method: :post, class: 'btn btn-primary btn-lg text-light' %>
    <%= link_to 'マイナス', decrement_button_presses_path, method: :post, class: "btn btn-lg btn-danger text-light" %>
  </div>
</div>

<h2>投稿一覧</h2>
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
    </tr>
  </thead>
  <tbody>
    <% @posts.each do |post| %>
      <%= render 'post', post: post %>
    <% end %>
  </tbody>
</table>

ここで、render メソッドを使用して \_post.html.erb 部分テンプレートを呼び出しています。

このようにすると、button_presses/index ページの下部に posts/index の投稿一覧を表示できます。部分テンプレートを使用することで、コードの再利用性と保守性が向上します。

each メソッドを呼び出すため@posts 変数は、button_presses/index アクション内で適切に設定されている必要があります。

確認すべき点：

1. button_presses/index アクション内で @posts 変数が適切に設定されていることを確認してください。投稿データを取得し、@posts に代入する必要があります。

2. @posts 変数をセットするコードがアクション内に存在しない場合、コントローラーで @posts を設定するためのコードを追加してください。例えば：

# app/controllers/button_presses_controller.rb

def index
  @button_press = ButtonPress.all
  @posts = Post.all # または適切な投稿のクエリを実行する
end

この例では、@posts 変数を設定しています。投稿を取得するために、Post.all というクエリを使用しています

@posts 変数を設定したら、button_presses/index ビューで投稿をループして表示できるはずです。

もし投稿の一覧ビューに編集ボタンと削除ボタンを追加するには、各投稿ごとに対応するアクションをリンクまたはボタンとして表示する必要があります。

<%= link_to '編集', edit_post_path(post), class: 'btn btn-primary text-light' %>
<%= link_to '削除', post, method: :delete, data: { confirm: '本当に削除しますか?' }, class: 'btn btn-danger text-light' %>