本記事は「2025 Japan AWS Jr. Chanpions 夏のQiitaリレー 」の33日目の記事です。
過去の投稿はこちらからご覧ください！
1. はじめに
2025年7月にAWSからAIエージェント「Kiro」のプレビュー版（試用版）が利用できるようになりました。
本記事では、Kiroを活用して英単語学習用のWebアプリを構築した過程と所感についてまとめます。
2. Kiroの概要
Kiroは、AWSによるAIエージェントで、現在はプレビュー版として提供されており現在（2025年8月時点）は無料で利用できます。
他のAIツールと大きく異なる点は、多くのAI開発支援ツールが即時的にコードを生成する「Vibe Coding」的体験を提供するのにとどまらず、「仕様駆動（spec-driven）」という開発アプローチを中心に据えていることです。
まず仕様書や設計図の生成を通じて、開発の土台をしっかりと築くことに重きを置いています。
このようなプロセスにより、ドキュメント不足や仕様の曖昧さによるトラブル回避につながります。
3. 仕様駆動開発（Specモード）
今回行う仕様駆動型開発（Specモード）はコードをいきなり書くのではなく、まず仕様や設計を明文化し、それを元に開発を進めていくというアプローチです。
AIとの対話を通じて、以下のような3つの.mdファイルが自動生成されます。
1. product.md（要件定義書）
- どんなアプリを作りたいのか
- 想定ユーザーや課題、目的
- 必要な機能や画面の概要
など、プロダクトの全体像を整理するための文書です。
2. specs.md（設計書）
- 各機能の画面構成や動作仕様
- 使用するライブラリ・技術スタック
- UI/UXの要件や動作フロー
といった具体的な設計内容が含まれます。
AIが自然言語から的確に設計へ落とし込んでくれるのがポイントです。
3. tasks.md（タスクリスト）
- 実装すべき作業を細かく分解したリスト
- フロント・バックエンド・UI・インフラなど分類別に整理
これにより、どこから手を付けるべきかが明確になり、効率的に開発を進められます。
このように、Specモードでは要件 → 設計 → 実装タスクの流れが体系的に整理されます。
また、仕様書とコードのズレも少なく、後から見返したときにも理解しやすい構造になります。
4. 英単語学習アプリの作成
では、実際にSpecモードを利用して、簡単なアプリを作成します。
1. 要件定義書（requirements.md）の作成
まずは新規チャットを開いて、プロンプトを実行します。
すると、数十秒でrequirements.mdを生成してくれました。
要件定義書（requirements.md）
# 要件定義書
## 概要
英単語学習アプリは、ユーザーが効率的に英単語を学習し、記憶を定着させることを支援するWebアプリケーションです。TypeScriptとReactを使用して構築され、単語の表示、意味の確認、学習進捗の管理機能を提供します。
## 要件
### 要件1
**ユーザーストーリー:** ユーザーとして、英単語とその意味を確認できるようにしたい。そうすることで、新しい単語を効率的に学習できる。
#### 受け入れ基準
1. ユーザーがアプリを開いたとき、システムは英単語を表示すること
2. ユーザーが単語をクリックまたはタップしたとき、システムは日本語の意味を表示すること
3. ユーザーが意味を確認した後、システムは次の単語に進むボタンを表示すること
### 要件2
**ユーザーストーリー:** ユーザーとして、単語の習得状況を記録できるようにしたい。そうすることで、学習の進捗を把握し、復習が必要な単語を特定できる。
#### 受け入れ基準
1. ユーザーが単語の意味を確認したとき、システムは「知っている」「知らない」の選択肢を提供すること
2. ユーザーが「知っている」を選択したとき、システムは該当単語を習得済みとして記録すること
3. ユーザーが「知らない」を選択したとき、システムは該当単語を要復習として記録すること
4. ユーザーが同じ単語を3回連続で「知っている」と回答した場合、システムは該当単語を完全習得として記録すること
### 要件3
**ユーザーストーリー:** ユーザーとして、学習進捗を視覚的に確認できるようにしたい。そうすることで、学習のモチベーションを維持できる。
#### 受け入れ基準
1. ユーザーがダッシュボードを表示したとき、システムは総単語数、習得済み単語数、習得率を表示すること
2. ユーザーが進捗を確認したとき、システムは習得状況を円グラフまたはプログレスバーで表示すること
3. ユーザーが学習履歴を確認したとき、システムは日別の学習単語数を表示すること
### 要件4
**ユーザーストーリー:** ユーザーとして、復習が必要な単語を優先的に学習できるようにしたい。そうすることで、効率的に記憶を定着させることができる。
#### 受け入れ基準
1. ユーザーが復習モードを選択したとき、システムは「知らない」と回答した単語を優先的に表示すること
2. ユーザーが通常学習モードを選択したとき、システムは未学習の単語を順番に表示すること
3. 復習対象の単語がない場合、システムは通常学習モードに自動切り替えすること
### 要件5
**ユーザーストーリー:** ユーザーとして、単語データが永続化されるようにしたい。そうすることで、ブラウザを閉じても学習進捗が保持される。
#### 受け入れ基準
1. ユーザーが学習状況を更新したとき、システムはローカルストレージに進捗データを保存すること
2. ユーザーがアプリを再起動したとき、システムは保存された進捗データを読み込むこと
3. 保存されたデータが存在しない場合、システムは初期状態から開始すること
2. 設計書 (design.md）の作成
次に、要件定義を基に設計書 (design.md) が生成されます。
アーキテクチャやデータモデル、テスト戦略などを指示を与えずとも考えてくれました。
設計書 (design.md)
# 設計文書
## 概要
英単語学習アプリは、React + TypeScriptで構築されるSPA（Single Page Application）です。ユーザーが英単語を効率的に学習できるよう、直感的なUI/UXと堅牢な状態管理を提供します。
## アーキテクチャ
### 技術スタック
- **フロントエンド**: React 18 + TypeScript
- **状態管理**: React Context API + useReducer
- **データ永続化**: localStorage
- **スタイリング**: CSS Modules または Styled Components
- **ビルドツール**: Vite
### アプリケーション構造
src/
├── components/ # 再利用可能なUIコンポーネント
├── pages/ # ページコンポーネント
├── hooks/ # カスタムフック
├── context/ # Context API関連
├── types/ # TypeScript型定義
├── utils/ # ユーティリティ関数
├── data/ # 初期データ
└── styles/ # スタイル関連
## コンポーネントとインターフェース
### 主要コンポーネント
#### 1. App Component
- アプリケーションのルートコンポーネント
- グローバル状態の提供
- ルーティング管理
#### 2. Dashboard Component
- 学習進捗の表示
- 総単語数、習得済み単語数、習得率の表示
- 円グラフまたはプログレスバーによる視覚化
#### 3. StudyMode Component
- 通常学習モードと復習モードの切り替え
- 単語カードの表示
- 「知っている」「知らない」ボタン
#### 4. WordCard Component
- 英単語の表示
- クリックで意味表示の切り替え
- アニメーション効果
#### 5. ProgressChart Component
- 学習進捗の視覚化
- 円グラフまたはプログレスバー
- 日別学習履歴
### インターフェース設計
```typescript
// 単語データの型定義
interface Word {
id: string;
english: string;
japanese: string;
category?: string;
}
// 学習進捗の型定義
interface WordProgress {
wordId: string;
status: 'unlearned' | 'learning' | 'mastered';
correctCount: number;
lastStudied: Date;
studyCount: number;
}
// アプリケーション状態の型定義
interface AppState {
words: Word[];
progress: Record<string, WordProgress>;
currentWordIndex: number;
studyMode: 'normal' | 'review';
showMeaning: boolean;
}
// アクションの型定義
type AppAction =
| { type: 'LOAD_DATA' }
| { type: 'SET_STUDY_MODE'; payload: 'normal' | 'review' }
| { type: 'SHOW_MEANING' }
| { type: 'ANSWER_WORD'; payload: { wordId: string; known: boolean } }
| { type: 'NEXT_WORD' }
| { type: 'RESET_CARD' };
## データモデル
### 単語データ構造
```typescript
const initialWords: Word[] = [
{
id: '1',
english: 'apple',
japanese: 'りんご',
category: 'food'
},
{
id: '2',
english: 'book',
japanese: '本',
category: 'object'
}
// ... 追加の単語データ
];
### ローカルストレージ構造
```typescript
interface StorageData {
progress: Record<string, WordProgress>;
lastStudyDate: string;
totalStudyTime: number;
}
## エラーハンドリング
### エラーの種類と対応
1. **ローカルストレージエラー**
- データの読み込み/保存失敗時の処理
- フォールバック機能の提供
2. **データ整合性エラー**
- 不正なデータ形式の検証
- デフォルト値への復旧
3. **UI操作エラー**
- 無効な操作の防止
- ユーザーフレンドリーなエラーメッセージ
### エラーハンドリング戦略
```typescript
// エラーバウンダリーコンポーネント
class ErrorBoundary extends React.Component {
// エラー状態の管理
// フォールバックUIの表示
}
// カスタムフックでのエラーハンドリング
const useLocalStorage = () => {
const [error, setError] = useState<string | null>(null);
const saveData = (data: StorageData) => {
try {
localStorage.setItem('vocabulary-app', JSON.stringify(data));
} catch (err) {
setError('データの保存に失敗しました');
}
};
};
## テスト戦略
### テストの種類
1. **単体テスト**
- コンポーネントの個別機能テスト
- カスタムフックのテスト
- ユーティリティ関数のテスト
2. **統合テスト**
- コンポーネント間の連携テスト
- 状態管理のテスト
3. **E2Eテスト**
- ユーザーシナリオの完全なテスト
- 学習フローの検証
### テストツール
- **単体・統合テスト**: Jest + React Testing Library
- **E2Eテスト**: Playwright または Cypress
### テスト対象の優先順位
1. 学習進捗の記録・復元機能
2. 単語表示・意味表示の切り替え
3. 学習モードの切り替え
4. ローカルストレージの操作
5. 進捗表示の正確性
## パフォーマンス考慮事項
### 最適化戦略
1. **メモ化**
- React.memo でコンポーネントの再レンダリング防止
- useMemo, useCallback でのパフォーマンス最適化
2. **遅延読み込み**
- React.lazy でのコンポーネント分割
- 大量の単語データの効率的な管理
3. **状態管理の最適化**
- 必要最小限の状態更新
- 適切な状態の分離
## セキュリティ考慮事項
### データ保護
1. **ローカルストレージの適切な使用**
- 機密情報の保存回避
- データの暗号化（必要に応じて）
2. **XSS対策**
- ユーザー入力のサニタイズ
- dangerouslySetInnerHTMLの使用回避
## 拡張性
### 将来の機能拡張
1. **単語データの外部API連携**
2. **音声読み上げ機能**
3. **学習統計の詳細分析**
4. **カテゴリ別学習**
5. **学習リマインダー機能**
### 設計の柔軟性
- プラグイン可能なアーキテクチャ
- 設定可能な学習アルゴリズム
- テーマ切り替え機能
3. 各タスク (tasks.md）の作成
続いて、設計書の内容に基づき、具体的な実装作業を整理した tasks.md が生成されます。
タスク (tasks.md）
# 実装計画
- [ ] 1. プロジェクト構造とTypeScript設定の初期化
- Vite + React + TypeScriptプロジェクトの作成
- 必要な依存関係のインストール
- TypeScript設定ファイルの構成
- ディレクトリ構造の作成
- _要件: 5.3_
- [ ] 2. 型定義とデータモデルの実装
- [ ] 2.1 基本的な型定義の作成
- Word、WordProgress、AppState、AppActionの型定義を実装
- StorageDataインターフェースの定義
- _要件: 1.1, 2.1, 5.1_
- [ ] 2.2 初期単語データの作成
- 学習用の英単語データセットを作成
- 最低50個の単語を含むデータファイルを実装
- _要件: 1.1_
- [ ] 3. 状態管理システムの実装
- [ ] 3.1 Context APIとReducerの設定
- AppContextとAppReducerを実装
- 状態の初期化ロジックを作成
- アクションハンドラーの実装
- _要件: 2.1, 2.2, 2.3, 4.1, 4.2_
- [ ] 3.2 ローカルストレージ操作の実装
- データの保存・読み込み機能を実装
- エラーハンドリングを含むカスタムフックを作成
- データの整合性チェック機能を実装
- _要件: 5.1, 5.2, 5.3_
- [ ] 4. 基本UIコンポーネントの実装
- [ ] 4.1 WordCardコンポーネントの作成
- 英単語の表示機能を実装
- クリックで意味表示の切り替え機能を実装
- アニメーション効果を追加
- _要件: 1.1, 1.2_
- [ ] 4.2 学習ボタンコンポーネントの作成
- 「知っている」「知らない」ボタンを実装
- 次の単語に進むボタンを実装
- ボタンの状態管理を実装
- _要件: 1.3, 2.1, 2.2, 2.3_
- [ ] 5. 学習モード機能の実装
- [ ] 5.1 StudyModeコンポーネントの作成
- 通常学習モードの実装
- 復習モードの実装
- モード切り替え機能の実装
- _要件: 4.1, 4.2, 4.3_
- [ ] 5.2 学習ロジックの実装
- 単語の習得状況記録機能を実装
- 3回連続正解での完全習得判定を実装
- 復習対象単語の優先表示ロジックを実装
- _要件: 2.2, 2.3, 2.4, 4.1_
- [ ] 6. 進捗表示機能の実装
- [ ] 6.1 Dashboardコンポーネントの作成
- 総単語数、習得済み単語数、習得率の表示を実装
- 学習統計の計算ロジックを実装
- _要件: 3.1_
- [ ] 6.2 ProgressChartコンポーネントの作成
- 円グラフまたはプログレスバーによる進捗表示を実装
- 日別学習履歴の表示機能を実装
- _要件: 3.2, 3.3_
- [ ] 7. メインアプリケーションの統合
- [ ] 7.1 Appコンポーネントの実装
- 全体のレイアウト構造を作成
- ナビゲーション機能を実装
- グローバル状態の提供を実装
- _要件: 1.1, 3.1_
- [ ] 7.2 ページ間の連携機能の実装
- ダッシュボードと学習モード間の切り替えを実装
- 状態の同期機能を実装
- _要件: 3.1, 4.2_
- [ ] 8. エラーハンドリングとテストの実装
- [ ] 8.1 エラーバウンダリーの実装
- React ErrorBoundaryコンポーネントを作成
- エラー時のフォールバックUIを実装
- _要件: 5.3_
- [ ] 8.2 基本的な単体テストの作成
- WordCardコンポーネントのテストを実装
- 状態管理ロジックのテストを実装
- ローカルストレージ操作のテストを実装
- _要件: 1.1, 1.2, 2.1, 5.1_
- [ ] 9. スタイリングとUI/UXの改善
- [ ] 9.1 基本スタイルの適用
- レスポンシブデザインの実装
- 学習に集中できるシンプルなUIデザインを適用
- _要件: 1.1, 3.2_
- [ ] 9.2 アニメーションとインタラクションの追加
- 単語カードのフリップアニメーションを実装
- 進捗表示のアニメーション効果を追加
- _要件: 1.2, 3.2_
- [ ] 10. 最終統合とテスト
- [ ] 10.1 E2Eテストシナリオの実装
- 完全な学習フローのテストを作成
- データ永続化のテストを実装
- _要件: 1.1, 1.2, 1.3, 2.1, 2.2, 2.3, 5.1, 5.2_
- [ ] 10.2 パフォーマンス最適化
- コンポーネントのメモ化を実装
- 不要な再レンダリングの防止を実装
- _要件: 1.1, 3.1_
4. タスクの実行
それでは、各タスクを実行して実装フェースに移ります。
コマンドについて確認されるので、都度対応する必要があります。
無事、タスク 1が完了しました。タスク完了時に作業内容をリスト化して報告してくれます。
tasks.mdを確認すると、Task completedと表示が変更されています。
この調子で、次々タスクを進めていきましょう。
また、エラーが出た際には、自ら修正し再実行してくれます。
5. アプリの完成
すべてのタスクが完了してアプリが完成し、以下キャプチャのようなホーム画面が作成されました。
アイコンや学習進捗の機能などをkiro自らが実装してくれています。
ただ、少し想像していたイメージと違うので修正していきます。
いくつかUIに関する指示と参考となるキャプチャを与えたところ、要件定義書を確認してくれました。
そして、更新内容をドキュメントに反映してくれています。
さらにサイドバーやイラストの追加、ボタンの変更等を指示したところ、以下のようなホーム画面にUIが変更されました。
5. メリットと気づき
爆速でアプリが作成できる
仕様を自然言語で伝えるだけで、UI設計・実装コード・デプロイ構成まで一気に進めることができます。
ドキュメントと実装が常に同期される
specs.md, tasks.md, product.md などが生成されるため、仕様や設計とコードが乖離しにくくなります。また、仕様変更があっても、ドキュメントを更新し、タスクやコードを再提案してくれます。
個人開発や学習に向いている
アイデアを明確な仕様やタスクに落とし込んでくれ、コーディングだけでなく考え方や設計の意図まで学べる点が非常に有用です。
6. 課題と制約
セッション開始時は英語で応答される
新規セッションで対話すると、英語で返答されてしまいます。
同じエラーに再度ハマる場合がある
何度かエラーについてループしてしまうことがあり、指摘する必要がありました。
利用制限がある（プレビュー版の制約）
プレビュー版なので、仕方ないのですが1日の利用制限があるようです。私は2~3時間で利用制限に達しました。
7. さいごに
今回、Kiroを使って英単語アプリを開発したことで、仕様整理から実装までの一連の流れをAIと一緒に進めるという新しい開発体験を味わうことができました。
特に、仕様駆動開発（Specモード）によって、
- 要件の曖昧さを排除しつつ
- 実装タスクを明確にし
- コーディングに集中できる状態を自然に作り出せた
点は非常に印象的でした。
おまけ
今回は試せていませんが、Kiroには他にも強力な機能があります。
今後はHookやSteeringなども含めて、より複雑なプロジェクトを試してみたいです。
Hook機能（自動アクションのトリガー）
特定のイベント（例：ファイル更新、ビルド完了など）に応じて、AIエージェントがドキュメント生成やコード修正を自動実行してくれる仕組みです。開発の自動化・省力化がさらに加速することを期待できます。
Steering機能（プロジェクトの背景・意図の共有）
product.mdやtech.mdなどのSteeringファイルを活用することで、プロジェクトの背景や方針をKiroに明示的に伝えられるようになっています。複数人や長期的な開発でも、意図がぶれずに維持できる点は非常に魅力的です。