1.信号機ってどんな仕組み？
私たちが普段見かける信号機は、一定のルールで「赤 → 青 → 黄 → 赤」と色が順番に切り替わっています。これによって車や人の動きを制御し、交通の安全を守っています。
たとえば、以下のような動作サイクルを持つ信号機を想定してみましょう。
- 赤信号：5秒間停止
- 青信号：5秒間進行
- 黄信号：2秒間注意
このように、信号機には「色の切り替わりの順番」と「点灯する時間」が決められており、それを繰り返すだけのシンプルな構造になっています。
今回の記事では、この信号機の動きをJavaScriptを使ってWeb上で再現してみます！
2.HTMLで信号機の見た目を作る
まずは信号機の“見た目”をHTMLで作っていきましょう。
今回は縦型の信号機をイメージして、3つの丸いランプ（赤・黄・青）を縦に並べて配置します。それぞれのランプは<div>タグで作成し、後ほどCSSで丸くスタイルを整えます。
以下がHTMLのコードです：
<div class="traffic-light">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
</div>このように、信号機本体を<div class="traffic-light">で囲み、その中に3つのランプ（light）を入れています。
.red→ 赤信号.yellow→ 黄信号.green→ 青信号
これで、信号機の土台が完成しました。次は、CSSでスタイルを整えて、本物っぽく見せていきましょう！
3.CSSでランプのON/OFFを表現
HTMLで作った3つのランプに、CSSを使ってスタイルをつけていきます。
- ランプの形は円形（
border-radius）にする - 消灯状態は暗めに見せる（
opacityで調整） - 点灯中のランプには
.onクラスを追加して明るく表示
以下がそのCSSコードです：
.traffic-light {
width: 100px;
background: #333;
padding: 15px;
border-radius: 10px;
margin: 0 auto;
}
.light {
width: 60px;
height: 60px;
margin: 10px auto;
border-radius: 50%;
background-color: #555;
opacity: 0.2;
transition: opacity 0.5s;
}
.red.on {
background-color: red;
opacity: 1;
}
.yellow.on {
background-color: yellow;
opacity: 1;
}
.green.on {
background-color: limegreen;
opacity: 1;
}ポイント解説：
.lightは共通スタイル。丸くして薄暗く表示（消灯状態）。.onクラスを追加するとopacity: 1で点灯状態に。- 色ごとのクラス（
.red,.yellow,.green）でそれぞれの色を設定。 - この時点ではまだランプは点灯しません（JavaScriptで制御するのは次のステップ）。
これで、ランプの“ON/OFF”状態をCSSで表現できるようになりました。
4.JavaScriptでランプを順番に切り替える処理
HTMLとCSSで信号機の見た目は整いました。
ここからはJavaScriptを使って、信号のランプを一定の間隔で自動的に切り替える処理を作っていきます。
流れのイメージ
- 最初に赤信号を点灯
- 数秒後に緑 → 黄色 → 赤 と順番に切り替える
- この動作をループさせる
JavaScriptコード（基本編）
const lights = document.querySelectorAll('.light');
let current = 0;
function changeLight() {
// すべてのランプの点灯をオフにする
lights.forEach(light => light.classList.remove('on'));
// 現在のランプを点灯させる
lights[current].classList.add('on');
// 次のランプへ（0 → 1 → 2 → 0 ...）
current = (current + 1) % lights.length;
}
// 初回の点灯
changeLight();
// 3秒ごとにランプを切り替える
setInterval(changeLight, 3000);5.応用：色ごとに点灯時間を変える
先ほどのコードでは、3秒ごとにすべてのランプが均等に切り替わるようになっていました。でも実際の信号機では「赤は5秒」「青は5秒」「黄は2秒」など、それぞれの色で点灯時間が違います。
そこで、ランプごとに異なる時間で切り替えるように、JavaScriptのコードを改良してみましょう。
各色に応じた時間設定付きのコード
const lights = document.querySelectorAll('.light');
const durations = [6000, 2000, 6000]; // 赤, 黄, 緑の点灯時間（ms）
let current = 0;
function changeLight() {
lights.forEach(light => light.classList.remove('on'));
lights[current].classList.add('on');
const delay = durations[current];
current = (current + 1) % lights.length;
setTimeout(changeLight, delay);
}
// 最初のランプからスタート
changeLight();改良ポイント
durations配列を使って、色ごとの時間（ミリ秒）を設定setTimeout()を使って、次の色に進むまでの待ち時間を柔軟に変更setInterval()ではなくsetTimeout()にしたことで、ランプごとに異なる待機時間が実現できました
6.まとめ
今回の記事では、JavaScriptを使って「動く信号機」を実装しました。
- HTMLとCSSで信号機の見た目を作成
- JavaScriptでランプを順番に切り替える処理を実装
- 色ごとに点灯時間を変える応用も紹介
こうした身近なものを再現することで、DOM操作やタイマー処理の基礎を楽しく学べます。
この信号機をベースに、歩行者ボタンや夜間モードなども追加すれば、さらに実用的なインタラクティブUIに発展できます！
コメント