1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

毎朝の「倒立」を計測したくて、Claude CodeとVanilla JSで極小アプリを作った話

1
Last updated at Posted at 2026-04-15

開発のきっかけ:倒立の時間を正確に計りたい

毎朝、仕事前に倒立をしています。頭に血が巡る感じがして、在宅ワークの運動不足解消にもいいからです。
これまでは「そろそろかな」と適当に止めていたのですが、どうせやるなら正確なタイムを測りたい。

そう考えて今流行っている 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の力。
次はどんなアイデアを具現化しようか、と考えるのが楽しくなっています。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?