この記事は、「広島大学 HiCoder & ゲーム制作同好会GSD Advent Calendar 2024」の 6日目の記事です。ええ、遅刻しました。すみません。

こんにちは、需要です。最近は生成AIの進化がすごいらしいですね。もはや「AIが人間の仕事を奪う！」なんて話もちらほら聞きます（まあそんな簡単な話じゃないと思いますが）。そんな恐ろしいAIに頼り切ってWebアプリを作ってみました。作ったのはポモドーロタイマーとTODOリストが組み合わさったアプリです。

みなさんやることリストって、どうやって管理していますか？私は付箋を机に貼りまくってたんですが、すぐなくなるし、集中して作業がはかどらないことが多くて困ってました。嘘です。アプリを使っています。TODOアプリや時間管理アプリはたくさんあるんですが、どれも細かい仕様やデザインに不満があったり、まともな機能を使おうとすると無視できない課金額が必要になることが多くて…。そうだ、自分でアプリを作っちゃえばいいじゃん！ということで作ることにしました。でもプログラミングよくわからないのでAIに頼りましょう。

ポモドーロ・テクニックというのを知ってました？25分集中して5分休憩を繰り返すみたいな、なんかイタリアのトマトから来てる時間管理術らしいです。これとTODOリストが一緒になったアプリがあれば便利だなーと思って作ることにしました。

AIエディターで爆速開発！？

今回AIとアプリを作るにあたって、まずエディターというプログラミングをするためのソフトを決めました。VS Codeが有名らしいですが、今回はWindsurfというVS Codeから派生した（よくわからないけどForkというらしい）AIエディターを使うことにしました。AIでプログラミングを補助するソフトはたくさんあって、GitHub Copilot, Cursor, Project IDX, Clineなど…新しいのがどんどん出てきて追いつけませんね。

スマホアプリでもいいんですが、PCでもスマホでも手軽に作って公開できるWebアプリという形で作ることにしました。よくわからないけれどクロスプラットフォーム対応というやつですね。

新しくフォルダを作ってWindsurfで開くと、右側にチャット画面が出てきました。私は有料プランの初回無料枠で使っていたのでAIのモデルを選べました。出力される結果のデザインが私好みだったのでClaude 3.5 Sonnetというモデルを使うことに。名前が詩的でなんかかっこいい。

よくわからないけどWebアプリのフロントエンド（見た目や画面の動き）はTypeScriptという言語を使うのが今どきらしい。JavaScriptの進化系みたいな感じ？で、Viteというのを使うとモダンな開発ができるらしいです（なんのこっちゃ）。というわけでAIにこんな感じで聞いてみました：

すると何回かコマンドを実行する許可が求められるので”Accept”を押していきます。パッケージのインストールとか初期設定とかコードの作成とか、よくわからないけどすごい勢いでいろんなことが行われていって…。Windsurfのターミナルでnpm run devを入力して実行して、表示されたhttp://localhost:5173というリンクをブラウザで開くと…おお！なんかそれっぽいアプリが動いてる！やばい、これめちゃくちゃ楽しい。

デザインもそれっぽく、アニメーションもあって動くし、ブラウザをリロードしてもタスクが保存される永続化（よくわからないけどローカルストレージというのを使ってるらしい）まで実装されてました。package.jsonというファイルを見ると、React, TypeScript, Vite, ESLint, Zustand, Radix UI, Tailwind CSS, Framer Motionなどのライブラリを使ってるみたいです。全部説明できる気がしない。

意外とコミュニケーションが大事

でも使ってみると、シンプルすぎたり微妙なデザインがあったり、全体的に機能が少なくて洗練されていない感じだったので、どんどん文句を言って修正してもらうことにしました。Windsurfのチャット画面で「タスクの横に開始ボタンを追加して！」とか「作業中と休憩中で色を分けて、全体的なデザインをもっといい感じにして！」みたいな感じで要望を出します。

Windsurfは、チャットだけでなく、コードの一部を選択して「ここをこうして」みたいな指示もできるようです。AIは基本的に賢いんですが、たまに変なコードを書いたり、私の意図を誤解したりすることもあります。特に、どのファイルを修正するのか曖昧に伝えると、全然違うところをいじられてしまうこともありました。なので、「このファイルのここの部分をこう直して」みたいに、具体的に指示する必要がありました。わからないことはその都度質問したり、調べたり…。そうしているうちに徐々にコードの内容がなんとなーくわかってきました。

詳細な指示を出すには、やっぱりある程度の知識が必要になってくるんですよね。「コンポーネントの依存関係を整理して」とか「ステート管理をもっと効率的に」とか、そういう言葉を使えないと細かいところまで思い通りにはならない…。よくわからないけどプログラミングの語彙力って大事みたいです。

機能を増やしていくとバグとの戦いが始まる

同じ指示でも何度かやり直すと良いものが出てきて、さらに気に入らないところを修正…というのを繰り返していくと、機能が増えていってコードが複雑になっていきました。すると今度はバグが出やすくなったり。重複したコードがあったり良くない実装があったりすると、それも「もっときれいに書き直して！」って感じで修正してもらいます。

初期の最低限の機能までは爆速で実装できたんですが、機能が増えていくにつれて新機能の追加より既存コードの修正の方が大変になっていきました。よくわからないけど技術的負債とかいうやつですかね。コードをきれいに保つのって超重要みたいです。

基本的にコードは直接編集せずに日本語で指示を出して書かせました。変数名の変更とかちょっとした修正だけは自分でやったりしましたが。AIはすごくて、関連するコードも同時に直してくれるので便利でしたね。

完成！

というわけで最終的に、全体的なデザインの修正、本日の作業時間の表示、タスクの編集機能、タスクごとの目標時間設定、作業時間の記録、ポモドーロの細かい設定など、いろんな機能が追加されて完成しました。完璧な実装を一発で出してくれるわけじゃないので、それっぽいものを作るまでには意外と時間がかかるものですね。でもAIを使わなかったら、きっと何十倍も時間がかかってたと思います。いやぁ、AIすごいです。これが未来か…！

ただ今回は、めんどくさかったので通知機能を実装していないので、ポモドーロタイマーは常にブラウザのアクティブなタブとして開いていないと音が鳴りません。よくわからないけどService WorkerとかPWAとか使えば実装できるらしいんですが…。これを実装すればもっと実用的になるはず。

アプリを公開してみた

デプロイ（よくわからないけどアプリを公開することらしい）は、GoogleのFirebase Hostingというのを使ってみました。Netlify, Vercel, GitHub Pages, Cloudflare Pagesなど他にも無料で公開できるサービスはいくつかあるみたいです。公式ドキュメント見ながらコマンドをコピペしてたら、あれよあれよという間にデプロイできました。自分が作ったアプリがインターネットに公開されるのを見ると、なんだかすごい達成感がありますね。

というわけで、以下のURLからアプリが試せます。PomoGlowと名付けました。 https://pomoglow.web.app/

感想

いやー、まさかAIに頼るだけでここまでのものが作れるとは思ってませんでした。もちろん細かい指示を出すにはある程度の知識は必要ですが、プログラミング初心者でもAIの力を借りれば、それなりのアプリが作れる時代になったんですね。すごい時代です。

ちなみに記事を書くのも一部AIに手伝ってもらいました。よくわからないけれど。