Kiroを使ってみた

Kiroが使えるようになったので簡単にまとめる

料金

機能

基本的な機能の説明は公式ブログを参照する
拡張機能はVSCodeと互換性があり、使い心地もほぼVSCode。

機能は２種類あるらしい

Kiroに機能について聞いてみると以下のような返答があった。

Kiroに機能について聞いた結果

こんにちは！私はKiroです。開発者の皆さんをサポートするAIアシスタント兼IDEです。

私の主な機能をご紹介しますね：

コード開発支援

• ファイルシステムの編集とコード修正の提案
• シェルコマンドの推奨
• ソフトウェア開発に特化したアドバイス
• インフラコードと設定の支援
• ベストプラクティスのガイダンス

分析・最適化

• リソース使用量の分析と最適化
• 問題とエラーのトラブルシューティング
• コードのテストとデバッグ支援
• 自動化支援
• CLIコマンドと自動化タスクのサポート
• ソフトウェアコードの作成と修正

Kiroの特別な機能

自律モード

• Autopilot: ワークスペース内のファイルを自動的に修正
• Supervised: 変更適用後にユーザーが変更を元に戻すことが可能

チャットコンテキスト

• #Fileや#Folderで特定のファイルやフォルダを参照
• 画像ファイルをドラッグ&ドロップで読み込み
• #Problems、#Terminal、#Git Diff、#Codebaseでプロジェクト情報を取得

ステアリング

