将棋タイマーをつくろう

～HTML・CSS・JavaScriptで学ぶプログラミング入門～

目次

  1. はじめに
  2. 準備
  3. HTMLの作成
  4. CSSで見た目を整える
  5. JavaScriptで動きをつける
  6. スタート／切り替え機能
  7. リセット機能
  8. まとめ
  9. 発展課題
  10. 画像を挿入する

1章　はじめに

将棋には「持ち時間」を決めて対局するルールがあります。そのときに使うのが「将棋タイマー」です。

今回はWebブラウザで動くアプリとして作ります。

学ぶこと: HTML、CSS、JavaScript

将棋タイマー完成例

2章　準備

3章　HTMLの作成

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>将棋タイマー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>将棋タイマー</h1>
  <div id="playerA" class="timer">15:00</div>
  <div id="playerB" class="timer">15:00</div>
  <button id="switchBtn">スタート/切り替え</button>
  <button id="resetBtn">リセット</button>
  <script src="script.js"></script>
</body>
</html>

4章　CSSで見た目を整える

body { text-align:left; font-family:sans-serif; }
h1 { margin-top:20px; }
.timer { font-size:48px; margin:20px 0; }
button { padding:10px 20px; font-size:16px; margin:5px; cursor:pointer; }

5章　JavaScriptで動きをつける（基礎編）

// 初期値（15分）
let initialMinutes = 15;
let timeA = initialMinutes * 60;
let timeB = initialMinutes * 60;

// HTML要素取得
const playerAEl = document.getElementById("playerA");
const playerBEl = document.getElementById("playerB");

// 秒数を mm:ss に変換
function formatTime(seconds) {
  const m = Math.floor(seconds / 60);
  const s = seconds % 60;
  return `${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
}

// 表示更新
function updateDisplay() {
  playerAEl.textContent = formatTime(timeA);
  playerBEl.textContent = formatTime(timeB);
}

// 初期表示
updateDisplay();

6章　スタート／切り替え機能


// タイマーID
let timerId = null;
let currentPlayer = null;

// HTML要素取得
const switchBtn = document.getElementById("switchBtn");

// カウントダウン関数
function tick() {
  if(currentPlayer === "A"){
    if(timeA > 0){ timeA--; }
    else { clearInterval(timerId); alert("プレイヤーAの時間切れ！"); }
  } else if(currentPlayer === "B"){
    if(timeB > 0){ timeB--; }
    else { clearInterval(timerId); alert("プレイヤーBの時間切れ！"); }
  }
  updateDisplay();
}

// スタート／切り替えボタン
switchBtn.addEventListener("click", () => {
  currentPlayer = currentPlayer === "A" ? "B" : "A" || "A";
  clearInterval(timerId);
  timerId = setInterval(tick, 1000);
});

7章　リセット機能


const resetBtn = document.getElementById("resetBtn");

resetBtn.addEventListener("click", () => {
  clearInterval(timerId);
  timeA = initialMinutes*60;
  timeB = initialMinutes*60;
  currentPlayer = null;
  updateDisplay();
});

8章　まとめ

HTML・CSS・JavaScriptの役割を理解し、スタート/切り替えやリセット機能を実装しました。

9章　発展課題

10章　画像を挿入しよう

タイマー教材に画像を追加すると、見やすさや楽しさが増えます。

ステップ1: 画像を準備

ステップ2: imgタグで表示

<img src="images/timer.png" alt="タイマー画像" width="200">

ステップ3: 実際に画像表示

ステップ4: GitHub Pagesでの表示

VSCode・GitHub で公開する手順を見る