こんにちは！
今日は、最新のAIとのやり取りを通じて、自分がずっと欲しかった「理想の時間計算アプリ」をゼロから作り上げた過程をシェアします。
プログラミングの知識がなくても、AIに「やりたいこと」を伝えるだけで、ここまでのクオリティのものが作れるという実例としてご覧ください！
1. なぜ「時間計算アプリ」を作ろうと思ったのか？
仕事や勉強のスケジュールを立てる際、「1時間45分 ＋ 2時間30分 ＝ ？」といった計算、意外と面倒ですよね。 既存の電卓アプリでは60進数の計算がしにくく、かといって専用アプリは広告が多かったり、デザインが古かったり…。
そこで、「マテリアルデザインで美しく、電卓のように直感的に使えるアプリ」を自作することにしました。
2. AIとの共同開発プロセス
今回はGoogleのAI「Gemini」にお願いして、HTML/CSS/JavaScriptの1ファイル構成で作成してもらいました。
ステップ1：基本機能の実装
最初は「時間計算と10進数変換ができるアプリ」というざざっくりした依頼からスタート。 数秒で、洗練されたマテリアルデザインのUIが生成されました。
ステップ2：操作感へのこだわり（電卓スタイルへの変更）
当初は入力フォームに数字を入れる形式でしたが、スマホでの使いやすさを考え、「電卓のような数字ボタン（テンキー）入力」への変更を依頼。 一気に「ツール」から「ガジェット」のような愛着のわく操作感になりました。
ステップ3：さらなる時短「4桁自動変換」の実装
さらに使い勝手を追求し、「4つの数字を連続で入力したら、前の2つを『時』、後の2つを『分』に自動変換して」という機能をリクエスト。 これにより、「0930」と打つだけで自動的に「09:30」として認識されるようになり、入力の手間が劇的に減りました。
ステップ4：細部への「ダメ出し」とデザイン調整
「＝（イコール）ボタンを追加して、押すまで計算を確定させないで」 「ボタンの大きさがバラバラだから、均等な正円にして」 といった細かい要望にもAIは即座に対応。プロが作ったようなバランスの良いデザインに仕上がりました。
ステップ5：最終調整「計算プロセスの可視化」
最後に、計算が終わった後も「どんな式で計算したか（XX:XX + YY:YY =）」を画面に残す機能を追加。 「あれ、何を足したっけ？」という不安を解消し、業務ツールとしての実用性を極限まで高めました。
3. 完成したアプリがこちら！
完成したのは、シンプルかつパワフルな「Time Calculator Pro」です。
🌟 特徴
- スマート・タイム入力: 「0930」と打つだけで「9時間30分」に自動変換。
- 計算式の固定表示: ＝を押した後も式が残るので、エビデンス確認もバッチリ。
- ハイブリッド表示: 「11:30」という時間表示と、「11.50 h」という10進数表示を同時に確認。
- ワンタップコピー: 計算結果をすぐにテキストとしてコピー可能。
4. AIと開発してみて感じたこと
今回のやり取りを通じて感じたのは、AIは単なる「コード生成機」ではなく、「自分のこだわりを形にしてくれる優秀なエンジニア」だということです。
「ここが使いにくい」「もっとこうしたい」という人間ならではの感覚を伝えると、AIはそれを実現するためのロジック（今回なら4桁判定や状態管理など）をすぐに用意してくれます。
皆さんも、もし「もっとこうなればいいのに」と思う不便があれば、AIと一緒に自分専用のツールを作ってみませんか？
使用した技術
- HTML5 / JavaScript (Vanilla JS)
- Tailwind CSS (スタイリング)
- Google Fonts (Noto Sans JP / Roboto Mono)
あとがき：
「0930」と打つだけで時間が入力される快感は、自作ならではのカスタマイズ。AIとの対話は、まさに「未来の道具箱」を開けるような体験でした！