• .kiro/steering/*.mdでチーム標準や追加指示を設定
• 常時適用、条件付き適用、手動適用が選択可能

スペック

• 複雑な機能の構造化された設計・実装プロセス
• 段階的な開発とフィードバック制御

フック

• イベント発生時の自動実行（ファイル保存時のテスト実行など）
• エクスプローラーの「Agent Hooks」セクションで管理

MCP（Model Context Protocol）

• 外部ツールとの統合
• .kiro/settings/mcp.jsonで設定

何かお手伝いできることがあれば、お気軽にお声かけください！

実践

Specモードでタスク管理ツールを作ってみる

requirements.mdの内容に問題がなかったので、要求を承認し、設計フェーズに進んだ。

要件定義ファイル

requirements.md

# Requirements Document

## Introduction

タスク管理ツールは、ユーザーがタスクを効率的に作成、管理、追跡できるWebアプリケーションです。このツールにより、ユーザーは日常的なタスクを整理し、優先順位を付け、進捗を管理することができます。

## Requirements

### Requirement 1

**User Story:** ユーザーとして、新しいタスクを作成したいので、やるべきことを記録できるようにしたい

#### Acceptance Criteria

1. WHEN ユーザーがタスク作成ボタンをクリック THEN システムは新しいタスク作成フォームを表示する
2. WHEN ユーザーがタスクのタイトルと説明を入力して保存ボタンをクリック THEN システムはタスクを保存してタスクリストに表示する
3. IF タスクのタイトルが空の場合 THEN システムはエラーメッセージを表示して保存を拒否する

### Requirement 2

**User Story:** ユーザーとして、タスクの一覧を表示したいので、すべてのタスクを確認できるようにしたい

#### Acceptance Criteria

1. WHEN ユーザーがアプリケーションを開く THEN システムは保存されているすべてのタスクをリスト形式で表示する
2. WHEN タスクリストが表示される THEN 各タスクにはタイトル、説明、作成日、ステータスが表示される
3. IF タスクが存在しない場合 THEN システムは「タスクがありません」というメッセージを表示する

### Requirement 3

**User Story:** ユーザーとして、タスクのステータスを変更したいので、進捗を管理できるようにしたい

#### Acceptance Criteria

1. WHEN ユーザーがタスクのステータスボタンをクリック THEN システムはステータスを「未完了」から「完了」に、または「完了」から「未完了」に切り替える
2. WHEN タスクが完了状態になる THEN システムはタスクを視覚的に区別して表示する（例：取り消し線、色の変更）
3. WHEN ステータスが変更される THEN システムは変更を即座に保存する

### Requirement 4

**User Story:** ユーザーとして、不要になったタスクを削除したいので、リストを整理できるようにしたい

#### Acceptance Criteria

1. WHEN ユーザーがタスクの削除ボタンをクリック THEN システムは削除確認ダイアログを表示する
2. WHEN ユーザーが削除を確認する THEN システムはタスクをリストから削除して保存する
3. WHEN ユーザーが削除をキャンセルする THEN システムはタスクを削除せずにダイアログを閉じる

### Requirement 5

**User Story:** ユーザーとして、タスクを編集したいので、内容を更新できるようにしたい

#### Acceptance Criteria

1. WHEN ユーザーがタスクの編集ボタンをクリック THEN システムは編集フォームを表示して現在の内容を入力欄に表示する
2. WHEN ユーザーが内容を変更して保存ボタンをクリック THEN システムは変更を保存してリスト表示に戻る
3. IF 編集中にタイトルが空になった場合 THEN システムはエラーメッセージを表示して保存を拒否する

### Requirement 6

**User Story:** ユーザーとして、タスクデータが永続化されることを期待するので、ブラウザを閉じても情報が失われないようにしたい

#### Acceptance Criteria

1. WHEN ユーザーがタスクを作成、編集、削除する THEN システムはデータをローカルストレージに保存する
2. WHEN ユーザーがアプリケーションを再度開く THEN システムは以前に保存されたタスクデータを読み込んで表示する
3. IF ローカルストレージにデータが存在しない場合 THEN システムは空のタスクリストを表示する

設計フェーズに要件を追加してみる。

最初の設計ファイル

design.md

# Design Document

## Overview

タスク管理ツールは、シンプルで直感的なWebアプリケーションとして設計されます。HTML、CSS、JavaScriptを使用したクライアントサイドアプリケーションとして実装し、ローカルストレージを使用してデータを永続化します。

## Architecture

### アーキテクチャパターン
- **MVC（Model-View-Controller）パターン**を採用
- **シングルページアプリケーション（SPA）**として実装
- **クライアントサイドレンダリング**でUIを動的に更新

### 技術スタック
- **HTML5**: セマンティックなマークアップ
- **CSS3**: レスポンシブデザインとモダンなスタイリング
- **Vanilla JavaScript**: フレームワークを使わないシンプルな実装
- **Local Storage API**: データの永続化

## Components and Interfaces

### 1. Task Model
```javascript
class Task {
  constructor(id, title, description, createdAt, completed = false)
  
  // メソッド
  toggleStatus()
  update(title, description)
  toJSON()
  static fromJSON(json)
}
```

### 2. TaskManager Service
```javascript
class TaskManager {
  // タスクの CRUD 操作
  createTask(title, description)
  getAllTasks()
  updateTask(id, title, description)
  deleteTask(id)
  toggleTaskStatus(id)
  
  // ローカルストレージ操作
  saveTasks()
  loadTasks()
}
```

### 3. UI Controller
```javascript
class UIController {
  // DOM 操作
  renderTasks(tasks)
  showTaskForm(task = null)
  hideTaskForm()
  showDeleteConfirmation(taskId)
  showErrorMessage(message)
  
  // イベントハンドラー
  handleTaskCreate()
  handleTaskEdit(taskId)
  handleTaskDelete(taskId)
  handleTaskToggle(taskId)
}
```

### 4. App Controller
```javascript
class App {
  constructor()
  init()
  
  // アプリケーションの初期化と調整
}
```

## Data Models

### Task Entity
```javascript
{
  id: string,           // UUID形式の一意識別子
  title: string,        // タスクのタイトル（必須）
  description: string,  // タスクの詳細説明（オプション）
  createdAt: Date,      // 作成日時
  completed: boolean    // 完了状態（デフォルト: false）
}
```

### Local Storage Schema
```javascript
// キー: 'tasks'
// 値: Task[]のJSON文字列
localStorage.setItem('tasks', JSON.stringify(tasks))
```

## User Interface Design

### レイアウト構造
```
┌─────────────────────────────────────┐
│ Header: "タスク管理ツール"           │
├─────────────────────────────────────┤
│ [新しいタスクを追加] ボタン          │
├─────────────────────────────────────┤
│ タスクリスト                        │
│ ┌─────────────────────────────────┐ │
│ │ □ タスクタイトル                │ │
│ │   説明文                        │ │
│ │   作成日: 2024-01-01            │ │
│ │   [編集] [削除]                 │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```

### モーダルフォーム
- タスク作成・編集用のモーダルダイアログ
- タイトル入力欄（必須）
- 説明入力欄（オプション）
- 保存・キャンセルボタン

### 状態表示
- 未完了タスク: 通常の表示
- 完了タスク: 取り消し線、薄いグレー色

## Error Handling

### バリデーションエラー
- タイトルが空の場合: "タスクのタイトルを入力してください"
- 文字数制限超過: "タイトルは100文字以内で入力してください"

### ストレージエラー
- ローカルストレージが利用できない場合の警告表示
- データ読み込み失敗時のフォールバック処理

### ユーザーエクスペリエンス
- エラーメッセージは3秒後に自動で消える
- 操作完了時の成功フィードバック
- ローディング状態の表示

## Testing Strategy

### 単体テスト
- Task クラスのメソッドテスト
- TaskManager の CRUD 操作テスト
- バリデーション機能のテスト

### 統合テスト
- UI操作からデータ保存までの一連の流れ
- ローカルストレージとの連携テスト

### ユーザビリティテスト
- 基本的なタスク管理フローの確認
- エラーハンドリングの動作確認
- レスポンシブデザインの動作確認

### テスト環境
- 主要ブラウザでの動作確認（Chrome, Firefox, Safari, Edge）
- モバイルデバイスでの表示確認

## Performance Considerations

### 最適化戦略
- DOM操作の最小化
- イベントデリゲーションの活用
- 必要に応じた遅延読み込み

### メモリ管理
- 不要なイベントリスナーの削除
- 大量のタスクに対する仮想スクロール（将来的な拡張）

## Security Considerations

### データ保護
- ローカルストレージのデータは暗号化しない（機密情報を含まないため）
- XSS攻撃対策としてユーザー入力のサニタイズ

### 入力検証
- クライアントサイドでの基本的なバリデーション
- HTMLエスケープ処理

改善後の設計

design.md

# Design Document

## Overview

タスク管理ツールは、シンプルで直感的なWebアプリケーションとして設計されます。HTML、CSS、JavaScriptを使用したクライアントサイドアプリケーションとして実装し、ローカルストレージを使用してデータを永続化します。

## Architecture

### アーキテクチャパターン
- **コンポーネントベースアーキテクチャ**を採用
- **React Hooks**を使用した関数コンポーネント
- **シングルページアプリケーション（SPA）**として実装
- **状態管理**にはReactの組み込みhooks（useState, useEffect）を使用

### 技術スタック
- **React**: コンポーネントベースのUIライブラリ
- **Material-UI (MUI)**: Googleのマテリアルデザインに基づくReactコンポーネントライブラリ
- **TypeScript**: 型安全性を提供するJavaScriptの拡張
- **Local Storage API**: データの永続化

## Components and Interfaces

### 1. Task Type Definition
```typescript
interface Task {
  id: string;
  title: string;
  description: string;
  createdAt: Date;
  completed: boolean;
}
```

### 2. React Components

#### App Component
```typescript
const App: React.FC = () => {
  // メインアプリケーションコンポーネント
  // タスクの状態管理とローカルストレージとの連携
}
```

#### TaskList Component
```typescript
interface TaskListProps {
  tasks: Task[];
  onToggleTask: (id: string) => void;
  onEditTask: (task: Task) => void;
  onDeleteTask: (id: string) => void;
}

const TaskList: React.FC<TaskListProps> = (props) => {
  // タスクリストの表示
}
```

#### TaskItem Component
```typescript
interface TaskItemProps {
  task: Task;
  onToggle: () => void;
  onEdit: () => void;
  onDelete: () => void;
}

const TaskItem: React.FC<TaskItemProps> = (props) => {
  // 個別タスクの表示とアクション
}
```

#### TaskForm Component
```typescript
interface TaskFormProps {
  open: boolean;
  task?: Task;
  onClose: () => void;
  onSave: (task: Omit<Task, 'id' | 'createdAt'>) => void;
}

const TaskForm: React.FC<TaskFormProps> = (props) => {
  // タスク作成・編集フォーム（MUIのDialogを使用）
}
```

#### DeleteConfirmDialog Component
```typescript
interface DeleteConfirmDialogProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
}

const DeleteConfirmDialog: React.FC<DeleteConfirmDialogProps> = (props) => {
  // 削除確認ダイアログ
}
```

### 3. Custom Hooks

#### useLocalStorage Hook
```typescript
const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T) => void] => {
  // ローカルストレージとの連携を抽象化
}
```

#### useTasks Hook
```typescript
const useTasks = () => {
  // タスクの CRUD 操作を提供
  return {
    tasks,
    addTask,
    updateTask,
    deleteTask,
    toggleTask
  };
}
```

## Data Models

### Task Entity
```typescript
interface Task {
  id: string;           // UUID形式の一意識別子
  title: string;        // タスクのタイトル（必須）
  description: string;  // タスクの詳細説明（オプション）
  createdAt: Date;      // 作成日時
  completed: boolean;   // 完了状態（デフォルト: false）
}
```

### Local Storage Schema
```typescript
// キー: 'tasks'
// 値: Task[]のJSON文字列
const saveTasks = (tasks: Task[]) => {
  localStorage.setItem('tasks', JSON.stringify(tasks));
};

const loadTasks = (): Task[] => {
  const stored = localStorage.getItem('tasks');
  return stored ? JSON.parse(stored) : [];
};
```

## User Interface Design

### MUIコンポーネント構成

#### メインレイアウト
- **AppBar**: アプリケーションのヘッダー
- **Container**: メインコンテンツエリア
- **Fab (Floating Action Button)**: 新しいタスク追加ボタン

#### タスクリスト
- **List**: タスクのリスト表示
- **ListItem**: 個別タスクアイテム
- **ListItemText**: タスクのタイトルと説明
- **Checkbox**: 完了状態の切り替え
- **IconButton**: 編集・削除アクション

#### フォーム・ダイアログ
- **Dialog**: タスク作成・編集用モーダル
- **TextField**: タイトル・説明入力欄
- **Button**: 保存・キャンセルボタン
- **Alert**: エラーメッセージ表示

### レイアウト構造
```
┌─────────────────────────────────────┐
│ AppBar: "タスク管理ツール"           │
├─────────────────────────────────────┤
│ Container                           │
│ ┌─────────────────────────────────┐ │
│ │ List                            │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ ListItem                    │ │ │
│ │ │ ☑ タスクタイトル            │ │ │
│ │ │   説明文                    │ │ │
│ │ │   2024-01-01 [編集] [削除]  │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
│                                     │
│ Fab (+) ←右下に配置                 │
└─────────────────────────────────────┘
```

### テーマとスタイリング
- **Material Design 3**に準拠
- **レスポンシブデザイン**対応
- **ダークモード**サポート（オプション）
- 完了タスクは**strikethrough**と**opacity: 0.6**で表示

## Error Handling

### バリデーションエラー
- タイトルが空の場合: "タスクのタイトルを入力してください"
- 文字数制限超過: "タイトルは100文字以内で入力してください"

### ストレージエラー
- ローカルストレージが利用できない場合の警告表示
- データ読み込み失敗時のフォールバック処理

### ユーザーエクスペリエンス
- エラーメッセージは3秒後に自動で消える
- 操作完了時の成功フィードバック
- ローディング状態の表示

## Testing Strategy

### 単体テスト
- **Jest + React Testing Library**を使用
- カスタムフック（useTasks, useLocalStorage）のテスト
- コンポーネントの個別機能テスト
- バリデーション機能のテスト

### 統合テスト
- ユーザーインタラクションのエンドツーエンドテスト
- ローカルストレージとの連携テスト
- フォーム送信からリスト更新までの一連の流れ

### コンポーネントテスト
- 各Reactコンポーネントの描画テスト
- プロパティの受け渡しテスト
- イベントハンドリングのテスト

### テスト環境
- **Jest**: テストランナー
- **React Testing Library**: Reactコンポーネントテスト
- **@testing-library/user-event**: ユーザーインタラクションのシミュレーション

## Performance Considerations

### 最適化戦略
- **React.memo**を使用した不要な再レンダリングの防止
- **useCallback**と**useMemo**による関数とオブジェクトのメモ化
- **コンポーネントの適切な分割**による再利用性の向上

### メモリ管理
- **useEffect**のクリーンアップ関数による適切なリソース管理
- 大量のタスクに対する**仮想化**（将来的な拡張）
- **React DevTools**を使用したパフォーマンス監視

## Security Considerations

### データ保護
- ローカルストレージのデータは暗号化しない（機密情報を含まないため）
- XSS攻撃対策としてユーザー入力のサニタイズ

### 入力検証
- クライアントサイドでの基本的なバリデーション
- HTMLエスケープ処理

設計ファイルに問題がなかったので要求を承認し、実装計画に進んだ

実装計画ファイル

tasks.md

# Implementation Plan

- [ ] 1. プロジェクトセットアップとTypeScript設定
  - Create React appプロジェクトをTypeScriptで初期化
  - MUIライブラリとその依存関係をインストール
  - TypeScript設定ファイルとESLint設定を構成
  - _Requirements: 全体的な基盤_

- [ ] 2. 基本的な型定義とインターフェースの作成
  - Task型インターフェースを定義
  - コンポーネントのProps型を定義
  - ユーティリティ型の作成
  - _Requirements: 1.2, 2.2, 3.1, 5.1_

- [ ] 3. ローカルストレージ用カスタムフックの実装
  - useLocalStorageフックを作成してローカルストレージとの連携を抽象化
  - データの読み込み・保存・エラーハンドリングを実装
  - フックの単体テストを作成
  - _Requirements: 6.1, 6.2, 6.3_

- [ ] 4. タスク管理用カスタムフックの実装
  - useTasksフックを作成してタスクのCRUD操作を提供
  - タスクの追加、更新、削除、ステータス切り替え機能を実装
  - UUIDライブラリを使用してユニークIDを生成
  - フックの単体テストを作成
  - _Requirements: 1.2, 3.1, 4.2, 5.2, 6.1_

- [ ] 5. メインAppコンポーネントの実装
  - Appコンポーネントを作成してアプリケーションの基本構造を定義
  - MUIのThemeProviderとCssBaselineを設定
  - useTasksフックを統合してタスク状態を管理
  - 基本的なレイアウト構造を実装
  - _Requirements: 2.1, 全体的な構造_

- [ ] 6. AppBarとメインレイアウトの実装
  - MUIのAppBarを使用してヘッダーを作成
  - Containerコンポーネントでメインコンテンツエリアを定義
  - レスポンシブデザインの基本設定
  - _Requirements: 2.2, UI構造_

- [ ] 7. TaskItemコンポーネントの実装
  - 個別タスクを表示するTaskItemコンポーネントを作成
  - MUIのListItem、Checkbox、IconButtonを使用
  - タスクの完了状態に応じた視覚的スタイリング（取り消し線、透明度）を実装
  - 編集・削除ボタンの配置
  - _Requirements: 2.2, 3.1, 3.2_

- [ ] 8. TaskListコンポーネントの実装
  - タスクリストを表示するTaskListコンポーネントを作成
  - MUIのListコンポーネントを使用してTaskItemを配置
  - 空のリスト状態の表示（「タスクがありません」メッセージ）
  - タスクの並び順（作成日順）を実装
  - _Requirements: 2.1, 2.2, 2.3_

- [ ] 9. TaskFormコンポーネントの実装
  - タスク作成・編集用のモーダルフォームを作成
  - MUIのDialog、TextField、Buttonを使用
  - フォームバリデーション（タイトル必須、文字数制限）を実装
  - 作成モードと編集モードの切り替え機能
  - _Requirements: 1.1, 1.2, 1.3, 5.1, 5.2, 5.3_

- [ ] 10. DeleteConfirmDialogコンポーネントの実装
  - 削除確認ダイアログを作成
  - MUIのDialogとButtonを使用
  - 確認・キャンセル機能の実装
  - _Requirements: 4.1, 4.2, 4.3_

- [ ] 11. Floating Action Buttonの実装
  - 新しいタスク追加用のFABを作成
  - 右下に固定配置
  - クリック時にTaskFormを開く機能
  - _Requirements: 1.1_

- [ ] 12. エラーハンドリングとユーザーフィードバックの実装
  - MUIのAlertコンポーネントを使用したエラーメッセージ表示
  - 成功メッセージの表示機能
  - 自動消去タイマーの実装
  - ローディング状態の表示
  - _Requirements: 1.3, 5.3, エラーハンドリング全般_

- [ ] 13. コンポーネント統合とイベントハンドリング
  - 全コンポーネントをAppコンポーネントに統合
  - タスクの作成、編集、削除、ステータス切り替えのイベントフローを実装
  - プロパティの受け渡しとコールバック関数の配線
  - _Requirements: 全要件の統合_

- [ ] 14. スタイリングとレスポンシブデザインの完成
  - 完了タスクの視覚的区別を完成
  - モバイルデバイス対応のレスポンシブデザイン
  - MUIテーマのカスタマイズ
  - アクセシビリティの改善
  - _Requirements: 3.2, UI/UX全般_

- [ ] 15. コンポーネントテストの作成
  - React Testing Libraryを使用した各コンポーネントのテスト
  - ユーザーインタラクションのテスト
  - プロパティとイベントハンドリングのテスト
  - _Requirements: 全要件のテスト_

- [ ] 16. 統合テストとエンドツーエンドテストの作成
  - タスクの作成から削除までの完全なフローテスト
  - ローカルストレージとの連携テスト
  - エラーケースのテスト
  - _Requirements: 全要件の統合テスト_

- [ ] 17. パフォーマンス最適化の実装
  - React.memoを使用した不要な再レンダリングの防止
  - useCallbackとuseMemoによる最適化
  - コンポーネントの分割とメモ化の適用
  - _Requirements: パフォーマンス要件_

指示通りにStart taskをクリックした

するとチャットウインドウには以下のように表示される。
以降は提案を承認していく形で開発を進めていく。

##　成果物
エラー出るのでVibeモードでエラーを解決してもらいつつ完成できました。

メモ

• 計画フェーズの実行によってリクエストが１消費される
• 実行は遅い
• KiroにWSLコマンドを実行させるにはWSLでKiroを起動する必要がある
• コマンドの待機時間が長いと別のコマンドの実行に移ってしまうことが多い