Skip to main content

image_generation_plan.struncture_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
277firebase_firestore_struncture_ts_index.mdfirebase_firestore_struncture_ts_index_01_course_map.png./picture/firebase_firestore_struncture_ts_index_01_course_map.pngTheme: Course Map

Labels to Render:
- Phase 1: "Design (Struct)"
- Phase 2: "Performance (Index)"
- Phase 3: "Safety (Server)"

Visual Details:
1. Core Concept: The three phases of the course.
2. Metaphor: A winding road map with 3 major stops.
3. Action: Progressing.
4. Layout: Map view.		## 20章アウトライン（読む→手を動かす→ミニ課題→チェック）📚✨
278firebase_firestore_struncture_ts_index.mdfirebase_firestore_struncture_ts_index_02_entity_relation.png./picture/firebase_firestore_struncture_ts_index_02_entity_relation.pngTheme: Entity Relations

Labels to Render:
- User: "User"
- Report: "Report"
- Post: "Post"
- Comment: "Comment"

Visual Details:
1. Core Concept: The 4 main entities and their connections.
2. Metaphor: A constellation or network diagram.
3. Action: Connecting.
4. Layout: Network graph.		### 第2章：エンティティ分解（User / Report / Post / Comment）🧩
279firebase_firestore_struncture_ts_index.mdfirebase_firestore_struncture_ts_index_03_subcollection.png./picture/firebase_firestore_struncture_ts_index_03_subcollection.pngTheme: Subcollection vs Top-Level

Labels to Render:
- Top: "posts/{id}"
- Sub: "comments/{id}"
- Connection: "Parent-Child"

Visual Details:
1. Core Concept: Hierarchical data structure.
2. Metaphor: A file folder (Post) containing smaller files (Comments).
3. Action: Containing.
4. Layout: Hierarchy.		### 第4章：サブコレクションの使いどころ（親子関係に強い）🧩
280firebase_firestore_struncture_ts_index.mdfirebase_firestore_struncture_ts_index_04_normalization.png./picture/firebase_firestore_struncture_ts_index_04_normalization.pngTheme: Normalization Scale

Labels to Render:
- Left: "Read Speed (Denormalized)"
- Right: "Write Simplicity (Normalized)"
- Balance: "Trade-off"

Visual Details:
1. Core Concept: Balancing read performance vs write complexity.
2. Metaphor: A balance scale. One side has a cheetah (Speed), the other has a simple block (Simplicity).
3. Action: Balancing.
4. Layout: Scale.		### 第6章：正規化 vs 非正規化（Firestore流の割り切り）⚖️
281firebase_firestore_struncture_ts_index.mdfirebase_firestore_struncture_ts_index_05_index_mech.png./picture/firebase_firestore_struncture_ts_index_05_index_mech.pngTheme: Index Mechanism

Labels to Render:
- No Index: "Slow Scan"
- Index: "Fast Lookup"
- Query: "where(a).orderBy(b)"

Visual Details:
1. Core Concept: How indexes speed up queries.
2. Metaphor: Searching a messy pile of papers vs using a neat card catalog.
3. Action: Searching.
4. Layout: Comparison.		### 第14章：インデックスの超基本（何が速くなる？何が増える？）🧭
282firebase_firestore_struncture_ts_index.mdfirebase_firestore_struncture_ts_index_06_aggregation.png./picture/firebase_firestore_struncture_ts_index_06_aggregation.pngTheme: Aggregation Methods

Labels to Render:
- Method 1: "Count Query (Read)"
- Method 2: "Counter Field (Write)"
- Method 3: "Distributed (Scale)"

Visual Details:
1. Core Concept: Different ways to count data.
2. Metaphor: A magnifying glass (Query), a tally counter (Field), and a team of counters (Distributed).
3. Action: Counting.
4. Layout: Three options.		### 第10章：集計の全体像（いつ計算する？いつ保存する？）🧮
283firebase_firestore_struncture_ts_index.mdfirebase_firestore_struncture_ts_index_07_ai_assistant.png./picture/firebase_firestore_struncture_ts_index_07_ai_assistant.pngTheme: AI Design Assistant

Labels to Render:
- Human: "Review Schema"
- AI: "Antigravity"
- Output: "Feedback"

Visual Details:
1. Core Concept: AI reviewing the database design.
2. Metaphor: An architect showing a blueprint to a robot consultant.
3. Action: Reviewing.
4. Layout: Collaboration.		## AIで設計が爆速になる「使い方テンプレ」🤖⚡（Antigravity / Gemini CLI）
284firebase_firestore_struncture_ts_study_001.mdfirebase_firestore_struncture_ts_study_001_01_reverse_design.png./picture/firebase_firestore_struncture_ts_study_001_01_reverse_design.pngTheme: Reverse Design Concept

Labels to Render:
- Screen: "UI View"
- Query: "Query Spec"
- Schema: "Firestore DB"

Visual Details:
1. Core Concept: Designing the database backwards from the UI.
2. Metaphor: An arrow flowing from a phone screen (UI) to a document (Query) to a database icon (Schema).
3. Action: Flowing backwards.
4. Layout: Left-to-right flow.		## 1) 読む：設計の正体は「取り出し方」から逆算😄🔁
285firebase_firestore_struncture_ts_study_001.mdfirebase_firestore_struncture_ts_study_001_02_screen_sketches.png./picture/firebase_firestore_struncture_ts_study_001_02_screen_sketches.pngTheme: Screen Sketches

Labels to Render:
- List: "Timeline"
- Detail: "Article"
- Comment: "Comments"

Visual Details:
1. Core Concept: Rough sketches of the main screens.
2. Metaphor: Hand-drawn wireframes on a napkin or notepad.
3. Action: Sketching.
4. Layout: Three screens.		## 2) 手を動かす：まず「画面」を3枚、雑でいいから描く📝🎨
286firebase_firestore_struncture_ts_study_001.mdfirebase_firestore_struncture_ts_study_001_03_query_spec.png./picture/firebase_firestore_struncture_ts_study_001_03_query_spec.pngTheme: Query Specification

Labels to Render:
- Spec: "Query List"
- Q1: "Newest 20"
- Q2: "My Posts"
- Field: "Needs: createdAt"

Visual Details:
1. Core Concept: A list of natural language queries translating to fields.
2. Metaphor: A checklist where each item points to a database field.
3. Action: Translating.
4. Layout: List view.		## 3) 手を動かす：クエリを最低10本 “文章で” 書き出す🔎🧠
287firebase_firestore_struncture_ts_study_001.mdfirebase_firestore_struncture_ts_study_001_04_query_list.png./picture/firebase_firestore_struncture_ts_study_001_04_query_list.pngTheme: The 10 Queries

Labels to Render:
- List: "1. Timeline"
- Search: "6. Tag Search"
- Sort: "7. Popularity"

Visual Details:
1. Core Concept: Visualizing the variety of queries.
2. Metaphor: A stack of query cards or a dashboard of requests.
3. Action: Displaying.
4. Layout: Grid or List.		## 例：クエリ10本（コピって自分用に直してOK）🧩
288firebase_firestore_struncture_ts_study_001.mdfirebase_firestore_struncture_ts_study_001_05_field_extraction.png./picture/firebase_firestore_struncture_ts_study_001_05_field_extraction.pngTheme: Field Extraction

Labels to Render:
- Requirement: "Newest Order"
- Extraction: "Need 'createdAt'"
- Requirement: "My Posts"
- Extraction: "Need 'authorId'"

Visual Details:
1. Core Concept: Deriving fields from requirements.
2. Metaphor: Distilling a liquid. Raw requirement goes in, pure field name comes out.
3. Action: Distilling.
4. Layout: Process flow.		この時点で、必要フィールドが浮かんできます👇（これが“逆算”の感覚！）
289firebase_firestore_struncture_ts_study_001.mdfirebase_firestore_struncture_ts_study_001_06_ai_review.png./picture/firebase_firestore_struncture_ts_study_001_06_ai_review.pngTheme: AI Design Review

Labels to Render:
- Input: "Query Spec"
- AI: "Reviewer"
- Output: "Missing Index!"

Visual Details:
1. Core Concept: AI checking the design for errors.
2. Metaphor: A robot inspector looking at the spec sheet with a magnifying glass.
3. Action: Inspecting.
4. Layout: Interaction.		## 5) AIで設計レビューを爆速にする🤖⚡（Antigravity / Gemini CLI / FirebaseのAI）
290firebase_firestore_struncture_ts_study_001.mdfirebase_firestore_struncture_ts_study_001_07_cost_trap.png./picture/firebase_firestore_struncture_ts_study_001_07_cost_trap.pngTheme: Cost Trap

Labels to Render:
- Bad: "Read All (1000)"
- Cost: "$$$"
- Good: "Limit 20"
- Cost: "¢"

Visual Details:
1. Core Concept: The cost implication of bad queries.
2. Metaphor: A money burning fire (Bad Query) vs a coin saver (Good Query).
3. Action: Burning vs Saving.
4. Layout: Comparison.		## よくある失敗（先に踏んでおく）😵‍💫💥
291firebase_firestore_struncture_ts_study_002.mdfirebase_firestore_struncture_ts_study_002_01_granularity.png./picture/firebase_firestore_struncture_ts_study_002_01_granularity.pngTheme: Document Granularity

Labels to Render:
- Good: "Small Docs (Fast)"
- Bad: "Huge Doc (Slow)"
- Limit: "1 MiB"

Visual Details:
1. Core Concept: Keeping documents small and focused.
2. Metaphor: A fleet of small, fast speedboats (Small Docs) vs a slow, overloaded cargo ship (Huge Doc).
3. Action: Moving.
4. Layout: Comparison.		## 1 まず大前提 ドキュメントは小さく育てる感覚 🌱📄
292firebase_firestore_struncture_ts_study_002.mdfirebase_firestore_struncture_ts_study_002_02_3_questions.png./picture/firebase_firestore_struncture_ts_study_002_02_3_questions.pngTheme: 3 Questions for Grouping

Labels to Render:
- Q1: "Display Together?"
- Q2: "Update Together?"
- Q3: "Same Life?"
- Result: "Same Doc"

Visual Details:
1. Core Concept: The criteria for grouping fields into a document.
2. Metaphor: A funnel or filter. Fields go in, pass through the 3 filters, and land in the same document box if they pass.
3. Action: Filtering.
4. Layout: Process flow.		## 3 ドキュメント単位を決める 3つの質問 🧠🔍
293firebase_firestore_struncture_ts_study_002.mdfirebase_firestore_struncture_ts_study_002_03_frequency_tags.png./picture/firebase_firestore_struncture_ts_study_002_03_frequency_tags.pngTheme: Frequency Tags

