開発のきっかけ:倒立の時間を正確に計りたい
毎朝、仕事前に倒立をしています。頭に血が巡る感じがして、在宅ワークの運動不足解消にもいいからです。
これまでは「そろそろかな」と適当に止めていたのですが、どうせやるなら正確なタイムを測りたい。
そう考えて今流行っている Claude Code の練習がてら、自分専用のツールを作ってみることにしました。
技術構成
メンテナンスがめんどくさいということで、バージョンアップ対応などを極力避けるためVanillaJSにしています。
AIで作るならReactもVanillaも変わらない気がしています。
- Frontend: HTML / CSS / Vanilla JS
- AI: Cursor / Claude Code
- Infra: Cloudflare (Pages / Registrar)
- Site: tighttimelog.org
AI(Claude Code)での開発体験
事前に決めていたスタックを伝えてプロトタイプを作らせ、そこからプロンプトで微調整していく流れでした。
- 多言語・ダークモード: このあたりの「実装できるけど面倒な作業」が、AIだと一瞬で終わるのが素晴らしいかったです。
-
AdSense対応: プライバシーポリシーの用意など、付随する細かい作業もAIに投げられるので、本質的なロジックに集中できました。
リーガル的な問題でいつもビビってしまうので強い味方でした。ただどこまで信用していいものか。
人間がやるべきだったこと
CursorやClaude Codeだけで完結したかったのですが、以下の作業はまだ「外に出て」自分でやる必要がありました。
- Cloudflareでのドメイン取得やデプロイ設定
- AdSenseの登録・審査周り
将来的にインフラ側がCursor的なインターフェースを持ったら、エディタから一歩も出ずにデプロイまで完結するんだろうな、という予感がします。
すでにサービスとしてあったりやり方があったりしそうな気はしています。
Gitの連携とか。。。ただ今回は静的デプロイなので、その恩恵は得られませんでした。
まとめ
自分一人の力では腰が重かった開発も、AIの「想像した瞬間に形になる」スピード感のおかげで、AdSenseを載せて公開(デプロイ)するところまで一気に持っていけました。
初めてここまで形にできたのは、間違いなくAIの力。
次はどんなアイデアを具現化しようか、と考えるのが楽しくなっています。