この記事では、Kiro + React Native + Expo + Claude API を使用して、AI 機能付きのタスク管理アプリ「Task」を開発する過程を紹介します。第 1 回では、プロジェクトのセットアップから基本的なナビゲーション構造の構築までを解説します。
作成するアプリの概要
「Task」は以下の機能を持つタスク管理アプリです：
- ✅ タスクの作成・編集・削除
- ✅ タスクの完了管理
- ✅ 期限設定と視覚的な期限表示
- 🤖 Claude AI によるタスク整理・優先度付け
- 🤖 自然言語でのタスク入力
- 💾 ローカルストレージでのデータ永続化
- 🌙 ダークモード対応
- 📱 レスポンシブデザイン
技術スタック
- フロントエンド: React Native + Expo
- 言語: TypeScript
- 状態管理: React Context API + useReducer
- ローカルストレージ: AsyncStorage
- AI 統合: Claude API (Anthropic)
- ナビゲーション: React Navigation v6
- 日付処理: date-fns
- HTTP クライアント: axios
前提条件
開発を始める前に、以下がインストールされていることを確認してください：
- Node.js (v20.11.0 以上)
- npm または yarn
- 任意のコードエディタ（VS Code 推奨）
ステップ 1: 要件定義と設計
1.1 要件定義書の作成
まず、アプリの要件を明確にするため、要件定義書を作成します。
設計書
アーキテクチャ
アプリケーション構造
主要インターフェース
ステップ 2: プロジェクトの初期化
2.1 Expo プロジェクトの作成
新しいディレクトリを作成し、Expo プロジェクトを初期化します：
2.2 package.json の設定
プロジェクト名と必要な依存関係を追加します：
2.3 依存関係のインストール
ステップ 3: プロジェクト構造の構築
3.1 型定義の作成
TypeScript の型安全性を活用するため、型定義ファイルを作成します：
src/types/Task.ts
src/types/ApiResponse.ts
3.2 ユーティリティ関数の作成
src/utils/constants.ts
src/utils/dateUtils.ts
src/utils/validation.ts
ステップ 4: ナビゲーション構造の構築
4.1 ナビゲーターの作成
src/navigation/AppNavigator.tsx
4.2 画面コンポーネントの作成
各画面のプレースホルダーを作成します：
src/screens/TaskListScreen.tsx
同様に、AddTaskScreen.tsx、TaskDetailScreen.tsx、SettingsScreen.tsxも作成します。
4.3 App.tsx の更新
メインの App.tsx ファイルを更新して、新しいナビゲーション構造を使用します：
ステップ 5: 動作確認
5.1 Expo CLI のインストール
5.2 開発サーバーの起動
5.3 ブラウザでの確認
ブラウザが自動的に開き、以下のような画面が表示されます：
- ヘッダー: 青色の背景に「Task」というタイトル
- メイン画面: 「タスクリスト画面」と「実装予定」のプレースホルダーテキスト
完成したプロジェクト構造
まとめ
第 1 回では、以下を完了しました：
✅ 要件定義と設計: アプリの機能要件と技術アーキテクチャの定義
✅ プロジェクトセットアップ: Expo + TypeScript プロジェクトの初期化
✅ 型定義: TypeScript による型安全な開発環境の構築
✅ ユーティリティ関数: 日付処理、バリデーション、定数の実装
✅ ナビゲーション構造: React Navigation v6 による画面遷移の実装
✅ 動作確認: ブラウザでの基本動作確認
次回予告
第 2 回では、実際のタスク管理機能を実装していきます：
- ローカルストレージサービスの実装
- タスクの状態管理（Context API + useReducer）
- タスクの CRUD 操作
- UI コンポーネントの作成
お楽しみに！
