ChatGPT 5.2 と設計対話しながら、1 時間でシングル HTML アプリを公開した記録

はじめに

先日、ちょっとした思いつきから
「シンプルで信頼できる時計表示の 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 を「魔法の箱」としてではなく
設計対話の相手として使う
というやり方は、今後も積極的に続けていきたいと思います。

この記事は、技術記事プラットフォームにも同内容を掲載しています。