Labels to Render:
- Ice: "Rare (Frozen)"
- Fire: "Frequent (Hot)"
- Storm: "Dangerous (Storm)"

Visual Details:
1. Core Concept: Visualizing update frequency.
2. Metaphor: Weather icons. Ice cube for immutable data. Fire for frequent updates. Storm cloud for hotspots.
3. Action: Labeling.
4. Layout: Icon set.		## 編集頻度のタグを決めよう 🏷️
294firebase_firestore_struncture_ts_study_002.mdfirebase_firestore_struncture_ts_study_002_04_user_fields.png./picture/firebase_firestore_struncture_ts_study_002_04_user_fields.pngTheme: User Entity Fields

Labels to Render:
- User: "Profile"
- Ice: "uid"
- Sun: "displayName"
- Fire: "lastLogin"

Visual Details:
1. Core Concept: Breakdown of the User entity with frequency tags.
2. Metaphor: A profile card with temperature gauges next to each field.
3. Action: Measuring.
4. Layout: Card view.		## 5 例 User の必須フィールド案 👤🧾
295firebase_firestore_struncture_ts_study_002.mdfirebase_firestore_struncture_ts_study_002_05_comment_risk.png./picture/firebase_firestore_struncture_ts_study_002_05_comment_risk.pngTheme: Comment Array Risk

Labels to Render:
- Post: "Article Doc"
- Array: "Comments [...]"
- Risk: "Explosion (Size/Update)"

Visual Details:
1. Core Concept: The danger of embedding unlimited comments in a post.
2. Metaphor: A document balloon popping because too many comments are stuffed inside.
3. Action: Popping.
4. Layout: Warning illustration.		## 8 例 Comment コメントの必須フィールド案 💬🚀
296firebase_firestore_struncture_ts_study_002.mdfirebase_firestore_struncture_ts_study_002_06_grouping_task.png./picture/firebase_firestore_struncture_ts_study_002_06_grouping_task.pngTheme: Field Grouping Task

Labels to Render:
- Group A: "Static Info (Ice)"
- Group B: "Counters (Fire)"
- Action: "Split?"

Visual Details:
1. Core Concept: Grouping fields by frequency to decide on splitting.
2. Metaphor: Sorting laundry. Whites (Static) in one basket, Colors (Dynamic) in another.
3. Action: Sorting.
4. Layout: Sorting process.		## ミニ課題B
297firebase_firestore_struncture_ts_study_002.mdfirebase_firestore_struncture_ts_study_002_07_hotspot_check.png./picture/firebase_firestore_struncture_ts_study_002_07_hotspot_check.pngTheme: Hotspot Check

Labels to Render:
- Doc: "Single Doc"
- Updates: "1000 users/sec"
- Result: "Lock/Fail"

Visual Details:
1. Core Concept: High contention on a single document.
2. Metaphor: A single door with hundreds of people trying to enter at once.
3. Action: Jamming.
4. Layout: Crowd scene.		## 10 チェック 1つでもYESなら分割を疑おう 👀✅
298firebase_firestore_struncture_ts_study_003.mdfirebase_firestore_struncture_ts_study_003_01_id_search_vs_ref.png./picture/firebase_firestore_struncture_ts_study_003_01_id_search_vs_ref.pngTheme: Comparison of ID usage in Firestore

Labels to Render:
- ID: "参照用 (Reference)"
- Field: "検索用 (Search)"
- Bad: "IDで検索しない"

Visual Details:
1. Split the image into two sides.
2. Left side (Good): A key labeled 'ID' pointing directly to a specific document. Label it 'Reference'.
3. Right side (Bad): A magnifying glass scanning through many keys. Cross it out with a red X. Label it 'Search Key'.
4. Use clean lines and flat colors (Blue for good, Red for bad).		## まず超重要：IDは“検索キー”じゃないよ🔎🙅‍♂️
299firebase_firestore_struncture_ts_study_003.mdfirebase_firestore_struncture_ts_study_003_02_auto_id_load_balance.png./picture/firebase_firestore_struncture_ts_study_003_02_auto_id_load_balance.pngTheme: Auto ID Load Balancing

Labels to Render:
- Auto ID: "分散書き込み"
- Sequential ID: "集中書き込み"
- Server: "Firestore"

Visual Details:
1. Top half: 'Auto ID'. Show random alphanumeric strings ('xF3...', 'a9Z...') distributing evenly across multiple servers/nodes.
2. Bottom half: 'Sequential ID'. Show '001', '002', '003' hitting a single server/node, causing a bottleneck (red glow).
3. Use arrows to show data flow.		## 自動ID（Auto ID）って何がうれしいの？🎲✨
300firebase_firestore_struncture_ts_study_003.mdfirebase_firestore_struncture_ts_study_003_03_custom_id_cases.png./picture/firebase_firestore_struncture_ts_study_003_03_custom_id_cases.pngTheme: Custom ID Use Cases

Labels to Render:
- User: "users/{uid}"
- Report: "reports/{date}"
- Config: "settings/public"

Visual Details:
1. Show three distinct document icons.
2. First icon: A user silhouette with a lock, labeled 'uid'.
3. Second icon: A calendar page with 'YYYY-MM-DD', labeled 'Date'.
4. Third icon: A gear icon, labeled 'Fixed Config'.
5. Connect each to a document path.		## 意味のあるID（Custom ID）はいつ使う？🧩
301firebase_firestore_struncture_ts_study_003.mdfirebase_firestore_struncture_ts_study_003_04_recommended_ids.png./picture/firebase_firestore_struncture_ts_study_003_04_recommended_ids.pngTheme: Recommended ID Patterns

Labels to Render:
- User: "意味あり (uid)"
- Report: "意味あり (Date)"
- Post: "自動ID (Auto)"
- Comment: "自動ID (Auto)"

Visual Details:
1. Create a 2x2 grid.
2. Top-Left: User icon -> 'uid' (Key icon).
3. Top-Right: Report icon -> 'Date' (Calendar icon).
4. Bottom-Left: Post icon -> 'Auto' (Dice icon).
5. Bottom-Right: Comment icon -> 'Auto' (Dice icon).
6. Use color coding: Blue for Custom/Meaningful, Orange for Auto.		## この教材の題材（User / Report / Post / Comment）でのおすすめID案🧠✨
302firebase_firestore_struncture_ts_study_003.mdfirebase_firestore_struncture_ts_study_003_05_security_rules_match.png./picture/firebase_firestore_struncture_ts_study_003_05_security_rules_match.pngTheme: Security Rules Matching

Labels to Render:
- Request: "request.auth.uid"
- Resource: "resource.id"
- Match: "一致 (Allow)"

Visual Details:
1. Show a lock (Security Rule) checking a key (Request UID) against a door (Resource ID).
2. A green checkmark indicates they match.
3. Simple, abstract representation of authentication matching document ID.		## セキュリティルール（ID設計と相性がいい最小形）🛡️✨
303firebase_firestore_struncture_ts_study_004.mdfirebase_firestore_struncture_ts_study_004_01_subcollection_tree.png./picture/firebase_firestore_struncture_ts_study_004_01_subcollection_tree.pngTheme: Subcollection Tree Structure

Labels to Render:
- Parent: "Post"
- Child: "Comment"
- Path: "posts/{id}/comments/{id}"

Visual Details:
1. Show a document labeled 'Post' at the top.
2. Branching down from it, show a folder labeled 'comments'.
3. Inside the folder, show multiple documents labeled 'Comment 1', 'Comment 2'.
4. Emphasize the hierarchy/nesting.		## 1) まず結論：サブコレがハマる“3つの型”🧠✨
304firebase_firestore_struncture_ts_study_004.mdfirebase_firestore_struncture_ts_study_004_02_top_level_flat.png./picture/firebase_firestore_struncture_ts_study_004_02_top_level_flat.pngTheme: Top-Level Collection Structure

Labels to Render:
- Collection: "Comments"
- Field: "postId: 'abc'"
- Search: "Query"

Visual Details:
1. Show a single large container labeled 'Comments Collection'.
2. Inside, show many documents floating freely.
3. Highlight a field 'postId' inside each document.
4. Show a magnifying glass (Query) selecting documents based on 'postId'.		## 2) 逆に、トップレベルが向く“2つの型”⚖️
305firebase_firestore_struncture_ts_study_004.mdfirebase_firestore_struncture_ts_study_004_03_compare_sub_vs_top.png./picture/firebase_firestore_struncture_ts_study_004_03_compare_sub_vs_top.pngTheme: Subcollection vs Top-Level Comparison

Labels to Render:
- Subcollection: "親子関係 (Parent-Child)"
- Top-Level: "フラット (Flat)"
- Use Case: "Context vs Search"

Visual Details:
1. Split image vertically.
2. Left: A tree structure (Subcollection) with a 'Parent' root.
3. Right: A flat list (Top-Level) with tags/labels connecting items.
4. Use icons to represent 'Context' (Tree) vs 'Search flexibility' (Flat list).		## 3) 今回の題材：コメントは “サブコレ案 vs トップレベル案” どっち？🤔🧩
306firebase_firestore_struncture_ts_study_004.mdfirebase_firestore_struncture_ts_study_004_04_collection_group_query.png./picture/firebase_firestore_struncture_ts_study_004_04_collection_group_query.pngTheme: Collection Group Query

Labels to Render:
- Post A: "Post A"
- Post B: "Post B"
- Query: "Collection Group"
- Target: "Comments"

Visual Details:
1. Show two separate trees (Post A and Post B), each with a 'comments' subcollection.
2. Draw a horizontal dashed line cutting across both 'comments' subcollections.
3. Label the line 'Collection Group Query'.
4. Show that it gathers comments from both parents regardless of hierarchy.		## 4) サブコレでも“横断検索”はできる：コレクショングループ🧩🔎
307firebase_firestore_struncture_ts_study_005.mdfirebase_firestore_struncture_ts_study_005_01_orphan_documents.png./picture/firebase_firestore_struncture_ts_study_005_01_orphan_documents.pngTheme: Orphan Documents

Labels to Render:
- Parent: "Post (Deleted)"
- Child: "Comments (Remaining)"
- Status: "孤児 (Orphan)"

Visual Details:
1. Show a silhouette of a 'Post' document fading away or crossed out.
2. Below it, show 'Comment' documents remaining solid and intact.
3. Use a 'ghost' metaphor or a disconnected link icon to show they are now orphans.
4. Warning color (Orange/Red) for the orphans.		## 落とし穴①：親ドキュメントを消しても、サブコレは消えない😇
308firebase_firestore_struncture_ts_study_005.mdfirebase_firestore_struncture_ts_study_005_02_recursive_delete_fail.png./picture/firebase_firestore_struncture_ts_study_005_02_recursive_delete_fail.pngTheme: Recursive Delete Failure

