AI エージェントでプログラマ向けタイピング練習アプリの試作とアイデアマラソン

ひさびさに “アイデアマラソン” の一環です。最近は起き抜けにスマホで Copilot を開いて、何かアイデアをまとめておきます。まとめるというか、アイデアを少し具体的に AI に尋ねて思考実験(壁打ちとも言う)をしておきます。Copilot の場合、あれこれと具体的なツールを作ろうとするのですが、そこは完全に無視をして、ちょっと抽象的で要件定義的な話に留めておきます。あと、実際に作るとなったらどんな機能があるのかを箇条書にメモをしておきます。

要件と機能が数行程度で固まったら、readme.md に書き込んで、vscode + GitHub Copilot でコードを書いて貰います。

# プログラマ向けタイピングゲーム

- コーディングのための英単語をが出てくる
- コンピュータの専門用語が省略形だけじゃなく、フルスペルで出てくる
- プログラミングで出てくるコードの一部がでてくる

## 機能

- 単語単位ではなく文字単位でキーのチェック判定をする
- 制限時間内のタイピングを競う

あらかじめ、Next.js を使うことは決めておいたので、React のプロジェクトだけは作成しておきます。

このぐらいのアプリだと、まあ UI は程よくできてくるのですが、動きが変なところが出てきます。今回のアプリで言えば、

  • キー入力が効かない
  • キーを入力している間にタイマーが正常に動いていない
  • 間違ったキーを押したときに、正しいキーを入れるまでカーソルを止めて欲しい

のように、動かせば一発でわかるようなバグが出てくるので、テスター役としてアプリを動かします。

バグの修正の場合、元の readme.md を書き変えてもよいのですが、所詮使い捨てのプロトタイプになるので、プロンプトで指示を出しています。

そういう意味では、自動化された vibe coding ではないのですが、私の場合はこのような AI ペアプログラミングのスタイルで十分です。要件定義や機能を厳密にまとめる必要はありません。そもそも、厳密に記述する必要がないし、厳密に記述することは不可能です。未来を見通せないので、プロトタイプ開発をしているわけですから。

半日ほど面倒を見て(片手間に)から、ほどよく動いたので、Vercel に公開しておきます。

https://for-programmers-typing.vercel.app

Vercel の場合、React プロジェクトが手軽に公開できるのが便利です。本格的に使うといろいろとあるのかもしれませんが、GitHub にアップロード → Vercel で自動的に公開、という手順が用意されているので、雑に公開してみるのもよいでしょう。

コードのほうは、GitHub に public にしておきます。private な状態でも Vercel に公開ができます。

https://github.com/moonmile/for-programmers-typing

typingData.ts に、出題するランダムな単語が書いてあります。このランダムな単語や文字列自体も Claude Sonnet が作ったもので、適当に問題が追加できるようになっています。 ひとまず、実際に動かしてアプリの雰囲気を確認したいときに、この方法が便利じゃないでしょうか?

参考先

アイデアマラソン研究所
https://www.idea-marathon.com/

アイデアマラソンというのは樋口氏が提案した、毎日アイデアを出してノートにつづっておくという習慣です。2000年頃の会社時代でもやっていました。営業とかでないので、プログラマだとアイデアを出しても仕事に直結する訳ではないのですが、日々の検索や最新情報を追うだけではなくて、「自分で作ったらどうなるだろうか」という形でメモっていきます。以前だと、実際に動かすことはできなくて思考実験で終わっていたのですが、AI エージェントと組み合わせれば、プロトタイプ程度であれば結構できあがりますよ、ってことです。出来上がったものを実際に仕事とかに使うかどうかは別ですね。

紙のノートとか使い場合はこんな風になります。

アイデアマラソンをやってみる – sowdatabase
https://sowrealyou.hatenablog.com/entry/2024/06/17/%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%83%9E%E3%83%A9%E3%82%BD%E3%83%B3%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B

カテゴリー: 開発 パーマリンク