生成AI搭載の新しい開発環境が毎月のように登場したりしていて、大盛り上がりの中、Kiroを使ったハッカソンが行われていたので参加してみました。AWSのCCoE担当の方から紹介を受けたので社内に共有すると共にせっかくなので自分でもやってみました。
Kiroは、アイコンのかわいさなら圧倒的覇権、グッズが欲しいと言われる生成AI開発環境で、VSCodeクローンをベースにspec drivenなAIエージェントが搭載されている開発環境です。無料期間にがっと使ってみてそれを元に登壇もさせてもらいました。今回は利用量無制限ではないキャップのある状態できちんとしたものを作るのハッカソンということで、当時とはまた違った感覚で楽しめました。
KiroweenはPro+相当のクレジット(2000)が無料で提供され、その中で開発するというものです。お化けアイコンにちなんだ、名前の通りハロウィンをモチーフにしていて、カテゴリーは以下の4つ。
- リザレクション：お気に入りの死んだテクノロジーを生き返らせます。時代遅れの技術を今日のイノベーションや明日の問題の解決で再考しましょう。
- フランケンシュタイン：テクノロジーのキメラを1つのアプリにつなぎ合わせます。一見互換性のない要素をまとめて、思いがけず強力なものを構築します。
- スケルトンクルー：スケルトンコードテンプレートを作成し、明確で柔軟性があり、さまざまなユースケースをサポートできます。あなたの基盤から2つの異なるアプリケーションでその汎用性を私たちに示してください。
- コスチュームコンテスト：どんなアプリでも構築しますが、洗練され、忘れられない忘れられないユーザーインタフェイスを見せてください。アプリの機能を強化する不気味なデザイン要素を取り入れましょう。
作ったもの
次の場所にソースコードやビルド済みパッケージなどがあります。一応インストールしなくても試せるようなプレイグラウンドもあります。コード規模としては6万行ぐらいですかね。
- リポジトリ
- VSCodeマーケットプレース
- OpenVSX (KiroなどのVSCodeクローンのエディタ向けのプラグインリポジトリ)
- ブラウザ用のプレイグラウンド
リザレクション部門で作りました。最近の推しのDFD[1] [2] [3]を復活させるぞ、ということで、ウェブフロントエンドのソースコードを渡すとその構造をDFDっぽく可視化するツールです。VSCode拡張で作り始めましたが、審査用にウェブのリンクがあってウェブで見られる必要がありそう？ と思ってGitHub Pagesで動くバージョンも追加で作りました。後から見たら実際にはなくても良さそうでしたが・・・まあブラウザ版はデバッグに便利でした。
ハッカソンなのでだいぶ割り切りで機能を絞っており、Reactは関数コンポーネント、VueはVue3のscript setupのSFC。SvelteはSvelte5に限定しています。Reactは人気のライブラリ類もカバーするようにしています。Vueは3のscript setup方式、Svelteは5の文法飲みサポートで、Vue Router, Pinia、Svelte Kit、Svelte Storeの公式のライブラリをサポートしてます。
今回はほぼコードは見ておらず、指示だけに徹するスタイルでやりました。途中でなんどか大きなリファクタリングなどは発生しましたが、最終的には結構質が高くて便利なプロダクトになったんじゃないかと思います。
スペック駆動を誤解していた
Kiroといえば特徴的なのがこちらのスタートアップ画面ですね。VibeかSpecか。Specを選ぶと、要求のヒアリングが始まり、設計、計画が立てられてそれを元に実行するというものです。スペックは「仕様」だし、以前使った時にはここに使う技術からなにからじっくりやり取りをしながら煮詰めて入力していました。
ただ、本来はここはsteering/hooksが担う部分も大きいのではということで、今回は作りたいものの青写真やアーキテクチャなどはsteeringに入れました。hooksは迷ったのですが、最近の開発ツールは優秀だし、下手にコミット時にAIでコードをチェックみたいなのを入れるとクレジットを無駄うちしそうなのでwatchでチェックを実行ぐらいにしておきました。これならクレジット使わない。
で、スペック駆動は何かというと「作業指示」ある程度まとめて作業をお願いしたい単位でspecを作るのが良いかと思いました。プロダクトのビジョン(どんなシステムなのか)はsteering、外部設計(どんなモジュールで構成するか)は脳内でやり、スプリントゴール(検証可能なユーザー価値)単位でspecかなと。あるいはビッグリファクタリングもspec。tasks.mdになっていると、コンテキストの管理はKiroがやってくれます。実装が終わった後にVibeモードでちまちまやりとりすると「コンテキストが切れた」と言われがちですが、specでの作業はそこも自動でやってくれるのでまとめて大きめの作業が依頼できて完了まで丸投げできます。11/20に1100クレジットを一気に使ってVue対応とSvelte対応をまとめて初めて完了できたのもこれです。
今回の実装や、これまでCopilotやCodexも使って学んできたのをパターンとしてまとめたのがこちらのエントリーです。
Kiroバージョンアップ
Kiroそのものも以前触った時から大幅に良くなっていますね。使えるモデルがSonnet-4.5となって、途中でパニックになってファイルを丸ごと消すということは完全になかったですね。こまめにコミットしておくというのは今回しなかったけど大丈夫でした。
あと、途中から利用クレジットが1/3の低コストモデルのHaiku-4.5とOpus-4.5が追加されました。細かいデバッグとかはこちらに任せても良いかもしれません。今回は動くものを早く作るの重視でSonnet-4.5でほぼやりましたが。なお、Opus-4.5は、ライブラリのリポジトリ側にアクセスしにいって「まだ未解決の不具合と関連があります」とか言いながら回避策を実施してくれたのでかなりレベルが高いです。人間だと1週間とかかかりそうなものを1時間で。Opus-4.5はだいたいSonnet-4.5の2倍、Haiku-4.5の5倍強のコストですが、Opus-4はVSCodeでは他のモデルの10倍だったので、だいぶ安いです。
また、Q Developerと統合されて、Kiro CLIとなりました。こちらと併用というのも良さそうですが今回はそれを試すのは時間的にちょっとできませんでした。
めちゃくちゃ大事なクレジット管理
参加前から付与されていた1000クレジットの残り600と、今回付与された2000クレジット、12月の追加無料50クレジットでの参加となりしました。初アカウント作成な人は500の追加無料クレジットと、無料の50クレジットの11月/12月分で合計2600となるので大体一緒ぐらいのリソースといえますね。仕事しながらですがだいたい次のようなスケジュールで作りました。
- 11/8: エントリー。MCPとかsteeringとか開発環境周り整備
- 11/11: シンプルケースでだいたいのMVPが見えてきた。階層表現ができないので可視化をVis.jsからMermaid.jsに切り替え
- 11/14: Reactの基本機能を実装完了。ウェブのPlayground作成開始
- 11/17: Reactサードパーティ対応実装開始。受け入れテスト追加
- 11/20: Vue対応実装、Svelte対応実装
- 11/21: デバッグ(残り0.5)
- 12/2: 12/1に付与された追加クレジット50でデバッグ(残り20)
消費量的には以下のような感じですかね。
- Reactの基本機能で500クレジット程度
- デモ用ウェブサイト版で200程度
- Reactサードパーティ追加で500程度
- Vueで500
- Svelteで500
ぐらいのトークン消費であとはデバッグですね。
特にハッカソンだとクレジット管理がかなり大切ですね。そもそも動かないとか、プロジェクトが完了しないとかそういうリスクを避けるためにどのような手順で開発をしていくかの作戦が大切ですね。今回は…
- コアとなる機能を先に作る
- 終わらなくても問題ないような機能はプラグイン的に切り離して後回し
…という作戦でいきました。世界では圧倒的人気のReactをまず最初に。その後は金太郎飴みたいにどこで切られても何かしら実用になるプロダクトは残せるようにオプショナルな要素を並列追加できるようなアーキテクチャや受け入れテスト態勢を早めに作り上げました。まあ実際にはやりたいと当初思っていたところまで完了したので結果としては作戦は不要だったもいえますが、コアができているとだいぶ心の余裕があります。
あと、デバッグでも時間とクレジットは取られたので、早めに受け入れテストをやっていくのは大事です。Kiroのスペックだとだいたい10項目に分かれるスペックだと残り3つぐらいがテストとかドキュメントのタスクなりますが、最小限の実装ができたら手元で動かして見て方向修正が必要か見極めると。
このあたり、完全にチームリーダーとかテックリード的な動き方が必要とされます。作戦間違えて最後まで完成しないかもしれない！ みたいな状態になると1人でも病む可能性すらありそう。作戦大事です。
まとめ
Kiroweenは参加して良かったです。なかなか1つのツールを使い尽くすというのはあまりチャンスがないので、やってみると学びが大きいですね。2000クレジットはそこそこの量で、きちんと実用に足る開発ツールを作れました。