Labels to Render:
- Process: "Delete All"
- Error: "Timeout / Error"
- Result: "Partial Data"

Visual Details:
1. Show a progress bar stuck at 50%.
2. Show a tree being deleted from top to bottom.
3. The top half is gone, but the bottom half remains.
4. An error icon (Triangle !) interrupts the process.		## 落とし穴②：削除は「一撃で全部」にならない（途中で止まることもある）🫠
309firebase_firestore_struncture_ts_study_005.mdfirebase_firestore_struncture_ts_study_005_03_migration_strategy.png./picture/firebase_firestore_struncture_ts_study_005_03_migration_strategy.pngTheme: Data Migration Strategy

Labels to Render:
- Old: "旧パス"
- New: "新パス"
- Action: "Copy & Switch"

Visual Details:
1. Show two boxes, 'Old' and 'New'.
2. Arrow 1: 'Copy' data from Old to New.
3. Arrow 2: 'Read' requests switching from Old to New (like a railway switch).
4. Arrow 3: 'Delete' Old box after switch.
5. Sequential steps 1->2->3.		## 落とし穴③：移動（＝構造変更）は“コピー＆切替”が基本🚚📦
310firebase_firestore_struncture_ts_study_005.mdfirebase_firestore_struncture_ts_study_005_04_logical_delete.png./picture/firebase_firestore_struncture_ts_study_005_04_logical_delete.pngTheme: Logical Deletion

Labels to Render:
- Document: "Post"
- Field: "isDeleted: true"
- View: "ゴミ箱 (Trash)"

Visual Details:
1. Show a document with a visible stamp or tag reading 'isDeleted: true'.
2. Show a filter (funnel) allowing only 'isDeleted: false' to pass to the user view.
3. The deleted document is diverted to a 'Trash' bin icon.		## 方針1：論理削除（ゴミ箱）🗑️（いちばん事故りにくい）
311firebase_firestore_struncture_ts_study_006.mdfirebase_firestore_struncture_ts_study_006_01_normalization_vs_denorm.png./picture/firebase_firestore_struncture_ts_study_006_01_normalization_vs_denorm.pngTheme: Normalization vs Denormalization

Labels to Render:
- Normalization: "参照 (Reference)"
- Denormalization: "複製 (Copy)"
- Data: "User Info"

Visual Details:
1. Split image.
2. Left (Normalization): A 'Post' doc pointing an arrow to a single 'User' doc.
3. Right (Denormalization): A 'User' doc copying its data (Avatar/Name) directly into the 'Post' doc.
4. Use an icon for 'Copy/Paste'.		## ✅ 正規化 / 非正規化って超ざっくり何？
312firebase_firestore_struncture_ts_study_006.mdfirebase_firestore_struncture_ts_study_006_02_read_optimization.png./picture/firebase_firestore_struncture_ts_study_006_02_read_optimization.pngTheme: Read Optimization

Labels to Render:
- Optimized: "1 Read"
- Slow: "N+1 Reads"
- List: "Post List"

Visual Details:
1. Top (Slow): A list of 5 posts. Each post triggers a separate arrow to fetch 'User' data (many arrows).
2. Bottom (Optimized): A list of 5 posts. No extra arrows needed because data is inside. Label '1 Read'.
3. Show a speed dial or clock indicating 'Fast' vs 'Slow'.		## (A) “小さいドキュメントを大量に”が得意 📄📄📄
313firebase_firestore_struncture_ts_study_006.mdfirebase_firestore_struncture_ts_study_006_03_snapshot_strategy.png./picture/firebase_firestore_struncture_ts_study_006_03_snapshot_strategy.pngTheme: Snapshot Strategy

Labels to Render:
- Action: "Create Post"
- Data: "Current User Info"
- Result: "Snapshot"

Visual Details:
1. Show a camera icon taking a picture of 'User Info'.
2. The 'Photo' (Snapshot) is placed inside the 'Post' document.
3. Show the original 'User Info' changing later, but the 'Photo' in the post remains unchanged (Historical record).		## 方針①：スナップショットで割り切る（おすすめ多め）📸✨
314firebase_firestore_struncture_ts_study_006.mdfirebase_firestore_struncture_ts_study_006_04_sync_update_cost.png./picture/firebase_firestore_struncture_ts_study_006_04_sync_update_cost.pngTheme: Synchronization Cost

Labels to Render:
- Change: "Update Name"
- Target: "All Posts"
- Cost: "High Write Cost"

Visual Details:
1. Show a user changing their name.
2. Show this change propagating to hundreds of 'Post' documents.
3. Use 'explosion' or 'heavy weight' icons to represent the high cost and load.
4. Warning color (Red/Orange).		## 地雷①：複製が増えるほど、更新時のインデックス更新も増える📈
315firebase_firestore_struncture_ts_study_007.mdfirebase_firestore_struncture_ts_study_007_01_string_id_vs_ref_obj.png./picture/firebase_firestore_struncture_ts_study_007_01_string_id_vs_ref_obj.pngTheme: String ID vs DocumentReference

Labels to Render:
- String: "ID文字列 (String)"
- Ref: "参照型 (Reference)"
- Value: "uid_123" vs "path/to/doc"

Visual Details:
1. Left: A tag labeled 'String' containing text "user_123". Simple text representation.
2. Right: A tag labeled 'Reference' containing a pointer/link icon to a folder path "users/user_123".
3. Visually distinguish 'Text' vs 'Object/Pointer'.		## 0) まずは超ざっくり結論🧠💡
316firebase_firestore_struncture_ts_study_007.mdfirebase_firestore_struncture_ts_study_007_02_broken_reference.png./picture/firebase_firestore_struncture_ts_study_007_02_broken_reference.pngTheme: Broken Reference Handling

Labels to Render:
- Link: "Reference"
- Target: "Deleted User"
- UI: "Fallback Display"

Visual Details:
1. Show a link pointing to an empty space (where a User doc used to be).
2. Show the UI handling this gracefully: displaying a generic 'Unknown User' icon instead of crashing.
3. Use a broken chain link icon for the reference.		## 2) 投稿詳細で「作者ドキュメント」を読む（必要なときだけ）👤
317firebase_firestore_struncture_ts_study_007.mdfirebase_firestore_struncture_ts_study_007_03_rules_comparison.png./picture/firebase_firestore_struncture_ts_study_007_03_rules_comparison.pngTheme: Security Rules Comparison

Labels to Render:
- String Match: "== string"
- Path Match: "== path"
- Ease: "Easy" vs "Complex"

Visual Details:
1. Top: 'String Match'. Show request.auth.uid == resource.data.authorId. Simple equation.
2. Bottom: 'Path Match'. Show request.auth.uid converting to a path to match resource.data.authorRef. More steps/complexity.
3. Green check for String Match, slightly more complex diagram for Path Match.		## Rules目線🛡️：authorId がラクな理由（超重要）🔥
318firebase_firestore_struncture_ts_study_008.mdfirebase_firestore_struncture_ts_study_008_01_query_components.png./picture/firebase_firestore_struncture_ts_study_008_01_query_components.pngTheme: Firestore Query Components Diagram

Labels to Render:
- Where: "絞り込み"
- OrderBy: "並び替え"
- Limit: "件数制限"
- Cursor: "開始位置"

Visual Details:
[CRITICAL: Draw a data pipeline metaphor. 1. A raw list of items enters a funnel labeled 'Where'. 2. Inside the funnel, items are sorted by gears labeled 'OrderBy'. 3. At the exit, a gate labeled 'Limit' only lets a few items pass. 4. A bookmark labeled 'Cursor' marks the position for the next batch.]		Firestore公式でも、一覧は orderBy + limit を基本にして組み立てる流れが示されてるよ。([Firebase][1])
319firebase_firestore_struncture_ts_study_008.mdfirebase_firestore_struncture_ts_study_008_02_list_types.png./picture/firebase_firestore_struncture_ts_study_008_02_list_types.pngTheme: Three Types of List Views

Labels to Render:
- Newest: "新着順"
- My Posts: "自分の投稿"
- Popular: "人気順"

Visual Details:
[CRITICAL: Show three smartphone screens side-by-side. 1. 'Newest' screen shows items with timestamps. 2. 'My Posts' screen shows items with a user avatar icon. 3. 'Popular' screen shows items with heart icons and high numbers. Connect them to a central database icon with different query arrows.]		この3つを満たすように、フィールドを逆算しよう💡
320firebase_firestore_struncture_ts_study_008.mdfirebase_firestore_struncture_ts_study_008_03_missing_field_exclusion.png./picture/firebase_firestore_struncture_ts_study_008_03_missing_field_exclusion.pngTheme: Missing Field Exclusion

Labels to Render:
- With Field: "フィールドあり"
- Without Field: "フィールドなし"
- Result: "検索結果"

Visual Details:
[CRITICAL: Draw a filter or sieve. 1. Documents with the 'createdAt' field pass through the sieve and land in the 'Result' bucket. 2. Documents WITHOUT the 'createdAt' field bounce off the sieve and disappear (ghost effect). 3. Use simple geometric shapes for documents.]		（つまり、createdAt が無い記事は一覧に出てこない）([Firebase][1])
321firebase_firestore_struncture_ts_study_008.mdfirebase_firestore_struncture_ts_study_008_04_sort_instability.png./picture/firebase_firestore_struncture_ts_study_008_04_sort_instability.pngTheme: Sort Instability with Same Values

Labels to Render:
- Time 10:00: "10:00"
- Time 10:00: "10:00"
- Sorting: "並び順"
- Unstable: "不安定"

Visual Details:
[CRITICAL: Illustrate two items with the exact same timestamp '10:00'. 1. Show them fighting for the same position in a list. 2. Use a '?' icon or a wobbling effect to show that their order is undefined. 3. Show a pagination arrow skipping one of them due to this confusion.]		Firestore公式のカーソル説明でも、カーソルに使うフィールド値が同じだと期待した挙動にならないことがあるって明言されてるよ。([Firebase][2])
322firebase_firestore_struncture_ts_study_008.mdfirebase_firestore_struncture_ts_study_008_05_snapshot_cursor.png./picture/firebase_firestore_struncture_ts_study_008_05_snapshot_cursor.pngTheme: Snapshot Cursor Concept

Labels to Render:
- Last Doc: "最後のドキュメント"
- Cursor: "カーソル"
- Next Page: "次のページ"

Visual Details:
[CRITICAL: visual metaphor of a relay race. 1. The last document of Page 1 passes itself (as a baton labeled 'Snapshot') to the query of Page 2. 2. The query uses this baton to know exactly where to start. 3. Contrast with a simple number 'Page 2' which is crossed out.]		カーソルは DocumentSnapshot を渡せる（値を手で並べなくていい）([Firebase][2])
323firebase_firestore_struncture_ts_study_008.mdfirebase_firestore_struncture_ts_study_008_06_pagination_errors.png./picture/firebase_firestore_struncture_ts_study_008_06_pagination_errors.pngTheme: Pagination Gap and Duplication

