【Laravel + JavaScript】最初は数件だけ表示し「もっと見る」で全件表示する実装

ブログや商品一覧ページでは、

• 最初は数件だけ表示する
• 「もっと見る」ボタンを押すと残りを表示する

といったUIをよく見かけます。

例えば次のような仕様です。

• 最初は3件だけ表示
• 「もっと見る」ボタンをクリック
• 残りの要素をすべて表示

今回はLaravel（Blade）とJavaScriptを使って、
この「もっと見る」機能を実装する方法を紹介します。

「もっと見る」ボタンの役割

「もっと見る」ボタンは、
最初は一部の要素だけ表示しておき、
ボタンを押したときに残りの要素を表示するUIです。

この方法を使うことで、

• ページの見た目をスッキリさせる
• 最初の表示を軽くする

といったメリットがあります。

実装の完成イメージ

最初は3件だけ表示されます。

記事1
記事2
記事3
[もっと見る]ボタン

ボタンを押すと残りが表示されます。

記事1
記事2
記事3
記事4
記事5
.
.
.
記事12

Laravelでデータを取得する

まずはコントローラーで記事一覧を取得します。

例

$posts = Post::latest()
    ->take(12)
    ->get();

ポイント

• latest() で新しい順に並べる
• take() で取得件数を制限する

Bladeで最初の3件だけ表示する

Blade（ビューの作成に使われるテンプレート）では、4件目以降に非表示クラスを付与します。

@foreach($posts as $index => $post)

<div class="post-item {{ $index >= 3 ? 'is-hidden' : '' }}">
    <h3>{{ $post->title }}</h3>
</div>

@endforeach

<div id="show-more-button">もっと見る</div>

ポイントはこの部分です。

$index >= 3

この条件によって、4件目以降の要素にis-hiddenクラスを付与しています。

CSSで非表示クラスを作る

.is-hidden {
  display: none;
}

このクラスが付いている要素は表示されません。さきほどのコードだと４件目以降が非表示になります。

JavaScriptで残りを表示する

「もっと見る」ボタンがクリックされたときに、非表示クラス（is-hidden）を削除します。

document.addEventListener('DOMContentLoaded', function () {

  const button = document.getElementById('show-more-button');

  button.addEventListener('click', function () {

    document.querySelectorAll('.is-hidden').forEach(function(el){
      el.classList.remove('is-hidden');
    });

    button.classList.add('is-hidden');

  });

});

この処理により、

• 非表示要素がすべて表示される
• 「もっと見る」ボタンは非表示になる

という動作になります。

実装のポイント

Bladeで表示件数を制御する

Bladeの$indexを使うことで、表示件数を簡単に制御できます。

$index >= 3

CSSで表示を制御する

JavaScriptでdisplayを直接変更するのではなく、

classの付け外し

で表示を制御すると、コードがシンプルになります。

JavaScriptの記述は最小限にする

今回のJavaScriptでは、classの付け外しの処理だけでOKです。

シンプルなコードにしておくと、保守性も向上します。

まとめ

LaravelとJavaScriptを使えば、

• 最初は数件だけ表示
• 「もっと見る」で残りを表示

といったUIを簡単に実装できます。

今回の実装のポイントは次の3つです。

• Bladeで表示件数を制御する
• CSSで非表示クラスを作る
• JavaScriptでクラスを削除する

シンプルな実装なので、

• 商品一覧
• ブログ一覧
• ニュース一覧

など、さまざまなページで応用できます。