「Flutter API 通信で Qiita の記事を GET !」をAIエージェントでリプレイス！

はじめに

今回は会社のイベントで Advent Calendar に参加しての記事になります。

私が Qiita の記事を書こうとしたキッカケは、前回の「2024 Qiita Advent Calendar 」でした。
このキッカケがなければ、Qiita に投稿せず記事を拝見するだけだったと思います。

そして、早いものでQiitaの記事を書き始めてから1年が経過です。
当初、高い目標だと思っていた年間50の投稿ですが、気づけばクリア！この調子でドンドン記載していきたいです。

今回は、ちょうど1年前の Advent Calendar の内容として記載させて頂いた「Flutter API 通信で Qiita の記事を GET !」を AIエージェント を使ってリプレイスしていきたいと思います。

単純に AIエージェント で作ってしまうとパッとできてしまうため、Agentic IDE の Kiro を使って、"Spec-driven Development（仕様駆動開発）" で作成して行きます！

開発環境

• OS : Windows 11 Pro
• Kiro ： 0.6.18
• Android Studio : Koala Feature Drop | 2024.1.2

開発ゴール

去年は調べながらの開発だったが、"仕様駆動開発"でサクッとできるのか？

Kiro について

過去の記事として記載済み

• Kiro ダウンロード＆インストール
• Kiro 「Specs」もう一歩
• Kiro SPECSに直接関係無いファイルもいろいろある

Kiro 起動！

ファーストプロンプト

「FlutterでQiitaから記事を取得して表示するAndroidアプリ、iPhoneアプリのqiita_searchを作ります。」

※英語で requirements.md が作成されたので、「日本語に直して」って指示しました (笑)

要件定義

.kiro/specs/qiita-search/requirements.md

AIの案に下記を追加

# Functional Requirements

## Must Have
1. **キーワード検索**: ユーザーが任意の文字列を入力して検索できる。
2. **ローディング表示**: 通信中はインジケータを表示する。
3. **記事一覧表示**: 検索結果をリスト形式で表示する。
4. **記事詳細閲覧**: リストをタップすると記事の中身が見られる。
5. **エラーハンドリング**: 通信エラーや検索結果ゼロの場合、適切なメッセージを表示する。

## Nice to Have (Future)
- 無限スクロール（ページネーション）。
- 検索履歴の保存。

修正結果

詳細はGitHubを参照。抜粋して記載。

# 要件定義書

## はじめに

Qiita Searchは、Flutterで構築されたクロスプラットフォームのモバイルアプリケーションです。日本の人気技術情報共有プラットフォームであるQiitaから記事を検索・閲覧できます。AndroidとiOSの両デバイスで動作し、Qiitaコンテンツをブラウジングするためのネイティブなモバイル体験を提供します。

## 用語集

- **Qiita**: 開発者が記事を投稿する日本の技術情報共有プラットフォーム
- **アプリケーション**: Qiita Searchモバイルアプリケーション

・・・

## 要件

### 要件1

**ユーザーストーリー:** ユーザーとして、キーワードでQiita記事を検索したい。そうすることで、自分の興味に関連する技術コンテンツを見つけることができる。

#### 受け入れ基準

1. WHEN ユーザーが検索クエリを入力して送信する、THEN アプリケーションは検索クエリを含むリクエストをQiita APIに送信しなければならない
2. WHEN Qiita APIが検索結果を返す、THEN アプリケーションはユーザーに記事一覧を表示しなければならない
3. WHEN ユーザーが空の検索クエリを送信する、THEN アプリケーションは検索を防止し、検証メッセージを表示しなければならない
4. WHEN 検索リクエストが進行中である、THEN アプリケーションはユーザーにローディングインジケーターを表示しなければならない
5. WHEN Qiita APIがエラーを返す、THEN アプリケーションは適切なエラーメッセージをユーザーに表示しなければならない

### 要件2

**ユーザーストーリー:** ユーザーとして、記事検索結果の一覧を表示したい。そうすることで、複数の記事を閲覧し、読みたい記事を選択できる。

・・・

### 要件6

**ユーザーストーリー:** ユーザーとして、アプリがクリーンで直感的なインターフェースを持ってほしい。そうすることで、簡単にナビゲートし、機能を使用できる。

・・・

設計

.kiro/specs/qiita-search/design.md

AIの案に下記を追加

## Theme
- **Primary Color**: Qiita Green (`#55C500`)
- **Background**: White / Light Gray

## Screens
### 1. Search Screen (Home)
- **App Bar**: タイトル "Qiita Search"
- **Search Bar**: 画面上部。テキスト入力フィールドと検索アイコン。
- **List View**:
  - 記事ごとのカード表示。
  - [Avatar Image] ユーザーアイコン
  - [Text] 記事タイトル (太字)
  - [Text] @ユーザーID
  - [Text] LGTM数 (アイコン付き)

### 2. Detail Screen
- **Web View**: 選択された記事のURLを表示。
- **Navigation**: 戻るボタン。

修正結果

詳細はGitHubを参照。抜粋して記載。

# 設計ドキュメント

## 概要

Qiita Searchは、FlutterフレームワークとDartプログラミング言語を使用して構築されるクロスプラットフォームモバイルアプリケーションです。このアプリケーションは、Qiita APIを利用して記事を検索・取得し、ユーザーフレンドリーなインターフェースで表示します。

アーキテクチャは、関心の分離を促進し、テスト可能性と保守性を向上させるために、レイヤー化されたアプローチに従います。

## アーキテクチャ