Labels to Render:
- Page 1: "ページ1"
- Page 2: "ページ2"
- Duplicate: "重複"
- Missed: "抜け漏れ"

Visual Details:
[CRITICAL: Show two lists representing Page 1 and Page 2. 1. An item 'Item A' appears at the bottom of Page 1 AND the top of Page 2 (Duplicate). 2. Another item 'Item B' is hidden in the gap between pages (Missed). 3. Use red warning icons to highlight the errors.]		同じ createdAt が続くと、カーソルが曖昧になりやすい⚠️([Firebase][2])
324firebase_firestore_struncture_ts_study_008.mdfirebase_firestore_struncture_ts_study_008_07_ai_log_schema.png./picture/firebase_firestore_struncture_ts_study_008_07_ai_log_schema.pngTheme: AI Log Document Schema

Labels to Render:
- Collection: "aiLogs"
- Fields: "フィールド"
- Model: "モデル名"
- Action: "アクション"

Visual Details:
[CRITICAL: Draw a document schema diagram for 'aiLogs'. 1. Show a box representing a document. 2. List fields inside: 'createdAt', 'userId', 'model', 'action'. 3. Highlight 'model' with a specific value like 'gemini-1.5-pro' to emphasize tracking model versions.]		そのときも第8章の考え方がそのまま効く！
325firebase_firestore_struncture_ts_study_009.mdfirebase_firestore_struncture_ts_study_009_01_hotspot_types.png./picture/firebase_firestore_struncture_ts_study_009_01_hotspot_types.pngTheme: Two Types of Hotspots

Labels to Render:
- Document Hotspot: "ドキュメント集中"
- Collection Hotspot: "コレクション集中"
- Write Limit: "書き込み制限"

Visual Details:
[CRITICAL: Split composition. Left: Many arrows hitting a SINGLE document icon, turning it red hot. Right: Many arrows hitting the END of a list (sequential ID), turning the last item red hot. Use fire icons to represent the hotspot.]		1点集中が起きると待ちが発生しやすいんですね😇 ([Firebase][1])
326firebase_firestore_struncture_ts_study_009.mdfirebase_firestore_struncture_ts_study_009_02_direct_write_bottleneck.png./picture/firebase_firestore_struncture_ts_study_009_02_direct_write_bottleneck.pngTheme: Direct Write Bottleneck

Labels to Render:
- Post: "記事ドキュメント"
- Likes: "いいね数"
- Users: "ユーザー"
- Traffic Jam: "渋滞"

Visual Details:
[CRITICAL: Draw a central document labeled 'Post' with a 'likesCount' field. Show hundreds of user icons trying to send '+1' updates to it simultaneously. Visualize the inputs clogging up a narrow funnel neck, causing a delay/jam.]		「見た目ラク」なんだけど、人気記事ほど1点集中で詰まりがち😇
327firebase_firestore_struncture_ts_study_009.mdfirebase_firestore_struncture_ts_study_009_03_subcollection_likes.png./picture/firebase_firestore_struncture_ts_study_009_03_subcollection_likes.pngTheme: Subcollection Strategy for Likes

Labels to Render:
- Parent: "親投稿"
- Subcollection: "いいねサブコレ"
- User Docs: "ユーザーごとのドキュメント"

Visual Details:
[CRITICAL: Show a parent document 'Post'. Connected below it is a collection labeled 'likes'. Inside, show many separate small documents, each labeled with a User ID. Show arrows updating these small documents smoothly in parallel, avoiding the bottleneck.]		* ✅ posts/{postId}/likes/{uid} に保存（ユーザーごとに別ドキュメント）
328firebase_firestore_struncture_ts_study_009.mdfirebase_firestore_struncture_ts_study_009_04_sharded_counter.png./picture/firebase_firestore_struncture_ts_study_009_04_sharded_counter.pngTheme: Sharded Counter Concept

Labels to Render:
- Counter: "カウンタ"
- Shards: "シャード (分割)"
- Random: "ランダム振り分け"

Visual Details:
[CRITICAL: Draw a 'Counter' entity split into 10 smaller blocks (Shards). Show incoming update arrows being randomly distributed to different blocks (Shard 1, Shard 5, etc.). Show that no single block is getting all the heat.]		分散カウンタは、シャード数に応じてスループットが伸びます。 ([Firebase][4])
329firebase_firestore_struncture_ts_study_009.mdfirebase_firestore_struncture_ts_study_009_05_ai_log_strategy.png./picture/firebase_firestore_struncture_ts_study_009_05_ai_log_strategy.pngTheme: AI Log Hotspot vs Append-only

Labels to Render:
- Bad: "集計ドキュメント"
- Good: "追記型ログ"
- Sequential: "連番"
- Random ID: "ランダムID"

Visual Details:
[CRITICAL: Compare two approaches. Left (Bad): Updates hitting a single 'Stats' document (Hotspot). Right (Good): New documents being added to a 'Logs' collection with Random IDs, spreading the load evenly. Use green checkmark for Right and red X for Left.]		❌ aiStats/today に毎回 increment（集中しがち）
330firebase_firestore_struncture_ts_study_010.mdfirebase_firestore_struncture_ts_study_010_01_aggregation_balance.png./picture/firebase_firestore_struncture_ts_study_010_01_aggregation_balance.pngTheme: Aggregation Strategy Balance

Labels to Render:
- Read-time: "読み取り時集計"
- Write-time: "書き込み時集計"
- Cost: "コスト"
- Speed: "速度"

Visual Details:
[CRITICAL: Draw a balance scale. Left pan: 'Aggregation Query' (Lightweight storage, Compute on read). Right pan: 'Stored Counter' (Heavy storage, Instant read). Show them balancing each other out.]		この判断ができるようになると、Firestore設計が一気にプロっぽくなります😎🔥
331firebase_firestore_struncture_ts_study_010.mdfirebase_firestore_struncture_ts_study_010_02_aggregation_limits.png./picture/firebase_firestore_struncture_ts_study_010_02_aggregation_limits.pngTheme: Aggregation Query Limitations

Labels to Render:
- Realtime: "リアルタイム"
- Offline: "オフライン"
- Timeout: "タイムアウト"

Visual Details:
[CRITICAL: Use standard warning/prohibition signs. 1. A 'Realtime' symbol (lightning/wave) with a red slash (Prohibited). 2. An 'Offline' symbol (disconnected plug) with a red slash. 3. A stopwatch stopped at 60s with a warning triangle.]		ただし リアルタイム購読（onSnapshot）では使えない / オフラインキャッシュでも使えない / 大きすぎると60秒でタイムアウト など制約あり⚠️ ([Firebase][1])
332firebase_firestore_struncture_ts_study_010.mdfirebase_firestore_struncture_ts_study_010_03_n_plus_one_count.png./picture/firebase_firestore_struncture_ts_study_010_03_n_plus_one_count.pngTheme: N+1 Query Problem

Labels to Render:
- List: "一覧画面"
- Queries: "問い合わせ"
- Slow: "遅い"

Visual Details:
[CRITICAL: Show a list of 20 items. From EACH item, draw a magnifying glass (query) arrow going to the database. Show the database looking overwhelmed by 20 separate requests. Label the arrow cluster '20 Reads'.]		投稿が20件出る画面で、各投稿に count() を打つと 20回問い合わせになりがち💥
333firebase_firestore_struncture_ts_study_010.mdfirebase_firestore_struncture_ts_study_010_04_sharded_counter_detail.png./picture/firebase_firestore_struncture_ts_study_010_04_sharded_counter_detail.pngTheme: Sharded Counter Structure Detail

Labels to Render:
- Post: "記事"
- Shards: "シャード(10個)"
- Sum: "合計"
- Total: "総数"

Visual Details:
[CRITICAL: Show the hierarchical structure. Parent 'Post' -> Subcollection 'Shards' -> 10 Documents (0-9). Show a 'Summation' process reading all 10 documents and combining them into a 'Total' value displayed to the user.]		分散カウンタは「shards をサブコレに持って合計で数を作る」公式パターンです。シャード数に比例して書き込み性能が伸びます。([Firebase][2])
334firebase_firestore_struncture_ts_study_010.mdfirebase_firestore_struncture_ts_study_010_05_aggregation_flowchart.png./picture/firebase_firestore_struncture_ts_study_010_05_aggregation_flowchart.pngTheme: Aggregation Strategy Flowchart

Labels to Render:
- Start: "開始"
- List View?: "一覧で必要？"
- Realtime?: "リアルタイム？"
- Save: "保存方式(B)"
- Query: "その場集計(A)"

Visual Details:
[CRITICAL: Draw a simple decision tree. Start -> Question 'List View?'. Yes -> 'Save'. No -> Question 'Realtime?'. Yes -> 'Save'. No -> 'Query'. Use clear arrows and diamond shapes for questions.]		次を A/B/C で分類してみてください👇
335firebase_firestore_struncture_ts_study_011.mdfirebase_firestore_struncture_ts_study_011_01_aggregation_functions.png./picture/firebase_firestore_struncture_ts_study_011_01_aggregation_functions.pngTheme: Three Aggregation Functions

Labels to Render:
- Count: "件数 (Count)"
- Sum: "合計 (Sum)"
- Average: "平均 (Average)"

Visual Details:
[CRITICAL: Three distinct icons. 1. Count: A hand counting items or a tally mark. 2. Sum: A stack of coins or blocks growing tall. 3. Average: A balance scale leveling out unequal stacks. Use simple, flat geometric style.]		「集計をサーバー側で計算して、結果だけ返す」 ので、転送量も読み取りコストも節約しやすい、ということです📉✨ ([Firebase][1])
336firebase_firestore_struncture_ts_study_011.mdfirebase_firestore_struncture_ts_study_011_02_no_realtime_stream.png./picture/firebase_firestore_struncture_ts_study_011_02_no_realtime_stream.pngTheme: No Realtime for Aggregation

Labels to Render:
- Stream: "ストリーム"
- Aggregation: "集計"
- Blocked: "不可"

Visual Details:
[CRITICAL: Show a pipe labeled 'Realtime Stream' trying to connect to a box labeled 'Aggregation'. Show a barrier or a 'Stop' sign preventing the connection. Contrast with a 'One-time Request' arrow which connects successfully.]		リアルタイムに数字が動いてほしいなら、次章の「書き込み時集計（Write-time）」系（分散カウンタ等）に寄せます💡 ([Firebase][2])
337firebase_firestore_struncture_ts_study_011.mdfirebase_firestore_struncture_ts_study_011_03_data_type_filtering.png./picture/firebase_firestore_struncture_ts_study_011_03_data_type_filtering.pngTheme: Data Type Filtering

