image_generation_plan.base_ts

ID	File Name	Proposed Image Filename	Relative Link Path	Prompt	Insertion Point
147	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_01_outline_map.png	./picture/firebase_firestore_base_ts_index_01_outline_map.png	Theme: Course Structure Map Labels to Render: - Unit A: "Basics" - Unit B: "CRUD" - Unit C: "Realtime" - Unit D: "Advanced/AI" Visual Details: 1. Core Concept: The journey through the 4 units. 2. Metaphor: A treasure map with 4 islands or milestones. 3. Action: Path connecting them. 4. Layout: Map view.	## 全体アウトライン（ユニット構成）🧭
148	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_02_course_flow.png	./picture/firebase_firestore_base_ts_index_02_course_flow.png	Theme: Learning Loop Labels to Render: - Step 1: "Read" - Step 2: "Do (Code)" - Step 3: "Quest" - Step 4: "Check" Visual Details: 1. Core Concept: The 4-step learning process for each chapter. 2. Metaphor: A circular cycle or loop. 3. Action: Rotating/Flowing. 4. Layout: Cycle diagram.	## 20章の教材アウトライン（各章：読む→手を動かす→ミニ課題→チェック）📚✨
149	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_03_concept.png	./picture/firebase_firestore_base_ts_index_03_concept.png	Theme: Firestore Concept Labels to Render: - Container: "Collection (Box)" - Item: "Document (Note)" - Feature: "Realtime" Visual Details: 1. Core Concept: Document-based structure. 2. Metaphor: A physical box containing sticky notes. One note is glowing (realtime update). 3. Action: Glowing/Syncing. 4. Layout: 3D or Isometric view of box.	### 第01章：Firestoreって何者？（まず怖さを消す）😌🗃️
150	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_04_crud_cycle.png	./picture/firebase_firestore_base_ts_index_04_crud_cycle.png	Theme: CRUD Cycle Labels to Render: - Create: "Add" - Read: "Get" - Update: "Set/Update" - Delete: "Remove" Visual Details: 1. Core Concept: The 4 basic database operations. 2. Metaphor: A cycle or 4 quadrants. 3. Action: Interaction with a document icon. 4. Layout: Cycle.	### 第05章：Create① 追加する（addDoc / setDoc の気持ち）➕📄
151	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_05_realtime.png	./picture/firebase_firestore_base_ts_index_05_realtime.png	Theme: Realtime Sync Labels to Render: - Cloud: "Firestore" - Device 1: "PC (Update)" - Device 2: "Mobile (Sync)" Visual Details: 1. Core Concept: Instant data propagation. 2. Metaphor: Lightning or wifi signals connecting the cloud to devices. 3. Action: Syncing. 4. Layout: Network diagram.	### 第12章：リアルタイム購読①（onSnapshotで“勝手に更新”）⚡👀
152	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_06_paging.png	./picture/firebase_firestore_base_ts_index_06_paging.png	Theme: Cursor Pagination Labels to Render: - Page 1: "1-10" - Cursor: "Bookmark" - Page 2: "11-20" Visual Details: 1. Core Concept: Using a cursor to fetch the next set. 2. Metaphor: Reading a scroll or book and placing a bookmark to know where to start next. 3. Action: Marking position. 4. Layout: Sequence.	### 第17章：ページング入門①（カーソルって何？）📜🧭
153	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_07_ai_app.png	./picture/firebase_firestore_base_ts_index_07_ai_app.png	Theme: AI Enhanced ToDo Labels to Render: - Note: "Messy Text" - AI: "Format & Tag" - App: "Clean ToDo" Visual Details: 1. Core Concept: AI improving the app data. 2. Metaphor: A robot arm organizing messy papers into a neat file. 3. Action: Organizing. 4. Layout: Transformation flow.	### 第20章：総合ミニ課題（ToDo/メモ完成）＋AIで“実用っぽさ”を足す🎯🤖✨
154	firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_01_concept.png	./picture/firebase_firestore_base_ts_study_001_01_concept.png	Theme: Firestore Core Concept Labels to Render: - Feature: "Document DB" - Feature: "Auto Sync" - Feature: "Offline Ready" Visual Details: 1. Core Concept: The key features of Firestore. 2. Metaphor: A glowing document icon with a sync symbol and a signal strength icon. 3. Action: Syncing. 4. Layout: Icon cluster.	## 1) Firestoreを一言でいうと？🗣️🗃️
155	firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_02_box_note.png	./picture/firebase_firestore_base_ts_study_001_02_box_note.png	Theme: Box and Note Metaphor Labels to Render: - Container: "Collection (Box)" - Item: "Document (Note)" - Content: "Fields" Visual Details: 1. Core Concept: The data structure hierarchy. 2. Metaphor: A cardboard box labeled 'todos' with sticky notes inside. One note shows text fields. 3. Action: Organizing. 4. Layout: 3D composition.	## 2) “箱とノート”の超ざっくり図解📦📝
156	firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_03_realtime.png	./picture/firebase_firestore_base_ts_study_001_03_realtime.png	Theme: Realtime Snapshot Labels to Render: - Action: "Add (Tab A)" - Result: "Appear (Tab B)" - Method: "onSnapshot" Visual Details: 1. Core Concept: Instant updates across clients. 2. Metaphor: Two screens. An item dropped in one screen instantly pops up in the other. 3. Action: Teleportation/Sync. 4. Layout: Split screen.	## 3) Firestoreの最大の気持ちよさ：リアルタイム⚡👀
157	firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_04_strengths.png	./picture/firebase_firestore_base_ts_study_001_04_strengths.png	Theme: Strengths and Weaknesses Labels to Render: - Good: "Realtime UI" - Good: "Flexible Data" - Bad: "Complex JOINs" Visual Details: 1. Core Concept: What Firestore is good and bad at. 2. Metaphor: A superhero (Firestore) lifting a UI easily but struggling with a tangled knot of ropes (JOINs). 3. Action: Lifting vs Struggling. 4. Layout: Comparison.	## 4) じゃあ、Firestoreは何が得意？何が苦手？🎯🧩
158	firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_05_cost.png	./picture/firebase_firestore_base_ts_study_001_05_cost.png	Theme: Cost Model Labels to Render: - Operation: "Read / Write" - Cost: "Money" - Realtime: "Count as Read" Visual Details: 1. Core Concept: Operations incur costs. 2. Metaphor: A coin slot or turnstile. Every time data passes, a coin drops. 3. Action: Payment. 4. Layout: Concept illustration.	## 5) “怖さ”の正体＝だいたい課金と設計😇💸
159	firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_06_goal.png	./picture/firebase_firestore_base_ts_study_001_06_goal.png	Theme: App Goal Wireframe Labels to Render: - Screen 1: "List" - Screen 2: "Add" - Screen 3: "Edit" Visual Details: 1. Core Concept: The simple ToDo app to be built. 2. Metaphor: Three phone screens showing wireframes of the app functions. 3. Action: User flow. 4. Layout: Three screens.	## 6) この20章で作る完成イメージ（今日見たいゴール）🎯✨
160	firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_07_ai_assist.png	./picture/firebase_firestore_base_ts_study_001_07_ai_assist.png	Theme: AI Assistance Labels to Render: - Helper 1: "Firebase AI Logic" - Helper 2: "Antigravity" - Helper 3: "Gemini CLI" Visual Details: 1. Core Concept: Tools helping the developer. 2. Metaphor: A developer surrounded by three specialized robot assistants. 3. Action: Assisting. 4. Layout: Group shot.	## 7) AIで“理解と作業”を加速するコツ🤖💨
161	firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_01_path.png	./picture/firebase_firestore_base_ts_study_002_01_path.png	Theme: Firestore Path Address Labels to Render: - Collection: "todos" - Document: "todo_123" - Path: "todos/todo_123" Visual Details: 1. Core Concept: Accessing data via a path. 2. Metaphor: A street sign pointing to 'todos' and a house number 'todo_123'. 3. Action: Navigation. 4. Layout: Signpost.	## まずは超イメージ：Firestoreは「住所でたどる」📮🏠
162	firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_02_terms.png	./picture/firebase_firestore_base_ts_study_002_02_terms.png	Theme: Terminology Visualization Labels to Render: - Container: "Collection" - Item: "Document" - Data: "Field" Visual Details: 1. Core Concept: The hierarchy of Collection, Document, Field. 2. Metaphor: A filing cabinet (Collection), a folder (Document), and a paper inside (Field). 3. Action: Opening. 4. Layout: Hierarchy.	## ① 用語を“手触り”で覚える🧠✨
163	firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_03_data_shape.png	./picture/firebase_firestore_base_ts_study_002_03_data_shape.png	Theme: ToDo Data Shape Labels to Render: - Text: "Title" - Check: "Done" - Label: "Tags" Visual Details: 1. Core Concept: The structure of a single ToDo item. 2. Metaphor: A blueprint or schema card showing the fields. 3. Action: Planning. 4. Layout: Card view.	## ② ToDoの「データの形」を決めよう🛠️🧩
164	firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_04_type.png	./picture/firebase_firestore_base_ts_study_002_04_type.png	Theme: TypeScript Type Definition Labels to Render: - Code: "type TodoDoc" - Prop 1: "title: string" - Prop 2: "done: boolean" Visual Details: 1. Core Concept: Defining the data structure in code. 2. Metaphor: A cookie cutter or mold labeled 'TodoDoc' shaping the data. 3. Action: Shaping. 4. Layout: Code concept.	## ③ TypeScriptで「型」を作って頭を整理しよう🧠⚛️
165	firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_05_json.png	./picture/firebase_firestore_base_ts_study_002_05_json.png	Theme: Seed Data JSON Labels to Render: - ID: "todo_001" - Data: "{ title: 'Buy Milk' }" - Stack: "5 Items" Visual Details: 1. Core Concept: Preparing multiple data items. 2. Metaphor: A stack of 5 index cards, each representing a JSON object. 3. Action: Stacking. 4. Layout: Stack view.	## ④ 「ToDoを5件」JSONっぽく書いてみよう🧾✍️
166	firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_06_ai_gen.png	./picture/firebase_firestore_base_ts_study_002_06_ai_gen.png	Theme: AI Data Generation Labels to Render: - Input: "Prompt" - AI: "Generator" - Output: "JSON Data" Visual Details: 1. Core Concept: Using AI to generate sample data. 2. Metaphor: A futuristic machine taking a text slip (Prompt) and printing out data cards (JSON). 3. Action: Manufacturing. 4. Layout: Process flow.	## ⑤ AIで「フィールド案」と「サンプルデータ」を秒速で作る🤖⚡
167	firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_01_enable.png	./picture/firebase_firestore_base_ts_study_003_01_enable.png	Theme: Enable Firestore UI Labels to Render: - Menu: "Build" - Item: "Firestore Database" - Button: "Create database" Visual Details: 1. Core Concept: Starting the database creation process. 2. Metaphor: Simplified UI mockup of the Firebase Console. 3. Action: Clicking the button. 4. Layout: UI Focus.	## 1) Firestore を有効化する（DBを作る）🛠️🗃️
168	firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_02_location.png	./picture/firebase_firestore_base_ts_study_003_02_location.png	Theme: Region Selection Map Labels to Render: - Target: "asia-northeast1 (Tokyo)" - Value: "Fast Speed" - Warning: "Cannot Change" Visual Details: 1. Core Concept: Choosing the server location close to users. 2. Metaphor: A map with a pin on Tokyo radiating speed lines. 3. Action: Selection. 4. Layout: Map view.	## B. “ロケーション（リージョン）”の選択（ここは慎重に！）🗾
169	firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_03_add_data.png	./picture/firebase_firestore_base_ts_study_003_03_add_data.png	Theme: Add Data UI Labels to Render: - Collection: "todos" - ID: "Auto-ID" - Field: "title: 'Buy Milk'" Visual Details: 1. Core Concept: Manually adding a document. 2. Metaphor: A form being filled out in the console. 3. Action: Typing. 4. Layout: Modal UI.	## 2) Consoleで todos を作って、ToDoを1件入れる➕📄
170	firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_04_add_3.png	./picture/firebase_firestore_base_ts_study_003_04_add_3.png	Theme: Three ToDo Items Labels to Render: - Item 1: "Laundry" - Item 2: "Bills" - Item 3: "Walk" Visual Details: 1. Core Concept: Populating the database with test data. 2. Metaphor: Three cards or rows appearing in the list. 3. Action: Populating. 4. Layout: List view.	## 3) ミニ課題：done:false を3件入れてみよう🧩✅✅✅
171	firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_05_nav.png	./picture/firebase_firestore_base_ts_study_003_05_nav.png	Theme: Console 3-Pane View Labels to Render: - Col 1: "Collection (todos)" - Col 2: "Document (ID)" - Col 3: "Fields (Data)" Visual Details: 1. Core Concept: Understanding the 3-column layout. 2. Metaphor: A tri-fold brochure or 3 distinct columns. 3. Action: Navigation. 4. Layout: 3-column layout.	## 4) チェック：Consoleで迷子にならないか確認🧭👀
172	firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_06_rules.png	./picture/firebase_firestore_base_ts_study_003_06_rules.png	Theme: Rules Tab Glance Labels to Render: - Tab: "Rules" - Icon: "Lock" - Code: "allow read, write" Visual Details: 1. Core Concept: Security rules location. 2. Metaphor: Peeking through a door labeled 'Rules' with a lock on it. 3. Action: Peeking. 4. Layout: Tab focus.	## 5) ちょい怖ポイント：Rules（ルール）を“眺めるだけ”🔒👀
173	firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_07_ai_agent.png	./picture/firebase_firestore_base_ts_study_003_07_ai_agent.png	Theme: AI Console Helper Labels to Render: - Human: "Where is Tokyo?" - AI: "Select asia-northeast1" - Tool: "Antigravity" Visual Details: 1. Core Concept: AI guiding the console setup. 2. Metaphor: An AI avatar pointing to the correct dropdown menu on a screen. 3. Action: Guiding. 4. Layout: Over-the-shoulder view.	## 6) AIで時短コーナー🤖💨（Antigravity / Gemini CLI を“下調べ係”にする）
174	firebase_firestore_base_ts_study_004.md	firebase_firestore_base_ts_study_004_01_architecture.png	./picture/firebase_firestore_base_ts_study_004_01_architecture.png	Theme: React to Firestore Architecture\n\nLabels to Render:\n- React App: "Reactアプリ"\n- Firebase SDK: "Firebase SDK"\n- Firestore: "Firestore"\n\nVisual Details:\n1. Core Concept: Connection flow.\n2. Metaphor: Flowchart.\n3. Action: React App connects to Firebase SDK which talks to Firestore.\n4. Layout: Left (React) -> Middle (SDK) -> Right (Firestore). Arrows connecting them.	## 1) 全体像を10秒でつかむ
175	firebase_firestore_base_ts_study_004.md	firebase_firestore_base_ts_study_004_02_init_flow.png	./picture/firebase_firestore_base_ts_study_004_02_init_flow.png	Theme: Initialization Steps\n\nLabels to Render:\n- Console: "コンソール登録"\n- Config: "設定値 (Config)"\n- Code: "初期化コード"\n\nVisual Details:\n1. Core Concept: Setup process.\n2. Metaphor: Steps 1, 2, 3.\n3. Action: obtaining config from console and using it in code.\n4. Layout: Top to bottom flow.	## 2) Firebaseコンソール側：Webアプリ登録
176	firebase_firestore_base_ts_study_004.md	firebase_firestore_base_ts_study_004_03_file_structure.png	./picture/firebase_firestore_base_ts_study_004_03_file_structure.png	Theme: Recommended File Structure\n\nLabels to Render:\n- src/lib/firebase.ts: "初期化ファイル"\n- Components: "各画面 (UI)"\n- Import: "import db"\n\nVisual Details:\n1. Core Concept: Centralized initialization.\n2. Metaphor: Hub and Spoke.\n3. Action: One central file (firebase.ts) being imported by multiple UI components.\n4. Layout: Center (firebase.ts) with arrows pointing out to UI components.	## 4) 設計のコツ：初期化は
177	firebase_firestore_base_ts_study_004.md	firebase_firestore_base_ts_study_004_04_fetch_flow.png	./picture/firebase_firestore_base_ts_study_004_04_fetch_flow.png	Theme: Data Fetching Flow\n\nLabels to Render:\n- App: "アプリ"\n- getDocs: "getDocs()"\n- Collection: "todosコレクション"\n- Data: "データ (0件)"\n\nVisual Details:\n1. Core Concept: Fetching data.\n2. Metaphor: Request/Response.\n3. Action: App sends request via getDocs, Firestore checks collection, returns empty list (0 items).\n4. Layout: Left (App) -> Arrow (getDocs) -> Right (Firestore Collection).	getDocs(collection(db, "todos"))
178	firebase_firestore_base_ts_study_004.md	firebase_firestore_base_ts_study_004_05_ui_states.png	./picture/firebase_firestore_base_ts_study_004_05_ui_states.png	Theme: UI Loading States\n\nLabels to Render:\n- Loading: "読み込み中 (True)"\n- Fetching: "データ取得完了"\n- Display: "表示 (False)"\n\nVisual Details:\n1. Core Concept: State transition.\n2. Metaphor: Timeline or State Machine.\n3. Action: Initial state is Loading=True, then data arrives, Loading becomes False.\n4. Layout: Horizontal timeline showing the transition.	const [loading, setLoading] = useState(true);
179	firebase_firestore_base_ts_study_004.md	firebase_firestore_base_ts_study_004_06_env_vars.png	./picture/firebase_firestore_base_ts_study_004_06_env_vars.png	Theme: Environment Variables\n\nLabels to Render:\n- .env.local: ".env.local"\n- Vite: "Vite"\n- App: "アプリ"\n- Key: "APIキー"\n\nVisual Details:\n1. Core Concept: Secure configuration injection.\n2. Metaphor: Key into Lock or Injection.\n3. Action: Values from .env.local are injected into the App by Vite.\n4. Layout: File (.env) -> Vite Process -> App.	## 5) .env.local に設定値を
180	firebase_firestore_base_ts_study_005.md	firebase_firestore_base_ts_study_005_01_add_vs_set.png	./picture/firebase_firestore_base_ts_study_005_01_add_vs_set.png	Theme: addDoc vs setDoc\n\nLabels to Render:\n- addDoc: "addDoc (自動ID)"\n- setDoc: "setDoc (固定ID)"\n- Firestore: "Firestore"\n- ID: "ID"\n\nVisual Details:\n1. Core Concept: ID generation responsibility.\n2. Metaphor: Ticket Machine vs Reserved Seat.\n3. Action: addDoc gets a random ticket from machine. setDoc puts item in a specific numbered slot.\n4. Layout: Split comparison. Left: addDoc flow. Right: setDoc flow.	## 1) addDoc と setDoc の違いを
181	firebase_firestore_base_ts_study_005.md	firebase_firestore_base_ts_study_005_02_data_structure.png	./picture/firebase_firestore_base_ts_study_005_02_data_structure.png	Theme: Todo Data Structure\n\nLabels to Render:\n- Todo: "Todoデータ"\n- title: "title (String)"\n- done: "done (Boolean)"\n- createdAt: "createdAt (Number)"\n- id: "id (String)"\n\nVisual Details:\n1. Core Concept: Schema definition.\n2. Metaphor: Blueprint or Card.\n3. Action: Visualizing the fields of a Todo object.\n4. Layout: A card showing the structure with types.	## 2) 今回作るToDoデータの形
182	firebase_firestore_base_ts_study_005.md	firebase_firestore_base_ts_study_005_03_form_validation.png	./picture/firebase_firestore_base_ts_study_005_03_form_validation.png	Theme: Form Validation Logic\n\nLabels to Render:\n- Input: "入力 (Title)"\n- Check: "チェック (Trim/Length)"\n- OK: "OK -> 送信"\n- NG: "NG -> エラー表示"\n\nVisual Details:\n1. Core Concept: Filtering bad input.\n2. Metaphor: Gatekeeper or Filter.\n3. Action: Text enters, passes through filter. Valid text goes to DB, invalid bounces back.\n4. Layout: Flowchart: Input -> Diamond (Valid?) -> Yes/No paths.	## 4-1) 最小の追加フォーム
183	firebase_firestore_base_ts_study_005.md	firebase_firestore_base_ts_study_005_04_pre_gen_id.png	./picture/firebase_firestore_base_ts_study_005_04_pre_gen_id.png	Theme: Pre-generating ID\n\nLabels to Render:\n- Client: "クライアント"\n- Generate: "ID生成 (doc())"\n- ID: "ID: xyz123"\n- Save: "保存 (setDoc)"\n\nVisual Details:\n1. Core Concept: Separating ID creation from saving.\n2. Metaphor: Printing label before packing box.\n3. Action: Client creates an ID locally, then sends data + ID to Firestore.\n4. Layout: Timeline: 1. Make ID -> 2. Use ID for file upload/etc -> 3. Save to DB.	## 6) “自動IDが欲しいけど
184	firebase_firestore_base_ts_study_005.md	firebase_firestore_base_ts_study_005_05_ai_suggest.png	./picture/firebase_firestore_base_ts_study_005_05_ai_suggest.png	Theme: AI Suggestion Flow\n\nLabels to Render:\n- User: "ユーザー入力"\n- AI: "Gemini (AI Logic)"\n- Suggestion: "提案タイトル"\n- Form: "フォーム反映"\n\nVisual Details:\n1. Core Concept: AI assistance.\n2. Metaphor: Brainstorming partner.\n3. Action: User types "milk", AI suggests "Buy Milk 🥛", Form updates.\n4. Layout: Cycle: Input -> AI -> Output -> Form.	## 8) 🤖AIで“入力”を楽にする
185	firebase_firestore_base_ts_study_006.md	firebase_firestore_base_ts_study_006_01_getdoc_flow.png	./picture/firebase_firestore_base_ts_study_006_01_getdoc_flow.png	Theme: Single Document Fetch\n\nLabels to Render:\n- Ref: "doc(ref)"\n- Fetch: "getDoc()"\n- Result: "Snapshot"\n- Data: "Data (exists)"\n\nVisual Details:\n1. Core Concept: Fetching a specific item.\n2. Metaphor: Picking a specific book from a shelf.\n3. Action: Hand points to one book (doc ref), pulls it out (getDoc), checks cover (exists?).\n4. Layout: Linear flow: Ref -> Fetch -> Snapshot.	## 1) まず読む：getDoc() の考え方
186	firebase_firestore_base_ts_study_006.md	firebase_firestore_base_ts_study_006_02_exists_check.png	./picture/firebase_firestore_base_ts_study_006_02_exists_check.png	Theme: Existence Check Logic\n\nLabels to Render:\n- Snapshot: "Snapshot"\n- Check: "exists()?"\n- Yes: "True -> data()"\n- No: "False -> null"\n\nVisual Details:\n1. Core Concept: Branching logic.\n2. Metaphor: Fork in the road or Opening a box.\n3. Action: Check if box has content. If yes, take data. If no, empty.\n4. Layout: Diamond decision tree.	// ✅ 存在チェック
187	firebase_firestore_base_ts_study_006.md	firebase_firestore_base_ts_study_006_03_routing.png	./picture/firebase_firestore_base_ts_study_006_03_routing.png	Theme: Routing to Detail\n\nLabels to Render:\n- URL: "/todos/:todoId"\n- Params: "todoId = 123"\n- Page: "TodoDetailPage"\n- Fetch: "getTodoById('123')"\n\nVisual Details:\n1. Core Concept: URL parameter extraction.\n2. Metaphor: Address reading.\n3. Action: Browser URL feeds into Page Component, which extracts ID and calls API.\n4. Layout: Top (URL) -> Arrow down (Page) -> Arrow right (API).	## 2-4. ルーティングに追加する
188	firebase_firestore_base_ts_study_006.md	firebase_firestore_base_ts_study_006_04_detail_states.png	./picture/firebase_firestore_base_ts_study_006_04_detail_states.png	Theme: Detail Page States\n\nLabels to Render:\n- Loading: "Loading ⏳"\n- Loaded: "Loaded (Data) 📄"\n- Not Found: "Not Found 🙅‍♂️"\n- Error: "Error 😭"\n\nVisual Details:\n1. Core Concept: UI State Machine.\n2. Metaphor: 4 different screens or faces.\n3. Action: Component can be in one of these 4 states based on API result.\n4. Layout: A grid of 4 small screens showing each state.	type LoadState =
189	firebase_firestore_base_ts_study_007.md	firebase_firestore_base_ts_study_007_01_snapshot_concept.png	./picture/firebase_firestore_base_ts_study_007_01_snapshot_concept.png	Theme: Snapshot Concept\n\nLabels to Render:\n- DB State: "DBの状態 (10:00)"\n- Camera: "getDocs (パシャッ!)"\n- Photo: "Snapshot (10:00のまま)"\n- Change: "DBが変わっても... (10:01)"\n\nVisual Details:\n1. Core Concept: Immutable data at a point in time.\n2. Metaphor: Photography.\n3. Action: Camera takes a picture of a scene. The scene changes later, but the photo remains the same.\n4. Layout: Left (Scene) -> Middle (Camera) -> Right (Photo).	## ✅ getDocsは「今この瞬間の一覧を
190	firebase_firestore_base_ts_study_007.md	firebase_firestore_base_ts_study_007_02_data_mapping.png	./picture/firebase_firestore_base_ts_study_007_02_data_mapping.png	Theme: Data Mapping\n\nLabels to Render:\n- QuerySnapshot: "QuerySnapshot"\n- docs: "docs[]"\n- Map: ".map()"\n- Array: "Todo[] (Array)"\n- Object: "{ id, ...data }"\n\nVisual Details:\n1. Core Concept: Transforming raw data to app data.\n2. Metaphor: Factory line or Unpacking.\n3. Action: Raw docs enter a machine (map) which extracts ID and Data, and outputs clean Objects into an Array box.\n4. Layout: Top (Snapshot) -> Middle (Process) -> Bottom (Result Array).	snap.docs.map((d) => {
191	firebase_firestore_base_ts_study_007.md	firebase_firestore_base_ts_study_007_03_list_render.png	./picture/firebase_firestore_base_ts_study_007_03_list_render.png	Theme: List Rendering\n\nLabels to Render:\n- Array: "Todo[] (3 items)"\n- React: "React (.map)"\n- DOM: " ... "\n- UI: "画面"\n\nVisual Details:\n1. Core Concept: Data to UI.\n2. Metaphor: Projector or Printing.\n3. Action: Array items are projected onto the screen as list items.\n4. Layout: Left (Code/Array) -> Arrow -> Right (UI List).	## 2-3) Reactで一覧ページを作る
192	firebase_firestore_base_ts_study_007.md	firebase_firestore_base_ts_study_007_04_empty_state.png	./picture/firebase_firestore_base_ts_study_007_04_empty_state.png	Theme: Empty State Debugging\n\nLabels to Render:\n- App: "App"\n- Firestore: "Firestore"\n- Collection: "Collection?"\n- Empty: "0 documents"\n- Result: "0件 (正常)"\n\nVisual Details:\n1. Core Concept: Distinguishing "No Data" from "Error".\n2. Metaphor: Empty Box.\n3. Action: App asks for items. Firestore shows an empty box. App displays "0 items".\n4. Layout: Interaction flow showing the empty result is valid.	## ❌ ① 一覧が0件のまま
193	firebase_firestore_base_ts_study_008.md	firebase_firestore_base_ts_study_008_01_update_methods.png	./picture/firebase_firestore_base_ts_study_008_01_update_methods.png	Theme: Update Methods Comparison\n\nLabels to Render:\n- updateDoc: "updateDoc (Part)"\n- setDoc: "setDoc (Replace)"\n- setDoc Merge: "setDoc Merge (Upsert)"\n- Target: "Document"\n\nVisual Details:\n1. Core Concept: Three ways to write.\n2. Metaphor: Painting.\n3. Action: updateDoc touches up a spot. setDoc paints over the whole canvas. setDoc Merge adds a new color without erasing others.\n4. Layout: Three panels side-by-side.	## 0) まず結論：更新はこの3つを
194	firebase_firestore_base_ts_study_008.md	firebase_firestore_base_ts_study_008_02_overwrite_accident.png	./picture/firebase_firestore_base_ts_study_008_02_overwrite_accident.png	Theme: Overwrite Accident\n\nLabels to Render:\n- Before: "{ title, done, tags }"\n- setDoc: "setDoc({ title })"\n- After: "{ title } 😱"\n- Tags: "tags: Gone!"\n\nVisual Details:\n1. Core Concept: Accidental data loss.\n2. Metaphor: Overwriting a file or wiping a whiteboard.\n3. Action: A document with 3 fields gets replaced by a document with only 1 field. The other fields vanish.\n4. Layout: Before -> Action -> After (with shock reaction).	## 1) 事故る例：「tagsが消えた
195	firebase_firestore_base_ts_study_008.md	firebase_firestore_base_ts_study_008_03_updatedoc_safety.png	./picture/firebase_firestore_base_ts_study_008_03_updatedoc_safety.png	Theme: UpdateDoc Safety\n\nLabels to Render:\n- Before: "{ title, done, tags }"\n- updateDoc: "updateDoc({ title })"\n- After: "{ title (new), done, tags } ✅"\n- Safe: "Safe!"\n\nVisual Details:\n1. Core Concept: Safe partial update.\n2. Metaphor: Surgical precision.\n3. Action: Only the title field changes. Other fields remain untouched.\n4. Layout: Before -> Action -> After (showing all fields preserved).	## 2-1) 更新用の関数を作る
196	firebase_firestore_base_ts_study_008.md	firebase_firestore_base_ts_study_008_04_merge_true.png	./picture/firebase_firestore_base_ts_study_008_04_merge_true.png	Theme: setDoc Merge\n\nLabels to Render:\n- Document: "Doc (Empty or Exists)"\n- setDoc: "setDoc({ theme }, { merge: true })"\n- Result: "Doc + { theme }"\n- Upsert: "Upsert!"\n\nVisual Details:\n1. Core Concept: Create if not exists, update if exists.\n2. Metaphor: Pouring into a cup.\n3. Action: If cup is there, add liquid. If not, put cup then add liquid.\n4. Layout: Two scenarios: "No Doc" -> "Created". "Doc Exists" -> "Updated".	## 3) setDoc(..., { merge: true })
197	firebase_firestore_base_ts_study_008.md	firebase_firestore_base_ts_study_008_05_dot_notation.png	./picture/firebase_firestore_base_ts_study_008_05_dot_notation.png	Theme: Dot Notation\n\nLabels to Render:\n- Object: "prefs: { theme, lang }"\n- Bad: "update({ prefs: { theme } }) -> lang Gone!"\n- Good: "update({ 'prefs.theme': ... }) -> lang Safe!"\n- Dot: "Dot Notation"\n\nVisual Details:\n1. Core Concept: Nested update safety.\n2. Metaphor: Drill bit vs Sledgehammer.\n3. Action: Bad update replaces the whole object. Good update targets specific property inside object.\n4. Layout: Bad Path (Red) vs Good Path (Green).	## 4) ネスト（オブジェクト）の安全更新
198	firebase_firestore_base_ts_study_008.md	firebase_firestore_base_ts_study_008_06_ai_correction.png	./picture/firebase_firestore_base_ts_study_008_06_ai_correction.png	Theme: AI Text Correction\n\nLabels to Render:\n- Input: "User: ' mIlK '"\n- AI: "AI: 'Milk 🥛'"\n- Firestore: "DB: 'Milk 🥛'"\n- Correction: "Auto-Fix"\n\nVisual Details:\n1. Core Concept: AI as a pre-processor.\n2. Metaphor: Cleaning filter.\n3. Action: Messy text goes into AI, clean text comes out and goes to DB.\n4. Layout: Left (Input) -> Middle (AI) -> Right (DB).	## 6-1) 例：タイトルをAIに整形させてから
199	firebase_firestore_base_ts_study_009.md	firebase_firestore_base_ts_study_009_01_update_methods_overview.png	./picture/firebase_firestore_base_ts_study_009_01_update_methods_overview.png	Theme: Update Methods Overview Labels to Render: - Boolean: "Switch (Toggle)" - Array: "Basket (Union/Remove)" - Number: "Counter (Increment)" Visual Details: 1. Core Concept: Three powerful update tools. 2. Metaphor: A toolbox with 3 compartments. 3. Action: Displaying the tools. 4. Layout: Triptych (Three panels).	## 9-1）この章で使う“便利更新”の武器たち🧰✨
200	firebase_firestore_base_ts_study_009.md	firebase_firestore_base_ts_study_009_02_toggle_done.png	./picture/firebase_firestore_base_ts_study_009_02_toggle_done.png	Theme: Toggle Logic Labels to Render: - State A: "done: false" - Action: "Click" - State B: "done: true" Visual Details: 1. Core Concept: Flipping a boolean state. 2. Metaphor: A light switch flipping on/off or a checkbox getting checked. 3. Action: Flipping/Checking. 4. Layout: Before -> Action -> After.	## 9-2）実装①：done をワンクリックで切り替え✅🖱️
201	firebase_firestore_base_ts_study_009.md	firebase_firestore_base_ts_study_009_03_array_union_remove.png	./picture/firebase_firestore_base_ts_study_009_03_array_union_remove.png	Theme: Array Operations Labels to Render: - Union: "Add (Unique)" - Remove: "Delete" - Array: "Tags []" Visual Details: 1. Core Concept: Adding unique items and removing items. 2. Metaphor: Putting a ball into a basket (rejecting if duplicate exists) vs taking a ball out. 3. Action: Adding/Removing. 4. Layout: Two contrasting actions.	## 9-3）実装②：タグ配列を追加・削除する🏷️🧩
202	firebase_firestore_base_ts_study_009.md	firebase_firestore_base_ts_study_009_04_increment_counter.png	./picture/firebase_firestore_base_ts_study_009_04_increment_counter.png	Theme: Atomic Increment Labels to Render: - User A: "Click (+1)" - User B: "Click (+1)" - Server: "Count: 10 -> 12" - Safe: "Atomic" Visual Details: 1. Core Concept: Safe counting even with concurrent updates. 2. Metaphor: Two hands pressing a big button simultaneously. The counter jumps correctly by 2. 3. Action: Concurrent clicking. 4. Layout: Convergence to server.	## 9-4）実装③：数値カウンタを +1 / -1 する📈👍
203	firebase_firestore_base_ts_study_009.md	firebase_firestore_base_ts_study_009_05_ai_tag_flow.png	./picture/firebase_firestore_base_ts_study_009_05_ai_tag_flow.png	Theme: AI Tag Suggestion Flow Labels to Render: - Input: "Title: Buy Milk" - AI: "Analyze" - Output: "Tags: [Shopping, Food]" Visual Details: 1. Core Concept: AI analyzing text to create tags. 2. Metaphor: Text going into a robot brain, and structured tag cards coming out. 3. Action: Processing. 4. Layout: Left-to-right flow.	## 9-5）AIで“タグ提案”をやってみよう🤖🏷️（Firebase AI Logic）
204	firebase_firestore_base_ts_study_009.md	firebase_firestore_base_ts_study_009_06_agent_split.png	./picture/firebase_firestore_base_ts_study_009_06_agent_split.png	Theme: Agent Role Split Labels to Render: - Agent A: "UI Task" - Agent B: "Logic Task" - Agent C: "AI Task" Visual Details: 1. Core Concept: Dividing work among specialized agents. 2. Metaphor: A team of 3 robots, each holding a different tool (Paintbrush, Wrench, Brain). 3. Action: Collaboration. 4. Layout: Team lineup.	## 9-6）Antigravity / Gemini CLI で“実装スピード”を上げる🚀🧠
205	firebase_firestore_base_ts_study_010.md	firebase_firestore_base_ts_study_010_01_delete_flow.png	./picture/firebase_firestore_base_ts_study_010_01_delete_flow.png	Theme: Safe Delete Flow Labels to Render: - User: "Click Delete" - System: "Confirm Dialog" - Firestore: "deleteDoc()" - UI: "Remove Item" Visual Details: 1. Core Concept: The sequence of a safe delete operation. 2. Metaphor: A flow chart with a stop sign at the confirmation step. 3. Action: Flowing through the gate. 4. Layout: Left-to-right flow.	## 2) 実装の全体像（今日やること）🧩🧰
206	firebase_firestore_base_ts_study_010.md	firebase_firestore_base_ts_study_010_02_safety_mechanism.png	./picture/firebase_firestore_base_ts_study_010_02_safety_mechanism.png	Theme: Safety Mechanisms Labels to Render: - Dialog: "Confirm?" - Button: "Disabled (Loading)" - Log: "Error Handling" Visual Details: 1. Core Concept: Multiple layers of safety. 2. Metaphor: A shield protecting the delete button, and a safety latch (dialog). 3. Action: Blocking accidental clicks. 4. Layout: Layered defense.	## 0) まず大事：削除は「一番取り返しがつかない」⚠️😱
207	firebase_firestore_base_ts_study_010.md	firebase_firestore_base_ts_study_010_03_subcollection_trap.png	./picture/firebase_firestore_base_ts_study_010_03_subcollection_trap.png	Theme: Subcollection Ghost Labels to Render: - Parent: "Deleted (X)" - Subcollection: "Alive (Ghost)" - Access: "Path Valid" Visual Details: 1. Core Concept: Deleting a document does not delete its subcollections. 2. Metaphor: A house demolished, but the basement (subcollection) remains intact underground. 3. Action: House vanishing. 4. Layout: Above/Below ground.	## B) 「親を消したのにサブコレが残る…」👻
208	firebase_firestore_base_ts_study_010.md	firebase_firestore_base_ts_study_010_04_ui_feedback.png	./picture/firebase_firestore_base_ts_study_010_04_ui_feedback.png	Theme: Delete Button States Labels to Render: - Normal: "Delete" - Deleting: "Deleting... (Disabled)" - Done: "Gone" Visual Details: 1. Core Concept: Visual feedback during the delete process. 2. Metaphor: A button changing form: Solid -> Gray/Spinning -> Vanishing. 3. Action: Transition. 4. Layout: Sequence of 3 buttons.	## 4-1) 状態（削除中ID）を持つ🔒
209	firebase_firestore_base_ts_study_010.md	firebase_firestore_base_ts_study_010_05_ai_confirm.png	./picture/firebase_firestore_base_ts_study_010_05_ai_confirm.png	Theme: AI Warning Message Labels to Render: - ToDo: "Title: Secret Plans" - AI: "Review" - Warning: "Are you sure you want to delete 'Secret Plans'?" Visual Details: 1. Core Concept: AI generating a custom warning message. 2. Metaphor: An AI robot holding up a personalized warning sign. 3. Action: Warning. 4. Layout: Contextual flow.	## 8) 🔥AIで“削除事故”を減らす（オプション）🤖🧠
210	firebase_firestore_base_ts_study_011.md	firebase_firestore_base_ts_study_011_01_server_vs_client.png	./picture/firebase_firestore_base_ts_study_011_01_server_vs_client.png	Theme: Server vs Client Time Labels to Render: - Client A: "10:05 (Fast)" - Client B: "09:55 (Slow)" - Server: "10:00 (Truth)" Visual Details: 1. Core Concept: Relying on server time for consistency. 2. Metaphor: Three clocks. Clients are out of sync, Server is the master clock. 3. Action: Clients syncing to server. 4. Layout: Triangle with Server at top.	## 1) まず結論：時刻は「サーバー時刻」を使うのが安定⏱️🌍
211	firebase_firestore_base_ts_study_011.md	firebase_firestore_base_ts_study_011_02_timestamp_obj.png	./picture/firebase_firestore_base_ts_study_011_02_timestamp_obj.png	Theme: Timestamp Object Labels to Render: - Field 1: "Seconds (Epoch)" - Field 2: "Nanoseconds" - Func: "toDate()" - Object: "Timestamp" Visual Details: 1. Core Concept: The structure of a Firestore Timestamp. 2. Metaphor: A data capsule with two compartments (seconds, nanoseconds) and a converter button (toDate). 3. Action: Displaying structure. 4. Layout: Exploded view.	## 2) 「Timestamp」って何？🤔🧾
212	firebase_firestore_base_ts_study_011.md	firebase_firestore_base_ts_study_011_03_timeline.png	./picture/firebase_firestore_base_ts_study_011_03_timeline.png	Theme: CreatedAt vs UpdatedAt Labels to Render: - Start: "Create (createdAt = 10:00)" - Step 2: "Update 1 (updatedAt = 10:05)" - Step 3: "Update 2 (updatedAt = 10:30)" - Fixed: "createdAt (No Change)" Visual Details: 1. Core Concept: createdAt stays fixed, updatedAt moves forward. 2. Metaphor: A timeline. A flag planted at the start (createdAt) and a runner moving forward (updatedAt). 3. Action: Moving forward. 4. Layout: Horizontal timeline.	## 4) 実装②：追加時に createdAt / updatedAt を入れる➕⏱️
213	firebase_firestore_base_ts_study_011.md	firebase_firestore_base_ts_study_011_04_null_safety.png	./picture/firebase_firestore_base_ts_study_011_04_null_safety.png	Theme: Null Safety Labels to Render: - State: "Waiting (null)" - UI: "Display '-'" - Sync: "Timestamp Arrives" - UI: "Display '2026/02...'" Visual Details: 1. Core Concept: Handling the brief moment before the timestamp is synced. 2. Metaphor: A loading spinner or placeholder text turning into a real date. 3. Action: Transformation. 4. Layout: State transition (A -> B).	## 6-1) まず：null を安全にさばく🧯
214	firebase_firestore_base_ts_study_011.md	firebase_firestore_base_ts_study_011_05_estimate.png	./picture/firebase_firestore_base_ts_study_011_05_estimate.png	Theme: Latency Compensation (Estimate) Labels to Render: - Local: "Write (Estimate)" - Cloud: "Syncing..." - Result: "Confirmed (Real Time)" Visual Details: 1. Core Concept: Using a local estimate while waiting for server confirmation. 2. Metaphor: A ghost or hologram timestamp (Estimate) becoming a solid stone timestamp (Real Time). 3. Action: Solidifying. 4. Layout: Time progression.	## 6-2) さらに快適に：サーバー確定前でも「推定値」で表示する🪄
215	firebase_firestore_base_ts_study_011.md	firebase_firestore_base_ts_study_011_06_ai_date_parser.png	./picture/firebase_firestore_base_ts_study_011_06_ai_date_parser.png	Theme: AI Natural Language Date Labels to Render: - User: "Tomorrow 3pm" - AI: "Parse (Gemini)" - Output: "ISO 8601" - DB: "Timestamp" Visual Details: 1. Core Concept: AI converting natural language to a machine date format. 2. Metaphor: A translator robot taking a spoken phrase and typing it as code. 3. Action: Translating. 4. Layout: Left-to-right flow.	## 9-3) Firebase AI Logicで「自然言語の日時→Timestamp」を作る📆➡️⏱️（超それっぽくなる）
216	firebase_firestore_base_ts_study_012.md	firebase_firestore_base_ts_study_012_01_polling_vs_listen.png	./picture/firebase_firestore_base_ts_study_012_01_polling_vs_listen.png	Theme: Polling vs Realtime Labels to Render: - Polling: "Check... Check... Check..." - Realtime: "Ping! (New Data)" - Comparison: "Pull vs Push" Visual Details: 1. Core Concept: The efficiency of pushing data vs repeatedly checking. 2. Metaphor: A person knocking on a door repeatedly (Polling) vs A person waiting and a letter being slid under the door (Realtime). 3. Action: Waiting vs Checking. 4. Layout: Side-by-side comparison.	## 1) リアルタイム購読って何？🤔⚡
217	firebase_firestore_base_ts_study_012.md	firebase_firestore_base_ts_study_012_02_latency_compensation.png	./picture/firebase_firestore_base_ts_study_012_02_latency_compensation.png	Theme: Latency Compensation Labels to Render: - User: "Feels Fast (0ms)" - Local: "Optimistic UI" - Server: "Syncing (Background)" Visual Details: 1. Core Concept: Showing changes instantly while syncing in the background. 2. Metaphor: A user seeing a result immediately on their screen, while a runner takes the message to the server in the background. 3. Action: Instant feedback. 4. Layout: Layered action.	## 6) “即反映”の正体：ローカル変更イベント 🏎️💨
218	firebase_firestore_base_ts_study_012.md	firebase_firestore_base_ts_study_012_03_lifecycle.png	./picture/firebase_firestore_base_ts_study_012_03_lifecycle.png	Theme: React Lifecycle & Subscription Labels to Render: - Mount: "Connect (Subscribe)" - Unmount: "Disconnect (Unsubscribe)" - Component: "Active" Visual Details: 1. Core Concept: Tying subscription to component lifecycle. 2. Metaphor: Plugging in a device when entering a room (Mount) and unplugging it when leaving (Unmount). 3. Action: Connecting/Disconnecting. 4. Layout: Cycle view.	## 3-2. onSnapshot() で購読して state に入れる 🔁📥
219	firebase_firestore_base_ts_study_012.md	firebase_firestore_base_ts_study_012_04_sync_demo.png	./picture/firebase_firestore_base_ts_study_012_04_sync_demo.png	Theme: Multi-Tab Sync Labels to Render: - Tab A: "Add 'Milk'" - Cloud: "Sync" - Tab B: "Show 'Milk' (Instant)" Visual Details: 1. Core Concept: Multiple clients staying in sync. 2. Metaphor: Two windows or screens connected by a lightning bolt or cloud, showing the same content instantly. 3. Action: Syncing. 4. Layout: Connected devices.	## 4) ミニ課題：別タブで「増える」体験しよう 🪄🧪
220	firebase_firestore_base_ts_study_012.md	firebase_firestore_base_ts_study_012_05_memory_leak.png	./picture/firebase_firestore_base_ts_study_012_05_memory_leak.png	Theme: Subscription Leak Labels to Render: - Visit 1: "Listener A (Active)" - Visit 2: "Listener A + B (Double)" - Visit 3: "Listener A + B + C (Memory Leak)" Visual Details: 1. Core Concept: Accumulating useless listeners if not cleaned up. 2. Metaphor: A pile of 'ears' (listeners) growing larger and heavier with each visit, burdening the app. 3. Action: Piling up. 4. Layout: Progression (1 -> 2 -> 3).	## 5) ここが落とし穴：解除しないと何が起きる？💥🧠
221	firebase_firestore_base_ts_study_012.md	firebase_firestore_base_ts_study_012_06_ai_changelog.png	./picture/firebase_firestore_base_ts_study_012_06_ai_changelog.png	Theme: AI Change Explanation Labels to Render: - Snapshot: "Change Diff" - AI: "Explain" - Output: "User added 'Milk'" Visual Details: 1. Core Concept: AI interpreting code changes into natural language. 2. Metaphor: A robot reading a technical log (diff) and speaking a simple sentence. 3. Action: Explaining. 4. Layout: Left (Code) -> AI -> Right (Speech).	## 9-1) Firebase AI Logicで「変更内容ログ」を日本語で要約させる 📝🤖
222	firebase_firestore_base_ts_study_013.md	firebase_firestore_base_ts_study_013_01_hook_anatomy.png	./picture/firebase_firestore_base_ts_study_013_01_hook_anatomy.png	Theme: useTodos Hook Anatomy Labels to Render: - Input: "options" - Black Box: "useTodos()" - Output: "{ status, todos, error }" Visual Details: 1. Core Concept: Encapsulating logic inside a hook. 2. Metaphor: A machine (Hook) taking raw ingredients (options) and producing a finished product (state). 3. Action: Processing. 4. Layout: Input -> Machine -> Output.	## 2-2. useTodos()（購読＋解除＋状態管理）を作る⚡🧯
223	firebase_firestore_base_ts_study_013.md	firebase_firestore_base_ts_study_013_02_cleanup.png	./picture/firebase_firestore_base_ts_study_013_02_cleanup.png	Theme: Cleanup Action Labels to Render: - UI: "Unmount" - Effect: "return unsubscribe()" - Firestore: "Stop Listener" Visual Details: 1. Core Concept: Stopping the subscription when the component leaves. 2. Metaphor: A hand pulling a plug from a socket to cut the power (data stream). 3. Action: Unplugging. 4. Layout: Action shot.	## ✅ これが命！！！！ 画面が消える/条件が変わる→購読解除🧯
224	firebase_firestore_base_ts_study_013.md	firebase_firestore_base_ts_study_013_03_strict_mode.png	./picture/firebase_firestore_base_ts_study_013_03_strict_mode.png	Theme: Strict Mode Cycle Labels to Render: - 1. Setup: "Subscribe" - 2. Cleanup: "Unsubscribe" - 3. Setup: "Subscribe" - Result: "1 Active Listener" Visual Details: 1. Core Concept: React Strict Mode's double invocation to test cleanup. 2. Metaphor: A loop or stress test. On -> Off -> On. The final state should be On (one active). 3. Action: Cycling. 4. Layout: Cycle flow.	## 💥 事故2：Strict Modeで「二重購読してるように見える」
225	firebase_firestore_base_ts_study_013.md	firebase_firestore_base_ts_study_013_04_query_memo.png	./picture/firebase_firestore_base_ts_study_013_04_query_memo.png	Theme: Query Stability (useMemo) Labels to Render: - Render 1: "Query Ref A" - Render 2: "Query Ref A (Stable)" - Effect: "No Re-Subscribe" - Anchor: "useMemo" Visual Details: 1. Core Concept: Preventing unnecessary query recreation using useMemo. 2. Metaphor: An anchor holding a boat (Query) steady in rough waves (Renders). 3. Action: Anchoring. 4. Layout: Stability comparison.	## 💥 事故3：依存配列が毎回変わって再購読ループ
226	firebase_firestore_base_ts_study_013.md	firebase_firestore_base_ts_study_013_05_state_machine.png	./picture/firebase_firestore_base_ts_study_013_05_state_machine.png	Theme: Hook State Machine Labels to Render: - Start: "Loading" - Success: "Ready" - Fail: "Error" - UI: "Show Skeleton / List / Alert" Visual Details: 1. Core Concept: The three states of the hook and their UI representation. 2. Metaphor: A flowchart or traffic light system directing the UI to different screens. 3. Action: Branching. 4. Layout: State diagram.	## 3) 手を動かす：画面で “loading / error / empty” を綺麗に出す✨🎛️
227	firebase_firestore_base_ts_study_013.md	firebase_firestore_base_ts_study_013_06_ai_loop.png	./picture/firebase_firestore_base_ts_study_013_06_ai_loop.png	Theme: AI Realtime Loop Labels to Render: - AI: "Generate 'Buy Milk'" - Firestore: "addDoc()" - Listener: "onSnapshot()" - UI: "New ToDo Appears" Visual Details: 1. Core Concept: AI action triggering a standard database flow that updates the UI automatically. 2. Metaphor: A cycle where the AI pushes a button (Add), and a gear turns (Firestore), lighting up a screen (UI). 3. Action: Automated update. 4. Layout: Cycle.	## 7-2) Firebase AI Logicで「AIがToDo案を出す」→リアルタイム反映を体験🪄🗃️
228	docs/firebase_firestore_base_ts_study_014.md	firebase_firestore_base_ts_study_014_01_filter_concept.png	./picture/firebase_firestore_base_ts_study_014_01_filter_concept.png	Theme: Server vs Client Filtering Labels to Render: - Cloud: "Firestore (Server)" - Funnel: "where()" - App: "App (Small Data)" - Bad: "Filter All (Heavy)" Visual Details: 1. Core Concept: Filtering data on the server is efficient. 2. Metaphor: A large cloud pouring data through a funnel (where) into a small cup (App). Compare with a huge bucket dumping everything (Filter All) and overflowing the cup. 3. Action: Filtering. 4. Layout: Comparison.	## 1) where って何？（まず感覚）🧠💡
229	docs/firebase_firestore_base_ts_study_014.md	firebase_firestore_base_ts_study_014_02_operators.png	./picture/firebase_firestore_base_ts_study_014_02_operators.png	Theme: Where Operators Cheat Sheet Labels to Render: - Equal: "== (Exact)" - Range: ">= (Date)" - Array: "array-contains (Tags)" - Set: "in (Category)" Visual Details: 1. Core Concept: Common filtering operators. 2. Metaphor: A set of tools or keys. A precise key (==), a ruler (>=), a fishing net (array-contains), and a multi-key (in). 3. Action: Displaying tools. 4. Layout: Grid view.	## 2) where早見（よく使うやつだけ）🧾✨
230	docs/firebase_firestore_base_ts_study_014.md	firebase_firestore_base_ts_study_014_03_switch_ui.png	./picture/firebase_firestore_base_ts_study_014_03_switch_ui.png	Theme: Filter Switch UI Labels to Render: - Button 1: "All" - Button 2: "Open (Active)" - Button 3: "Done" - Query: "where('done', '==', false)" Visual Details: 1. Core Concept: UI state controlling the query. 2. Metaphor: A control panel with 3 buttons. Pressing 'Open' lights up a specific query circuit. 3. Action: Pressing button. 4. Layout: Connection from UI to Query.	## 3-1) フィルタ状態を作る（React）🧩⚛️
231	docs/firebase_firestore_base_ts_study_014.md	firebase_firestore_base_ts_study_014_04_realtime_switch.png	./picture/firebase_firestore_base_ts_study_014_04_realtime_switch.png	Theme: Realtime Query Switch Labels to Render: - State: "Filter Change" - Action: "Unsubscribe Old" - Action: "Subscribe New" - Result: "New Data" Visual Details: 1. Core Concept: Changing the subscription when filter changes. 2. Metaphor: Changing TV channels. The old channel fades out (unsubscribe) and the new one appears (subscribe). 3. Action: Switching. 4. Layout: Flow transition.	## 3-3) リアルタイム購読に組み込む（onSnapshot）⚡👀
232	docs/firebase_firestore_base_ts_study_014.md	firebase_firestore_base_ts_study_014_05_array_contains.png	./picture/firebase_firestore_base_ts_study_014_05_array_contains.png	Theme: Array Contains Logic Labels to Render: - Doc 1: "Tags: [A, B]" - Doc 2: "Tags: [B, C]" - Query: "contains 'A'" - Result: "Doc 1 Only" Visual Details: 1. Core Concept: Finding a document that has a specific item in an array. 2. Metaphor: Fishing with a specific bait. Only the fish (document) with the matching taste (tag) is caught. 3. Action: Catching. 4. Layout: Selection process.	## 4) ミニ応用：タグで絞り込む（AIと相性最高）🏷️🤖
233	docs/firebase_firestore_base_ts_study_014.md	firebase_firestore_base_ts_study_014_06_warning_signs.png	./picture/firebase_firestore_base_ts_study_014_06_warning_signs.png	Theme: Where Pitfalls Labels to Render: - Limit: "not-in (Max 10)" - Trap: "Field Missing = Hidden" - Complex: "OR (Max 30)" Visual Details: 1. Core Concept: Limitations and traps of complex queries. 2. Metaphor: Road signs. Speed limit (Max 10), Hidden Hole (Missing Field), and a confusing junction (OR). 3. Action: Warning. 4. Layout: Hazard map.	## 5) whereが増えると何が起きがち？（事故ポイント集）💥🧯
234	docs/firebase_firestore_base_ts_study_014.md	firebase_firestore_base_ts_study_014_07_ai_tagging.png	./picture/firebase_firestore_base_ts_study_014_07_ai_tagging.png	Theme: AI Auto Tagging Labels to Render: - Input: "Title: Buy Milk" - AI: "Analyze" - Output: "Tags: [Shopping, Food]" - Search: "Easy Find" Visual Details: 1. Core Concept: AI generating tags to make future search easier. 2. Metaphor: A robot reading a label and stamping standardized tags on a box. 3. Action: Stamping. 4. Layout: Process flow.	## 6-1) AIでタグを作る → where(tags...) で検索する🏷️🔎
235	docs/firebase_firestore_base_ts_study_015.md	firebase_firestore_base_ts_study_015_01_concept.png	./picture/firebase_firestore_base_ts_study_015_01_concept.png	Theme: OrderBy and Limit Concept Labels to Render: - Stack: "Documents (100)" - Sort: "orderBy (Sort)" - Cut: "limit (10)" - Result: "Top 10" Visual Details: 1. Core Concept: Sorting a large collection and taking only the top few. 2. Metaphor: Sorting a stack of cards by number, then cutting the deck to take the top 10. 3. Action: Sorting and cutting. 4. Layout: Process flow.	## 1) まず概念：orderBy と limit は「並べて、上だけ取る」🧠📌
236	docs/firebase_firestore_base_ts_study_015.md	firebase_firestore_base_ts_study_015_02_missing_field.png	./picture/firebase_firestore_base_ts_study_015_02_missing_field.png	Theme: Missing Field Trap Labels to Render: - Doc A: "{ createdAt: 10:00 }" - Doc B: "{ createdAt: 10:05 }" - Doc C: "{ no field }" - Query: "orderBy(createdAt)" - Result: "Doc A, Doc B (C is Gone!)" Visual Details: 1. Core Concept: Documents missing the sort field are excluded. 2. Metaphor: A lineup where only people with tickets (createdAt) can enter. The person without a ticket (Doc C) is turned away. 3. Action: Exclusion. 4. Layout: Filter result.	## 2) 重要注意：orderBy すると「そのフィールドが無いドキュメント」は消える😱💥
237	docs/firebase_firestore_base_ts_study_015.md	firebase_firestore_base_ts_study_015_03_query_build.png	./picture/firebase_firestore_base_ts_study_015_03_query_build.png	Theme: Building the Query Labels to Render: - Base: "collection(todos)" - Part 1: "orderBy(desc)" - Part 2: "limit(10)" - Build: "query()" Visual Details: 1. Core Concept: Composing a query from parts. 2. Metaphor: Assembling Lego blocks. Base block + Sort block + Limit block = Final Query structure. 3. Action: Assembling. 4. Layout: Stacked blocks.	## 3-1) クエリだけ先に作ってみる（超基本形）🧩
238	docs/firebase_firestore_base_ts_study_015.md	firebase_firestore_base_ts_study_015_04_realtime_list.png	./picture/firebase_firestore_base_ts_study_015_04_realtime_list.png	Theme: Realtime List Update Labels to Render: - New Item: "Add New" - List: "Top 10" - Old Item: "11th (Pushed out)" - Action: "Auto Refresh" Visual Details: 1. Core Concept: Realtime updates pushing items out of the limit. 2. Metaphor: A scoreboard showing top 10. A new high score enters the top, pushing the 10th place off the board. 3. Action: Sliding list. 4. Layout: List view.	## 3-2) onSnapshot（リアルタイム）に合体させる ⚡👀
239	docs/firebase_firestore_base_ts_study_015.md	firebase_firestore_base_ts_study_015_05_limit_flow.png	./picture/firebase_firestore_base_ts_study_015_05_limit_flow.png	Theme: Limit Logic Labels to Render: - DB: "100 items" - Query: "limit(10)" - App: "Receive 10" - User: "Happy (Fast)" Visual Details: 1. Core Concept: Fetching only what is needed. 2. Metaphor: A tap filling a small glass from a huge tank. The flow stops exactly at the brim (10). 3. Action: Flow control. 4. Layout: Flow diagram.	## 4) ミニ課題：最新10件だけ表示（limit）🧩🏁
240	docs/firebase_firestore_base_ts_study_015.md	firebase_firestore_base_ts_study_015_06_sort_stable.png	./picture/firebase_firestore_base_ts_study_015_06_sort_stable.png	Theme: Stable Sort Labels to Render: - Problem: "Same Time (Unstable)" - Solution: "2nd Sort (title)" - Result: "Stable Order" Visual Details: 1. Core Concept: Using a second field to break ties. 2. Metaphor: Two runners finishing at the exact same time. A photo finish camera (2nd Sort) determines the winner based on bib number. 3. Action: Tie-breaking. 4. Layout: Comparison.	## 5) よくあるつまずき集（先に踏んでおく）💥😇
241	docs/firebase_firestore_base_ts_study_015.md	firebase_firestore_base_ts_study_015_07_ai_query.png	./picture/firebase_firestore_base_ts_study_015_07_ai_query.png	Theme: Natural Language to Query Labels to Render: - Input: "Newest 10" - AI: "Translate" - Output: "{ orderBy: desc, limit: 10 }" - Safe: "Allow List" Visual Details: 1. Core Concept: AI converting user text to safe query parameters. 2. Metaphor: A translator robot taking a speech bubble and outputting a structured card, checking it against a safe list. 3. Action: Translating and checking. 4. Layout: Left-to-right flow.	## 6-2) アプリ機能にAIを混ぜる（自然言語→並び替え/件数）🪄🗣️
242	docs/firebase_firestore_base_ts_study_016.md	firebase_firestore_base_ts_study_016_01_index_concept.png	./picture/firebase_firestore_base_ts_study_016_01_index_concept.png	Theme: Database Index Concept Labels to Render: - No Index: "Check Every Book (Slow)" - With Index: "Card Catalog (Fast)" - User: "Find 'Harry Potter'" Visual Details: 1. Core Concept: Indexes speed up search by avoiding full scans. 2. Metaphor: A librarian running through every aisle (No Index) vs checking a card catalog and going straight to the shelf (With Index). 3. Action: Searching. 4. Layout: Comparison.	## 📖 読む：まず“インデックス”って何？（超やさしく）🧠📚
243	docs/firebase_firestore_base_ts_study_016.md	firebase_firestore_base_ts_study_016_02_composite_index.png	./picture/firebase_firestore_base_ts_study_016_02_composite_index.png	Theme: Composite Index Structure Labels to Render: - Dictionary: "Phonebook" - Order: "1. City -> 2. Name" - Search: "Find 'Tokyo, Tanaka'" - Wrong: "Find 'Tanaka' (Cannot use)" Visual Details: 1. Core Concept: Order matters in composite indexes. 2. Metaphor: A phonebook sorted by City then Name. You can find "Tokyo, Tanaka", but you can't easily find "Tanaka" without knowing the City. 3. Action: Looking up. 4. Layout: Book structure.	## 📖 読む：まず“インデックス”って何？（超やさしく）🧠📚
244	docs/firebase_firestore_base_ts_study_016.md	firebase_firestore_base_ts_study_016_03_complex_query.png	./picture/firebase_firestore_base_ts_study_016_03_complex_query.png	Theme: Complex Query Pipe Labels to Render: - Filter 1: "done == false" - Filter 2: "tags contains 'ai'" - Sort: "orderBy createdAt" - Result: "Filtered List" Visual Details: 1. Core Concept: Multiple filters and sorts combined. 2. Metaphor: A pipeline with multiple stations. Water (data) flows through a 'done' filter, then a 'tags' filter, then an 'order' alignment machine. 3. Action: Processing. 4. Layout: Pipe flow.	## 1) わざと“複合クエリ”を作る🧨
245	docs/firebase_firestore_base_ts_study_016.md	firebase_firestore_base_ts_study_016_04_error_types.png	./picture/firebase_firestore_base_ts_study_016_04_error_types.png	Theme: Error Type Decision Labels to Render: - Error: "Red Text" - Type A: "Missing Index -> Fix Link" - Type B: "Invalid Query -> Redesign" Visual Details: 1. Core Concept: Distinguishing between missing index and invalid query. 2. Metaphor: A fork in the road. One sign says "Construction Needed (Index)", the other says "Dead End (Invalid)". 3. Action: Diagnosing. 4. Layout: Branching path.	## 👀 読む：エラー文の“見分け方”はこれだけ🕵️‍♂️
246	docs/firebase_firestore_base_ts_study_016.md	firebase_firestore_base_ts_study_016_05_fix_routes.png	./picture/firebase_firestore_base_ts_study_016_05_fix_routes.png	Theme: Three Fix Routes Labels to Render: - Route 1: "Click Link (Fast)" - Route 2: "Console (Manual)" - Route 3: "CLI (Code)" - Goal: "Index Created" Visual Details: 1. Core Concept: Three ways to create an index. 2. Metaphor: Three vehicles racing to the finish line. A rocket (Link), a car (Console), and a bike (CLI). 3. Action: Racing. 4. Layout: Three lanes.	## 🛠️ 手を動かす：直し方は3ルートあるよ🛣️✨
247	docs/firebase_firestore_base_ts_study_016.md	firebase_firestore_base_ts_study_016_06_building_wait.png	./picture/firebase_firestore_base_ts_study_016_06_building_wait.png	Theme: Index Building State Labels to Render: - State: "Building..." - Icon: "Construction" - Time: "Few Minutes" - Action: "Wait" Visual Details: 1. Core Concept: Index creation takes time. 2. Metaphor: A construction site with a "Work in Progress" sign. A clock ticks in the background. 3. Action: Waiting. 4. Layout: Construction scene.	## ⏳ 「作ったのに直らない！」あるある集😤➡️😌
248	docs/firebase_firestore_base_ts_study_016.md	firebase_firestore_base_ts_study_016_07_ai_debug.png	./picture/firebase_firestore_base_ts_study_016_07_ai_debug.png	Theme: AI Debugging Helper Labels to Render: - Input: "Error Log" - AI: "Analyze" - Output: "You need Index: done + tags" - Tool: "Gemini CLI" Visual Details: 1. Core Concept: AI analyzing error logs to suggest fixes. 2. Metaphor: A robot doctor reading a patient's chart (Log) and writing a prescription (Index definition). 3. Action: Diagnosing. 4. Layout: Interaction.	## 🤖 AI活用：インデックス作成を“爆速で終わらせる”やり方
249	docs/firebase_firestore_base_ts_study_017.md	firebase_firestore_base_ts_study_017_01_cursor_concept.png	./picture/firebase_firestore_base_ts_study_017_01_cursor_concept.png	Theme: Cursor Concept Labels to Render: - List: "Book Text" - Cursor: "Bookmark" - Action: "Read Next" Visual Details: 1. Core Concept: Paging using a cursor (bookmark) rather than page numbers. 2. Metaphor: A bookmark placed in a book. You don't ask for "Page 5", you ask to "Start reading after bookmark". 3. Action: Reading. 4. Layout: Book view.	## 🔖 カーソルってなに？
250	docs/firebase_firestore_base_ts_study_017.md	firebase_firestore_base_ts_study_017_02_startat_after.png	./picture/firebase_firestore_base_ts_study_017_02_startat_after.png	Theme: startAt vs startAfter Labels to Render: - Line: "Start Line" - startAt: "On the Line (Inclusive)" - startAfter: "After the Line (Exclusive)" Visual Details: 1. Core Concept: The difference between inclusive and exclusive start points. 2. Metaphor: Runners on a track. One starts ON the line (startAt), the other starts one step AFTER the line (startAfter). 3. Action: Starting. 4. Layout: Comparison.	## ✅ startAt と startAfter の違い（めっちゃ大事）
251	docs/firebase_firestore_base_ts_study_017.md	firebase_firestore_base_ts_study_017_03_paging_goal.png	./picture/firebase_firestore_base_ts_study_017_03_paging_goal.png	Theme: Paging Workflow Goal Labels to Render: - Page 1: "1-10" - Action: "Next Button" - Page 2: "11-20" - Loop: "Repeat" Visual Details: 1. Core Concept: The user experience of clicking next to see more items. 2. Metaphor: A film strip or slide projector. Viewing frames 1-10, then clicking 'Next' to slide to frames 11-20. 3. Action: Sliding. 4. Layout: Sequence.	## 1) 今日のゴールの完成形 🏁✨
252	docs/firebase_firestore_base_ts_study_017.md	firebase_firestore_base_ts_study_017_04_thinking_process.png	./picture/firebase_firestore_base_ts_study_017_04_thinking_process.png	Theme: Paging Relay Logic Labels to Render: - Group 1: "10 Runners" - Baton: "Last Doc" - Group 2: "Next 10 Runners" Visual Details: 1. Core Concept: Using the last document of the previous page as the start for the next. 2. Metaphor: A relay race. The 10th runner passes the baton (Last Doc) to the 1st runner of the next group. 3. Action: Passing baton. 4. Layout: Relay race.	## 3) ハンズオン：10件ずつ取得して「次へ」する 🛠️📜
253	docs/firebase_firestore_base_ts_study_017.md	firebase_firestore_base_ts_study_017_05_hook_structure.png	./picture/firebase_firestore_base_ts_study_017_05_hook_structure.png	Theme: Hook Structure Labels to Render: - State: "lastDoc" - Func: "loadNextPage()" - Query: "startAfter(lastDoc)" - Update: "setTodos([...prev, ...new])" Visual Details: 1. Core Concept: The internal logic of the custom hook. 2. Metaphor: A machine with a memory slot (lastDoc). When the button (loadNextPage) is pressed, it uses the memory to fetch new items and adds them to the conveyor belt (todos). 3. Action: Processing. 4. Layout: Machine diagram.	## 4) 実装：ページング用hookを作る（おすすめ）⚛️🧰
254	docs/firebase_firestore_base_ts_study_017.md	firebase_firestore_base_ts_study_017_06_ui_states.png	./picture/firebase_firestore_base_ts_study_017_06_ui_states.png	Theme: Button UI States Labels to Render: - Green: "Next (Has More)" - Yellow: "Loading..." - Red: "Stop (No More)" Visual Details: 1. Core Concept: Visual feedback for the paging button. 2. Metaphor: A traffic light system for the button. Green for go, Yellow for wait, Red for stop. 3. Action: Changing state. 4. Layout: Button variations.	## 5) UI：一覧に「次へ」ボタンを付ける 🎛️➡️
255	docs/firebase_firestore_base_ts_study_017.md	firebase_firestore_base_ts_study_017_07_ai_data.png	./picture/firebase_firestore_base_ts_study_017_07_ai_data.png	Theme: AI Data Factory Labels to Render: - Input: "Make 30 ToDos" - AI: "Generate" - Output: "30 JSON Items" - DB: "Filled" Visual Details: 1. Core Concept: Using AI to generate test data. 2. Metaphor: A factory robot instantly producing 30 boxes (ToDos) to fill the empty shelves. 3. Action: Production. 4. Layout: Factory line.	## 9) （オプション）Firebase AI LogicでサンプルToDoを生成→一括追加🤖🧾➕
256	docs/firebase_firestore_base_ts_study_018.md	firebase_firestore_base_ts_study_018_01_infinite_scroll.png	./picture/firebase_firestore_base_ts_study_018_01_infinite_scroll.png	Theme: Infinite Scroll Concept Labels to Render: - Screen: "List" - Action: "Scroll Down" - Backend: "Load Next 10" - Result: "List Grows" Visual Details: 1. Core Concept: Loading more data automatically as the user scrolls. 2. Metaphor: A never-ending roll of paper being unrolled. As the user pulls (scrolls), more paper (data) appears from the box (backend). 3. Action: Unrolling. 4. Layout: Vertical flow.	## 1) まず“無限スクロールの正体”を理解しよう 👀♾️
257	docs/firebase_firestore_base_ts_study_018.md	firebase_firestore_base_ts_study_018_02_crash_points.png	./picture/firebase_firestore_base_ts_study_018_02_crash_points.png	Theme: Infinite Scroll Pitfalls Labels to Render: - Trap 1: "Double Load (Fast Scroll)" - Trap 2: "Duplicate ID" - Trap 3: "Missing Order" Visual Details: 1. Core Concept: Common bugs in infinite scroll implementation. 2. Metaphor: A runner stumbling over hurdles. Hurdle 1 is a double image (Double Load), Hurdle 2 is a clone (Duplicate), Hurdle 3 is a gap in the track (Missing Order). 3. Action: Stumbling. 4. Layout: Obstacle course.	## 2) 設計：無限スクロールで死ぬポイント3つ 💥（先に潰す）
258	docs/firebase_firestore_base_ts_study_018.md	firebase_firestore_base_ts_study_018_03_query_structure.png	./picture/firebase_firestore_base_ts_study_018_03_query_structure.png	Theme: Query with Cursor Labels to Render: - Base: "orderBy(date) + limit(10)" - Cursor: "startAfter(lastDoc)" - Combine: "Next Page Query" Visual Details: 1. Core Concept: Using a cursor to fetch the next page. 2. Metaphor: A puzzle piece (Cursor) fitting into the main query block to create the "Next Page" request. 3. Action: Connecting. 4. Layout: Block assembly.	## 3) 実装①：Firestore「1ページ取得」関数を作る 📦🔎
259	docs/firebase_firestore_base_ts_study_018.md	firebase_firestore_base_ts_study_018_04_intersection_observer.png	./picture/firebase_firestore_base_ts_study_018_04_intersection_observer.png	Theme: Intersection Observer Logic Labels to Render: - Viewport: "Screen" - Element: "Sentinel (Div)" - Event: "Intersect!" - Action: "Load More" Visual Details: 1. Core Concept: Triggering an action when an element enters the view. 2. Metaphor: A laser tripwire at the bottom of the screen. When the scroll hits the wire (Sentinel), an alarm (Event) triggers the loader. 3. Action: Tripping the wire. 4. Layout: Side view of screen.	## 4) 実装②：IntersectionObserverで「下に来たら loadMore」👀⬇️
260	docs/firebase_firestore_base_ts_study_018.md	firebase_firestore_base_ts_study_018_05_ui_sentinel.png	./picture/firebase_firestore_base_ts_study_018_05_ui_sentinel.png	Theme: Sentinel Placement Labels to Render: - List: "ToDo Items" - Sentinel: "Invisible Div (1px)" - Loader: "Loading Spinner" Visual Details: 1. Core Concept: Placing the sentinel at the end of the list. 2. Metaphor: A hidden sensor buried at the end of a road. Just past the sensor is the construction crew (Loader) building more road. 3. Action: Scrolling past. 4. Layout: UI Mockup.	## 5) 実装③：画面に組み込む（sentinelを一番下に置く）🧩🧱
261	docs/firebase_firestore_base_ts_study_018.md	firebase_firestore_base_ts_study_018_06_guards.png	./picture/firebase_firestore_base_ts_study_018_06_guards.png	Theme: Safety Guards Labels to Render: - Guard 1: "inFlight (Lock)" - Guard 2: "seenIds (Filter)" - Data: "Stream" - Result: "Clean List" Visual Details: 1. Core Concept: preventing double loads and duplicates. 2. Metaphor: A security gate (inFlight) that closes while processing, and a filter mesh (seenIds) that catches duplicates. 3. Action: Filtering/Blocking. 4. Layout: Pipeline.	## 6) 事故回避メモ（ここ大事）🧠🧯
262	docs/firebase_firestore_base_ts_study_018.md	firebase_firestore_base_ts_study_018_07_ai_seed.png	./picture/firebase_firestore_base_ts_study_018_07_ai_seed.png	Theme: AI Data Seeding Labels to Render: - AI: "Create 30 Titles" - Batch: "Write Batch" - Firestore: "30 Docs Added" - UI: "Scroll Ready" Visual Details: 1. Core Concept: Rapidly populating the database to test scrolling. 2. Metaphor: A cargo plane (AI) dropping multiple crates (Batch) into the database warehouse instantly. 3. Action: Airdrop. 4. Layout: Cloud to DB flow.	## 7) 🤖 AIで“テストデータ作り”を爆速にする（無限スクロールのために）
263	firebase_firestore_base_ts_study_019.md	firebase_firestore_base_ts_study_019_01_emulator_shield.png	./picture/firebase_firestore_base_ts_study_019_01_emulator_shield.png	Theme: Emulator Shield Labels to Render: - Shield: "Emulator (Local)" - Cloud: "Production (Safe)" - Action: "Block" Visual Details: 1. Core Concept: Emulator protects the production database. 2. Metaphor: A shield (Emulator) stopping arrows (bugs/tests) from hitting a cloud icon (Production). 3. Action: Protection. 4. Layout: Side-by-side or shield in front.	## 📖 読む：Emulatorって何が嬉しいの？😆
264	firebase_firestore_base_ts_study_019.md	firebase_firestore_base_ts_study_019_02_emulator_ports.png	./picture/firebase_firestore_base_ts_study_019_02_emulator_ports.png	Theme: Emulator Ports Labels to Render: - UI: "Port 4000 (Browser)" - DB: "Port 8080 (API)" - PC: "Localhost" Visual Details: 1. Core Concept: The two main ports used by the Emulator. 2. Metaphor: A computer with two cables plugged in, labeled 4000 and 8080. 3. Action: Connecting. 4. Layout: Device with connections.	* Firestore Emulatorは デフォルトで 8080番
265	firebase_firestore_base_ts_study_019.md	firebase_firestore_base_ts_study_019_03_connect_switch.png	./picture/firebase_firestore_base_ts_study_019_03_connect_switch.png	Theme: Connection Switch Labels to Render: - Code: "connectFirestoreEmulator" - Condition: "if (DEV)" - Switch: "Local / Cloud" Visual Details: 1. Core Concept: Switching to emulator only in dev mode. 2. Metaphor: A railway switch track. "DEV" train goes to "Local", "PROD" train goes to "Cloud". 3. Action: Switching. 4. Layout: Branching path.	## 🛠️ 手を動かす：ReactアプリをEmulatorにつなぐ⚛️🔌
266	firebase_firestore_base_ts_study_019.md	firebase_firestore_base_ts_study_019_04_requests_ui.png	./picture/firebase_firestore_base_ts_study_019_04_requests_ui.png	Theme: Requests UI Labels to Render: - Tab: "Requests" - Row: "GET /todos" - Rule: "Allow (Green)" Visual Details: 1. Core Concept: Visualizing the requests log. 2. Metaphor: A logbook or flight recorder screen showing a list of green checkmarks. 3. Action: Logging. 4. Layout: UI mockup.	## 👀 ついでに：Emulator UIの “Requests” が神✨
267	firebase_firestore_base_ts_study_019.md	firebase_firestore_base_ts_study_019_05_reset_db.png	./picture/firebase_firestore_base_ts_study_019_05_reset_db.png	Theme: Database Reset Labels to Render: - Button: "DELETE" - DB: "Trash" - Result: "Empty" Visual Details: 1. Core Concept: Clearing the database instantly. 2. Metaphor: A "Clear" button on a calculator or a trash can icon clearing a list. 3. Action: Deleting. 4. Layout: Action flow.	## 🧯 DBをリセットしたい（超便利）💥
268	firebase_firestore_base_ts_study_019.md	firebase_firestore_base_ts_study_019_06_seed_script.png	./picture/firebase_firestore_base_ts_study_019_06_seed_script.png	Theme: Seed Script Flow Labels to Render: - Script: "seed.mjs" - Data: "10 Items" - Emulator: "Firestore (8080)" Visual Details: 1. Core Concept: Injecting test data. 2. Metaphor: A watering can (Script) pouring seeds (Data) into a garden bed (Emulator). 3. Action: Seeding. 4. Layout: Flow diagram.	## 🛠️ ついでに：サーバー側（Admin SDK）で seed 10件流し込む🌱🔥
269	firebase_firestore_base_ts_study_019.md	firebase_firestore_base_ts_study_019_07_ai_data.png	./picture/firebase_firestore_base_ts_study_019_07_ai_data.png	Theme: AI Data Generation Labels to Render: - User: "Make 10 ToDos" - AI: "Gemini" - Output: "JSON Data" Visual Details: 1. Core Concept: AI generating the seed data. 2. Metaphor: A robot chef chopping ingredients (Data) for the developer. 3. Action: Generation. 4. Layout: Interaction.	## 🤖 AIで“seed作り”と“デバッグ”を爆速にする💨
270	firebase_firestore_base_ts_study_020.md	firebase_firestore_base_ts_study_020_01_final_app.png	./picture/firebase_firestore_base_ts_study_020_01_final_app.png	Theme: Final App Overview Labels to Render: - List: "ToDo List" - Filter: "Not Done" - AI: "Polish" - Footer: "Load More" Visual Details: 1. Core Concept: The finished application with all features. 2. Metaphor: A polished smartphone screen showing the full UI. 3. Action: User interacting. 4. Layout: UI Mockup.	## 1) この章で“完成”にする機能一覧 ✅
271	firebase_firestore_base_ts_study_020.md	firebase_firestore_base_ts_study_020_02_data_schema.png	./picture/firebase_firestore_base_ts_study_020_02_data_schema.png	Theme: Data Schema Labels to Render: - Doc: "Todo" - Field 1: "body (String)" - Field 2: "tags (Array)" - Field 3: "createdAt (Timestamp)" Visual Details: 1. Core Concept: The data structure. 2. Metaphor: A blueprint or specification card. 3. Action: Defining. 4. Layout: Card view.	## 2) データ設計（迷子防止）🧭🗃️
272	firebase_firestore_base_ts_study_020.md	firebase_firestore_base_ts_study_020_03_paging_strategy.png	./picture/firebase_firestore_base_ts_study_020_03_paging_strategy.png	Theme: Hybrid Paging Strategy Labels to Render: - Head: "Realtime (Limit 10)" - Tail: "Fetch (GetDocs)" - User: "Scroll" Visual Details: 1. Core Concept: Combining realtime for top items and manual fetch for older items. 2. Metaphor: A train. The engine (Head) is live/electric (Realtime), the carriages (Tail) are cargo (Static Fetch). 3. Action: Pulling. 4. Layout: Train metaphor.	## Step B：ページング（“リアルタイム＋追加読み”の現実解）📜✨
273	firebase_firestore_base_ts_study_020.md	firebase_firestore_base_ts_study_020_04_ai_polish.png	./picture/firebase_firestore_base_ts_study_020_04_ai_polish.png	Theme: AI Text Polish Labels to Render: - Input: "messy text..." - AI: "Polish" - Output: "Clean Text ✨" Visual Details: 1. Core Concept: AI improving text quality. 2. Metaphor: A dirty rough diamond going into a machine and coming out as a sparkling gem. 3. Action: Polishing. 4. Layout: Transformation.	## 2) AI整形：本文を読みやすくする ✨📝
274	firebase_firestore_base_ts_study_020.md	firebase_firestore_base_ts_study_020_05_ai_tags.png	./picture/firebase_firestore_base_ts_study_020_05_ai_tags.png	Theme: AI Tag Extraction Labels to Render: - Text: "Buy milk at store" - AI: "Extract" - JSON: "tags: ['Shopping', 'Food']" Visual Details: 1. Core Concept: Converting text to structured tags. 2. Metaphor: A machine reading a book and printing out index cards. 3. Action: Extracting. 4. Layout: Process flow.	## 3) AIタグ抽出：JSONで返させて tags: string[] にする 🏷️🧾
275	firebase_firestore_base_ts_study_020.md	firebase_firestore_base_ts_study_020_06_safety_guard.png	./picture/firebase_firestore_base_ts_study_020_06_safety_guard.png	Theme: AI Safety Guard Labels to Render: - User: "Click" - Guard: "Rate Limit" - AI: "Gemini" - Attack: "Spam Blocked" Visual Details: 1. Core Concept: Protecting the AI API. 2. Metaphor: A bouncer (Guard) checking IDs (Rate Limit) before letting people see the VIP (AI). 3. Action: Blocking spam. 4. Layout: Security gate.	## ✅ AI呼び出しの濫用対策（重要）
276	firebase_firestore_base_ts_study_020.md	firebase_firestore_base_ts_study_020_07_antigravity.png	./picture/firebase_firestore_base_ts_study_020_07_antigravity.png	Theme: Antigravity Assistance Labels to Render: - Task: "Breakdown" - Agent: "Antigravity" - Output: "Plan" Visual Details: 1. Core Concept: AI helping with project planning. 2. Metaphor: A mission control screen decomposing a big rocket into modules. 3. Action: Planning. 4. Layout: Screen view.	## Antigravity（設計→実装の段取りを作る）🛰️
835	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_01_outline_map.png	./picture/firebase_firestore_base_ts_index_01_outline_map.png	Theme: Course Structure Map Labels to Render: - Unit A: "Basics" - Unit B: "CRUD" - Unit C: "Realtime" - Unit D: "Advanced/AI" Visual Details: 1. Core Concept: The journey through the 4 units. 2. Metaphor: A treasure map with 4 islands or milestones. 3. Action: Path connecting them. 4. Layout: Map view.	## 全体アウトライン（ユニット構成）🧭
836	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_02_course_flow.png	./picture/firebase_firestore_base_ts_index_02_course_flow.png	Theme: Learning Loop Labels to Render: - Step 1: "Read" - Step 2: "Do (Code)" - Step 3: "Quest" - Step 4: "Check" Visual Details: 1. Core Concept: The 4-step learning process for each chapter. 2. Metaphor: A circular cycle or loop. 3. Action: Rotating/Flowing. 4. Layout: Cycle diagram.	## 20章の教材アウトライン（各章：読む→手を動かす→ミニ課題→チェック）📚✨
837	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_03_concept.png	./picture/firebase_firestore_base_ts_index_03_concept.png	Theme: Firestore Concept Labels to Render: - Container: "Collection (Box)" - Item: "Document (Note)" - Feature: "Realtime" Visual Details: 1. Core Concept: Document-based structure. 2. Metaphor: A physical box containing sticky notes. One note is glowing (realtime update). 3. Action: Glowing/Syncing. 4. Layout: 3D or Isometric view of box.	### 第01章：Firestoreって何者？（まず怖さを消す）😌🗃️
838	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_04_crud_cycle.png	./picture/firebase_firestore_base_ts_index_04_crud_cycle.png	Theme: CRUD Cycle Labels to Render: - Create: "Add" - Read: "Get" - Update: "Set/Update" - Delete: "Remove" Visual Details: 1. Core Concept: The 4 basic database operations. 2. Metaphor: A cycle or 4 quadrants. 3. Action: Interaction with a document icon. 4. Layout: Cycle.	### 第05章：Create① 追加する（addDoc / setDoc の気持ち）➕📄
839	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_05_realtime.png	./picture/firebase_firestore_base_ts_index_05_realtime.png	Theme: Realtime Sync Labels to Render: - Cloud: "Firestore" - Device 1: "PC (Update)" - Device 2: "Mobile (Sync)" Visual Details: 1. Core Concept: Instant data propagation. 2. Metaphor: Lightning or wifi signals connecting the cloud to devices. 3. Action: Syncing. 4. Layout: Network diagram.	### 第12章：リアルタイム購読①（onSnapshotで“勝手に更新”）⚡👀
840	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_06_paging.png	./picture/firebase_firestore_base_ts_index_06_paging.png	Theme: Cursor Pagination Labels to Render: - Page 1: "1-10" - Cursor: "Bookmark" - Page 2: "11-20" Visual Details: 1. Core Concept: Using a cursor to fetch the next set. 2. Metaphor: Reading a scroll or book and placing a bookmark to know where to start next. 3. Action: Marking position. 4. Layout: Sequence.	### 第17章：ページング入門①（カーソルって何？）📜🧭
841	docs/firebase_firestore_base_ts_index.md	firebase_firestore_base_ts_index_07_ai_app.png	./picture/firebase_firestore_base_ts_index_07_ai_app.png	Theme: AI Enhanced ToDo Labels to Render: - Note: "Messy Text" - AI: "Format & Tag" - App: "Clean ToDo" Visual Details: 1. Core Concept: AI improving the app data. 2. Metaphor: A robot arm organizing messy papers into a neat file. 3. Action: Organizing. 4. Layout: Transformation flow.	### 第20章：総合ミニ課題（ToDo/メモ完成）＋AIで“実用っぽさ”を足す🎯🤖✨
842	docs/firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_01_concept.png	./picture/firebase_firestore_base_ts_study_001_01_concept.png	Theme: Firestore Core Concept Labels to Render: - Feature: "Document DB" - Feature: "Auto Sync" - Feature: "Offline Ready" Visual Details: 1. Core Concept: The key features of Firestore. 2. Metaphor: A glowing document icon with a sync symbol and a signal strength icon. 3. Action: Syncing. 4. Layout: Icon cluster.	## 1) Firestoreを一言でいうと？🗣️🗃️
843	docs/firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_02_box_note.png	./picture/firebase_firestore_base_ts_study_001_02_box_note.png	Theme: Box and Note Metaphor Labels to Render: - Container: "Collection (Box)" - Item: "Document (Note)" - Content: "Fields" Visual Details: 1. Core Concept: The data structure hierarchy. 2. Metaphor: A cardboard box labeled 'todos' with sticky notes inside. One note shows text fields. 3. Action: Organizing. 4. Layout: 3D composition.	## 2) “箱とノート”の超ざっくり図解📦📝
844	docs/firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_03_realtime.png	./picture/firebase_firestore_base_ts_study_001_03_realtime.png	Theme: Realtime Snapshot Labels to Render: - Action: "Add (Tab A)" - Result: "Appear (Tab B)" - Method: "onSnapshot" Visual Details: 1. Core Concept: Instant updates across clients. 2. Metaphor: Two screens. An item dropped in one screen instantly pops up in the other. 3. Action: Teleportation/Sync. 4. Layout: Split screen.	## 3) Firestoreの最大の気持ちよさ：リアルタイム⚡👀
845	docs/firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_04_strengths.png	./picture/firebase_firestore_base_ts_study_001_04_strengths.png	Theme: Strengths and Weaknesses Labels to Render: - Good: "Realtime UI" - Good: "Flexible Data" - Bad: "Complex JOINs" Visual Details: 1. Core Concept: What Firestore is good and bad at. 2. Metaphor: A superhero (Firestore) lifting a UI easily but struggling with a tangled knot of ropes (JOINs). 3. Action: Lifting vs Struggling. 4. Layout: Comparison.	## 4) じゃあ、Firestoreは何が得意？何が苦手？🎯🧩
846	docs/firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_05_cost.png	./picture/firebase_firestore_base_ts_study_001_05_cost.png	Theme: Cost Model Labels to Render: - Operation: "Read / Write" - Cost: "Money" - Realtime: "Count as Read" Visual Details: 1. Core Concept: Operations incur costs. 2. Metaphor: A coin slot or turnstile. Every time data passes, a coin drops. 3. Action: Payment. 4. Layout: Concept illustration.	## 5) “怖さ”の正体＝だいたい課金と設計😇💸
847	docs/firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_06_goal.png	./picture/firebase_firestore_base_ts_study_001_06_goal.png	Theme: App Goal Wireframe Labels to Render: - Screen 1: "List" - Screen 2: "Add" - Screen 3: "Edit" Visual Details: 1. Core Concept: The simple ToDo app to be built. 2. Metaphor: Three phone screens showing wireframes of the app functions. 3. Action: User flow. 4. Layout: Three screens.	## 6) この20章で作る完成イメージ（今日見たいゴール）🎯✨
848	docs/firebase_firestore_base_ts_study_001.md	firebase_firestore_base_ts_study_001_07_ai_assist.png	./picture/firebase_firestore_base_ts_study_001_07_ai_assist.png	Theme: AI Assistance Labels to Render: - Helper 1: "Firebase AI Logic" - Helper 2: "Antigravity" - Helper 3: "Gemini CLI" Visual Details: 1. Core Concept: Tools helping the developer. 2. Metaphor: A developer surrounded by three specialized robot assistants. 3. Action: Assisting. 4. Layout: Group shot.	## 7) AIで“理解と作業”を加速するコツ🤖💨
849	docs/firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_01_path.png	./picture/firebase_firestore_base_ts_study_002_01_path.png	Theme: Firestore Path Address Labels to Render: - Collection: "todos" - Document: "todo_123" - Path: "todos/todo_123" Visual Details: 1. Core Concept: Accessing data via a path. 2. Metaphor: A street sign pointing to 'todos' and a house number 'todo_123'. 3. Action: Navigation. 4. Layout: Signpost.	## まずは超イメージ：Firestoreは「住所でたどる」📮🏠
850	docs/firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_02_terms.png	./picture/firebase_firestore_base_ts_study_002_02_terms.png	Theme: Terminology Visualization Labels to Render: - Container: "Collection" - Item: "Document" - Data: "Field" Visual Details: 1. Core Concept: The hierarchy of Collection, Document, Field. 2. Metaphor: A filing cabinet (Collection), a folder (Document), and a paper inside (Field). 3. Action: Opening. 4. Layout: Hierarchy.	## ① 用語を“手触り”で覚える🧠✨
851	docs/firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_03_data_shape.png	./picture/firebase_firestore_base_ts_study_002_03_data_shape.png	Theme: ToDo Data Shape Labels to Render: - Text: "Title" - Check: "Done" - Label: "Tags" Visual Details: 1. Core Concept: The structure of a single ToDo item. 2. Metaphor: A blueprint or schema card showing the fields. 3. Action: Planning. 4. Layout: Card view.	## ② ToDoの「データの形」を決めよう🛠️🧩
852	docs/firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_04_type.png	./picture/firebase_firestore_base_ts_study_002_04_type.png	Theme: TypeScript Type Definition Labels to Render: - Code: "type TodoDoc" - Prop 1: "title: string" - Prop 2: "done: boolean" Visual Details: 1. Core Concept: Defining the data structure in code. 2. Metaphor: A cookie cutter or mold labeled 'TodoDoc' shaping the data. 3. Action: Shaping. 4. Layout: Code concept.	## ③ TypeScriptで「型」を作って頭を整理しよう🧠⚛️
853	docs/firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_05_json.png	./picture/firebase_firestore_base_ts_study_002_05_json.png	Theme: Seed Data JSON Labels to Render: - ID: "todo_001" - Data: "{ title: 'Buy Milk' }" - Stack: "5 Items" Visual Details: 1. Core Concept: Preparing multiple data items. 2. Metaphor: A stack of 5 index cards, each representing a JSON object. 3. Action: Stacking. 4. Layout: Stack view.	## ④ 「ToDoを5件」JSONっぽく書いてみよう🧾✍️
854	docs/firebase_firestore_base_ts_study_002.md	firebase_firestore_base_ts_study_002_06_ai_gen.png	./picture/firebase_firestore_base_ts_study_002_06_ai_gen.png	Theme: AI Data Generation Labels to Render: - Input: "Prompt" - AI: "Generator" - Output: "JSON Data" Visual Details: 1. Core Concept: Using AI to generate sample data. 2. Metaphor: A futuristic machine taking a text slip (Prompt) and printing out data cards (JSON). 3. Action: Manufacturing. 4. Layout: Process flow.	## ⑤ AIで「フィールド案」と「サンプルデータ」を秒速で作る🤖⚡
855	docs/firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_01_enable.png	./picture/firebase_firestore_base_ts_study_003_01_enable.png	Theme: Enable Firestore UI Labels to Render: - Menu: "Build" - Item: "Firestore Database" - Button: "Create database" Visual Details: 1. Core Concept: Starting the database creation process. 2. Metaphor: Simplified UI mockup of the Firebase Console. 3. Action: Clicking the button. 4. Layout: UI Focus.	## 1) Firestore を有効化する（DBを作る）🛠️🗃️
856	docs/firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_02_location.png	./picture/firebase_firestore_base_ts_study_003_02_location.png	Theme: Region Selection Map Labels to Render: - Target: "asia-northeast1 (Tokyo)" - Value: "Fast Speed" - Warning: "Cannot Change" Visual Details: 1. Core Concept: Choosing the server location close to users. 2. Metaphor: A map with a pin on Tokyo radiating speed lines. 3. Action: Selection. 4. Layout: Map view.	## B. “ロケーション（リージョン）”の選択（ここは慎重に！）🗾
857	docs/firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_03_add_data.png	./picture/firebase_firestore_base_ts_study_003_03_add_data.png	Theme: Add Data UI Labels to Render: - Collection: "todos" - ID: "Auto-ID" - Field: "title: 'Buy Milk'" Visual Details: 1. Core Concept: Manually adding a document. 2. Metaphor: A form being filled out in the console. 3. Action: Typing. 4. Layout: Modal UI.	## 2) Consoleで todos を作って、ToDoを1件入れる➕📄
858	docs/firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_04_add_3.png	./picture/firebase_firestore_base_ts_study_003_04_add_3.png	Theme: Three ToDo Items Labels to Render: - Item 1: "Laundry" - Item 2: "Bills" - Item 3: "Walk" Visual Details: 1. Core Concept: Populating the database with test data. 2. Metaphor: Three cards or rows appearing in the list. 3. Action: Populating. 4. Layout: List view.	## 3) ミニ課題：done:false を3件入れてみよう🧩✅✅✅
859	docs/firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_05_nav.png	./picture/firebase_firestore_base_ts_study_003_05_nav.png	Theme: Console 3-Pane View Labels to Render: - Col 1: "Collection (todos)" - Col 2: "Document (ID)" - Col 3: "Fields (Data)" Visual Details: 1. Core Concept: Understanding the 3-column layout. 2. Metaphor: A tri-fold brochure or 3 distinct columns. 3. Action: Navigation. 4. Layout: 3-column layout.	## 4) チェック：Consoleで迷子にならないか確認🧭👀
860	docs/firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_06_rules.png	./picture/firebase_firestore_base_ts_study_003_06_rules.png	Theme: Rules Tab Glance Labels to Render: - Tab: "Rules" - Icon: "Lock" - Code: "allow read, write" Visual Details: 1. Core Concept: Security rules location. 2. Metaphor: Peeking through a door labeled 'Rules' with a lock on it. 3. Action: Peeking. 4. Layout: Tab focus.	## 5) ちょい怖ポイント：Rules（ルール）を“眺めるだけ”🔒👀
861	docs/firebase_firestore_base_ts_study_003.md	firebase_firestore_base_ts_study_003_07_ai_agent.png	./picture/firebase_firestore_base_ts_study_003_07_ai_agent.png	Theme: AI Console Helper Labels to Render: - Human: "Where is Tokyo?" - AI: "Select asia-northeast1" - Tool: "Antigravity" Visual Details: 1. Core Concept: AI guiding the console setup. 2. Metaphor: An AI avatar pointing to the correct dropdown menu on a screen. 3. Action: Guiding. 4. Layout: Over-the-shoulder view.	## 6) AIで時短コーナー🤖💨（Antigravity / Gemini CLI を“下調べ係”にする）