AIで作ったアプリ、完成までが地獄だった【実装編】

これまでAIに会議させて企画を決めて、 仕様書まで作らせて、 そのまま実装までしたけど一発目の出来は・・・だいぶ微妙。（笑）

そこで、もう一度AIたちに改善会議をさせてアップデート仕様書を作らせたのが前回までの話。

前回記事はこちら👇

実際、このアップデートもすんなり行くはずだった。

でも一番時間を使ったのは、実装じゃなくてデバッグだった。

これは個人開発あるあるの話かもしれない。😅

⌛この記事の読了目安：約4分

仕様書で爆速アップデート

前回の仕様書編で、結晶コレクション型のアップデートの仕様書が完成した。

最初のMVP同様に、仕様書がある状態でClaude Codeに実装させると、爆速で完了。

5分もかからなかった。

今回のアプリはReact＋Next.jsで実装したんだけど

理由はシンプルで、あとから触りながら調整していく前提だったから。
一発で作るより、いじりやすい構成にしておく方が結果的に楽になると思ったから。

ぶっちゃけここまでは、かなりスムーズでこのまま完成となるはずだった。

数分後、その甘い考えは打ち砕かれるのであった。

ここからはじまるデバッグ地獄

AIたちが考えたアップデートの仕様書通りに実装してみて実際にアプリを触ってみた感想は・・・うーん、微妙。（笑）

確かに初期実装よりかよくはなってるけど、まだ味気ない。

そこで僕が、結晶をコレクションとして保存できるようにしたり、形をランダムに変化させたり。
細かい部分を触り始めた瞬間に、これまでの流れがピタッと止まった。

1箇所直す度に別の場所が崩れてはまた直し、それを直すと、また別のところが壊れる。🤑

進んでるはずなのに、体感はずっと同じところをぐるぐる回ってる感じ。

仕様書があれば楽になると思ってた僕が甘かった。

最後の調整が一番時間かかる。

ここは完全に想定外だった。

これは実際のバグの映像👇

完全に背景がぶっ飛んでる。（笑）

Claudeのお節介

原因はシンプルだった。

Claude Codeが、修正指示していない部分まで触っていた。

「ここだけ直してほしい」と思って投げると、実際には周辺のコードまでまとめて書き換わっている。
だから一見直ったように見えて、別の場所に影響が出る。

確かにコードを書くのは速い。
でも修正の範囲が曖昧だと、余計なことまでやる。

Claudeクセが強いんじゃ。😅

Claudeは調教が必要

そんなクセの強いClaudeを調教するべく、いろいろと調べまくった。

そこで辿り着いた答えが、CLAUDE.mdにルールを細かく追加する方法。

「指示した場所以外は触らない」

これを明文化する。
さらにデバッグ用のスキルも追加して、修正した後の"影響範囲を見て作業する"前提に変えた。

これでようやく、Claudeのクセの強いお節介は収まった。

ちょっとしたことだけど、細かいルールを作っておかないとちょっとした変更がアプリ開発では命取りになる。
開発前の環境整備は大事、という事を身をもって体験した。

Netlifyで公開した理由

何とかデバッグと格闘する事、約3時間。😓

完成したアプリはNetlifyで公開した。

Netlifyを選んだ理由はシンプル。

• すぐ公開できる

• フロントだけで完結する

• URLをそのまま共有できる

「まず触れる形にしたい」なら、Netlifyがかなり相性がいいと思う。

完成版はこちら

というわけでお待たせしました！

今回作った「意識高い系ごっこタイマー」の完成版はみんなも実際に触れる形で公開しているのでよかったら触ってみてほしい。

【使い方】

１.使命のところに何をするか入力
例：宿題を終わらせる、掃除をするなど。
ここが最後の結晶の名前になる。

２.集中する時間を選択する
集中時間が長いほど結晶の大きさやランクが変わる。

３.タイマースタート
タイマー起動中は違う画面を表示したりアプリを閉じたりすると結晶が崩壊するので注意。
戻って再開できるけど結晶ランクが下がる。

４.集中タイマー終了
結晶を保存したりSNSなどで共有できる。
保存した結晶はHOME画面右上のボタンからコレクションを確認できます。

👇ここから使えるので使った感想をコメントしてもらえると嬉しい。
バグなどあったら教えてください。😅（笑）

結晶が残ると、ちょっと意味が出る

今回のアプリで一番悩んだのは、結晶の表現だった。

最初は3Dでやろうかとも考えた。
ただ今回はMVP。
ここで時間を使いすぎると全体が止まる。
なのでCSSで表現する形にした。

結果的にはこれで十分だった。
むしろ"それっぽく見える"くらいの方が、このアプリには合っているし、何より実装が軽い。

集中した結果が、結晶として残るしちゃんとコレクションとして保存できる。
ただのタイマーじゃなくて、少しずつ積み上がっていく感じ。
これがあるだけで、使う理由がちょっと生まれる。

てなわけで、このアプリはここで一区切り。

今回はManus中心のAI会議だったけど、次はアンチグラビティに司会進行をさせてみようと思う。
さらにPerplexityも入れての5つのAIで同じお題で会議でさせてみたらどうなるのか。
まとめ役や参加するAIが変わると結果がどう変わるのか、その辺も検証してみようと思う。

今回の、「AIだけで会議させてアプリを作るやり方」の細かいプロンプトや手順は実際どのように企画から開発までやったのか

そのまま再現できる方法をまた別で記事にまとめようと思う。

今回も最後まで読んで頂きありがとうございます。

他にもこんなことを自動化したい！
こんなアプリ作ってほしい！
などありましたら

是非、コメントで教えてください🙌

この記事がよかったらスキ、シェア、フォローしてもらえるとうれしいです。🤗

あわせて読みたい👇

AIの実用的な使い方や、自動化をどう進めているかは開発ログマガジンでも連載中です。
▼興味があればこちらもどうぞ。👇

▼AI初心者の教科書シリーズをもう一度見直したい方はこちら👇
※役立つ記事は保存をおすすめします。

▼他にも仮想嫁AIエルの処刑シリーズ連載マガジンを執筆しています👇