Labels to Render:
- Input: "入力データ"
- Sum: "合計計算"
- Ignored: "無視"

Visual Details:
[CRITICAL: Draw a conveyor belt feeding items into a machine labeled 'Sum'. Numeric items (5, 10) enter the machine. Non-numeric items (Text 'ABC', Null) fall off the belt into a bin labeled 'Ignored'.]		対策は簡単で、集計したいフィールドは必ず数値で入れる（初期値0） に寄せるのが安全です✅ ([Firebase][3])
338firebase_firestore_struncture_ts_study_011.mdfirebase_firestore_struncture_ts_study_011_04_billing_meter.png./picture/firebase_firestore_struncture_ts_study_011_04_billing_meter.pngTheme: Aggregation Billing Concept

Labels to Render:
- Scanned: "読み取り数"
- Cost: "課金"
- 1 Read: "1 Read分"

Visual Details:
[CRITICAL: Draw a meter or gauge. Mark the scale. Show that '1000 items scanned' equals '1 Read Unit'. Show '12000 items scanned' equals '12 Read Units'. Emphasize that it's based on index entries, not document size.]		「全部ドキュメントを読むより、かなり軽くなりやすい」方向性ですね✨ ([Firebase][4])
339firebase_firestore_struncture_ts_study_011.mdfirebase_firestore_struncture_ts_study_011_05_multi_aggregation_request.png./picture/firebase_firestore_struncture_ts_study_011_05_multi_aggregation_request.pngTheme: Single Request Multiple Aggregations

Labels to Render:
- Request: "リクエスト"
- Response: "レスポンス"
- Count/Sum/Avg: "Count/Sum/Avg"

Visual Details:
[CRITICAL: Draw a single rocket or packet traveling from Client to Server. Inside the packet, show three slots filled with 'Count', 'Sum', and 'Avg'. Show the return packet containing all three results in one go.]		getAggregateFromServer() に { 名前: sum("field") } みたいに渡すのが基本形です✨ ([Firebase][1])
340firebase_firestore_struncture_ts_study_012.mdfirebase_firestore_struncture_ts_study_012_01_bottleneck_funnel.png./picture/firebase_firestore_struncture_ts_study_012_01_bottleneck_funnel.pngTheme: Write Bottleneck Funnel

Labels to Render:
- Traffic: "アクセス集中"
- Document: "ドキュメント"
- Error: "エラー"

Visual Details:
[CRITICAL: Draw a funnel. The wide top is labeled 'Traffic'. The narrow neck is labeled 'Single Document'. Show items jamming at the neck, unable to pass through. Show 'Error' sparks flying out from the jam.]		さらに、限界を超えると RESOURCE_EXHAUSTED みたいなエラー（クォータ/書き込みランプアップ制限など）が出ることがあります😵‍💫([Google Cloud Documentation][2])
341firebase_firestore_struncture_ts_study_012.mdfirebase_firestore_struncture_ts_study_012_02_shard_shattering.png./picture/firebase_firestore_struncture_ts_study_012_02_shard_shattering.pngTheme: Sharding Concept

Labels to Render:
- Single: "単一"
- Sharded: "分散"
- Durability: "耐性アップ"

Visual Details:
[CRITICAL: Before/After comparison. Before: A single large block labeled 'Single' cracking under weight. After: The same block shattered into 10 smaller, strong blocks labeled 'Shards', easily supporting the weight.]		公式ドキュメントでも「shard数に比例して書き込み耐性が増える」ことが説明されています([Firebase][3])
342firebase_firestore_struncture_ts_study_012.mdfirebase_firestore_struncture_ts_study_012_03_roulette_selection.png./picture/firebase_firestore_struncture_ts_study_012_03_roulette_selection.pngTheme: Random Shard Selection

Labels to Render:
- Random: "ランダム選択"
- Shards: "シャード 0-9"
- Write: "書き込み"

Visual Details:
[CRITICAL: Draw a roulette wheel or a lottery wheel with 10 slots numbered 0-9. A ball labeled 'Write' falls into one of the slots (e.g., 7). Show that the selection is random and unbiased.]		// increment() は衝突に強い原子的更新（同時押しでもズレにくい）
343firebase_firestore_struncture_ts_study_012.mdfirebase_firestore_struncture_ts_study_012_04_read_cost_effort.png./picture/firebase_firestore_struncture_ts_study_012_04_read_cost_effort.pngTheme: Read Cost Trade-off

Labels to Render:
- Reading: "読み取り"
- Cost: "コスト増"
- Collection: "収集"

Visual Details:
[CRITICAL: Draw a character acting as the 'Reader'. They are running around collecting data from 10 different locations (Shards). Show sweat drops to indicate the effort (Cost). Contrast with reading a single document which is effortless.]		return total;
344firebase_firestore_struncture_ts_study_012.mdfirebase_firestore_struncture_ts_study_012_05_tamper_prevention.png./picture/firebase_firestore_struncture_ts_study_012_05_tamper_prevention.pngTheme: Client-side Tamper Prevention

Labels to Render:
- Client: "クライアント"
- Server: "サーバー"
- Direct: "直接更新 (危険)"
- Trigger: "トリガー (安全)"

Visual Details:
[CRITICAL: Split view. Top (Bad): Client directly updating the counter (Red X). Bottom (Good): Client creating a 'Like' document, and the Server (Cloud Function) seeing it and updating the counter (Green Check).]		→ これで「ズル」と「衝突」を両方ケアできます🛡️✨
345firebase_firestore_struncture_ts_study_013.mdfirebase_firestore_struncture_ts_study_013_01_ranking_keys.png./picture/firebase_firestore_struncture_ts_study_013_01_ranking_keys.pngTheme: Ranking Data Structure

Labels to Render:
- Key 1: "likesCount"
- Key 2: "commentsCount"
- Key 3: "score"
- Key 4: "hotScore"

Visual Details:
[CRITICAL: Show a document labeled 'Post' with 4 distinct slots/tags attached to it. Each slot represents a ranking key. Use icons: Thumbs up (likes), Bubble (comments), Star (score), Fire (hotScore).]		### ✅ ルール1：Firestoreでランキングするなら「並べ替えできる数値フィールド」が必要
346firebase_firestore_struncture_ts_study_013.mdfirebase_firestore_struncture_ts_study_013_02_tie_break.png./picture/firebase_firestore_struncture_ts_study_013_02_tie_break.pngTheme: Tie Break Concept

Labels to Render:
- Rank 1: "Score: 100"
- Rank 1: "Score: 100"
- Tie Break: "createdAt (Desc)"
- Result: "Stable Order"

Visual Details:
[CRITICAL: Show two runners crossing the finish line at the same time (Score 100). A referee (Tie Break) looks at a stopwatch (createdAt) to decide who is really first. Show them being placed in a stable 1st and 2nd position.]		### ✅ ルール2：同点が出るので“タイブレーク（第2キー）”を必ず用意する
347firebase_firestore_struncture_ts_study_013.mdfirebase_firestore_struncture_ts_study_013_03_missing_field.png./picture/firebase_firestore_struncture_ts_study_013_03_missing_field.pngTheme: Missing Field Trap

Labels to Render:
- Doc A: "{ score: 10 }"
- Doc B: "{ no field }"
- Query: "orderBy(score)"
- Result: "Doc A Only"

Visual Details:
[CRITICAL: Show a sieve or filter labeled 'orderBy(score)'. Doc A passes through because it has a 'score' tag. Doc B hits the sieve and bounces off/disappears because it lacks the tag. Use a ghost effect for Doc B.]		### ✅ ルール3： したいフィールドが無いドキュメントは “結果から消える”
348firebase_firestore_struncture_ts_study_013.mdfirebase_firestore_struncture_ts_study_013_04_ranking_patterns.png./picture/firebase_firestore_struncture_ts_study_013_04_ranking_patterns.pngTheme: Ranking Implementation Patterns

Labels to Render:
- Pattern A: "Direct (Simple)"
- Pattern B: "Collection (Clean)"
- Pattern C: "Single Doc (Fast/Risk)"

Visual Details:
[CRITICAL: Show 3 distinct structures. A: A simple list of posts. B: A separate 'Rankings' folder pointing to posts. C: A single document packed with a list of top 10 items. Use icons to represent Simple (Smiley), Clean (Sparkle), and Fast/Risk (Lightning/Warning).]		## 2) 3つのランキング実装パターン（どれを選ぶ？）🤔
349firebase_firestore_struncture_ts_study_013.mdfirebase_firestore_struncture_ts_study_013_05_hot_score.png./picture/firebase_firestore_struncture_ts_study_013_05_hot_score.pngTheme: Hot Score Formula

Labels to Render:
- Input: "Likes + Comments"
- Factor: "Time Decay"
- Output: "Hot Score"
- Graph: "Score drops over time"

Visual Details:
[CRITICAL: Show a formula or process. Raw score (Likes/Comments) goes into a machine. A clock (Time) acts as a weight pressing down. The output is a 'Hot Score'. Include a small graph showing a curve going down over time.]		## 6) トレンド（hotScore）設計：時間減衰を入れる🔥⏳
350firebase_firestore_struncture_ts_study_013.mdfirebase_firestore_struncture_ts_study_013_06_distributed_counter.png./picture/firebase_firestore_struncture_ts_study_013_06_distributed_counter.pngTheme: Distributed Counter Shards

Labels to Render:
- Post: "Post"
- Shards: "Like Shards (0-9)"
- Updates: "Random Distribution"

Visual Details:
[CRITICAL: Show a 'Post' document connected to a subcollection of 10 'Shard' documents. Show incoming 'Like' arrows being randomly distributed among the 10 shards, preventing a jam at any single point.]		## 5) 伸びた時の強化：分散カウンタ（シャーディング）🧱🔥
351firebase_firestore_struncture_ts_study_013.mdfirebase_firestore_struncture_ts_study_013_07_ai_quality.png./picture/firebase_firestore_struncture_ts_study_013_07_ai_quality.pngTheme: AI Quality Analysis

Labels to Render:
- Input: "Post Text"
- AI: "Analyze"
- Criteria: "Readability / Safety"
- Output: "Quality Score"

Visual Details:
[CRITICAL: Show a robot reading a document (Post). The robot has a checklist (Readability, Safety). It stamps a 'Quality Score' (e.g., A+ or 0.9) on the document.]		## 8) AIを絡める：ランキングを“賢く”する🤖✨
352firebase_firestore_struncture_ts_study_014.mdfirebase_firestore_struncture_ts_study_014_01_index_types.png./picture/firebase_firestore_struncture_ts_study_014_01_index_types.pngTheme: Single vs Composite Indexes

Labels to Render:
- Single: "Single Field"
- Composite: "Multiple Fields"
- Use Case: "Simple Sort vs Complex Filter"

Visual Details:
[CRITICAL: Split view. Left: A single book sorted by Title (Single Index). Right: A library catalog card sorting by Genre AND Author (Composite Index).]		## 2) インデックスは2種類だけ覚えればOK✅
353firebase_firestore_struncture_ts_study_014.mdfirebase_firestore_struncture_ts_study_014_02_cost_balance.png./picture/firebase_firestore_struncture_ts_study_014_02_cost_balance.pngTheme: Performance vs Cost Balance

Labels to Render:
- Speed: "Read Speed 🚀"
- Cost: "Storage/Write 💰"
- Balance: "Trade-off"

Visual Details:
[CRITICAL: A balance scale. On one side, a rocket (Speed) goes up. On the other side, a heavy bag of gold (Cost) pulls down. Show the trade-off relationship.]		## 3) 何が速くなる？何が増える？（ここが設計の勘どころ）⚖️💰
354firebase_firestore_struncture_ts_study_014.mdfirebase_firestore_struncture_ts_study_014_03_query_decomposition.png./picture/firebase_firestore_struncture_ts_study_014_03_query_decomposition.pngTheme: Query Anatomy

Labels to Render:
- Filter: "where (Screening)"
- Sort: "orderBy (Sorting)"
- Limit: "limit (Cutting)"

Visual Details:
[CRITICAL: A diagram showing a raw query string being split into three distinct blocks: Filter block, Sort block, and Limit block. Use icons: Funnel, Sort icon, Scissors.]		## ステップ①：クエリを3行で分解🧩
355firebase_firestore_struncture_ts_study_014.mdfirebase_firestore_struncture_ts_study_014_04_array_trap.png./picture/firebase_firestore_struncture_ts_study_014_04_array_trap.pngTheme: Array Contains Trap

Labels to Render:
- Query: "tags contains A AND B"
- Trap: "Max 1 Array Field"
- Result: "Error 💥"

Visual Details:
[CRITICAL: A robot trying to juggle two balls labeled 'Array Field 1' and 'Array Field 2'. The robot drops them and malfunctions (Error). Show a warning sign 'Max 1 Array in Composite'.]		## 5) 配列系（）の“ありがち事故”💥➡️✅
356firebase_firestore_struncture_ts_study_014.mdfirebase_firestore_struncture_ts_study_014_05_collection_group.png./picture/firebase_firestore_struncture_ts_study_014_05_collection_group.pngTheme: Collection Group Index

Labels to Render:
- Parents: "Post A, Post B"
- Subs: "Comments"
- Scope: "Collection Group"

Visual Details:
[CRITICAL: Show multiple 'Post' folders, each containing 'Comment' files. A search beam (Collection Group Query) cuts across all folders to find 'Comments' regardless of the parent Post.]		## 6) コレクション vs コレクショングループ（サブコレ絡みの注意）🧩
357firebase_firestore_struncture_ts_study_014.mdfirebase_firestore_struncture_ts_study_014_06_ai_review.png./picture/firebase_firestore_struncture_ts_study_014_06_ai_review.pngTheme: AI Index Reviewer

Labels to Render:
- Input: "Query List"
- AI: "Gemini CLI"
- Output: "indexes.json"

Visual Details:
[CRITICAL: A developer handing a list of queries to a robot (Gemini). The robot scans them and prints out a perfect 'firestore.indexes.json' file.]		## 9) AIで“インデックス抜け”を最短レビュー🤖⚡
358firebase_firestore_struncture_ts_study_014.mdfirebase_firestore_struncture_ts_study_014_07_decision_flow.png./picture/firebase_firestore_struncture_ts_study_014_07_decision_flow.pngTheme: Index Decision Flowchart

Labels to Render:
- Start: "Query"
- Check 1: "Multiple Fields?"
- No: "Single Index"
- Yes: "Composite Index"

Visual Details:
[CRITICAL: A simple flowchart. Start at Query. Decision diamond: 'Multiple filters/sorts?'. No path leads to 'Single Index (Auto)'. Yes path leads to 'Composite Index (Manual)'.]		## ステップ②：ざっくり判定ルール（最初はこれでOK）✅
359firebase_firestore_struncture_ts_study_015.mdfirebase_firestore_struncture_ts_study_015_01_error_workflow.png./picture/firebase_firestore_struncture_ts_study_015_01_error_workflow.pngTheme: Index Error Workflow

Labels to Render:
- Step 1: "Error Log"
- Step 2: "Click Link"
- Step 3: "Create Index"
- Result: "Success"

Visual Details:
[CRITICAL: A cycle diagram. 1. A terminal showing red text (Error). 2. A mouse clicking a blue link. 3. A console button 'Create'. 4. A green checkmark (Success).]		## ✅ エラーが出たら勝ち（チャンス）🎯
360firebase_firestore_struncture_ts_study_015.mdfirebase_firestore_struncture_ts_study_015_02_console_ui.png./picture/firebase_firestore_struncture_ts_study_015_02_console_ui.pngTheme: Create Index Dialog

Labels to Render:
- Title: "Create composite index"
- Fields: "authorId (Asc) + createdAt (Desc)"
- Button: "Create"

Visual Details:
[CRITICAL: A simplified UI mockup of the Firebase Console dialog. Show the pre-filled fields (authorId, createdAt) and the highlighted 'Create' button.]		## ステップC：リンクを開いて Create を押す🛠️✨
361firebase_firestore_struncture_ts_study_015.mdfirebase_firestore_struncture_ts_study_015_03_emulator_warning.png./picture/firebase_firestore_struncture_ts_study_015_03_emulator_warning.pngTheme: Emulator vs Production

Labels to Render:
- Emulator: "No Error (Silent)"
- Production: "Error (Missing Index)"
- Warning: "Test on Prod"

Visual Details:
[CRITICAL: Split view. Left: Emulator icon (Shield) letting a query pass silently. Right: Cloud icon (Production) blocking the same query with a red stop sign (Missing Index).]		## ✅ 超重要注意：エミュレータだと“エラーが出ない”ことがある⚠️
362firebase_firestore_struncture_ts_study_015.mdfirebase_firestore_struncture_ts_study_015_04_indexes_file.png./picture/firebase_firestore_struncture_ts_study_015_04_indexes_file.pngTheme: Indexes File Management

Labels to Render:
- Console: "Cloud Config"
- Command: "firebase firestore:indexes"
- File: "firestore.indexes.json"

Visual Details:
[CRITICAL: Data flow. Cloud icon (Console) -> Arrow (Command) -> File icon (JSON). Show the configuration flowing from the cloud to the local file.]		## ✅ ① コンソールで作ったら、ファイルにも反映する（チーム用）👥
363firebase_firestore_struncture_ts_study_015.mdfirebase_firestore_struncture_ts_study_015_05_deploy_flow.png./picture/firebase_firestore_struncture_ts_study_015_05_deploy_flow.pngTheme: Index Deploy Flow

Labels to Render:
- Local: "indexes.json"
- Command: "firebase deploy"
- Cloud: "Update Indexes"

Visual Details:
[CRITICAL: The reverse flow of the previous image. File icon (JSON) -> Arrow (Deploy) -> Cloud icon. Show the local config updating the cloud.]		## 3) デプロイ
364firebase_firestore_struncture_ts_study_015.mdfirebase_firestore_struncture_ts_study_015_06_ai_assistance.png./picture/firebase_firestore_struncture_ts_study_015_06_ai_assistance.pngTheme: AI Index Helper

Labels to Render:
- Input: "Error Message"
- AI: "Gemini CLI"
- Output: "JSON Snippet"

Visual Details:
[CRITICAL: A developer pasting an error message into a terminal. The AI (Gemini) responds with the exact JSON block needed for 'firestore.indexes.json'.]		## 5) AIで“インデックス対応”を爆速にする🤖⚡（Antigravity / Gemini CLI / Firebase AI Logic）
365firebase_firestore_struncture_ts_study_015.mdfirebase_firestore_struncture_ts_study_015_07_building_wait.png./picture/firebase_firestore_struncture_ts_study_015_07_building_wait.pngTheme: Index Building State

Labels to Render:
- State: "Building..."
- Icon: "Construction"
- Time: "Few Minutes"
- Action: "Wait"

Visual Details:
[CRITICAL: A construction site with a "Work in Progress" sign. A clock ticks in the background. Emphasize that it takes time.]		## 落とし穴②：インデックスが増えすぎる（上限や作成失敗）📈💥
366firebase_firestore_struncture_ts_study_016.mdfirebase_firestore_struncture_ts_study_016_01_missing_field_exclusion.png./picture/firebase_firestore_struncture_ts_study_016_01_missing_field_exclusion.pngTheme: Missing Field Exclusion

Labels to Render:
- With Field: "フィールドあり"
- Without Field: "フィールドなし"
- Result: "検索結果"

Visual Details:
[CRITICAL: Draw a filter or sieve. 1. Documents with the 'createdAt' field pass through the sieve and land in the 'Result' bucket. 2. Documents WITHOUT the 'createdAt' field bounce off the sieve and disappear (ghost effect). 3. Use simple geometric shapes for documents.]		## 1) まず読む：
367firebase_firestore_struncture_ts_study_016.mdfirebase_firestore_struncture_ts_study_016_02_stable_sort.png./picture/firebase_firestore_struncture_ts_study_016_02_stable_sort.pngTheme: Sort Instability with Same Values

Labels to Render:
- Time 10:00: "10:00"
- Time 10:00: "10:00"
- Sorting: "並び順"
- Unstable: "不安定"

Visual Details:
[CRITICAL: Illustrate two items with the exact same timestamp '10:00'. 1. Show them fighting for the same position in a list. 2. Use a '?' icon or a wobbling effect to show that their order is undefined. 3. Show a pagination arrow skipping one of them due to this confusion.]		## パターンC：同点が出て順番がフワる🌀
368firebase_firestore_struncture_ts_study_016.mdfirebase_firestore_struncture_ts_study_016_03_experiment_result.png./picture/firebase_firestore_struncture_ts_study_016_03_experiment_result.pngTheme: orderBy Experiment Result

Labels to Render:
- No Sort: "100 Docs (All)"
- Sort by Date: "10 Docs (Date only)"
- Difference: "90 Docs Lost!"

Visual Details:
[CRITICAL: A bar chart comparison. Left bar is tall (100). Right bar is short (10). An arrow points to the missing chunk labeled 'Lost Data (No Field)'.]		## 3-2.
369firebase_firestore_struncture_ts_study_016.mdfirebase_firestore_struncture_ts_study_016_04_standard_create.png./picture/firebase_firestore_struncture_ts_study_016_04_standard_create.pngTheme: Standardized Create Function

Labels to Render:
- Input: "Title/Body"
- Function: "createPost()"
- Auto-Add: "+ createdAt"
- DB: "Safe Doc"

Visual Details:
[CRITICAL: A conveyor belt process. Raw input enters a machine labeled 'createPost()'. The machine stamps 'createdAt' onto the item before placing it in the 'Database' box.]		## 解決策②：作成時に “自動で埋める” を標準化する🛠️
370firebase_firestore_struncture_ts_study_016.mdfirebase_firestore_struncture_ts_study_016_05_backfill_strategy.png./picture/firebase_firestore_struncture_ts_study_016_05_backfill_strategy.pngTheme: Data Backfill Strategy

Labels to Render:
- Old Doc: "No Date"
- Script: "Backfill"
- Action: "Update"
- New Doc: "Has Date"

Visual Details:
[CRITICAL: A repair crew (Script) fixing broken documents. They take a document missing a date, stamp a 'Default Date' on it, and place it back in the shelf.]		## 6) 既に欠けてるデータはどうする？（埋め戻し戦略）🩹🧹
371firebase_firestore_struncture_ts_study_016.mdfirebase_firestore_struncture_ts_study_016_06_ai_review.png./picture/firebase_firestore_struncture_ts_study_016_06_ai_review.pngTheme: AI Schema Review

Labels to Render:
- Schema: "User Schema"
- AI: "Review"
- Alert: "Missing createdAt!"
- Fix: "Add Field"

Visual Details:
[CRITICAL: An AI avatar reviewing a blueprint (Schema). It highlights a missing section with a red marker and suggests adding 'createdAt'.]		## 7-1. “設計レビュー” をAIに投げる（Firebase AI Logic）🧠
372firebase_firestore_struncture_ts_study_016.mdfirebase_firestore_struncture_ts_study_016_07_genkit_log.png./picture/firebase_firestore_struncture_ts_study_016_07_genkit_log.pngTheme: Genkit Audit Log

Labels to Render:
- Event: "AI Action"
- Log: "aiLogs"
- Fields: "createdAt, model, hash"
- Usage: "Audit/Cost"

Visual Details:
[CRITICAL: A logbook recording AI actions. Highlight the columns: Timestamp (createdAt), Model Name, and Content Hash. Show a magnifying glass (Audit) examining the log.]		## 7-4. Genkit で “AI処理→保存” を作る時こそ createdAt 必須🧾🤖
373firebase_firestore_struncture_ts_study_017.mdfirebase_firestore_struncture_ts_study_017_01_multi_range_query.png./picture/firebase_firestore_struncture_ts_study_017_01_multi_range_query.pngTheme: Multiple Range Query Concept

Labels to Render:
- Salary: "> 50k"
- Experience: "> 5 years"
- Query: "Both Ranges"
- Result: "Filtered Candidates"

Visual Details:
[CRITICAL: A Venn diagram or overlapping filter metaphor. Filter 1 (Salary > 50k) and Filter 2 (Experience > 5 years) overlap to produce the 'Result'. Emphasize that both are RANGE filters.]		## 2) 2026の激アツ変更：複数フィールドで範囲ができるようになった🔥
374firebase_firestore_struncture_ts_study_017.mdfirebase_firestore_struncture_ts_study_017_02_orderby_cost.png./picture/firebase_firestore_struncture_ts_study_017_02_orderby_cost.pngTheme: OrderBy Cost Optimization

Labels to Render:
- Good Order: "Filter Strongest First (Low Cost)"
- Bad Order: "Filter Weakest First (High Cost)"
- Metric: "Scanned Documents"

Visual Details:
[CRITICAL: Comparison of two funnels. Good: A narrow funnel (Strong Filter) first, leading to few items. Bad: A wide funnel (Weak Filter) first, letting many items through to the next stage, costing more.]		## 3) ただし重要： の順番が “コスト” を左右する💸
375firebase_firestore_struncture_ts_study_017.mdfirebase_firestore_struncture_ts_study_017_03_constraint_map.png./picture/firebase_firestore_struncture_ts_study_017_03_constraint_map.pngTheme: Query Constraint Map

Labels to Render:
- not-in: "not-in"
- not-equal: "!="
- Link: "Cannot Combine ❌"
- OR: "OR (Max 30)"

Visual Details:
[CRITICAL: A network of constraint nodes. Draw a red line between 'not-in' and '!=' with a cross mark. Show 'OR' branching into exactly 30 paths.]		## 4) “複数範囲” とは別に、昔からの制約も普通に残ってる⚠️
376firebase_firestore_struncture_ts_study_017.mdfirebase_firestore_struncture_ts_study_017_04_filter_classification.png./picture/firebase_firestore_struncture_ts_study_017_04_filter_classification.pngTheme: Filter Types Classification

Labels to Render:
- Bin 1: "Equivalence (==)"
- Bin 2: "Range (> < !=)"
- Bin 3: "OR / IN"
- Action: "Sorting Filters"

Visual Details:
[CRITICAL: A sorting station. Filters like '==', '>=', 'in' are being sorted into three distinct bins labeled Equivalence, Range, and OR.]		## ステップ2：分類する（これができると勝ち🏆）
377firebase_firestore_struncture_ts_study_017.mdfirebase_firestore_struncture_ts_study_017_05_query_execution.png./picture/firebase_firestore_struncture_ts_study_017_05_query_execution.pngTheme: Multi-Range Query Structure

Labels to Render:
- Part 1: "where(range)"
- Part 2: "orderBy(range field)"
- Link: "Required"
- Result: "Valid Query"

Visual Details:
[CRITICAL: A puzzle. The 'where(range)' piece has a specific connector that ONLY fits with the 'orderBy(range field)' piece. Showing they must be paired.]		## ステップ3：複数範囲クエリを “正しい型” で書く✍️（TypeScript）
378firebase_firestore_struncture_ts_study_017.mdfirebase_firestore_struncture_ts_study_017_06_query_explain.png./picture/firebase_firestore_struncture_ts_study_017_06_query_explain.pngTheme: Query Explain Tool

Labels to Render:
- Tool: "Query Explain"
- Output: "Index Used / Scanned Docs"
- Action: "Optimize"

Visual Details:
[CRITICAL: A diagnostic screen. It shows a query's "Health Report": which index was hit and how many docs were scanned. A mechanic (Developer) is tuning the query based on this.]		## ステップ4：インデックス最適化の考え方（地味に差が出る）🧠⚙️
379firebase_firestore_struncture_ts_study_017.mdfirebase_firestore_struncture_ts_study_017_07_ai_validator.png./picture/firebase_firestore_struncture_ts_study_017_07_ai_validator.pngTheme: AI Query Validator

Labels to Render:
- Input: "Proposed Query"
- AI: "Check Rules"
- Output: "Allowed / Denied"

Visual Details:
[CRITICAL: An AI gatekeeper. A developer proposes a complex query string. The AI checks it against a rulebook (Firestore Constraints) and gives a Thumbs Up or Thumbs Down.]		## AIで設計レビュー＆実装を爆速にする🤖⚡
380docs/firebase_firestore_struncture_ts_study_018.mdfirebase_firestore_struncture_ts_study_018_01_offset_vs_cursor.png./picture/firebase_firestore_struncture_ts_study_018_01_offset_vs_cursor.pngTheme: Offset vs Cursor Cost

Labels to Render:
- Offset: "Read Skipped (Cost $$$)"
- Cursor: "Jump (Cost ¢)"
- Comparison: "Inefficient vs Efficient"

Visual Details:
1. Core Concept: Visualizing the hidden cost of offset paging.
2. Metaphor: A toll road. Offset pays for every car it skips. Cursor teleports to the start line.
3. Action: Paying vs Teleporting.
4. Layout: Side-by-side comparison.		✅オフセット（n件スキップ）は避ける
381docs/firebase_firestore_struncture_ts_study_018.mdfirebase_firestore_struncture_ts_study_018_02_missing_field.png./picture/firebase_firestore_struncture_ts_study_018_02_missing_field.pngTheme: Missing Field Trap

Labels to Render:
- Doc A: "{ createdAt: ... }"
- Doc B: "{ no field }"
- Filter: "orderBy(createdAt)"
- Result: "Doc A Only"

Visual Details:
1. Core Concept: Documents without the sort field are excluded.
2. Metaphor: A sieve or filter. Doc A passes through. Doc B bounces off because it lacks the 'ticket' (field).
3. Action: Filtering.
4. Layout: Filter process.		つまり createdAt が入ってない投稿が混ざると、一覧から消えて「え？ないんだけど？」になります😂
382docs/firebase_firestore_struncture_ts_study_018.mdfirebase_firestore_struncture_ts_study_018_03_tie_breaker.png./picture/firebase_firestore_struncture_ts_study_018_03_tie_breaker.pngTheme: Tie Breaker

Labels to Render:
- Runner 1: "Time: 10:00"
- Runner 2: "Time: 10:00"
- Camera: "2nd Key (ID)"
- Result: "Clear Order"

Visual Details:
1. Core Concept: Resolving ambiguity when values are identical.
2. Metaphor: A photo finish at a race. Two runners tie on time, but the camera (2nd Key) sees who is ahead by ID.
3. Action: Judging.
4. Layout: Race finish line.		対策は2つ👇
383docs/firebase_firestore_struncture_ts_study_018.mdfirebase_firestore_struncture_ts_study_018_04_paging_flow.png./picture/firebase_firestore_struncture_ts_study_018_04_paging_flow.pngTheme: Paging Function Flow

Labels to Render:
- Input: "Cursor"
- Step 1: "Query (startAfter)"
- Step 2: "getDocs"
- Output: "Data + Next Cursor"

Visual Details:
1. Core Concept: The logic flow of fetching a page.
2. Metaphor: A relay race baton pass. The 'Cursor' baton starts the 'Query' runner, who fetches the 'Data' box and a new 'Next Cursor' baton.
3. Action: relaying.
4. Layout: Left-to-right flow.		公式でも「最後のドキュメントを取って、次クエリを startAfter で作る」流れが紹介されています📌
384docs/firebase_firestore_struncture_ts_study_018.mdfirebase_firestore_struncture_ts_study_018_05_hook_state.png./picture/firebase_firestore_struncture_ts_study_018_05_hook_state.pngTheme: Infinite Scroll State Machine

Labels to Render:
- State: "Items []"
- Event: "Load More"
- Action: "Append New"
- Result: "Items [Old + New]"

Visual Details:
1. Core Concept: Appending data to the existing state.
2. Metaphor: Adding cars to a train. The engine (State) keeps pulling, and new carriages (New Items) are hooked onto the back.
3. Action: Coupling.
4. Layout: Train assembly.		## 4) React：無限スクロール用の Hook を作る🪝⚡
385docs/firebase_firestore_struncture_ts_study_018.mdfirebase_firestore_struncture_ts_study_018_06_sentinel_trigger.png./picture/firebase_firestore_struncture_ts_study_018_06_sentinel_trigger.pngTheme: Sentinel Trigger

Labels to Render:
- List: "Content"
- Sentinel: "Hidden Line"
- Eye: "Observer"
- Action: "Trigger Fetch"

Visual Details:
1. Core Concept: Detecting when the user scrolls to the bottom.
2. Metaphor: A laser tripwire (Sentinel) at the bottom of the page. When the Scroll Viewport hits it, the 'Observer' eye wakes up and triggers a fetch.
3. Action: Tripping the wire.
4. Layout: Side view of scroll.		## 5) IntersectionObserverで “下に来たら読む” 👀👇
386docs/firebase_firestore_struncture_ts_study_018.mdfirebase_firestore_struncture_ts_study_018_07_ai_guard.png./picture/firebase_firestore_struncture_ts_study_018_07_ai_guard.pngTheme: AI Rate Limit Guard

Labels to Render:
- Scroll: "Rapid Requests"
- Guard: "Debounce / Rate Limit"
- AI: "Safe Processing"

Visual Details:
1. Core Concept: Protecting AI from too many requests during scroll.
2. Metaphor: A dam or sluice gate (Guard) controlling the flow of water (Requests) to a turbine (AI).
3. Action: Regulating flow.
4. Layout: Flow control.		Firebase AI Logic 側には “per user” のレート制限があり
387docs/firebase_firestore_struncture_ts_study_019.mdfirebase_firestore_struncture_ts_study_019_01_dto_bridge.png./picture/firebase_firestore_struncture_ts_study_019_01_dto_bridge.pngTheme: DTO Converter Bridge

Labels to Render:
- Raw: "DTO (Timestamp)"
- Bridge: "Converter"
- Clean: "UI Model (Date)"

Visual Details:
1. Core Concept: Converting raw DB data to clean UI data.
2. Metaphor: A bridge connecting a rugged terrain (DB/DTO) to a clean city (UI). Raw materials cross the bridge and become finished products.
3. Action: Transporting/Refining.
4. Layout: Connection.		そこで登場するのがこの3点セット👇
388docs/firebase_firestore_struncture_ts_study_019.mdfirebase_firestore_struncture_ts_study_019_02_timestamp_vs_date.png./picture/firebase_firestore_struncture_ts_study_019_02_timestamp_vs_date.pngTheme: Timestamp vs Date

Labels to Render:
- Firestore: "Timestamp (Seconds/Nano)"
- React: "Date Object"
- Problem: "Type Mismatch"

Visual Details:
1. Core Concept: The incompatibility between Firestore Timestamp and JS Date.
2. Metaphor: Trying to fit a square peg (Timestamp) into a round hole (Date). They need an adapter (Converter).
3. Action: Mismatch.
4. Layout: Comparison.		ポイントはここ👇😄
389docs/firebase_firestore_struncture_ts_study_019.mdfirebase_firestore_struncture_ts_study_019_03_data_guard.png./picture/firebase_firestore_struncture_ts_study_019_03_data_guard.pngTheme: Data Guard

Labels to Render:
- Input: "Unknown Data"
- Guard: "Check Type/Value"
- Safe: "Pass"
- Unsafe: "Throw Error 💥"

Visual Details:
1. Core Concept: Validating data at the boundary.
2. Metaphor: A security guard checking packages. A suspicious package (Unsafe) is thrown into a bin (Error). A clean package passes.
3. Action: Inspecting.
4. Layout: Gatekeeper.		だから fromFirestore の中で検査します。
390docs/firebase_firestore_struncture_ts_study_019.mdfirebase_firestore_struncture_ts_study_019_04_converter_logic.png./picture/firebase_firestore_struncture_ts_study_019_04_converter_logic.pngTheme: Converter Logic

Labels to Render:
- toFirestore: "UI -> DB (Clean -> Raw)"
- fromFirestore: "DB -> UI (Raw -> Clean)"
- Cycle: "Two-Way"

Visual Details:
1. Core Concept: The two functions of a converter.
2. Metaphor: A translator booth. English goes in, Japanese comes out (toFirestore). Japanese goes in, English comes out (fromFirestore).
3. Action: Translating.
4. Layout: Cycle or Two-way street.		## 3) Converter を作る🌉✨　withConverter の本体
391docs/firebase_firestore_struncture_ts_study_019.mdfirebase_firestore_struncture_ts_study_019_05_repository_pattern.png./picture/firebase_firestore_struncture_ts_study_019_05_repository_pattern.pngTheme: Repository Pattern

Labels to Render:
- UI: "React Component"
- Repo: "Repository Function"
- DB: "Firestore"

Visual Details:
1. Core Concept: Encapsulating data access logic.
2. Metaphor: A waiter (Repository) taking an order from a customer (UI) to the kitchen (DB). The customer doesn't see the kitchen mess.
3. Action: Ordering.
4. Layout: Linear flow.		なので Repository（読み書き関数）に寄せます。
392docs/firebase_firestore_struncture_ts_study_019.mdfirebase_firestore_struncture_ts_study_019_06_updatedoc_trap.png./picture/firebase_firestore_struncture_ts_study_019_06_updatedoc_trap.pngTheme: UpdateDoc Bypass Trap

Labels to Render:
- updateDoc: "Direct Write"
- Converter: "Skipped! 😱"
- DB: "Bad Data"
- setDoc(merge): "Safe (Uses Converter)"

Visual Details:
1. Core Concept: updateDoc bypassing the converter safety.
2. Metaphor: A sneak path around the security checkpoint (Converter). updateDoc takes the sneak path and dumps bad data. setDoc goes through security.
3. Action: Sneaking vs Checking.
4. Layout: Comparison paths.		超重要⚠️　updateDoc の罠に注意
393docs/firebase_firestore_struncture_ts_study_019.mdfirebase_firestore_struncture_ts_study_019_07_structured_ai_data.png./picture/firebase_firestore_struncture_ts_study_019_07_structured_ai_data.pngTheme: Structured AI Data

Labels to Render:
- AI Output: "Summary Text"
- Meta: "Model + Time"
- DB: "Structured Doc"

Visual Details:
1. Core Concept: Saving AI output with metadata.
2. Metaphor: Filing a report. The AI text is the content, but it's stapled with a cover sheet (Model, Time) before going into the file cabinet.
3. Action: Filing.
4. Layout: Document structure.		記事（Post）に「AI要約」を付けたい！✨
394docs/firebase_firestore_struncture_ts_study_020.mdfirebase_firestore_struncture_ts_study_020_01_client_vs_server.png./picture/firebase_firestore_struncture_ts_study_020_01_client_vs_server.pngTheme: Client vs Server Integrity

Labels to Render:
- Client: "Hacker (9999 Likes)"
- Server: "Guard (Check Logic)"
- DB: "Safe Value"

Visual Details:
1. Core Concept: Server protecting data from client manipulation.
2. Metaphor: A hacker trying to spray paint a wall (DB). The Server Guard blocks the spray and only allows authorized paint.
3. Action: Blocking.
4. Layout: Confrontation.		DevToolsでリクエスト改造できるので 「commentCountを9999にする」 とか普通にできちゃう🥲🪛
395docs/firebase_firestore_struncture_ts_study_020.mdfirebase_firestore_struncture_ts_study_020_02_server_methods.png./picture/firebase_firestore_struncture_ts_study_020_02_server_methods.pngTheme: Server Method Comparison

Labels to Render:
- Trigger: "Auto (React)"
- Callable: "Manual (Request)"
- Cloud Run: "Any Language"

Visual Details:
1. Core Concept: Three ways to run server logic.
2. Metaphor: Three vehicles. Trigger is an automatic conveyor belt. Callable is a taxi (on demand). Cloud Run is a spaceship (powerful/flexible).
3. Action: Operating.
4. Layout: Comparison.		## 2) サーバー側で守る方法は3つ（迷ったらこれ）🧭✨
396docs/firebase_firestore_struncture_ts_study_020.mdfirebase_firestore_struncture_ts_study_020_03_idempotent_flow.png./picture/firebase_firestore_struncture_ts_study_020_03_idempotent_flow.pngTheme: Idempotent Trigger Flow

Labels to Render:
- Event 1: "First Run (Process)"
- Event 2: "Retry (Skip)"
- Check: "Already Done?"

Visual Details:
1. Core Concept: Ensuring a function only runs once even if triggered twice.
2. Metaphor: A stamp machine. It checks if the paper is already stamped. If yes, it does nothing. If no, it stamps.
3. Action: Checking/Stamping.
4. Layout: Flowchart.		## 手を動かす②：TypeScript（Node.js 22）で実装する🧱✨
397docs/firebase_firestore_struncture_ts_study_020.mdfirebase_firestore_struncture_ts_study_020_04_client_restriction.png./picture/firebase_firestore_struncture_ts_study_020_04_client_restriction.pngTheme: Client Restriction Rule

Labels to Render:
- Client: "Write Comment"
- Server: "Update Count"
- Rule: "Block Count Write"

Visual Details:
1. Core Concept: Security rules restricting what the client can touch.
2. Metaphor: A child (Client) allowed to put a toy in the box, but only the parent (Server) allowed to write the count on the label.
3. Action: Restricting.
4. Layout: Roles.		そして大事な性質：
398docs/firebase_firestore_struncture_ts_study_020.mdfirebase_firestore_struncture_ts_study_020_05_ai_audit_log.png./picture/firebase_firestore_struncture_ts_study_020_05_ai_audit_log.pngTheme: AI Audit Log Structure

Labels to Render:
- Log: "Who, What, Model"
- AI: "Action"
- Trace: "Accountability"

Visual Details:
1. Core Concept: Tracking AI actions.
2. Metaphor: A footprint trail. Each AI action leaves a distinct footprint labeled with the model and user.
3. Action: Tracking.
4. Layout: Trail.		## まずは最小ログ設計（例）📚
399docs/firebase_firestore_struncture_ts_study_020.mdfirebase_firestore_struncture_ts_study_020_06_ai_summary_flow.png./picture/firebase_firestore_struncture_ts_study_020_06_ai_summary_flow.pngTheme: AI Summary Flow

Labels to Render:
- Trigger: "New Post"
- Server: "Generate Summary"
- Save: "Post + Log"

Visual Details:
1. Core Concept: Server generating summary and logging it.
2. Metaphor: A backend factory line. Raw post enters -> AI Robot summarizes -> Packer boxes it and writes a log entry.
3. Action: Processing.
4. Layout: Factory line.		## お題📝