LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yuuuka

Vibe Coding周回遅れだけどKiroを使って1週間で百人一首ゲームを作ってみた

Posted at

はじめに

みなさん、Kiroを触ったことがありますか？
もしくは他のAI IDEやAI CLIツールを使ったことがあるでしょうか？

私はChatGPTやGitHub Copilot、Gemini Code Assistは使うことがあるのですが、
Amazon Q DeveloperなどのAI CLIツールは触ることができていませんでした。
そんな中、とうとうAWSからAI IDEであるKiroが登場しました。

ということで、「Vibe Coding」という言葉は以前から聞いていたのですが、ちょっと周回遅れ感がある中で、Kiroを触り始めてみました。
その結果、ローカル環境ではありますが、1週間で百人一首ゲームを動作させるところまで作成することができました。
本記事ではその過程やKiroを使ってみた所感を記載したいと思います。

Kiroとは

Amazon製のAI IDEです。これまでのプロンプトのみで行うVibeコーディングとは大きく異なり、
作りたいものの要件や設計を作成して仕様を決めてから開発させる仕様駆動（Spec駆動とも言うそうです）開発が行えます。
Vibeコーディングと比較すると、ビジネスでのプロダクトの開発に寄り添った開発ができるというのが特色のようです。

公式サイト

Kiroのインストール方法

※以下の流れはあくまでも9月末時点の情報であり、10月以降は変わっている可能性があります。

まずは公式サイトからwaitlistに登録します。
そして、ダウンロード自体はwaitlistの状態に関係なく行うことができるのでダウンロードを行いました。
私はwaitlistに登録してから一週間後にダウンロードをしたのですが、AWSのBuilderアカウントにログインした所普通に使用できました。
その裏でちょうど 「利用可能になりました」メール が届いていたので、これが偶然なのか、AWSのBuilderアカウントだったからなのかは不明ですが、そのまま利用開始できました。

VSCode拡張のインストール

インストール時に 「KiroのVSCode拡張を入れますか？」 と聞かれるので、必要そうなものはひとまずインストールしました。
日本語を使用できるようになる拡張機能などインストールすることで適用できました。

Kiroの開発スタイル

Kiroには大きく分けて 2つの開発スタイル があります。

  • Vibeモード: プロンプトを投げて仕様や設計を生成、対話しながら調整していくモード
  • Specモード: 設計書ベースで進めるモード

今回のアプリはVibeモードで進めましたが、別のアプリでrequirements.mdを作成してSpecモードで進めると、同様にdesign.mdやtasks.mdが作成されました。
どちらを選んでも、最終的に以下のファイルが自動で生成されるようです。

  • requirements.md（要件）
  • design.md（設計）
  • tasks.md（タスク）

今回の百人一首ゲームでは要件定義から行いたかったので、 Vibeモード を採用しました。

実際にできあがったもの

1週間で実際に完成した百人一首ゲームは以下のような構成です。

  • UI: カードグリッド、スコアボード、ゲームコントロール
  • データ: 100首分のJSON
  • 状態管理: React Contextでセッションごとにシャッフル（seed付き）
  • 計測: 上の句／下の句／完了からの反応時間を記録

「単に札を取る」ゲームではなく、百人一首らしさを再現したゲームを作ることができました。

1000033250.png

1000033255.png

1000033256.png

1000033252.png

まだまだ一時停止画面や結果画面の改善の余地はありますが、操作感としては問題無く、ゲームとしてもちゃんとしたものができました。

コード抜粋

詩データ（poems.jsonの一部）

{
  "id": 1,
  "number": 1,
  "kami": "秋の田のかりほの庵の苫をあらみ",
  "shimo": "わが衣手は露にぬれつつ",
  "kimariji": "あきのた",
  "poet": "天智天皇",
  "kana_kami": "あきのたの かりほのいほの とまをあらみ",
  "kana_shimo": "わがころもでは つゆにぬれつつ"
}

シャッフルの実装（seed付き）

export function shufflePoemsWithSeed(poems: Poem[], seed: number): Poem[] {
  let rng = mulberry32(seed);
  return poems
    .map((poem) => ({ poem, sortKey: rng() }))
    .sort((a, b) => a.sortKey - b.sortKey)
    .map((entry) => entry.poem);
}

