【JavaScript】読み込むごとにリストをランダムに並び替える

2026年01月13日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は意外に要望が多いtipsを紹介します。

よく得意先の企業名やロゴをサイトに掲載するとき、
順番どうする？という悩みにぶち当たることがあります。
よく端っこに「順不同」と記載するのがセオリーかと思いますが、
こんな方法もあるので紹介します！

実装例

1段目

1 text
2 text
3 text
4 text
5 text
6 text
7 text
8 text
9 text
10 text

2段目

11 text
12 text
13 text
14 text
15 text
16 text
17 text
18 text
19 text
20 text

3段目

21 text
22 text
23 text
24 text
25 text
26 text
27 text
28 text
29 text
30 text

リロードしてみるとランダムに並び替わります。

HTML例

<h6>1段目</h6>
<ul class="js-random">
    <li>1 text</li>
    <li>2 text</li>
    <li>3 text</li>
    <li>4 text</li>
    <li>5 text</li>
    <li>6 text</li>
    <li>7 text</li>
    <li>8 text</li>
    <li>9 text</li>
    <li>10 text</li>
</ul>
<h6>2段目</h6>
<ul class="js-random">
    <li>11 text</li>
    <li>12 text</li>
    <li>13 text</li>
    <li>14 text</li>
    <li>15 text</li>
    <li>16 text</li>
    <li>17 text</li>
    <li>18 text</li>
    <li>19 text</li>
    <li>20 text</li>
</ul>
<h6>3段目</h6>
<ul class="js-random">
    <li>21 text</li>
    <li>22 text</li>
    <li>23 text</li>
    <li>24 text</li>
    <li>25 text</li>
    <li>26 text</li>
    <li>27 text</li>
    <li>28 text</li>
    <li>29 text</li>
    <li>30 text</li>
</ul>

CSS例

.js-random{
    margin: 0 0 20px;
}
.js-random li{
    padding: 10px;
    border-top: 1px solid #999;
    list-style: none;
    color: #fe5252;
    font-weight: bold;
}
.js-random li:last-of-type{
    border-bottom: 1px solid #999;
}

JavaScript例

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.js-random').forEach(ul => {
    const items = Array.from(ul.children);
    for (let i = items.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [items[i], items[j]] = [items[j], items[i]];
    }
    items.forEach(li => ul.appendChild(li));
    });
});