Kiro で IT 基礎知識クイズアプリを作ってみた

記事タイトルとURLをコピーする

はじめに

こんにちは、高橋 (ポインコ兄) です。

最近話題の AI IDE「Kiro」を使って、IT 基礎知識クイズアプリを作ってみました。Kiro の仕様駆動開発 (Spec-Driven Development) を中心に、Steering、Hook、MCP 連携などの機能を活用して、要件定義からデプロイまで一気通貫で進めた体験記です。

ちなみに、このブログ記事自体も Kiro に書いてもらっています。開発中に Hook を設定して、タスクの進捗に合わせてブログを自動更新するようにしていました。最終的にブログの構成や内容も Kiro と相談しながらブラッシュアップしたので、開発からドキュメント作成まで一貫して Kiro を活用した形です。

[画像: Kiro のチャット画面でブログ執筆を依頼しているスクリーンショット]

Kiro の主な機能

今回の開発で活用した (または意識した) Kiro の機能を簡単に紹介します。

  • Spec-Driven Development (仕様駆動開発): 要件定義→技術設計→タスク分解を体系的に進める開発手法。Kiro の中核機能
  • Steering: チーム標準やプロジェクト固有の情報をエージェントに伝える仕組み。技術スタック、コーディング規約、アーキテクチャ情報などを永続化できる
  • MCP 連携: AWS Knowledge MCP Server など、外部ツールとの連携。自然言語の指示に基づいて Kiro が自動的に適切なツールを使用してくれる
  • エージェントフック (Hooks): ファイルの作成・保存・削除時に自動処理を実行する機能。テスト同期やドキュメント更新に便利
  • Kiro Powers: ツールとフレームワークに関する知識をパッケージングしたもの。キーワードベースで動的にロードされるのでコンテキスト節約になる
  • チェックポイント: コードベースの変更時に自動セーブポイントが作成され、巻き戻しが可能
  • サブエージェント: 複雑なタスクを専門化されたエージェントに委譲し、並列実行する機能
  • Kiro CLI: ターミナルから Kiro と統合された AI エージェントを活用できる CLI ツール
  • Kiro Autonomous Agent (プレビュー): バックログから複雑なタスクを割り当て、バックグラウンドで AI が自律的に対応する機能

特に印象的だったのは、Spec-Driven Development の考え方です。「いきなりコードを書くのではなく、まず要件と設計を固めてからタスクに落とし込む」というアプローチは、AI を使った開発でも品質を保つために重要だと感じました。

作ったもの: IT 基礎知識クイズアプリ

なぜクイズアプリ?

IT 関連会社で新入社員研修をやる機会があり、「基礎知識の確認に使えるクイズアプリがあったら便利だな」と思っていたので、Kiro で作ってみることにしました。

完成したアプリの特徴

  • 4 つの難易度レベル (IT 未経験、初学者、ベテラン、博士)
  • 60 問の本格的な IT 基礎知識問題 (ネットワーク、セキュリティ、DB、プログラミング、クラウド、OS)
  • 4 択形式で、回答後すぐに正誤と詳しい解説を表示
  • 1〜50 問まで自由に問題数を選択可能
  • 途中終了して結果を確認できる
  • CloudFront + S3 でインターネット公開

[画像: 完成したクイズアプリのトップ画面のスクリーンショット]

アーキテクチャ

ユーザー → CloudFront → S3 (フロントエンド)
              ↓
         API Gateway
              ↓
     ┌────────┴────────┐
     ↓                 ↓
  Lambda            Lambda
  (GetQuiz)      (SubmitAnswer)
     └────────┬────────┘
              ↓
          DynamoDB

AWS CDK + TypeScript で構築。Lambda Powertools で構造化ログ、CDK Nag (AWS CDK のセキュリティ/ベストプラクティスチェックツール) でセキュリティチェックも適用しています。

Kiro を使った開発の流れ

事前準備: Steering の設定

開発を始める前に、Steering ファイルを設定しました。以下のプロンプトで作成:

CDK と TypeScript を使って開発をするための Steering ファイルを作ってください。
実装の際は、必要に応じて search_documentation ツールで AWS 公式ドキュメントを調べたり、
CDKGeneralGuidance ツールを使って CDK の実装方法を調べるようにしてください

また、破壊的なコマンド (cdk destroyrm -rf など) を誤って実行しないよう、Hook も設定しました:

破壊的なコマンドを抑止するようにしてください

これで Kiro が技術スタックを理解した状態で開発を始められます。

[画像: .kiro/steering/ ディレクトリに生成された Steering ファイルの一覧]

Step 1: Spec モードで要件定義

Spec モードを選択して、最初のプロンプトを入力:

