JavaScriptのsetTimeoutでリストを順番に時間差表示する方法

JavaScriptでクリック後にリストの要素を順番に時間差で表示する演出を、初心者向けに解説します。
この方法を使うと、クリックした瞬間から要素が1つずつ表示され、ユーザーに分かりやすい視覚的な動きを追加できます。

完成形
コード
1. HTML＋JS
2. CSS
解説
まとめ
関連リンク

完成形

リストを作成ボタンを押して、要素が1つずつ表示されることを確認してください。

コード

HTML + JavaScript と CSS を分けて紹介します。
完成形のコードは一例ですので、スタイルなどは自由に変更してください。

HTML＋JS

<button>リストを作成</button>
<ol></ol>

<script>
const shoguns = ['家康', '秀忠', '家光', '家綱', '綱吉'];

const button = document.querySelector('button');
const ol = document.querySelector('ol');

function createList(array) {
  for (let i = 0; i < array.length; i++) {
    setTimeout(() => {
      const li = document.createElement('li');
      li.textContent = array[i];
      ol.appendChild(li);
    }, i * 500);
  }
}

button.addEventListener('click', () => {
  ol.innerHTML = '';
  createList(shoguns);
  button.textContent = 'もう1回';
});
</script>

CSS

body {
  font-family: sans-serif;
  padding: 20px;
  background-color: #f9f9f9;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  margin-bottom: 20px;
}

button:hover {
  background-color: #45a049;
}

ol {
  list-style-position: inside;
  padding-left: 0;
}

li {
  background-color: #fff;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

解説

1. 配列の作成

const shoguns = ['家康', '秀忠', '家光', '家綱', '綱吉'];

shoguns という配列を作っています。
配列の中には、順番に表示したい徳川将軍の名前を入れています。

2. HTML 要素の取得

const button = document.querySelector('button');
const ol = document.querySelector('ol');

button はクリックイベントを登録するために取得しています。
ol はリストを表示する <ol> 要素です。
document.querySelector を使って、HTML 上の最初の <button> と <ol> を取得しています。

3. リストを順番に表示する関数

function createList(array) {
  for (let i = 0; i < array.length; i++) {
    setTimeout(() => {
      const li = document.createElement('li');
      li.textContent = array[i];
      ol.appendChild(li);
    }, i * 500);
  }
}

createList は配列の要素を順番に <li> として追加する関数です。
for ループで配列の要素を1つずつ処理しています。
setTimeout を使い、i * 500 ミリ秒遅らせて実行することで、順番に時間差で表示する演出を作っています。
- 1つ目の要素は 0ms で追加
- 2つ目は 500ms 後
- 3つ目は 1000ms 後…という仕組みです。
document.createElement('li') で <li> 要素を作り、textContent に配列の値を設定しています。
最後に ol.appendChild(li) でリストに追加しています。

【JavaScript】createElementとappendでリストを作る基本

JavaScriptのcreateElementとappendを使って、配列からHTMLリストを作る方法を解説します。初心者でも理解しやすい基本的な使い方を紹介します。

4. クリックイベントの登録

button.addEventListener('click', () => {
  ol.innerHTML = '';
  createList(shoguns);
  button.textContent = 'もう1回';
});

ボタンをクリックすると、まず ol.innerHTML = '' で前のリストを消します。
その後、createList(shoguns) を呼び出して順番に表示させます。
ボタンの文字を 'もう1回' に変更することで、ユーザーに再実行できることを示しています。

まとめ

setTimeout をループと組み合わせることで、順番に時間差で要素を表示する演出を簡単に作れます。
innerHTML = '' を使えば、前のリストを消して再実行できます。
document.createElement と appendChild で、動的にリスト要素を追加する方法を理解しておくと、同様の演出をさまざまな場面で応用できます。

※このコードは学習用のサンプルです。ボタンを短時間に何度もクリックすると、リストが重なって表示されるなど動作が乱れる場合があります。実用に使う場合はクリック制御などの工夫が必要です。