Webサイトを見ていると、トップページの画像が自動で切り替わったり、「広告をスキップまであと5秒」とカウントダウンされたりしますよね。
あれはJavaScriptで「タイマー」を使っています。
今回は、時間を操る2つの重要な命令をマスターしましょう。
これを使えば、ついに「放置していても動くサイト」が作れます！
1. 2つのタイマー命令
JavaScriptには、用途に合わせて2種類のタイマーがあります。
| 命令 | 動き | イメージ |
|---|---|---|
| setTimeout （セット・タイムアウト） |
指定した時間後に 1回だけ実行する |
カップ麺のタイマー （3分経ったら鳴って終わり） |
| setInterval （セット・インターバル） |
指定した時間ごとに 繰り返し実行する |
メトロノーム （一定間隔でずっと動く） |
2. 単位は「ミリ秒」に注意！
JavaScriptで時間を指定する時、単位は「秒」ではなく「ミリ秒（ms）」を使います。
- 1秒 ＝ 1000
- 3秒 ＝ 3000
- 0.5秒 ＝ 500
「1秒待ちたいから 1 と書く」と、0.001秒で実行されてしまうので注意してください！
3. 実践：3秒後に爆発（？）するボタン
まずは単発タイマーの setTimeout を使ってみましょう。
書き方
setTimeout(実行したい関数, 待ち時間)
<button id="bomb-btn">押すなよ？</button>
<script>
const btn = document.querySelector("#bomb-btn");
btn.addEventListener("click", () => {
// ボタンを押した瞬間のメッセージ
console.log("スイッチオン...");
// 3秒後(3000ms)に実行！
setTimeout(() => {
alert("ドッカーン！！💥");
}, 3000);
});
</script>4. 実践：自動スライドショーを作ろう
次は、繰り返しの setInterval を使って、Web制作で最もよく使われる「自動スライドショー」を作ります。
画像（imgタグ）の src 属性を一定時間ごとに書き換える仕組みです。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
/* 画像のサイズを整える */
#slide-img {
width: 100%;
max-width: 500px;
height: 300px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: 0.5s; /* ふわっと切り替える */
}
</style>
</head>
<body>
<h1>自動スライドショー</h1>
<img id="slide-img" src="https://via.placeholder.com/500x300?text=Image+1">
<p>
<button id="stop-btn">ストップ！</button>
</p>
<script>
// 1. 画像のURLを配列に入れておく
const images = [
"https://via.placeholder.com/500x300/ff9999?text=Image+1", // 0番目
"https://via.placeholder.com/500x300/99ccff?text=Image+2", // 1番目
"https://via.placeholder.com/500x300/99ff99?text=Image+3" // 2番目
];
let index = 0; // 「今何番目を表示しているか」を覚える変数
const imgElement = document.querySelector("#slide-img");
// 2. 画像を切り替える関数
const changeImage = () => {
// 次の画像へ（番号を1増やす）
index++;
// ★もし最後の画像を超えたら、最初（0番目）に戻す
if (index >= images.length) {
index = 0;
}
// 画像のパスを書き換える
imgElement.src = images[index];
};
// 3. タイマーセット：2秒(2000ms)ごとに changeImage を実行
// 変数 timerId に入れておくのがコツ（後で止めるため）
const timerId = setInterval(changeImage, 2000);
// 【おまけ】タイマーを止める方法
const stopBtn = document.querySelector("#stop-btn");
stopBtn.addEventListener("click", () => {
// clearInterval(止めるタイマーID)
clearInterval(timerId);
alert("スライドショーを停止しました");
});
</script>
</body>
</html>解説：無限ループの作り方
スライドショーで一番大事なロジックはここです。
index++; // 番号を増やす
if (index >= images.length) {
index = 0; // 行き過ぎたら0に戻す
}この if 文があるおかげで、0 → 1 → 2 → 0 → 1… と永遠にループします。images.length は「配列の中身の数（今回は3）」を自動で教えてくれる便利な機能です。
まとめ
- 1回だけなら
setTimeout。 - 繰り返すなら
setInterval。 - 時間は ミリ秒（1000 ＝ 1秒）。
- 止めるときは
clearInterval。
これで「時間」をコントロールできるようになりました。
次回は、ついにWebサイトの外へ飛び出します！
「API（エーピーアイ）」を使って、インターネット上の天気予報データを取ってくる方法を学びます。お楽しみに！
📝 今日のミニテスト
クリックで答え合わせ！
Q1. 「1.5秒」を指定する時の数値は？
正解：1500
JavaScriptのタイマーはミリ秒単位です。
Q2. 一定時間ごとに処理を「繰り返す」命令は？
正解：setInterval
setTimeout は1回だけ実行して終わります。
Q3. タイマーを停止させる命令 clearInterval( ??? ) の ??? には何を入れる？
正解：タイマーID（変数）
const timerId = setInterval(...) のように、タイマーを変数に入れておき、それを指定して止めます。