【Bootstrap】Railsのeachメソッドで取り出す回数に制限をかける話〜viewで使えた〜

6058 ワード
Bootstrap Ruby Rails Ruby テキストリンク

解決したいこと

Carouselでviewファイルの作成が完了し、ここには新規投稿を新しいものから順番に表示していくことにしました。
eachメソッドでできそうだな〜と思ったのですが、デフォルトでは表示できる領域が3つになっています。

※下記画像、Headingの部分です

DBに入っているデータが4つ以上になった場合、自動で二段目以降が形成されていってしまうので、eachメソッドで取り出す数に制限をかけて3つまでに抑える方法を探しました。

元々のソースコード（Heading部分


<div class="row">
 <div class="col-lg-4">
  <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
  <h2>Heading</h2>
  <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
  <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>

〜以下同じものがあと２つ繰り返し〜

変更したもの


<div class="row">
  <% @item.first(3).each do |item| %>　　　　⬅️追加したコード
    <div class="col-lg-4">
      <%= image_tag item.image, width: '360', height: '280' %>
      <h1><%= item.hoge %></h1>
      名前
      <h4><%= item.hogehoge %></h4>
      紹介
      <h4><%= item.huga %></h4>
      <button type="button" class="btn btn-outline-secondary rounded-pill"><%= link_to "詳細を見る" %></button>
    </div>
  <% end %>
</div>

<% @item.first(3).each do |item| %>
と、することでeachメソッドで配列から取り出す回数を指定しました。
今回のケースだと3ヵ所になるので、(3)になります。
DRY精神に則り、同じ部分を２ヵ所削除することができ、見た目もだいぶスッキリしました。

今回のことで自分の想像できる範囲のことはほとんど可能なんじゃないか？と思いました。
プログラミングってすごい技術の集大成ですね。
先人たちの知恵に感謝です。
まずは色々な方法で検索して探して、見つけたものをトライしてみることが大切だと実感しました。

参考にさせて頂きました

Ruby eachループの回数を指定する

ありがとうございました。