IT 基礎知識クイズアプリを作りたいです。
AWS CDK + TypeScript で、4 つの難易度レベル (IT 未経験、初学者、ベテラン、博士) があり、
各レベルで問題を出題できるようにしたいです。
回答後は即座にフィードバックと解説を表示します。
2 時間で実装・デプロイまで完了させたいです。

Kiro から 2 つの質問が来ます:

  1. 新機能かバグ修正か? → 「Build a Feature」を選択
  2. 要件定義から始めるか、技術設計から始めるか? → 「Requirements」を選択

すると、Kiro が自動的に要件定義書 (requirements.md) を生成してくれます。12 個の要件が EARS 形式の受け入れ基準付きで整理されました。

[画像: Kiro が生成した requirements.md の内容 (Spec パネルのスクリーンショット)]

💡 ポイント: 要件定義は後の設計・実装の基礎になるので、ここでしっかり確認するのが大事です。追加したい機能があればこの段階で伝えましょう。

Step 2: 技術設計の自動生成

要件を確認したら、シンプルに:

お願いします!

これだけで、Kiro が技術設計書 (design.md) を自動生成します。アーキテクチャ、データモデル、API 設計、セキュリティ設計まで一気に出てきます。

[画像: Kiro が生成した design.md のアーキテクチャ図部分]

💡 ポイント: Steering で「CDK + TypeScript」と指定しているので、Kiro は自動的に AWS ベストプラクティス (Lambda Powertools、CDK Nag など) を設計に組み込んでくれました。

Step 3: タスク分解

設計を確認したら、また:

お願いします!

Kiro が実装タスク (tasks.md) を生成。9 つのメインタスクに分解され、各タスクは 5-15 分程度の粒度です。オプションのプロパティベーステストには * マークが付いていて、時間がなければスキップ可能。

[画像: Kiro が生成した tasks.md のタスク一覧 (チェックボックス付き)]

Step 4: 自動実装

ここからが本番。以下のプロンプトで一気に実装を開始:

極力自動で Run してください

Kiro がタスクを順番に自動実行していきます:

  1. プロジェクト初期化 (約 10 分): npm install、ディレクトリ作成、設定ファイル生成
  2. クイズデータ定義 (約 15 分): 60 問の IT 基礎知識問題を自動生成 (後述)
  3. Lambda 関数実装 (約 20 分): GetQuiz、SubmitAnswer の 2 つの関数
  4. CDK スタック実装 (約 25 分): DynamoDB、Lambda、API Gateway、CloudFront
  5. フロントエンド実装 (約 20 分): HTML/CSS/JavaScript

[画像: Kiro がタスクを自動実行している様子 (tasks.md のチェックボックスが順番に埋まっていく)]

💡 ポイント: 「極力自動で Run」と伝えることで、Kiro が確認を求めずにどんどん進めてくれます。エラーが出ても自動的に修正を試みてくれるので、基本的に見守るだけで OK です。

⚠️ 補足: 「極力自動で Run」と伝えても、ターミナルコマンドの実行時に Kiro が許可を求めてくるケースがあります (例: cdk synthnpm installcdk deploy など)。これは Kiro のセキュリティ上の仕様で、シェルコマンドの実行には原則としてユーザーの承認が必要です。表示される「Allow」ボタンをクリックすれば続行できます。完全に手放しというわけではないので、実行中もときどき画面を確認して、許可待ちになっていないかチェックしましょう。なお、Autopilot モードを有効にすると、コマンド実行の許可も自動化されます。

補足: クイズ問題の生成方法

60 問のクイズ問題は、Kiro がタスク実行時に自動生成してくれます。lib/quiz-data.ts に以下のような構造で定義されます:

export interface QuizQuestion {
  id: string;
  level: 'beginner' | 'intermediate' | 'advanced' | 'expert';
  question: string;
  choices: string[];
  correctIndex: number;
  explanation: string;
  category: string;
}

各問題には難易度レベル (beginner/intermediate/advanced/expert)、4 つの選択肢、正解のインデックス、解説、カテゴリ (network/security/db/programming/cloud/os) が含まれます。Kiro が各レベル 15 問ずつ、計 60 問を一気に生成してくれました。

問題の質を上げたい場合は、生成後に以下のようなプロンプトで調整できます:

問題の難易度をもう少し上げてください
セキュリティ分野の問題を増やしてください
解説をもう少し詳しくしてください

また、問題数を増やしたい場合も「各レベル 20 問に増やしてください」のように伝えるだけで OK です。Kiro が既存のデータ構造に合わせて追加してくれます。

[画像: quiz-data.ts の問題データの一部 (コードエディタのスクリーンショット)]

Step 5: デプロイ

リージョンを指定して:

リージョンは米国東部 (バージニア北部) にしてください

Kiro が cdk synthcdk bootstrapcdk deploy を自動実行。CDK Nag の警告も自動的に修正してくれました。

