TODOアプリをAIで作ってみる過程で「AI前提の開発」について考える
ふと思い立って、Cursor（+Claude 3.5 Sonnet）でTODOを扱うWebアプリを作り始めました。以下のURLからお使いいただけます。PWAにしているので、アプリとしてインストールしてお使いいただくのがおすすめです（iOSのSafariだと一部動かない機能あり）。
開発したアプリ
基本的な方針
開発に際して、以下の通りの方針をとることにしました。
Webフロントエンド限定
PWAとして動作すること
見た目がかわいいこと
アプリの機能
自分がほしいものを入れているので、シンプルなTODOアプリにちょっとプラスアルファした感じです。これからもっとおもしろ機能を加えていきたいと思っています。（VRMモデルが表示されるとか、位置情報とかNFCがらみの機能など）。
TODO（内容・期限）を追加・編集・削除する
TODOを済にする
TODOを済にしたらめでたい感じになる
音声入力でTODOを追加する
QRコード読み取りでTODOを追加する
期限の10分前にプッシュ通知する
期限の10分前に音声読み上げで通知する
ポモドーロタイマーでタスク実行を支援する
ポモドーロセッション時にBGMを流す
メモ帳機能でTODO作成を支援する
ショートカットから直接メモ入力画面を開く
完了したタスクをソーシャルに共有する
詳細については、ぜひ使ってみてください。
AIを用いた開発プロセス
コードは以下のリポジトリにおいてあります。この内容を、GitHub Pagesとしてデプロイしています。
ほとんどのコードを、Cursorが提示してくれたがままに使っている感じです。なので、コミットログもCursorのチャットで話しかけた内容を記録するように基本的にはしてみました（最初の方はちゃんとコピペしてたのですが、だんだんだるくなってきて適当なメッセージになっていますが……）。
上記で機能一覧をリストアップしましたが、最初に全部考えていたわけではなくて、思いついた時にこんな感じのを作ってとAIにお願いしながらやっていた感じです。たとえば、タスクの編集機能を実装したコミットはこんな感じ。
デザインをいい感じにしたいと思った時はこんな感じ。かなり雑にきいてみても、そこそこいい感じにしてくれました。
ただ、実際には全然指示をきいてくれなかったり、詳しく伝えても意図が伝わらなかったりして、1/3ぐらいのコミットは何度かやり直した結果だったりします。細かい調整なども必要になるので、一発でコミットまでいけたのはあまりありません。
AIを用いた開発についての所感
よかったこと
React等についてあんまりよく知らなくてもコードがどんどん出てくる
見た目についても「こんな感じで」ぐらいでどんどん出てくる
とりあえずいわれるがままにぽちぽちしてたらなにかしらできあがる
メリットについては、ReactとTailwindを用いたWebアプリケーションなので、レールができている感じなのでしょう。これはAIというよりは、エコシステムの発展に感謝ですね。ただ、変なコードが生成されてエラーが出たり動かなくなったりするので、まったく何も知らなくてもできるほどではないと思います。
他のメリットとして、こういうことをしたいときにはこう書けばいいのね、という感じで、具体的なコンテキストつきでコードを読めることで、学習がはかどった気がします。新しい言語やフレームワークなどを学びたいときには、とりあえず生成させてみたのを読んでみる、みたいなのはいいかもしれません。
わからないこと
適切な設計やファイル構成、モダンな書き方になっているのかどうか
既存のより規模の大きいコードベースでどの程度メリットがあるか
テストコードをいい感じに生成してくれるのかどうか
よく知らない技術を用いているので、生成されるコードがいい感じなのかどうかが基本的にはわかりません。「最新な感じで書いて」とかたまにいったりはしました。どんどんファイルが肥大化するのでいい感じにわけたいのですが、指示が悪いのかなかなかうまく行きません。
また、仕事で開発するようなコンテキストでどれぐらい有用なのかは、また別途試してみないとわからないですね。これは会社の方でやってみたいとおもいます。また、フロントエンドのテストについてあまり知見がなくて、そちらはまだやってないのでわからないです。いい感じにしてくれるのかも。
その他の感想
そもそもあまりよくわからずにぽちぽちしているだけなので、できたコードがまっとうなのかどうかはあまりわからないです。ただ、なんとなく「これは違うんじゃない？」みたいな勘が働いて書き直してもらうみたいなことはよくありました（古そうだったり非効率だったりする書き方とか）。
コードの構成や書き方がうまくいっているのかどうかがわからない（というか明らかに肥大化しているのでよくない）ということを書きました。ただ、この辺はもうAIが全部読んでくれるならわりとざっくりでもよかったりするのかもしれません。もちろん、データ設計についてはその限りではないでしょうが、ソフトウェアのリテラルな部分はなんとかなる面も多いのかも。
コミットログとして、AIに対する指示を記録しているということを書きました。実際、AI前提の開発だと、そのコミットで何をしようとしているかはAIに対する指示にこそよく現れるだろうと思います。ですので、コミットログはAIとのチャットの内容をいい感じにまとめたものがいいように思えます。そのうちエディタがいいようにしてくれることを望みます。
以前、Tailwindが要求するプリミティブなクラスづけにつらい気持ちになて、こんなのはツールがいい感じにしてほしいと思ったりしたのですが、AI前提の開発になったら、まさにその通りになりそうだなと思ったりしました。人間が書くためではなく、AIが書くためのフレームワーク。
Tailwindのクラスを振ってると、プリミティブなものを直接触ってる感じで、これはアセンブラみたいなものだから、なんかもっと抽象的な操作から生成するべきものだよなあという気持ちになる。それこそFigmaなどから生成したコードの表現として使われるべきものなんだろうなあ。
— あんちぽ (@kentaro) January 10, 2023
おわりに
ごくシンプルなものを作っているに過ぎないので、仕事レベルでの実用性については正直わかりません。ただ、プロトタイプや小規模なものだと、間違いなく有用だとはいえるでしょうし、普通に書くよりずっと速く書けます（少なくとも僕レベルなら）。
このところ、あれこれとAIによる開発支援ツールが出ています。中には、エンジニアやデザイナはいらなくなるなどというひともいますが、現状ではそうなる気配はまだありませんね。ただ、使いこなせれば生産性が上がる場面はかなりあるんじゃないかとは思います。
この記事が気に入ったらサポートをしてみませんか？