Rorkでメモ・ノートアプリを作る完全チュートリアル — データ保存と検索機能の実装

メモ・ノートアプリを作ってください。
 
【画面構成】
1. メモ一覧画面（ホーム）: メモのタイトルと作成日時を一覧表示
2. メモ作成・編集画面: タイトルと本文を入力できるフォーム
3. 検索画面: キーワードでメモを検索
 
【機能要件】
- メモの作成、編集、削除（スワイプ削除対応）
- AsyncStorage によるローカル保存
- タイトル・本文のリアルタイム検索
- カテゴリタグの追加（仕事、プライベート、アイデア、買い物）
- カテゴリでのフィルタリング
- 作成日時の自動記録と並び替え
 
【デザイン】
- ミニマルで洗練されたUI
- ライト / ダークモード対応
- カテゴリごとに色分け表示

// types/Note.ts — メモのデータ型定義
export interface Note {
  id: string;          // ユニークID（UUID）
  title: string;       // メモのタイトル
  content: string;     // メモの本文
  category: Category;  // カテゴリ
  createdAt: string;   // 作成日時（ISO 8601形式）
  updatedAt: string;   // 更新日時
}
 
// カテゴリの定義
export type Category = 'work' | 'personal' | 'idea' | 'shopping';
 
// カテゴリの表示名と色
export const CATEGORIES: Record<Category, { label: string; color: string }> = {
  work: { label: '仕事', color: '#4A90D9' },
  personal: { label: 'プライベート', color: '#7ED321' },
  idea: { label: 'アイデア', color: '#F5A623' },
  shopping: { label: '買い物', color: '#D0021B' },
};

// utils/storage.ts — メモの保存・読み込み・削除
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Note } from '../types/Note';
 
const STORAGE_KEY = '@notes_app_data';
 
// 全メモを取得
export const loadNotes = async (): Promise<Note[]> => {
  try {
    const json = await AsyncStorage.getItem(STORAGE_KEY);
    return json ? JSON.parse(json) : [];
  } catch (error) {
    console.error('Failed to load notes:', error);
    return [];
  }
};
 
// メモを保存（全件上書き）
export const saveNotes = async (notes: Note[]): Promise<void> => {
  try {
    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
  } catch (error) {
    console.error('Failed to save notes:', error);
  }
};
 
// 期待する動作:
// - loadNotes() → 保存済みのメモ配列を返す（初回は空配列）
// - saveNotes([...]) → メモ配列を端末に永続保存

// screens/NoteListScreen.tsx — メモ一覧のコア部分
import React, { useState, useEffect, useCallback } from 'react';
import { FlatList, View, Text, TouchableOpacity, Alert } from 'react-native';
import { loadNotes, saveNotes } from '../utils/storage';
import { Note, CATEGORIES } from '../types/Note';
 
export default function NoteListScreen({ navigation }) {
  const [notes, setNotes] = useState<Note[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
  // アプリ起動時にメモを読み込み
  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', async () => {
      const saved = await loadNotes();
      // 更新日時の新しい順に並べる
      setNotes(saved.sort((a, b) =>
        new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
      ));
    });
    return unsubscribe;
  }, [navigation]);
 
  // メモの削除
  const deleteNote = useCallback(async (id: string) => {
    Alert.alert('削除確認', 'このメモを削除しますか？', [
      { text: 'キャンセル', style: 'cancel' },
      {
        text: '削除',
        style: 'destructive',
        onPress: async () => {
          const updated = notes.filter(n => n.id !== id);
          setNotes(updated);
          await saveNotes(updated);
        },
      },
    ]);
  }, [notes]);
 
  // カテゴリフィルター適用
  const filteredNotes = selectedCategory
    ? notes.filter(n => n.category === selectedCategory)
    : notes;
 
  return (
    <View style={{ flex: 1, padding: 16 }}>
      {/* カテゴリフィルターボタン */}
      <CategoryFilter
        selected={selectedCategory}
        onSelect={setSelectedCategory}
      />
      {/* メモ一覧 */}
      <FlatList
        data={filteredNotes}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <NoteCard
            note={item}
            onPress={() => navigation.navigate('Edit', { noteId: item.id })}
            onDelete={() => deleteNote(item.id)}
          />
        )}
        ListEmptyComponent={
          <Text style={{ textAlign: 'center', marginTop: 40, color: '#999' }}>
            メモがありません。右下の + ボタンで作成しましょう！
          </Text>
        }
      />
    </View>
  );
}

// hooks/useNoteSearch.ts — メモ検索カスタムフック
import { useMemo } from 'react';
import { Note } from '../types/Note';
 
export function useNoteSearch(notes: Note[], query: string): Note[] {
  return useMemo(() => {
    if (!query.trim()) return notes;
 
    const lowerQuery = query.toLowerCase();
    return notes.filter(note =>
      note.title.toLowerCase().includes(lowerQuery) ||
      note.content.toLowerCase().includes(lowerQuery)
    );
  }, [notes, query]);
 
  // 期待する動作:
  // useNoteSearch(allNotes, '') → 全メモを返す
  // useNoteSearch(allNotes, '会議') → タイトルまたは本文に「会議」を含むメモのみ返す
}

メモ一覧画面の上部に検索バーを追加してください。
タイトルと本文の両方を対象にリアルタイム検索できるようにしてください。
検索中はキーボードの上に「○件見つかりました」と表示してください。

// components/CategoryBadge.tsx — カテゴリバッジコンポーネント
import React from 'react';
import { View, Text } from 'react-native';
import { Category, CATEGORIES } from '../types/Note';
 
export function CategoryBadge({ category }: { category: Category }) {
  const { label, color } = CATEGORIES[category];
  return (
    <View style={{
      backgroundColor: color + '20', // 透明度20%の背景
      paddingHorizontal: 8,
      paddingVertical: 3,
      borderRadius: 12,
      alignSelf: 'flex-start',
    }}>
      <Text style={{ color, fontSize: 12, fontWeight: '600' }}>
        {label}
      </Text>
    </View>
  );
}