[画像: cdk deploy が成功して API Endpoint と CloudFront URL が出力された画面]

Step 6: 動作確認

デプロイ完了後、CloudFront URL にアクセスして動作確認。レベル選択、クイズ開始、回答、フィードバック表示、結果表示、途中終了、すべて正常に動作しました。

おまけ: ブログも Kiro に書いてもらう

開発が完了した後、ブログの執筆も Kiro に依頼しました。

まず、開発中に Hook を設定して、タスクの進捗に合わせてブログ記事を自動更新するようにしていました:

ブログを自動更新する Hook を作ってください

最終的には、以下のようなプロンプトでブラッシュアップ:

ブログについて、もう少し内容をブラッシュアップしたいです。
・Kiro でクイズアプリをつくってみたこと
・Kiro の機能紹介
・クイズアプリの内容と、Kiro を使った基本的な作り方、プロンプト、注意点や工夫した点など
・クイズアプリの紹介
・まとめ

開発からドキュメント作成まで、一貫して Kiro を活用できるのは便利です。

工夫した点・注意点

工夫した点

  1. Steering の活用: 最初に CDK + TypeScript の開発ルールを設定したことで、Kiro が一貫したコードを生成してくれた
  2. 破壊的コマンドの抑止 Hook: cdk destroyrm -rf を誤って実行しないよう Hook を設定。安心して開発できる
  3. 2 時間制約の明示: プロンプトに「2 時間で完了」と書いたことで、Kiro がオプションタスクに * マークを付けて優先順位付けしてくれた
  4. 段階的な確認: 要件→設計→タスクの各フェーズで内容を確認してから次に進めた
  5. 自動実行モード: 「極力自動で Run」で手動確認の手間を大幅に削減
  6. ブログの自動更新: Hook を使って開発の進捗に合わせてブログを自動更新

注意点

  1. CDK Nag の警告: デプロイ時にセキュリティ警告が出ることがある。Kiro が自動修正してくれるが、本番環境では抑制ルールの見直しが必要
  2. CloudFront の ACL エラー: ログバケットの設定で objectOwnership の指定が必要だった。エラーメッセージを Kiro に伝えたら自動修正してくれた
  3. Lambda Powertools Layer: リージョンによって ARN が異なるので、リージョン変更時は注意
  4. デプロイ時間: CDK のデプロイには数分かかる。CloudFront の作成は特に時間がかかる (5-10 分程度)
  5. コンテキストの管理: 長い会話になるとコンテキストが増えるので、必要に応じて新しいチャットセッションを開始するのが良い

完成したアプリの紹介

トップ画面

4 つの難易度レベルをラジオボタンで選択し、問題数 (1-50) を入力して「クイズを開始」。シンプルで直感的な UI です。

[画像: クイズアプリのトップ画面 - レベル選択と問題数入力のフォーム]

クイズ画面

問題文と 4 つの選択肢が表示されます。選択肢をクリックすると即座に正誤判定。正解は緑、不正解は赤でハイライトされ、詳しい解説も表示されます。

[画像: クイズ画面 - 問題文、4 つの選択肢ボタン、正解時の緑色ハイライトと解説表示]

結果画面

全問終了後 (または途中終了時) に、正答率・正解数・不正解数が表示されます。「もう一度挑戦」で最初に戻れます。

[画像: 結果画面 - 正答率、正解数、不正解数の表示]

まとめ

Kiro の仕様駆動開発を使って、IT 基礎知識クイズアプリを約 2 時間で作ることができました。

感じたこと:

  • Spec-Driven Development は「いきなりコードを書かない」アプローチで、AI を使った開発でも品質を保てる
  • Steering で技術スタックやルールを事前に設定しておくと、一貫したコードが生成される
  • 「極力自動で Run」の一言で、Kiro がタスクを順番に自動実行してくれるのは体験として新鮮
  • エラーが出ても Kiro に伝えれば自動修正してくれるので、デバッグの手間が大幅に減る
  • CDK Nag、Lambda Powertools など、AWS ベストプラクティスが自動的に適用されるのは安心感がある
  • ブログの執筆まで Kiro に任せられるので、開発からドキュメント作成まで一貫して効率化できる
    • 各キャプチャ画像の生成も任せられたら良かった

2 時間という限られた時間でも、要件定義から設計、実装、デプロイまで一通り完了できたのは、Kiro の仕様駆動開発のおかげだと思います。次はプロパティベーステストや認証機能の追加にも挑戦してみたいです。


この記事は Kiro を使って開発した体験をもとに作成しました。ブログの執筆自体も Kiro を活用しています。

あとがき

ブログも作ってくれて一石二鳥 (?) と感じた兄でした (中身はもちろん目を通して、多少修正しています)。

それではまた、ごきげんよう。

高橋 悠佑 (ポインコ兄) (執筆記事一覧)

健康志向です