生成AIに頼りながら秒針付き時計を作ってみた⏰②

前回までのあらすじ

• HTMLとCSSを使って時計の見た目の箱（00:00:00）を用意↓

• 上記画像までの工程は1記事目をご覧ください

本記事の内容

• 非エンジニアがGeminiにJavaScriptのコードを作ってもらい、「時計を動かす」にチャレンジします

やること

• JavaScriptで以下を実施
  • 現在時刻の取得new Date()：「今、何時か？」を調べる
  • 処理の繰り返しsetInterval()：「1秒ごとに更新せよ」と命令する

①現在時刻を取得

• まずは、現在時刻を取得し、「時・分・秒」を個別に切り出すための関数を定義
• 下記をcodepenの「JSコード」へ入力

function updateTime() {
  // 1. 現在の「時」を取得する
  const now = new Date();
  
  // 2. 時・分・秒を個別に変数に格納する
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  
  // 3. 一桁の数字には「0」を付けて二桁にする（例：9 -> 09）
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;
  
  // (次のStepでHTMLに書き込む処理を追加します)
}

• 上記コードの補足

  • const now = new Date();：「今、何時？」とPCへ尋ねるコード。現在の年月日、時分秒を含むオブジェクトを取得
  • hour = hour < 10 ? '0' + hour : hour;：「もしhourが10未満なら、頭に0を付けてね。そうでなければhourのままね」という意味で、見た目を整えるためのもの

• 次に下記を「JSコード」へ入力

function updateTime() {
  // ... (省略: Step 2-1までの現在時刻の取得と整形処理)
  const now = new Date();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;
  
  // 4. HTML要素を取得し、時間を書き込む
  document.getElementById('hour').textContent = hour;
  document.getElementById('minute').textContent = minute;
  document.getElementById('second').textContent = second;
}

• 上記コードの補足
  • document.getElementById('hour')：HTMLの「idがhourの要素」を探してきて、というコード
  • .textContent = hour：その要素の中身（テキスト）を、取得したhourの値に上書きしてね、というコード

②1秒ごとに処理を繰り返す

• updateTime()関数を実行すれば一度だけ時間は表示されますが、時計を動かし続けるには、この処理を1秒ごとに繰り返す必要がありますのでsetInterval()を利用
• codepenのJSエリアの一番最後に、以下のコードを「JSコード」へ入力

// 関数を実行して、すぐに時間を表示する
updateTime();

// 1000ミリ秒（=1秒）ごとに updateTime 関数を実行し続ける
setInterval(updateTime, 1000);

🎉 これで、時計が動き始めました！