ChatGPTに教えてもらいながらストップウォッチを作る

2024年5月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はこの前の神経衰弱のページで使った「ストップウォッチ」をもう一度作ってみました。

教えてChatGPT

ところでみなさんはChatGPTをお仕事に活用されているでしょうか。

chatGPTのGPTとは、Generative Pre-trained Transformer（事前学習済みの文章生成変換器）とGeneral-Purpose Technologies（汎用技術）の略だそうです。

私はこれまであまり使ってこなかったのですが、本当、どんどん賢くなっていますよね。

薬の知識で負けるわけにはいかないですが、コーディングに関してはどんどん教えてもらいましょう。

「JavaScriptでストップウォッチを作りたい」と質問してみました。

<h1 id="stopwatch">00:00:00</h1>
<button onclick="startStopwatch()">スタート</button>
<button onclick="stopStopwatch()">ストップ</button>
<button onclick="resetStopwatch()">リセット</button>

let timer;
let seconds = 0;
let minutes = 0;
let hours = 0;

function startStopwatch() {
  timer = setInterval(updateStopwatch, 1000);
}

function stopStopwatch() {
  clearInterval(timer);
}

function resetStopwatch() {
  clearInterval(timer);
  seconds = 0;
  minutes = 0;
  hours = 0;
  updateDisplay();
}

function updateStopwatch() {
  seconds++;
  if (seconds === 60) {
    seconds = 0;
    minutes++;
    if (minutes === 60) {
      minutes = 0;
      hours++;
    }
  }
  updateDisplay();
}

function updateDisplay() {
  const formattedTime = formatTime(hours) + ':' + formatTime(minutes) + ':' + formatTime(seconds);
  document.getElementById('stopwatch').innerText = formattedTime;
}

function formatTime(time) {
  return time < 10 ? '0' + time : time;
}

これだけの情報がわずか数秒で得られるのだからすごい。

CSSで適当に装飾して、実装してみましょう。

00:00:00

おお　ちゃんと測れる。

でもこれスタートボタン何回も押したら「時は加速するメイド・イン・ヘブン」してしまいますね。「覚悟した者」は「幸福」であるッ！

加速してしまったらもうストップボタンスタープラチナ ザ・ワールドもリセットボタンゴールド・E・レクイエムも効きませんね。リロードバイツァ・ダストするしかないですね。 さてどうしたものか。

追加で質問

追加で「スタートボタンを何回も押すとおかしくなるのですが」と質問してみました。

すると以下の提案をされました。

<h1 id="display">00:00:00</h1>
<button id="startStopBtn" onclick="startStop()">スタート</button>
<button id="resetBtn" onclick="reset()">リセット</button>

let timer;
let seconds = 0;

function startStop() {
  if (!timer) {
    timer = setInterval(updateDisplay, 1000);
    document.getElementById('startStopBtn').textContent = 'ストップ';
  } else {
    clearInterval(timer);
    timer = null;
    document.getElementById('startStopBtn').textContent = 'スタート';
  }
}

function reset() {
  clearInterval(timer);
  timer = null;
  seconds = 0;
  updateDisplay();
  document.getElementById('startStopBtn').textContent = 'スタート';
}

function updateDisplay() {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;
  const displayString = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
  document.getElementById('display').textContent = displayString;
  seconds++;
}

00:00:00

スタートボタンとストップボタンを1つにしてありますね。

確かにその方がしっくりきます。

でもなんか初回だけ、始動が遅いような気がするなあ。

あと、100分の1秒まで測りたいかな。

100分の1秒まで測りたい

さらに「初回のみ、ストップウォッチが始まるまでタイムラグがあります」「100分の1秒まで測りたいです」と質問してみました。たぶん「めんどくさい客やなぁ」って思われてる

こんなコードが返ってきました。

<h1 id="display">00:00.00</h1>
<button onclick="startStopwatch()" id="startStopButton">スタート</button>
<button onclick="resetStopwatch()">リセット</button>

let startTime;
let elapsedTime = 0;
let isRunning = false;
let intervalId;

function startStopwatch() {
  const button = document.getElementById("startStopButton");
  if (!isRunning) {
    startTime = new Date().getTime() - elapsedTime;
    isRunning = true;
    updateDisplay();
    intervalId = setInterval(updateDisplay, 10);
    button.innerText = "Stop";
  } else {
    isRunning = false;
    clearInterval(intervalId);
    button.innerText = "Start";
  }
}

function resetStopwatch() {
  const button = document.getElementById("startStopButton");
  elapsedTime = 0;
  startTime = new Date().getTime();
  updateDisplay();
  if (!isRunning) {
    button.innerText = "Start";
  }
}

function updateDisplay() {
  const currentTime = new Date().getTime();
  elapsedTime = currentTime - startTime;
  const formattedTime = formatTime(elapsedTime);
  document.getElementById("display").innerText = formattedTime;
}

function formatTime(milliseconds) {
  const totalSeconds = Math.floor(milliseconds / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  const centiseconds = Math.floor((milliseconds % 1000) / 10);
  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(centiseconds).padStart(2, '0')}`;
}

00:00.00

やっとできたぁ～※実際は、10往復くらいやり取りをしました。

100分の1秒まで測る場合は、++じゃなくてgetTimeを使った方がいいみたいですね。

まとめ

ただコードを教えてくれるだけでなく、コメントアウトも付けてくれて、修正依頼をしたら変更点やその理由も説明してくれて、そしてこっちの説明が足りなかっただけなのに「申し訳ありません」と言える謙虚さも持ち合わせている。

さすがChatGPT！
おれたちにできない事を
平然とやってのけるッ
そこにシビれる！
あこがれるゥ！