はじめに
先日、ちょっとした思いつきから
「シンプルで信頼できる時計表示の Web ページ」
を作りたくなりました。
要件はかなり明確で
- 日本時間と別のタイムゾーンを同時に表示したい
- 秒表示はできるだけ正確に
- UI は極限まで質素に
- できれば 1 枚の HTML で完結させたい
という、いかにも “技術者の道具” 寄りのものです。
結果として、このアプリは ChatGPT 5.2 と対話しながら、実装から公開まで約 1 時間 で完成しました。
この記事ではその過程と学びをまとめます。
作ったもの
完成したアプリはこちらです。
- デモ: https://hiroyuki-suwa.github.io/dual-time-clock/
- リポジトリ: https://github.com/hiroyuki-suwa/dual-time-clock
特徴としては
- 単一 HTML ファイル（HTML + CSS + JavaScript）
- 2 つのタイムゾーンを自由に選択可能
- 秒境界に同期した時刻更新（ドリフトなし）
- サーバ時刻（HTTP Date ヘッダ）参照と自動フォールバック
- キーボード操作（
Sキー）で設定を開く - 設定は localStorage に保存
- 装飾を排したミニマル UI
といった内容です。
ChatGPT 5.2 の使い方
今回 ChatGPT 5.2 は
「コードを一発で吐かせるツール」
としてではなく
設計の壁打ち相手・実装の共同作業者
として使いました。
具体的には
- 「setInterval(1000) のズレってどう扱うのが正しい？」
- 「秒境界に同期する実装はどう書くのが綺麗？」
- 「GCS 配信でも“サーバ時刻基準”っぽくできる？」
- 「UI を削れるだけ削ると、どこが最終形？」
といった問いを投げ
設計判断の理由まで含めて議論 しました。
結果として
- 技術的に妥当
- 長時間動かしても破綻しない
- 後から読んでも納得できるコード
に自然と収束していきました。
「速く作れた」理由
1 時間程度で公開まで行けた理由は
単に AI がコードを書けるからではありません。
大きかったのは次の 2 点です。
1. 要件が言語化されていた
「何を削りたいか」
「どこまでやりたいか」
が自分の中でかなり明確だったため
ChatGPT との対話がブレませんでした。
2. 実装と設計を同時に詰めた
とりあえず動くものを作ってから考える、ではなく
- 実装する前に設計を詰める
- 実装後すぐに違和感を言語化する
という往復を高速で回せたのが大きかったです。
ChatGPT を使って感じたこと
ChatGPT 5.2 は
「雑に使うと雑な成果物が出る」一方で
きちんと設計者として向き合うと
かなり優秀なペアプログラマになる
と感じました。
特に
- 実装の選択肢を複数出してくれる
- なぜその方法が良いのかを説明できる
- 美学や設計思想の話も通じる
という点は、人間同士のレビューに近い体験でした。
おわりに
今回のアプリは大規模でも派手でもありませんが
「完成形として公開できる」
という意味ではとても満足しています。
ChatGPT を使うことで
試作止まりになりがちなアイデアを、ちゃんと世に出せた
という点が、個人的には一番の収穫でした。
AI を「魔法の箱」としてではなく
設計対話の相手として使う
というやり方は、今後も積極的に続けていきたいと思います。
この記事は、別のプラットフォームにも同内容を掲載しています。