function mulberry32(a: number) {
  return function () {
    let t = (a += 0x6d2b79f5);
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

反応時間の計測

const selection: Selection = {
  sessionId,
  poemId,
  selectedCardId: cardId,
  isCorrect,
  reactionTime: Date.now() - audioStartTime,
  timestamp: new Date(),
  mistakeType: isEarly ? "early_selection" : undefined,
};

Vibeモードでの開発体験

流れ

  1. Vibeでプロンプト投入
    「百人一首ゲームを作りたい。UIで札を並べ、音声で読み上げたい」と伝えると、要件・設計・タスクが生成されます。

  2. 指摘を入れる
    「反応時間は上の句と下の句も記録して欲しい」と伝えると、要件に追記され、設計ファイルも修正されます。

  3. タスクを順番に実行
    CLI許可を出すと npm install や npm run dev が実行され、その結果がKiroに読み込まれます。

個人的に魅力に感じたポイント

テストサイクルが自然に回る

Kiroではテスト作成から実行までをCLI経由で行えます。
テストが失敗するとそのまま修正提案が入り、修正後に再実行、成功したら次のタスクへ進むという流れがスムーズでした。

無限ループ中でもチャットができる

AI チャット、Code Assist系の場合、実行中はチャットができないことが多く、今回開発を行っている最中にテストが無限ループに入ってしまった際は詰んだと思ったのですが、
チャットができたため、「テストが無限ループになってしまっています。修正してください。」と送信することで、無限ループ状態になってしまっていることが認識され、修正してもらうことができました。

1000033253.png

スクショでのフィードバック

ローカル検証で撮った画面キャプチャを投げると、UIのバグや改善点を読み取り修正提案をしてくれました。
特に今回はUIにこだわって作っていたので、細かい色味や配置を文章だけでなく、画像も使用して修正できたのはかなり楽でした。

CLIの実行と結果読み取り

CLI実行を許可すると、コマンド結果をKiroが読み取ってアドバイスしてくれました。
エラーがコンソールではなく画面上に出る場合も、「ここを確認して」と導いてくれるので、一緒にデバッグしている感覚で解決させることができました。

日本語対応の自然さ

「requirements/design/tasksを日本語でも欲しい」とお願いしたら日本語版を生成してくれ、その後のタスク実行も日本語で実行してもらうことができました。
各種英語のファイルを読み込んで理解するのは時間がかかってしまいそうだったので、日本語でも出力してもらえて助かりました。
その後のタスク実行も日本語のmdファイルで実行でき、タスク実行時のチャットの出力も日本語で出力されたため、使いやすかったです。

チャットの履歴やタスクごとの実行履歴が残る

タスクを実行させると、タスクごとにチャットページが追加されます。
タスクごとに実行時に何をしたかが追いやすくなっているので、こちらは便利だなと思いました。
気になって、他のタスク実行時の履歴や他の個別で作成したチャット履歴も参照できるか聞いてみたのですが、そこまではできないようでした。

1000033254.png

依存関係のセキュリティスキャン

これは特に便利だと思ったポイントです。
先日npm関連で脆弱性が発表されたこともあり、今回のアプリで利用しているライブラリに問題がないか不安になりました。
そこでKiroに依頼したところ、以下のようにセキュリティ監査レポート (SECURITY_AUDIT_REPORT.md) を生成してくれました。

SECURITY_AUDIT_REPORT.mdの一部抜粋
## セキュリティ監査レポート
- 実行日時: 2024年12月26日
- 監査対象: 百人一首ゲーム (hyakunin-isshu-game) プロジェクト
- 監査結果: npm audit: found 0 vulnerabilities

### 推奨事項
1. 定期的な監査: 月次で `npm audit` を実行
2. 依存関係更新: 四半期ごとに依存関係更新検討
3. GitHub Dependabot: 自動セキュリティ更新の設定検討
4. セキュリティヘッダー: Next.jsのセキュリティ設定検討

実行日時が全く違う日付になっているのが気になるものの、このように自動で監査レポートをまとめ、依存関係に問題がないか調査・提案してくれるのは非常に安心感がありました。
手元のnpmバージョンや依存ライブラリまで見てもらえるので、「生成AIはコードだけじゃなくセキュリティも支援できる」というのを実感しました。

気になったポイント

  • タスクが決まったあとにチャット上で追加依頼したことについてはmdファイルに残らなかったので、途中で改善したことが追いづらかった
  • セキュリティのために使用ライブラリのバージョンや依存ライブラリの脆弱性を調べてもらった際に、出力されたファイルの実行日時が全く異なる日付になっていた

今後やっていきたいこと

今後の展望として、Dockerを使って環境構築できるようにしたいのと、AWS Polly を使って上の句を音声で詠めるようにしたいですし、ユーザーごとに苦手な札の特定や、百人一首を覚えられるようにするためのサポート機能も充実させていきたいです。
そこまでできたらソースコードを公開したいと思っています。

最後に

Vibe Coding周回遅れの私でも、Kiroを使えば 1週間で百人一首ゲームが作成できました。
いくら仕様がある程度固まっていても、テストや動作確認でかなり時間がかかってしまうだろうなと思っていたので、テストや動作確認込みで1週間で完成できたのは驚きでした。

対話しながら仕様修正、スクショでUI修正、CLIで一緒にデバッグできるのは新しい体験だったので、これからも続けていきたいと思います。

仕様を固めてSpecモードで実行しても良いですし、
仕様を決めるところからKiroと一緒にやっていきたいという場合はVibeモードで実行すると良いかと思います。

9月末までは無料ですが、10月以降は順次お試し用に500クレジットが付与されるそうです。
500クレジットでどこまでできるか分からないですが、10月以降もお試し実行ができそうなのは嬉しいですね。
私も引き続き使ってみようと思います。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?