【jQuery】ランダムで要素を表示する完全ガイド｜複数表示・タイマー切替・シャッフル・重み付けまで

Webサイトにランダム性を加えると、訪問するたびに違うコンテンツが見られる新鮮さを演出できます。jQueryを使えばランダムに1件表示・複数件をランダム選択・一定時間ごとに自動切替・シャッフル表示などを簡潔に実装できます。本記事では基本から実用パターンまで段階的に解説します。

1. 基本：ランダムに1つの要素だけ表示

最もシンプルな実装です。全要素を非表示にしてからランダムに選んだ1つだけを表示します。

<div class="random-item">コンテンツA</div>
<div class="random-item">コンテンツB</div>
<div class="random-item">コンテンツC</div>
<div class="random-item">コンテンツD</div>

$(function () {
  var $items = $('.random-item');
  var total  = $items.length;

  if (total === 0) return;

  var randomIdx = Math.floor(Math.random() * total);

  $items.hide();            // 全て非表示
  $items.eq(randomIdx).show(); // ランダムに1つ表示
});

2. N件をランダムに選んで表示

5件の中から3件をランダムに選んで表示するなど、複数件のランダム表示が必要な場合はシャッフルしてから先頭N件を取得します。

$(function () {
  var $items  = $('.card-item');
  var showNum = 3;  // 表示する件数

  // Fisher-Yates シャッフル（配列をランダムな順番に並び替え）
  function shuffle(array) {
    var arr = Array.from(array);
    for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp;
    }
    return arr;
  }

  // 全要素を配列化してシャッフル
  var shuffled = shuffle($items.toArray());

  $items.hide();
  // 先頭 showNum 件を表示
  $(shuffled.slice(0, showNum)).show();
});

3. 一定時間ごとに自動切替（タイマー式）

バナーや証言コメントを3秒ごとに自動でランダム切替するパターンです。フェードアニメーションで滑らかに切り替えます。

<div id="random-rotator">
  <div class="rotate-item">バナー1</div>
  <div class="rotate-item">バナー2</div>
  <div class="rotate-item">バナー3</div>
</div>

$(function () {
  var $items     = $('.rotate-item');
  var total      = $items.length;
  var interval   = 3000;  // 切替間隔（ms）
  var currentIdx = Math.floor(Math.random() * total);  // 最初もランダム

  // 初期表示
  $items.hide();
  $items.eq(currentIdx).show();

  // 一定時間ごとに切替
  setInterval(function () {
    var nextIdx;
    do {
      nextIdx = Math.floor(Math.random() * total);
    } while (nextIdx === currentIdx && total > 1);  // 同じものを連続させない

    $items.eq(currentIdx).fadeOut(400, function () {
      $items.eq(nextIdx).fadeIn(400);
    });

    currentIdx = nextIdx;
  }, interval);
});

4. クリックのたびにランダム切替

ボタンを押すたびにランダムで別のコンテンツに切り替えるインタラクティブな実装です。

<div id="quote-box">
  <p class="quote-text"></p>
</div>
<button id="next-quote">別の名言を見る</button>

$(function () {
  var quotes = [
    "継続は力なり。",
    "失敗は成功の母。",
    "案ずるより産むが易し。",
    "七転び八起き。",
    "石の上にも三年。"
  ];

  var lastIdx = -1;

  function showRandom() {
    var idx;
    do {
      idx = Math.floor(Math.random() * quotes.length);
    } while (idx === lastIdx && quotes.length > 1);
    lastIdx = idx;

    $('.quote-text').fadeOut(200, function () {
      $(this).text(quotes[idx]).fadeIn(300);
    });
  }

  showRandom();  // 初期表示

  $('#next-quote').on('click', showRandom);
});

5. 全要素をシャッフルして並び替える

カード一覧などを毎回ランダムな順序で表示したい場合は、DOMの並び順自体を変更します。

$(function () {
  var $container = $('#card-container');
  var $cards     = $container.children('.card');

  // Fisher-Yates シャッフルで並び替え
  var arr = $cards.toArray();
  for (var i = arr.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp;
  }

  // シャッフル後の順番でDOMに追加し直す
  $.each(arr, function (i, el) {
    $container.append(el);
  });
});

6. 重み付きランダム（出現率に差をつける）

特定のバナーや広告を他より多く表示したい場合に使います。重みの合計に対してランダムな値を選ぶ手法です。

$(function () {
  // 各要素の出現確率（重み）を設定
  var items = [
    { el: $('#banner-a'), weight: 50 },  // 50% の確率
    { el: $('#banner-b'), weight: 30 },  // 30% の確率
    { el: $('#banner-c'), weight: 20 }   // 20% の確率
  ];

  function weightedRandom(items) {
    var total = items.reduce(function (sum, item) { return sum + item.weight; }, 0);
    var rand  = Math.random() * total;
    var cumulative = 0;
    for (var i = 0; i < items.length; i++) {
      cumulative += items[i].weight;
      if (rand < cumulative) return items[i].el;
    }
    return items[items.length - 1].el;
  }

  // 全バナーを非表示にして重み付きで1つ表示
  items.forEach(function (item) { item.el.hide(); });
  weightedRandom(items).show();
});

7. 実用パターン：おすすめ記事のランダム表示

ブログのサイドバーにおすすめ記事をランダムで3件表示する実装例です。

<div id="recommend-list">
  <article class="rec-item"><a href="/post/1/">記事タイトル1</a></article>
  <article class="rec-item"><a href="/post/2/">記事タイトル2</a></article>
  <article class="rec-item"><a href="/post/3/">記事タイトル3</a></article>
  <article class="rec-item"><a href="/post/4/">記事タイトル4</a></article>
  <article class="rec-item"><a href="/post/5/">記事タイトル5</a></article>
</div>

$(function () {
  var $items    = $('.rec-item');
  var showCount = 3;

  // シャッフル関数
  function shuffle(arr) {
    for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var t = arr[i]; arr[i] = arr[j]; arr[j] = t;
    }
    return arr;
  }

  var shuffled = shuffle($items.toArray());

  // 全非表示→先頭3件を表示
  $items.hide();
  $(shuffled.slice(0, showCount)).fadeIn(400);
});

8. バニラJSでの代替実装

jQuery不要のバニラJSでも同じロジックを実装できます。モダンブラウザ向けのシンプルな書き方です。

// ランダムに1件表示
document.addEventListener('DOMContentLoaded', function () {
  var items = Array.from(document.querySelectorAll('.random-item'));
  if (items.length === 0) return;

  items.forEach(function (el) { el.style.display = 'none'; });

  var idx = Math.floor(Math.random() * items.length);
  items[idx].style.display = '';
});

// N件ランダム表示（Fisher-Yates）
document.addEventListener('DOMContentLoaded', function () {
  var items    = Array.from(document.querySelectorAll('.card-item'));
  var showNum  = 3;

  // Fisher-Yates シャッフル
  for (var i = items.length - 1; i > 0; i--) {
    var j   = Math.floor(Math.random() * (i + 1));
    var tmp = items[i]; items[i] = items[j]; items[j] = tmp;
  }

  items.forEach(function (el, idx) {
    el.style.display = idx < showNum ? '' : 'none';
  });
});

まとめ

jQueryでランダム表示を実装するコアロジックは Math.floor(Math.random() * length) で0〜length-1のインデックスを得ることです。用途に応じて下表を参考に実装方法を選んでください。

関連記事: jQueryのアニメーション完全ガイド / スクロールに合わせたフェードインアニメーション

よくある質問（FAQ）