この記事では、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 要件定義書の作成まず、アプリの要件を明確にするため、要件定義書を作成します。 ```markdown # 要件定義書 ## 概要「Task」は、日常のタスクを効率的に管理するための iOS アプリです。 React Native + Expo + Claude API を活用し、シンプルで直感的なタスク管理機能を提供します。 ## 要件 ### 要件 1: タスクの基本管理 **ユーザーストーリー:** ユーザーとして、新しいタスクを追加・編集・削除できるようにしたい。 #### 受入基準 1. WHEN ユーザーが「新規タスク」ボタンをタップ THEN システムは新しいタスク作成画面を表示する 2. WHEN ユーザーがタスクタイトルを入力して保存 THEN システムはタスクをリストに追加する ... ### 1.2 設計書の作成次に、技術的なアーキテクチャを定義する設計書を作成します。 ``` # 設計書 ## アーキテクチャ ### アプリケーション構造 ```bash src/ ├── components/ # 再利用可能な UI コンポーネント ├── screens/ # 画面コンポーネント ├── services/ # 外部サービス連携 ├── context/ # 状態管理 ├── types/ # TypeScript 型定義 ├── utils/ # ユーティリティ関数 └── navigation/ # ナビゲーション設定 ``` ### 主要インターフェース ```typescript interface Task { id: string; title: string; description?: string; dueDate?: Date; completed: boolean; priority?: "high" | "medium" | "low"; createdAt: Date; updatedAt: Date; } ``` ## ステップ 2: プロジェクトの初期化 ### 2.1 Expo プロジェクトの作成新しいディレクトリを作成し、Expo プロジェクトを初期化します： ```bash # 一時的なプロジェクトを作成 npx create-expo-app@latest zanken-temp --template blank-typescript # ファイルを現在のディレクトリにコピー cp -r zanken-temp/* . cp zanken-temp/.* . 2>/dev/null || true # 一時ディレクトリを削除 rm -rf zanken-temp ``` ### 2.2 package.json の設定プロジェクト名と必要な依存関係を追加します： ```json { "name": "zanken", "version": "1.0.0", "main": "index.ts", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "~54.0.20", "expo-status-bar": "~3.0.8", "react": "19.1.0", "react-native": "0.81.5", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "react-native-screens": "~4.2.0", "react-native-safe-area-context": "4.14.0", "@react-native-async-storage/async-storage": "2.1.0", "date-fns": "^3.6.0", "axios": "^1.6.2", "@react-native-community/datetimepicker": "8.2.0" }, "devDependencies": { "@types/react": "~19.1.0", "typescript": "~5.9.2" } } ``` ### 2.3 依存関係のインストール ```bash npm install ``` ## ステップ 3: プロジェクト構造の構築 ### 3.1 型定義の作成 TypeScript の型安全性を活用するため、型定義ファイルを作成します： **src/types/Task.ts** ```typescript export interface Task { id: string; title: string; description?: string; dueDate?: Date; completed: boolean; priority?: "high" | "medium" | "low"; createdAt: Date; updatedAt: Date; } export interface TaskFilter { type: "all" | "active" | "completed"; } ``` **src/types/ApiResponse.ts** ```typescript import { Task } from "./Task"; export interface ClaudeResponse { success: boolean; data: { organizedTasks?: Task[]; suggestions?: string[]; structuredTask?: Partial; }; error?: string; } export interface AppSettings { hideCompletedTasks: boolean; darkMode: boolean; claudeApiKey?: string; notificationsEnabled: boolean; } ``` ### 3.2 ユーティリティ関数の作成 **src/utils/constants.ts** ```typescript // AsyncStorage キー構造 export const STORAGE_KEYS = { TASKS: "@zanken_tasks", SETTINGS: "@zanken_settings", CLAUDE_CACHE: "@zanken_claude_cache", } as const; // UI 定数 export const COLORS = { primary: "#007AFF", secondary: "#5856D6", success: "#34C759", warning: "#FF9500", danger: "#FF3B30", light: "#F2F2F7", dark: "#1C1C1E", } as const; ``` **src/utils/dateUtils.ts** ```typescript import { format, isToday, isTomorrow, isPast, parseISO } from "date-fns"; import { ja } from "date-fns/locale"; export const formatDate = (date: Date | string): string => { const dateObj = typeof date === "string" ? parseISO(date) : date; return format(dateObj, "yyyy/MM/dd", { locale: ja }); }; export const getDateStatus = ( date: Date | string ): "overdue" | "today" | "tomorrow" | "future" => { const dateObj = typeof date === "string" ? parseISO(date) : date; if (isPast(dateObj) && !isToday(dateObj)) return "overdue"; if (isToday(dateObj)) return "today"; if (isTomorrow(dateObj)) return "tomorrow"; return "future"; }; ``` **src/utils/validation.ts** ```typescript import { Task } from "../types/Task"; export interface ValidationResult { isValid: boolean; errors: string[]; } export const validateTask = (task: Partial): ValidationResult => { const errors: string[] = []; if (!task.title || task.title.trim().length === 0) { errors.push("タスクのタイトルは必須です"); } else if (task.title.trim().length > 100) { errors.push("タスクのタイトルは100文字以内で入力してください"); } if (task.description && task.description.length > 500) { errors.push("説明は500文字以内で入力してください"); } return { isValid: errors.length === 0, errors, }; }; ``` ## ステップ 4: ナビゲーション構造の構築 ### 4.1 ナビゲーターの作成 **src/navigation/AppNavigator.tsx** ```typescript import React from "react"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import TaskListScreen from "../screens/TaskListScreen"; import AddTaskScreen from "../screens/AddTaskScreen"; import TaskDetailScreen from "../screens/TaskDetailScreen"; import SettingsScreen from "../screens/SettingsScreen"; export type RootStackParamList = { TaskList: undefined; AddTask: undefined; TaskDetail: { taskId: string }; Settings: undefined; }; const Stack = createStackNavigator(); const AppNavigator: React.FC = () => { return ( ); }; export default AppNavigator; ``` ### 4.2 画面コンポーネントの作成各画面のプレースホルダーを作成します： **src/screens/TaskListScreen.tsx** ```typescript import React from "react"; import { View, Text, StyleSheet } from "react-native"; const TaskListScreen: React.FC = () => { return ( タスクリスト画面実装予定 ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#F2F2F7", }, text: { fontSize: 24, fontWeight: "bold", color: "#000", marginBottom: 8, }, subText: { fontSize: 16, color: "#8E8E93", }, }); export default TaskListScreen; ``` 同様に、`AddTaskScreen.tsx`、`TaskDetailScreen.tsx`、`SettingsScreen.tsx`も作成します。 ### 4.3 App.tsx の更新メインの App.tsx ファイルを更新して、新しいナビゲーション構造を使用します： ```typescript import React from "react"; import { StatusBar } from "expo-status-bar"; import AppNavigator from "./src/navigation/AppNavigator"; export default function App() { return ( <> ); } ``` ## ステップ 5: 動作確認 ### 5.1 Expo CLI のインストール ```bash npm install @expo/cli ``` ### 5.2 開発サーバーの起動 ```bash npm run web ``` ### 5.3 ブラウザでの確認ブラウザが自動的に開き、以下のような画面が表示されます： - ヘッダー: 青色の背景に「Task」というタイトル - メイン画面: 「タスクリスト画面」と「実装予定」のプレースホルダーテキスト ## 完成したプロジェクト構造 ```bash zanken/ ├── src/ │ ├── navigation/ │ │ └── AppNavigator.tsx │ ├── screens/ │ │ ├── TaskListScreen.tsx │ │ ├── AddTaskScreen.tsx │ │ ├── TaskDetailScreen.tsx │ │ └── SettingsScreen.tsx │ ├── types/ │ │ ├── Task.ts │ │ └── ApiResponse.ts │ └── utils/ │ ├── constants.ts │ ├── dateUtils.ts │ └── validation.ts ├── App.tsx ├── package.json ├── tsconfig.json └── README.md ``` ## まとめ第 1 回では、以下を完了しました： ✅ **要件定義と設計**: アプリの機能要件と技術アーキテクチャの定義 ✅ **プロジェクトセットアップ**: Expo + TypeScript プロジェクトの初期化 ✅ **型定義**: TypeScript による型安全な開発環境の構築 ✅ **ユーティリティ関数**: 日付処理、バリデーション、定数の実装 ✅ **ナビゲーション構造**: React Navigation v6 による画面遷移の実装 ✅ **動作確認**: ブラウザでの基本動作確認 ## 次回予告第 2 回では、実際のタスク管理機能を実装していきます： - ローカルストレージサービスの実装 - タスクの状態管理（Context API + useReducer） - タスクの CRUD 操作 - UI コンポーネントの作成お楽しみに！ ## 参考リンク - [Expo 公式ドキュメント](https://docs.expo.dev/) - [React Navigation 公式ドキュメント](https://reactnavigation.org/) - [TypeScript 公式ドキュメント](https://www.typescriptlang.org/) - [date-fns 公式ドキュメント](https://date-fns.org/)

Expo53 -> 54 Update

Kiro + React Native + Expo で iOS アプリを４０分で作る

Kiro + React Native + Expo で iOSアプリを作る

lucide-react-native を使う時は react-native-svg もインストールする