LoginSignup
2
2

More than 3 years have passed since last update.

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

Posted at

解決したいこと

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

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

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>

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

変更したもの


<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精神に則り、同じ部分を2ヵ所削除することができ、見た目もだいぶスッキリしました。

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

参考にさせて頂きました

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

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2