Kiroのハッカソンに申し込んだものの、なかなかものが作れてなかったのですが、とうとう完成しました🎉🎉
特にギターを弾くわけではありませんが、ギターチューナー作りましたww
サイトで公開済みです。
世の中にはすでにチューナーアプリやWebサイトがたくさんありますが、自分で作るとしたらどうなるのか？が気になっていて、過去にやってみようと思ったのですが、マイクの扱いや音程をどうやって判定するかが難しかったので、挫折していました。Kiroがあれば、もしかしたらそのへんクリアしてくれるのでは？という期待を込めて取り組みました。
あっさりクリアしてくれましたw
Kiro？？
KiroはAWS製のAIコーディングエディターです。「The AI IDE for prototype to production」だそうです。
おばけがかわいい
いわゆるAIを使ったコーディングを行うためのエディターなのですが、「spec-driven（公式訳は"仕様駆動"らしい）」という考え方が導入されており、注目を集めています。
spec-drivenとは何なのか、は、公式のブログを参照ください。
本投稿では、具体的にどういう指示を出して、アプリの作成まで至ったかを、簡単に紹介しようと思います。
スペック開発やってみる
Kiroを起動するとこんな感じの画面になります。「Vibe」モードと「Spec」モードがあります。
- Vibe: Chat first, then build. Explore ideas and iterate as you discover needs.
- Spec: Plan first, then build. Create requirements and design before coding starts.
Vibeモードは他のコーディングエージェントっぽい感じで、チャットしながらコーディングを進めますが、Specモードは、まず、仕様を作成します。
Specを選択し、チャット欄に以下のように入力しました。
ギター用チューナーを作りたい。Webアプリで。PCやスマホのマイクから読み取った音でチューニングをしたい。
雑ですね。Vibeモードでこの雑なプロンプトで進めるとどうなるか、ゾッとしますね。
このチャット入力から、requirements.mdが作成されます。いきなりソースコードは作らず、要求の明確化が行われます。
実際のrequirements.mdはこちら
Kiroが生成したものを手直ししてもいいですし、チャットしながら改善も可能です。
requirements.mdが完成したら、次はdesign.mdを作成します。これは設計書ですね。
図示したり、具体的な実装の方法を示しつつ、設計が行われます。
Reactを使うとどう？と聞いてみましたが、Vanilla JavaScriptをおすすめしますと言われたので、その方法を採用しました。私の提案を鵜呑みにせず、より良い設計になるように考えてくれているように感じました。
設計まで終わったら、次はtasks.mdを作成します。実装タスクです。
TODOリストの形になっていて、初期状態では未実行となり、実際にタスクが完了するとチェックが入る仕組みです。
このTODOリストは単なるMarkdownではなく、Kiroが特別な扱いをしており、各タスクをこの画面で実行していく形になります。（下の画面はすべてのタスクが終わっている状態です）
やってみた感想
期待通りのものが出来上がり、満足です。見た目も特にこだわりはなかったのでKiroが作ってくれたままにしました。
ただ、ダークモードの扱いが変だったので、追加で修正しました。
Specの粒度をどうするか悩ましいのですが、Spec駆動でも、できるだけ粒度は小さいほうが良さそうな気がしました。（ダークモードに対応して とか、テストコード書いて とか、XX画面のXX機能を修正して とか）
2025/8/31時点で料金プランがコロコロ変わっており、来月も変わるようです。固定金額で使えるとありがたいので、そのあたりが確定したら契約を検討してみようと思います。
下手くそ英語で解説動画作りました（応募要件だったので。。）よかったら見てください。（英語字幕を見たほうが良いと思います）