RxDBサンプルアプリ実行計画書
1. プロジェクト概要
1.1 目的
RxDBを使用したリアルタイム対応のデータベースアプリケーションを作成し、RxDBの基本的な機能を理解する。
1.2 アプリケーション仕様
- アプリ名: RxDB Todo Manager
- 機能: タスク管理アプリケーション
- 主要機能:
- タスクの作成、読み取り、更新、削除（CRUD操作）
- リアルタイムデータ同期
- データの永続化
- 検索・フィルタリング機能
2. 技術スタック
2.1 フロントエンド
2.2 データベース
2.3 開発環境
- パッケージマネージャー: npm
- ビルドツール: Vite
- 開発サーバー: Vite dev server
3. 実装計画
3.1 フェーズ1: 環境構築（30分）
プロジェクト初期化
bash npm create vite@latest rxdb-todo-app -- --template react-ts cd rxdb-todo-app npm install依存関係インストール
bash npm install rxdb rxjs dexie npm install --save-dev @types/nodeプロジェクト構造作成
src/
├── components/
│ ├── TodoList.tsx
│ ├── TodoItem.tsx
│ └── TodoForm.tsx
├── database/
│ ├── schema.ts
│ └── database.ts
├── types/
│ └── todo.ts
└── hooks/
└── useTodos.ts
3.2 フェーズ2: データベース設定（45分）
スキーマ定義
- Todo型の定義
- JSON Schemaの作成
- バリデーションルールの設定
データベース初期化
- RxDatabaseの作成
- コレクションの定義
- インデックスの設定
データベース操作関数
- CRUD操作の実装
- リアクティブクエリの設定
3.3 フェーズ3: コンポーネント開発（60分）
TodoForm コンポーネント
- 新規タスク作成フォーム
- バリデーション機能
- 送信処理
TodoItem コンポーネント
- 個別タスク表示
- 編集・削除機能
- 完了状態の切り替え
TodoList コンポーネント
- タスク一覧表示
- フィルタリング機能
- 検索機能
3.4 フェーズ4: 統合とテスト（30分）
4. データベーススキーマ
4.1 Todo スキーマ
interface TodoDocument { id: string; title: string; description?: string; completed: boolean; createdAt: Date; updatedAt: Date; dueDate?: Date; priority: 'low' | 'medium' | 'high'; }
4.2 JSON Schema
{ "version": 0, "primaryKey": "id", "type": "object", "properties": { "id": { "type": "string", "maxLength": 100 }, "title": { "type": "string", "maxLength": 200 }, "description": { "type": "string" }, "completed": { "type": "boolean" }, "createdAt": { "type": "string", "format": "date-time" }, "updatedAt": { "type": "string", "format": "date-time" }, "dueDate": { "type": "string", "format": "date-time" }, "priority": { "type": "string", "enum": ["low", "medium", "high"] } }, "required": ["id", "title", "completed", "createdAt", "updatedAt", "priority"] }
5. 主要機能の実装詳細
5.1 データベース初期化
import { createRxDatabase } from 'rxdb'; import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie'; const database = await createRxDatabase({ name: 'todo-app', storage: getRxStorageDexie() });
5.2 リアクティブクエリ
// 全タスクの取得 const todos$ = database.todos.find().sort({ createdAt: 1 }).$; // 完了済みタスクの取得 const completedTodos$ = database.todos.find({ completed: true }).$;
5.3 CRUD操作
// 作成 await database.todos.insert({ id: generateId(), title: 'New Task', completed: false, createdAt: new Date(), updatedAt: new Date(), priority: 'medium' }); // 更新 await todoDoc.update({ $set: { completed: true, updatedAt: new Date() } }); // 削除 await todoDoc.remove();
