プログラミング初心者の私が、Progateで「HTML＆CSS」と「JavaScript」の学習を終えたので、何か1つ作品を作ってみたいと思い、ストップウォッチにチャレンジしました。
思ったより簡単だと思っていたのですが…最後にまさかの落とし穴が待っていました。
1. ストップウォッチを作ろうと思ったきっかけ
Progateで「HTML＆CSS」「JavaScript」の基礎を学び終え、そろそろ“何かを作ってみたい”という気持ちが芽生えてきました。
自分の力でアプリを作るのがどれほど大変なのか、体験してみたかったのも理由の1つです。
2. やったこと
まず、HTMLでdivタグを使って表示枠を作成。CSSで配置やボタンのフォント・色・デザインを整え、JavaScriptではタイマーの動作を制御しました。
さらに今回は、画面左上にリアルタイムの時計を表示する機能も追加しました。
3. うまくいったこと
最初に「＋ボタンーボタン」を作りました。
ボタンを押す度に数字が増えたとき、それだけで感動しました。
そして、ストップウォッチのスタートボタンを押して動いた瞬間には思わず声が出ました。
とても嬉しかったです。
さらに時計表示が左上に現れたときは、言葉にならないくらい嬉しかったです（ちょっと大げさかもしれませんが本当です笑）。
4. うまくいかなかったこと
ストップウォッチだけではつまらないので、時計を表示しようと思いました。
時計を左上に表示するまでは順調だったのに、なぜか時間の表記が「06:15 PM」「18時15分」など交互に切り替わって表示されるという謎のバグに遭遇しました。
何度やっても直らず、F12キーでエラーを調べても原因は全く分かりません。
「コードは合っているはずなのに…」と途方に暮れました。
その時の画像がこちら↓
5. 原因がわかるまで
チャッピー（ChatGPT）にも何度も助けてもらい、コードを1から書き直したり、別パターンで試したりしました。
それでも直らず、だんだん心が折れかけていた頃…。
ふと目に入ったのが、画面上に表示された「翻訳：日本語」のポップアップ。
試しに翻訳を「英語」に切り替えたら、なんとエラーが消えたのです！
▼ストップウォッチに時計を追加するために使った JavaScript の一部です。
「updateClock」という関数を1秒ごとに呼び出し、現在の時刻を表示する仕組みになっています。
function updateClock() {
const now = new Date();
const is24Hour = document.getElementById("toggleFormat").checked;
const hour = now.getHours();
const minute = now.getMinutes();
const formattedHour = is24Hour ? String(hour).padStart(2, "0") : String((hour % 12) || 12).padStart(2, "0");
const formattedMinute = String(minute).padStart(2, "0");
const ampm = is24Hour ? "" : (hour < 12 ? " AM" : " PM");
const timeString = `${formattedHour}:${formattedMinute}${ampm}`;
console.log("updateClock:", timeString);
document.getElementById("clock").textContent = timeString;
}
setInterval(updateClock, 1000);
updateClock();
</script>
見た目はストップウォッチと時計だから簡単だと思ったんだけどね。
こんなに時間かかると思わなかったよ！
まさか、翻訳機能が影響しているとはね（笑）
コードしか見てなかったよ！
6. 気づいたこと
原因はなんとGoogle翻訳の自動翻訳機能。
英語で表示されていた「06:15 PM」などをブラウザが勝手に「18時15分」などに翻訳して、表示が交互に切り替わっていたのでした。
コードは正しくても、ブラウザ側の仕様に振り回される
普段はとてもありがたい機能ですが、そんな想定外の落とし穴があるとは思いませんでした。
これも、ストップウォッチを作ったから気づけたことですね。
とても勉強になりました。
7. まとめ
プログラミングが完璧に分かっていなくても、作ってみることで理解が深まり、何より楽しい。
ストップウォッチなんて今更…と思う方もいるかもしれませんが、
私にとっては大きな挑戦であり、大きな一歩でした。
この歳になって「夢中になれること」に出会えただけで、本当に嬉しいです。
分からなくても、とにかくやってみる。これが一番大事なんだと、改めて実感しました。
コメント