アプリケーションは以下のレイヤーで構成されます：

### プレゼンテーション層
- UI画面とウィジェット
- 状態管理（Provider/Riverpodを使用）
- ユーザー入力の処理

### ドメイン層
- ビジネスロジック
- エンティティモデル
- リポジトリインターフェース

### データ層
- Qiita API通信
- データモデル（JSON シリアライゼーション）
- リポジトリ実装

### アーキテクチャ図

・・・

## デザインテーマ

・・・

## 画面設計

・・・

## コンポーネントとインターフェース

・・・

## データモデル

・・・

## 正確性プロパティ

・・・

## エラーハンドリング

・・・

## テスト戦略

・・・

## 技術スタック

・・・

## セキュリティ考慮事項

・・・

## パフォーマンス考慮事項

・・・

## 今後の拡張可能性

・・・

タスク

.kiro/specs/qiita-search/tasks.md

AIの案に下記を追加

# Implementation Tasks

- [ ] **Project Setup**: `flutter create` および依存パッケージの追加 (http, riverpod等)。
- [ ] **Model Implementation**: `Article` クラスとJSONパース処理の実装。
- [ ] **Repository Implementation**: Qiita API (`GET /api/v2/items`) を叩くロジックの実装。
- [ ] **State Management**: 検索状態、結果リスト、ローディング状態を管理するProviderの作成。
- [ ] **UI - Search Screen**: 検索バーとリストビューの作成。
- [ ] **UI - Detail Screen**: WebViewを使った記事表示画面の作成。
- [ ] **Integration**: UIとロジックの結合。
- [ ] **Testing**: 単体テストとWidgetテストの記述。

修正結果

詳細はGitHubを参照。抜粋して記載。

# 実装計画

- [ ] 1. プロジェクトセットアップ
  - `flutter create qiita_search` でプロジェクトを作成
  - 必要な依存パッケージを追加（http, provider, webview_flutter, json_annotation, json_serializable）
  - ディレクトリ構造を設定（lib/models, lib/screens, lib/providers, lib/repositories, lib/services）
  - _要件: 4.1, 4.2_

- [ ] 2. モデルの実装
- [ ] 2.1 Articleクラスの実装
  - Article、Userエンティティクラスを作成
  - 必要なプロパティ（id, title, url, user, createdAt, likesCount, tags）を定義
  - _要件: 2.1, 3.1_

・・・

- [ ] 3. リポジトリの実装

・・・

- [ ] 4. 状態管理の実装

・・・

- [ ] 5. UI - 検索画面の作成

・・・

- [ ] 6. UI - 記事詳細画面の作成

・・・

- [ ] 7. UIとロジックの統合

・・・

- [ ] 8. チェックポイント - すべてのテストが通ることを確認
・・・

- [ ]* 9. テストの記述

・・・

- [ ] 10. 最終チェックポイント - すべてのテストが通ることを確認
  - すべてのテストが通ることを確認し、問題があればユーザーに質問する

タスク実行！

タスク実行前

タスク実行途中経過１

タスク実行途中経過２

AIが Flutter のパスを探してくてる！素晴らしい！！！

タスク実行途中経過３

タスク実行途中経過４

1タスク実行の完了報告は英語で出力されますが、「日本語にして！」と指示すれば、日本語で確認できます

タスク実行完了！

Android Studio で起動！

エラー

• xxx/android/app/src/main/res/ の配下に mipmap-* ディレクトリが無い！
  • 他の Flutter プロジェクトからコピー
• Android Studio で開くプロジェクトの階層を間違えました。。。
  • 正：xxx\flutter_qiita_search_kiro\qiita_search
  • 誤：xxx\flutter_qiita_search_kiro

起動！

起動しました！
若干UIが違うが許容範囲内です。
思ったより時間が掛かり、Tasksの実行を開始してから、2時間以上掛かってしまいました。

去年の内容と比較

アプリ動作比較

去年のアプリ	今回のアプリ

コード比較

去年のアプリ	今回のアプリ

コードを見てみて一言

• ソース量の多くなった。ただ、よく見ると「拡張性」や「テスト」がちゃんと考慮されてます
• 状態管理に riverpod を指定。問題無く導入されて前回よりアーキテクチャがしっかりしてます
• Qiita token を利用せずに単純にURLで取得してます

※コードの詳細は、GitHubを参加

おわりに

「AIなら一瞬で終わるかな？」と思っていましたが、結果的にはタスク完了まで2時間以上。正直、自分で書いたほうが早い部分もあったかもしれません（笑）。

しかし、出来上がった成果物の中身（コード構造）を見て驚きました。昨年の自分が書いたコードはいわゆる「動けばOK」な作りでしたが、今回 Kiro が導き出したのは、テストや拡張性まで考慮されてました。

「仕様駆動開発（Spec-driven Development）」 という言葉通り、要件定義からタスク出し、実装までをAIが自律的に進めていく様子は、見ていて本当にワクワクしました。途中でAIがFlutterのパスを探し当てたり、エラーを自己解決しようとする姿には、時代の変わり目を感じました。

1年間のQiita投稿継続という節目に、AI開発を体験できて良かったです。 これからも新しい技術に触れながら、年間50記事ペース（？）でアウトプットを続けていきたいと思います。

皆さんもぜひ、年末年始に AI エージェントとのペアプログラミングを楽しんでみてください！

---

参考（感謝）

• GitHub：flutter_qiita_search（去年のコード）
• GitHub：flutter_qiita_search_kiro（今回のコード）
• Flutter サンプルを動かして「おぉ」ってなりました