メインコンテンツまでスキップ

image_generation_plan.dev_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
2firebase_local_dev_ts_study_001firebase_local_dev_ts_study_001_local_vs_cloud.png./picture/firebase_local_dev_ts_study_001_local_vs_cloud.pngTheme: Local vs Cloud Environment

Labels to Render:
- Local: "ローカル (PC)"
- Production: "本番 (Cloud)"
- Safe: "安全"

Visual Details:
1. Core Concept: Separation of environments.
2. Metaphor: A computer (Local) isolated from a Cloud (Production) by a barrier.
3. Action: A user playing freely in the Local box, while the Cloud remains untouched.
4. Layout: Split screen, Left (Local) vs Right (Cloud).		## Emulator Suiteを一言でいうと…🧪
3firebase_local_dev_ts_study_001firebase_local_dev_ts_study_001_safety_shield.png./picture/firebase_local_dev_ts_study_001_safety_shield.pngTheme: Safety Guard

Labels to Render:
- Accident: "事故"
- Blocked: "阻止"

Visual Details:
1. Core Concept: Preventing production accidents.
2. Metaphor: A shield or barrier stopping a 'Delete' command from hitting the database.
3. Action: Sparks flying as the command hits the shield.
4. Layout: Center focus on the shield.		### ① 本番事故を防げる🧯（いちばん大事）
4firebase_local_dev_ts_study_001firebase_local_dev_ts_study_001_fast_loop.png./picture/firebase_local_dev_ts_study_001_fast_loop.pngTheme: Rapid Development Loop

Labels to Render:
- Save: "保存"
- Check: "確認"
- Fix: "修正"

Visual Details:
1. Core Concept: High speed iteration.
2. Metaphor: A spinning wheel or cycle with the three steps.
3. Action: Speed lines indicating motion.
4. Layout: Circular flow.		### ② 速い⚡（待ち時間が減る）
5firebase_local_dev_ts_study_001firebase_local_dev_ts_study_001_service_puzzle.png./picture/firebase_local_dev_ts_study_001_service_puzzle.pngTheme: Firebase Services Collection

Labels to Render:
- Auth: "Auth"
- DB: "Firestore"
- Func: "Functions"

Visual Details:
1. Core Concept: Services working together.
2. Metaphor: Puzzle pieces or modules fitting into a base.
3. Action: Pieces connecting.
4. Layout: Grouped cluster.		## ローカルで動くFirebaseたち🧩（ざっくり把握でOK）
6firebase_local_dev_ts_study_001firebase_local_dev_ts_study_001_ui_visibility.png./picture/firebase_local_dev_ts_study_001_ui_visibility.pngTheme: Emulator UI Visibility

Labels to Render:
- Request: "リクエスト"
- Rules: "ルール評価"
- OK: "OK"
- NG: "NG"

Visual Details:
1. Core Concept: Seeing the internal logic.
2. Metaphor: X-ray vision or a magnifying glass revealing the 'Rules' check inside a request.
3. Action: Light illuminating the process.
4. Layout: Cross-section view.		## Emulator UIって何が見えるの？👀✨
7firebase_local_dev_ts_study_001firebase_local_dev_ts_study_001_ai_assistant.png./picture/firebase_local_dev_ts_study_001_ai_assistant.pngTheme: AI Development Assistant

Labels to Render:
- Proposal: "提案"
- Review: "レビュー"

Visual Details:
1. Core Concept: AI helping with tasks.
2. Metaphor: A friendly robot handing a blueprint (Rules/Seed data) to the developer.
3. Action: Collaboration.
4. Layout: Side-by-side interaction.		### 🤖 AIが得意なこと（例）
8firebase_local_dev_ts_study_001firebase_local_dev_ts_study_001_scary_op_caged.png./picture/firebase_local_dev_ts_study_001_scary_op_caged.pngTheme: Safe Experimentation

Labels to Render:
- Dangerous: "危険操作"
- Safe Zone: "安全圏"

Visual Details:
1. Core Concept: Testing dangerous things safely.
2. Metaphor: A bomb (dangerous op) exploding safely inside a reinforced testing chamber.
3. Action: Explosion contained.
4. Layout: Isometric view of the chamber.		## ミニ課題🎯：「本番でやると怖い操作」を3つ書き出そう😱➡️🧪
9firebase_local_dev_ts_study_002firebase_local_dev_ts_study_002_three_tools.png./picture/firebase_local_dev_ts_study_002_three_tools.pngTheme: Essential Tool Trio

Labels to Render:
- Node.js: "Node.js"
- Java: "Java (JDK)"
- CLI: "Firebase CLI"

Visual Details:
1. Core Concept: The three pillars of the local environment.
2. Metaphor: A toolbox containing three specific tools (Wrench, Hammer, Screwdriver) labeled with the technology names.
3. Action: Tools floating ready to use.
4. Layout: Triangular arrangement.		## この章で出てくる“3点セット”🧰✨
10firebase_local_dev_ts_study_002firebase_local_dev_ts_study_002_version_check.png./picture/firebase_local_dev_ts_study_002_version_check.pngTheme: Version Verification

Labels to Render:
- Command: "node -v"
- Result: "v24.x.x"
- Status: "OK"

Visual Details:
1. Core Concept: Checking installed versions.
2. Metaphor: A checklist with green checkmarks appearing next to terminal commands.
3. Action: Verifying.
4. Layout: List view.		## 2-0　まず“入ってるか”を秒速チェック⚡👀
11firebase_local_dev_ts_study_002firebase_local_dev_ts_study_002_java_gate.png./picture/firebase_local_dev_ts_study_002_java_gate.pngTheme: Java Version Gate

Labels to Render:
- Pass: "JDK 21+"
- Block: "JDK < 21"
- Gate: "Emulator Gate"

Visual Details:
1. Core Concept: Version requirement enforcement.
2. Metaphor: A security gate letting '21+' pass but stopping smaller numbers.
3. Action: Filtering.
4. Layout: Flow from left to right.		## 2-2　Java（JDK）を入れる☕🧱（“21以上”が安全）
12firebase_local_dev_ts_study_002firebase_local_dev_ts_study_002_login_key.png./picture/firebase_local_dev_ts_study_002_login_key.pngTheme: CLI Login

Labels to Render:
- Local: "Local CLI"
- Cloud: "Google Cloud"
- Key: "Login"

Visual Details:
1. Core Concept: Authenticating the local tool.
2. Metaphor: A digital key connecting a laptop (Local) to a cloud icon.
3. Action: Connection established.
4. Layout: Connection line.		## 2-4　ログインする🔑🌐（ブラウザが開けない時のワザも）
13firebase_local_dev_ts_study_002firebase_local_dev_ts_study_002_init_blocks.png./picture/firebase_local_dev_ts_study_002_init_blocks.pngTheme: Project Initialization

Labels to Render:
- Select: "firebase init"
- Option 1: "Firestore"
- Option 2: "Functions"

Visual Details:
1. Core Concept: Selecting components for the project.
2. Metaphor: Picking building blocks (labeled Firestore, Functions) to build a house.
3. Action: Selection/Building.
4. Layout: Construction scene.		## 2-6　firebase init をやる🎛️🧪（ここがこの章のメイン！）
14firebase_local_dev_ts_study_002firebase_local_dev_ts_study_002_file_structure.png./picture/firebase_local_dev_ts_study_002_file_structure.pngTheme: Generated File Structure

Labels to Render:
- Config: "firebase.json"
- Code: "functions/"
- Rules: "firestore.rules"

Visual Details:
1. Core Concept: The result of initialization.
2. Metaphor: A project folder opening up to reveal specific documents inside.
3. Action: Reveal.
4. Layout: Isometric folder view.		## 2-7　できあがりの“目印ファイル”を確認👀✅
15firebase_local_dev_ts_study_002firebase_local_dev_ts_study_002_ai_debug.png./picture/firebase_local_dev_ts_study_002_ai_debug.pngTheme: AI Error Analysis

Labels to Render:
- Error: "エラー文"
- AI: "Gemini"
- Fix: "解決策"

Visual Details:
1. Core Concept: AI simplifying error messages.
2. Metaphor: A tangled knot (Error) being untied by a robot hand (AI) into a straight line (Fix).
3. Action: Untying/Solving.
4. Layout: Transformation flow.		## 🤖AIを“第2章から”混ぜるコツ（つまずき即死回避🧯）
16firebase_local_dev_ts_study_003firebase_local_dev_ts_study_003_wake_up.png./picture/firebase_local_dev_ts_study_003_wake_up.pngTheme: Wake Up Emulators

Labels to Render:
- Command: "emulators:start"
- Robots: "Emulators"
- Status: "Waking Up"

Visual Details:
1. Core Concept: Activating the local services.
2. Metaphor: A command whistle waking up a group of small sleeping robots (labeled Auth, DB, Func).
3. Action: Robots standing up.
4. Layout: Group activation.		## 1) firebase emulators:startって何するコマンド？🤔💡
17firebase_local_dev_ts_study_003firebase_local_dev_ts_study_003_only_selection.png./picture/firebase_local_dev_ts_study_003_only_selection.pngTheme: Selective Launch

Labels to Render:
- Flag: "--only functions"
- Selected: "Functions"
- Ignored: "Others"

Visual Details:
1. Core Concept: Running only what is needed.
2. Metaphor: A chef picking only one specific ingredient (Functions) from a pantry, leaving the rest on the shelf.
3. Action: Selection.
4. Layout: Focused selection.		## 2) 今日いちばん大事：--only の考え方🔑✨
18firebase_local_dev_ts_study_003firebase_local_dev_ts_study_003_three_engines.png./picture/firebase_local_dev_ts_study_003_three_engines.pngTheme: Three Engines Starting

Labels to Render:
- Engine 1: "Auth"
- Engine 2: "Firestore"
- Engine 3: "Functions"

Visual Details:
1. Core Concept: Simultaneous startup.
2. Metaphor: Three distinct engines or gears spinning up in unison.
3. Action: Spinning/Ignition.
4. Layout: Horizontal alignment.		### Step B：起動！🚀（Auth/Firestore/Functions）
19firebase_local_dev_ts_study_003firebase_local_dev_ts_study_003_ui_dashboard.png./picture/firebase_local_dev_ts_study_003_ui_dashboard.pngTheme: Emulator Dashboard

Labels to Render:
- Header: "Emulator UI"
- Status: "Running"
- Port: "4000"

Visual Details:
1. Core Concept: Visualization of the running services.
2. Metaphor: A dashboard screen with green lights for Auth, Firestore, and Functions.
3. Action: Monitoring.
4. Layout: Screen view.		### Step C：ブラウザで Emulator UI を開く🌐👀
20firebase_local_dev_ts_study_003firebase_local_dev_ts_study_003_single_function.png./picture/firebase_local_dev_ts_study_003_single_function.pngTheme: Single Service Operation

Labels to Render:
- Active: "Functions (ON)"
- Inactive: "Firestore (OFF)"
- Inactive: "Auth (OFF)"

Visual Details:
1. Core Concept: Running a minimal configuration.
2. Metaphor: One light bulb glowing brightly while two others are dark.
3. Action: Isolated operation.
4. Layout: Contrast between on and off.		## 4) ミニ課題：Functionsだけ起動してみる🎯⚙️
21firebase_local_dev_ts_study_003firebase_local_dev_ts_study_003_port_conflict.png./picture/firebase_local_dev_ts_study_003_port_conflict.pngTheme: Port Conflict

Labels to Render:
- Port: "Port 8080"
- Error: "Collision!"
- App A: "App A"
- App B: "App B"

Visual Details:
1. Core Concept: Two processes fighting for the same network port.
2. Metaphor: Two cars trying to park in the exact same parking spot labeled '8080'.
3. Action: Collision/Blocking.
4. Layout: Conflict scene.		### ② ポートが埋まってる🚧
22firebase_local_dev_ts_study_003firebase_local_dev_ts_study_003_log_translate.png./picture/firebase_local_dev_ts_study_003_log_translate.pngTheme: AI Log Translator

Labels to Render:
- Input: "Cryptic Error"
- AI: "AI Translator"
- Output: "Simple Fix"

Visual Details:
1. Core Concept: Making logs understandable.
2. Metaphor: A robot reading a messy scroll (Log) and speaking a clear sentence in a speech bubble.
3. Action: Translation.
4. Layout: Left (Messy) to Right (Clean).		## 6) AIで“起動→原因特定→復帰”を爆速にする🤖💨
23firebase_local_dev_ts_study_004firebase_local_dev_ts_study_004_default_danger.png./picture/firebase_local_dev_ts_study_004_default_danger.pngTheme: Default Connection Risk

Labels to Render:
- Path 1: "Default"
- Destination: "Production (Danger)"
- Path 2: "Switch ON"
- Destination: "Emulator (Safe)"

Visual Details:
1. Core Concept: Unintentional connection to production.
2. Metaphor: A car (App) driving automatically towards a cliff labeled 'Production' unless a switch diverts it to a safe garage 'Emulator'.
3. Action: Driving.
4. Layout: Fork in the road.		## まず大事な感覚：Firebaseは“何もしないと本番へ行く”🚨
24firebase_local_dev_ts_study_004firebase_local_dev_ts_study_004_double_lock.png./picture/firebase_local_dev_ts_study_004_double_lock.pngTheme: Double Safety Lock

Labels to Render:
- Lock 1: "Dev Mode"
- Lock 2: "Flag=True"
- Status: "Safe Access"

Visual Details:
1. Core Concept: Two conditions required for emulator connection.
2. Metaphor: A high-security safe requiring two separate keys to open the 'Emulator Connection'.
3. Action: Unlocking.
4. Layout: Close-up on locks.		## 1) スイッチ設計：どう切り替える？🔀🧠
25firebase_local_dev_ts_study_004firebase_local_dev_ts_study_004_railroad_switch.png./picture/firebase_local_dev_ts_study_004_railroad_switch.pngTheme: Connection Switching Logic

Labels to Render:
- Track 1: "To Production"
- Track 2: "To Emulator"
- Switch: "Logic"

Visual Details:
1. Core Concept: Diverting data flow.
2. Metaphor: A railroad switch track moving the train (Data) from the main line (Production) to the side line (Emulator).
3. Action: Switching.
4. Layout: Track split.		## 3) 手を動かす🖐️：Firebase初期化に「エミュ接続」を差し込む⚙️
26firebase_local_dev_ts_study_004firebase_local_dev_ts_study_004_hmr_guard.png./picture/firebase_local_dev_ts_study_004_hmr_guard.pngTheme: HMR Connection Guard

Labels to Render:
- First: "Connection 1 (OK)"
- Second: "Connection 2 (Stop)"
- Guard: "Singleton"

Visual Details:
1. Core Concept: Preventing duplicate connections during hot reload.
2. Metaphor: A security guard (Singleton logic) allowing the first person in but blocking the second identical person.
3. Action: Blocking.
4. Layout: Gate entrance.		ポイントは 「1回だけ接続するガード」 を入れること（ReactのHMRで二重実行しがち😵‍💫）
27firebase_local_dev_ts_study_004firebase_local_dev_ts_study_004_ui_badge.png./picture/firebase_local_dev_ts_study_004_ui_badge.pngTheme: Visual Safety Badge

Labels to Render:
- Screen: "App"
- Badge: "Emulator Mode"
- Color: "Green"

Visual Details:
1. Core Concept: Visual confirmation of safety.
2. Metaphor: A smartphone screen with a prominent green badge at the top saying 'Emulator Mode'.
3. Action: Displaying.
4. Layout: Screen mockup.		## 5) 仕上げ🟩：画面に「エミュ接続中」バッジを出す👀
28firebase_local_dev_ts_study_004firebase_local_dev_ts_study_004_ip_clarity.png./picture/firebase_local_dev_ts_study_004_ip_clarity.pngTheme: IP Address Clarity

Labels to Render:
- Ambiguous: "localhost"
- Clear: "127.0.0.1"
- Connection: "Direct"

Visual Details:
1. Core Concept: Avoiding localhost ambiguity.
2. Metaphor: 'localhost' showing a confused signpost pointing two ways (IPv4/IPv6), while '127.0.0.1' is a straight, clear highway.
3. Action: Comparison.
4. Layout: Split comparison.		## ✅ localhost じゃなく 127.0.0.1 を使う理由
29firebase_local_dev_ts_study_004firebase_local_dev_ts_study_004_ai_coding.png./picture/firebase_local_dev_ts_study_004_ai_coding.pngTheme: AI Code Generator

Labels to Render:
- Input: "Prompt"
- AI: "Antigravity"
- Output: "Code"

Visual Details:
1. Core Concept: AI generating the boilerplate.
2. Metaphor: A futuristic printer (AI) taking a text request and printing out clean code blocks.
3. Action: Generation.
4. Layout: Flow from request to result.		## 9) AIで爆速化🤖💨（Antigravity / Gemini CLI）
30firebase_local_dev_ts_study_005firebase_local_dev_ts_study_005_auth_sandbox.png./picture/firebase_local_dev_ts_study_005_auth_sandbox.pngTheme: Auth Sandbox

Labels to Render:
- Cloud: "Production (Real)"
- Sandbox: "Emulator (Test)"
- User: "Test User"

Visual Details:
1. Core Concept: Safe environment for authentication testing.
2. Metaphor: A sandbox with a toy castle (Emulator) where a user is playing safely, separated from the real city (Cloud).
3. Action: Playing/Testing.
4. Layout: Contrast between Sandbox and City.		## まずイメージ🧠✨（Auth Emulatorって何してくれるの？）
31firebase_local_dev_ts_study_005firebase_local_dev_ts_study_005_three_pillars.png./picture/firebase_local_dev_ts_study_005_three_pillars.pngTheme: Three Pillars of Auth Emulator

Labels to Render:
- 1: "Connect Code"
- 2: "UI Creation"
- 3: "Admin Env"

Visual Details:
1. Core Concept: Key features.
2. Metaphor: A building supported by three columns labeled with the key features.
3. Action: Support.
4. Layout: Pillars structure.		## 読む📖：Auth Emulatorの“特徴”を3つだけ覚える🧠
32firebase_local_dev_ts_study_005firebase_local_dev_ts_study_005_plug_9099.png./picture/firebase_local_dev_ts_study_005_plug_9099.pngTheme: Port 9099 Connection

Labels to Render:
- App: "React App"
- Plug: "connectAuthEmulator"
- Socket: "Port 9099"

Visual Details:
1. Core Concept: Connecting to the local port.
2. Metaphor: An electric plug labeled 'connectAuthEmulator' being inserted into a wall socket labeled '9099'.
3. Action: Plugging in.
4. Layout: Close-up connection.		## ② React側：connectAuthEmulator を入れる🔌🙂
33firebase_local_dev_ts_study_005firebase_local_dev_ts_study_005_login_form.png./picture/firebase_local_dev_ts_study_005_login_form.pngTheme: Simple Login UI

Labels to Render:
- Input: "Email"
- Input: "Password"
- Button: "Login"

Visual Details:
1. Core Concept: Minimal login interface.
2. Metaphor: A clean wireframe of a login card floating in space.
3. Action: Waiting for input.
4. Layout: Centered card.		## ③ いちばん簡単：メール/パスワードのログインUIを作る📧🔑
34firebase_local_dev_ts_study_005firebase_local_dev_ts_study_005_user_factory.png./picture/firebase_local_dev_ts_study_005_user_factory.pngTheme: User Factory

Labels to Render:
- Dashboard: "Emulator UI"
- Action: "Add User"
- Result: "New User"

Visual Details:
1. Core Concept: Creating users via the dashboard.
2. Metaphor: A conveyor belt coming out of a screen (Emulator UI) producing little user figures.
3. Action: Production.
4. Layout: Process flow.		## ④ Emulator UIでテストユーザー作成（最短ルート）🧑‍🔧🧪
35firebase_local_dev_ts_study_005firebase_local_dev_ts_study_005_admin_protocol.png./picture/firebase_local_dev_ts_study_005_admin_protocol.pngTheme: Admin SDK Protocol Trap

Labels to Render:
- Bad: "http://... (NO)"
- Good: "host:port (YES)"
- Target: "Admin SDK"

Visual Details:
1. Core Concept: Protocol requirement for Admin SDK.
2. Metaphor: A traffic sign forbidding 'http://' vehicles but allowing 'host:port' vehicles to enter the 'Admin SDK' tunnel.
3. Action: Traffic control.
4. Layout: Signpost.		## 罠3：Admin SDK側のエミュ接続が http:// 付き
36firebase_local_dev_ts_study_005firebase_local_dev_ts_study_005_ai_seeding.png./picture/firebase_local_dev_ts_study_005_ai_seeding.pngTheme: AI Data Seeding

Labels to Render:
- AI: "Gemini"
- Seed: "User Data"
- Field: "Auth Database"

Visual Details:
1. Core Concept: Automated user creation.
2. Metaphor: A robot farmer (AI) planting seeds that instantly grow into user avatars in a field (Database).
3. Action: Planting/Growing.
4. Layout: Farming scene.		## ちょい足し🌱：ユーザー“種まき”をAIで作って爆速に🤖💨
37firebase_local_dev_ts_study_006firebase_local_dev_ts_study_006_crud_box.png./picture/firebase_local_dev_ts_study_006_crud_box.pngTheme: Local CRUD Cycle

Labels to Render:
- Create: "追加 (C)"
- Read: "一覧 (R)"
- Update: "更新 (U)"
- Delete: "削除 (D)"

Visual Details:
1. Core Concept: The four basic database operations.
2. Metaphor: A cycle of arrows labeled C, R, U, D revolving around a local database icon.
3. Action: Cycling.
4. Layout: Circular flow.		## 1) Firestore をエミュレータへ接続する🔀🧠
38firebase_local_dev_ts_study_006firebase_local_dev_ts_study_006_pipe_8080.png./picture/firebase_local_dev_ts_study_006_pipe_8080.pngTheme: Port 8080 Connection

Labels to Render:
- App: "App"
- Pipe: "Connection"
- Target: "Port 8080"

Visual Details:
1. Core Concept: Connecting specifically to the Firestore emulator port.
2. Metaphor: A plumbing pipe labeled 'connectFirestoreEmulator' connecting the App to a tank labeled '8080'.
3. Action: Connecting.
4. Layout: Pipeline.		// “開発中だけ”エミュへ（安全スイッチの発想）
39firebase_local_dev_ts_study_006firebase_local_dev_ts_study_006_memo_schema.png./picture/firebase_local_dev_ts_study_006_memo_schema.pngTheme: Memo Data Structure

Labels to Render:
- Doc: "Memo"
- Field: "title"
- Field: "body"
- Field: "ai (Object)"

Visual Details:
1. Core Concept: The document schema.
2. Metaphor: A document card or file folder showing the specific fields and the nested 'ai' object.
3. Action: Displaying structure.
4. Layout: Document view.		## 2) 今回のメモの置き場を決める🗂️✨
40firebase_local_dev_ts_study_006firebase_local_dev_ts_study_006_crud_tools.png./picture/firebase_local_dev_ts_study_006_crud_tools.pngTheme: CRUD Toolbox

Labels to Render:
- Tool 1: "addDoc"
- Tool 2: "onSnapshot"
- Tool 3: "updateDoc"
- Tool 4: "deleteDoc"

Visual Details:
1. Core Concept: The functions used for CRUD.
2. Metaphor: A set of tools (Hammer, Eye, Pen, Eraser) labeled with the corresponding Firestore SDK function names.
3. Action: Ready to work.
4. Layout: Tool collection.		## 3) CRUD を実装する🛠️⚡（まず“動く”を最優先）
41firebase_local_dev_ts_study_006firebase_local_dev_ts_study_006_snapshot_stream.png./picture/firebase_local_dev_ts_study_006_snapshot_stream.pngTheme: Realtime Snapshot Stream

Labels to Render:
- Source: "Firestore"
- Stream: "onSnapshot"
- UI: "React List"

Visual Details:
1. Core Concept: Data flowing in real-time to the UI.
2. Metaphor: A water stream (Data) flowing continuously from a tank (Firestore) into a bucket (React UI), keeping it full.
3. Action: Flowing.
4. Layout: Flow diagram.		## 3-2) React 側で “追加→一覧→更新→削除” をつなぐ⚛️🧩
42firebase_local_dev_ts_study_006firebase_local_dev_ts_study_006_rest_door.png./picture/firebase_local_dev_ts_study_006_rest_door.pngTheme: REST API Access

Labels to Render:
- Main Door: "SDK"
- Side Door: "REST API"
- Tool: "curl / v1"

Visual Details:
1. Core Concept: Alternative access method.
2. Metaphor: A building (Firestore) with a main entrance (SDK) and a service door (REST) being opened with a key labeled 'curl'.
3. Action: Accessing.
4. Layout: Building facade.		## 4) REST入口（おまけ）🌐👀
43firebase_local_dev_ts_study_006firebase_local_dev_ts_study_006_ai_box.png./picture/firebase_local_dev_ts_study_006_ai_box.pngTheme: AI Data Placeholder

Labels to Render:
- Box: "ai Field"
- Content: "Future Result"
- Status: "Ready"

Visual Details:
1. Core Concept: Preparing for future AI data.
2. Metaphor: An empty, glowing container inside the document structure, waiting to be filled with AI-generated content.
3. Action: Waiting.
4. Layout: Focused container.		## 🤖 AIコーナー：Firestore を“AI整形の舞台”にする下ごしらえ🧩✨
44firebase_local_dev_ts_study_007firebase_local_dev_ts_study_007_ui_concept.png./picture/firebase_local_dev_ts_study_007_ui_concept.pngTheme: Emulator UI Concept

Labels to Render:
- Console: "Firebase Console"
- Local: "Emulator UI"
- Mirror: "Mirror"

Visual Details:
1. Core Concept: Local UI mirroring the Cloud Console.
2. Metaphor: A computer screen (Local) showing a reflection of a cloud interface (Console).
3. Action: Reflection.
4. Layout: Split screen or Reflection.		## 1) まず Emulator UI を開こう🚪✨
45firebase_local_dev_ts_study_007firebase_local_dev_ts_study_007_port_check.png./picture/firebase_local_dev_ts_study_007_port_check.pngTheme: Port Overview

Labels to Render:
- UI: "4000"
- Auth: "9099"
- DB: "8080"
- Func: "5001"

Visual Details:
1. Core Concept: Checking service health via ports.
2. Metaphor: A dashboard with 4 green lights labeled with port numbers.
3. Action: All lights glowing green.
4. Layout: Grid of indicators.		## 2) Overview で「生きてるか」を30秒点検✅👀
46firebase_local_dev_ts_study_007firebase_local_dev_ts_study_007_data_mirror.png./picture/firebase_local_dev_ts_study_007_data_mirror.pngTheme: Data Reflection

Labels to Render:
- App: "App Action"
- Mirror: "Reflection"
- Data: "Firestore Data"

Visual Details:
1. Core Concept: Immediate reflection of app data in the emulator.
2. Metaphor: A user writing on a notepad (App) and the text instantly appearing on a whiteboard (Data) via a mirror.
3. Action: Instant sync.
4. Layout: Cause and effect flow.		## 3) Firestore の Data で「DBの中身」を見る🗃️👓
47firebase_local_dev_ts_study_007firebase_local_dev_ts_study_007_request_radar.png./picture/firebase_local_dev_ts_study_007_request_radar.pngTheme: Request Radar

Labels to Render:
- Radar: "Requests"
- Dot: "New Request"
- Detail: "Details"

Visual Details:
1. Core Concept: Monitoring incoming traffic.
2. Metaphor: A radar screen sweeping and detecting a 'blip' (Request) with a popup showing details.
3. Action: Detection.
4. Layout: Radar screen.		## 4) 本番級に便利！Firestore の Requests で“何が飛んだか”を見る📡👀
48firebase_local_dev_ts_study_007firebase_local_dev_ts_study_007_rules_circuit.png./picture/firebase_local_dev_ts_study_007_rules_circuit.pngTheme: Rules Circuit

Labels to Render:
- Input: "Request"
- Gate: "Rule Check"
- Pass: "Allow"
- Fail: "Deny"

Visual Details:
1. Core Concept: Visualizing the security rule decision path.
2. Metaphor: A circuit board where the signal (Request) hits a gate (Rule); Green path for Allow, Red path for Deny.
3. Action: Flowing through path.
4. Layout: Circuit flow.		## 5) Rules 評価トレースの読み方🧠🧾
49firebase_local_dev_ts_study_007firebase_local_dev_ts_study_007_log_stream.png./picture/firebase_local_dev_ts_study_007_log_stream.pngTheme: Log Stream

Labels to Render:
- Stream: "Logs"
- Error: "Error!"
- Info: "Info"

Visual Details:
1. Core Concept: Viewing the backend activity logs.
2. Metaphor: A digital waterfall or ticker tape with lines of text flowing down, highlighting an 'Error' in red.
3. Action: Flowing.
4. Layout: Vertical stream.		## 6) Logs タブで “裏側の声” を聞く📣🔥
50firebase_local_dev_ts_study_007firebase_local_dev_ts_study_007_ai_detective.png./picture/firebase_local_dev_ts_study_007_ai_detective.pngTheme: AI Detective

Labels to Render:
- Log: "Complex Log"
- AI: "Gemini"
- Clue: "Root Cause"

Visual Details:
1. Core Concept: AI finding the cause in messy logs.
2. Metaphor: A robot detective using a magnifying glass on a stack of papers (Logs) to find a glowing clue.
3. Action: Discovery.
4. Layout: Close-up investigation.		## 7) AIでデバッグを“爆速化”する🤖💨（でも最後は自分の目👀）
51firebase_local_dev_ts_study_008firebase_local_dev_ts_study_008_gatekeeper.png./picture/firebase_local_dev_ts_study_008_gatekeeper.pngTheme: Gatekeeper Concept

Labels to Render:
- Guard: "Security Rules"
- Visitor: "Request"
- Door: "Firestore"

Visual Details:
1. Core Concept: Filtering access to the database.
2. Metaphor: A stern guard (Rules) stopping a visitor (Request) at the door of a vault (Firestore).
3. Action: Checking ID.
4. Layout: Entrance scene.		## 1) Rulesの超ざっくりイメージ🧠🚪
52firebase_local_dev_ts_study_008firebase_local_dev_ts_study_008_three_principles.png./picture/firebase_local_dev_ts_study_008_three_principles.pngTheme: Three Principles

Labels to Render:
- 1: "Deny First"
- 2: "User/Data/Action"
- 3: "Schema Check"

Visual Details:
1. Core Concept: The three pillars of safe rules.
2. Metaphor: Three shields or pillars standing together to protect the database.
3. Action: Standing guard.
4. Layout: Triptych or Group.		## 2) まず覚える“事故らない3原則”🛡️✨
53firebase_local_dev_ts_study_008firebase_local_dev_ts_study_008_rules_anatomy.png./picture/firebase_local_dev_ts_study_008_rules_anatomy.pngTheme: Rules Anatomy

Labels to Render:
- Block 1: "Match Path"
- Block 2: "Allow Method"
- Block 3: "Condition"

Visual Details:
1. Core Concept: Structure of a rule.
2. Metaphor: Building blocks stacked to form a rule structure.
3. Action: Assembly.
4. Layout: Stacked blocks.		## 4-1) Rulesファイルの“骨組み”を作る🦴
54firebase_local_dev_ts_study_008firebase_local_dev_ts_study_008_owner_check.png./picture/firebase_local_dev_ts_study_008_owner_check.pngTheme: Owner Check

Labels to Render:
- Card: "User ID"
- Doc: "Owner ID"
- Result: "Match!"

Visual Details:
1. Core Concept: Verifying ownership.
2. Metaphor: A scanner comparing the ID on a badge (User) with the ID on a file (Document).
3. Action: Green light match.
4. Layout: Comparison close-up.		## 4-2) 本人判定の関数を作る（読みやすさ爆上がり）📈✨
55firebase_local_dev_ts_study_008firebase_local_dev_ts_study_008_validation_filter.png./picture/firebase_local_dev_ts_study_008_validation_filter.pngTheme: Validation Filter

Labels to Render:
- Input: "Data"
- Filter: "Validation"
- Pass: "Valid"
- Block: "Invalid"

Visual Details:
1. Core Concept: Filtering invalid data.
2. Metaphor: A sieve or shape sorter where correct shapes pass through, but irregular ones are blocked.
3. Action: Filtering.
4. Layout: Flow through filter.		## 5) バリデーション入門✅：「必須フィールドが無い書き込み」を拒否する
56firebase_local_dev_ts_study_008firebase_local_dev_ts_study_008_update_diff.png./picture/firebase_local_dev_ts_study_008_update_diff.pngTheme: Update Diff

Labels to Render:
- Old: "Before"
- New: "After"
- Lock: "Immutable"

Visual Details:
1. Core Concept: Controlling what changes during an update.
2. Metaphor: Two snapshots of a document, with a padlock on the 'createdAt' field preventing it from changing in the 'After' version.
3. Action: Locking.
4. Layout: Side-by-side comparison.		## 5-2) update の最低限バリデーション（“変えていい項目だけ”）🛠️
57firebase_local_dev_ts_study_008firebase_local_dev_ts_study_008_admin_bypass.png./picture/firebase_local_dev_ts_study_008_admin_bypass.pngTheme: Admin Bypass

Labels to Render:
- Line: "Client SDK"
- Gate: "Rules"
- VIP: "Admin SDK"
- Path: "Bypass"

Visual Details:
1. Core Concept: Server SDK bypassing rules.
2. Metaphor: A long queue (Clients) stopped at a checkpost, while a VIP car (Admin) drives through a separate open lane.
3. Action: Bypassing.
4. Layout: Two lanes.		## 7) 超大事な注意⚠️：「サーバー側（Admin SDK）はRulesを素通り」問題
58firebase_local_dev_ts_study_009firebase_local_dev_ts_study_009_trace_concept.png./picture/firebase_local_dev_ts_study_009_trace_concept.pngTheme: Trace Concept

Labels to Render:
- Stamp: "DENIED"
- Lens: "Trace"
- Reason: "False Condition"

Visual Details:
1. Core Concept: Understanding why a request was denied.
2. Metaphor: A magnifying glass held over a 'DENIED' stamp, revealing the microscopic text 'Condition Failed' underneath.
3. Action: Revealing.
4. Layout: Close-up.		## 1) まず“わざと失敗”のネタを用意しよう💥（ここが一番学べる）
59firebase_local_dev_ts_study_009firebase_local_dev_ts_study_009_create_vs_update.png./picture/firebase_local_dev_ts_study_009_create_vs_update.pngTheme: Create vs Update

Labels to Render:
- Create: "Create (New)"
- Data: "request.resource"
- Update: "Update (Existing)"
- Data: "resource"

Visual Details:
1. Core Concept: Different data sources for rules.
2. Metaphor: Create as a sketch on paper (New Data), Update as a hammer hitting an existing wall (Existing Data).
3. Action: Comparison.
4. Layout: Split screen.		## 例：メモ用の Firestore Rules（chapter8 の続き想定）🛡️
60firebase_local_dev_ts_study_009firebase_local_dev_ts_study_009_unauth_read.png./picture/firebase_local_dev_ts_study_009_unauth_read.pngTheme: Unauth Read

Labels to Render:
- User: "Anonymous"
- Book: "Database"
- Lock: "Auth Required"

Visual Details:
1. Core Concept: Blocking unauthenticated access.
2. Metaphor: A silhouette figure trying to open a locked book, with a lock symbol glowing red.
3. Action: Access denied.
4. Layout: Simple interaction.		## 3) 実験①：未ログインで読み取り → 弾かれる🔐➡️⛔
61firebase_local_dev_ts_study_009firebase_local_dev_ts_study_009_bad_owner_create.png./picture/firebase_local_dev_ts_study_009_bad_owner_create.pngTheme: Bad Owner Create

Labels to Render:
- User: "User A"
- Brick: "Owner: B"
- Wall: "House A"
- Result: "Reject"

Visual Details:
1. Core Concept: ID mismatch during creation.
2. Metaphor: A construction worker (User A) trying to lay a brick labeled 'Owner: B', but the cement rejects it.
3. Action: Rejection.
4. Layout: Construction scene.		## 4) 実験②：ownerId をわざとズラして作成 → 弾かれる🧨
62firebase_local_dev_ts_study_009firebase_local_dev_ts_study_009_bad_owner_update.png./picture/firebase_local_dev_ts_study_009_bad_owner_update.pngTheme: Bad Owner Update

Labels to Render:
- User: "User B"
- House: "Owner: A"
- Action: "Update"
- Guard: "Block"

Visual Details:
1. Core Concept: ID mismatch during update.
2. Metaphor: A painter (User B) trying to paint a house labeled 'Owner: A', but a security system blocks the brush.
3. Action: Blocking.
4. Layout: House scene.		## 5) 実験③：他人のメモを update → 弾かれる🕵️‍♂️➡️⛔
63firebase_local_dev_ts_study_009firebase_local_dev_ts_study_009_trace_flow.png./picture/firebase_local_dev_ts_study_009_trace_flow.pngTheme: Trace Reading Flow

Labels to Render:
- Step 1: "Operation"
- Step 2: "Path"
- Step 3: "Rule"
- Step 4: "False"

Visual Details:
1. Core Concept: The sequence of reading a trace.
2. Metaphor: A winding path or flowchart with numbered stops, leading to the 'False' condition.
3. Action: Navigation.
4. Layout: Flowchart.		## 6) “評価トレース”の読み方テンプレ🧩（迷子になったらこれだけ）
64firebase_local_dev_ts_study_009firebase_local_dev_ts_study_009_rule_coverage.png./picture/firebase_local_dev_ts_study_009_rule_coverage.pngTheme: Rule Coverage

Labels to Render:
- Code: "Rules"
- Green: "Tested"
- Red: "Untested"
- Chart: "Coverage %"

Visual Details:
1. Core Concept: Visualizing code coverage.
2. Metaphor: A document where read lines are highlighted in green and unread lines in red/grey.
3. Action: Highlighting.
4. Layout: Document view.		## 8) “見える化”をさらに強くする：Rule Coverage も見てみよう📈🧪
65firebase_local_dev_ts_study_010firebase_local_dev_ts_study_010_reproducibility.png./picture/firebase_local_dev_ts_study_010_reproducibility.pngTheme: Reproducibility Concept

Labels to Render:
- State: "State A"
- Action: "Test"
- Reset: "Reset"
- Result: "State A"

Visual Details:
1. Core Concept: Always starting from the same state.
2. Metaphor: A time loop or save point where a character dies (Test Fail) but respawns at the exact same save point (Reset).
3. Action: Respawning.
4. Layout: Cycle.		## この章のゴール🎯
66firebase_local_dev_ts_study_010firebase_local_dev_ts_study_010_import_export.png./picture/firebase_local_dev_ts_study_010_import_export.pngTheme: Import/Export Cycle

Labels to Render:
- Memory: "Emulator RAM"
- Save: "Export"
- Disk: "JSON Files"
- Load: "Import"

Visual Details:
1. Core Concept: Persisting memory to disk and back.
2. Metaphor: A conveyor belt moving boxes (Data) from a glowing brain (RAM) to a storage shelf (Disk) and back.
3. Action: Moving.
4. Layout: Cyclic flow.		## 1) まずはスナップショット方式：import / export 🧳📦
67firebase_local_dev_ts_study_010firebase_local_dev_ts_study_010_baseline_work.png./picture/firebase_local_dev_ts_study_010_baseline_work.pngTheme: Baseline vs Work

Labels to Render:
- Read: "Baseline (Read Only)"
- Write: "Work (Read/Write)"
- Action: "Daily Dev"

Visual Details:
1. Core Concept: Immutable base vs mutable workspace.
2. Metaphor: A master key (Baseline) that is copied to make a working key (Work). The master key is kept in a glass case.
3. Action: Copying.
4. Layout: Comparison.		## 手を動かす③：「いつでも戻れる初期状態」を別フォルダに作る（超おすすめ）🛟✨
68firebase_local_dev_ts_study_010firebase_local_dev_ts_study_010_seed_script.png./picture/firebase_local_dev_ts_study_010_seed_script.pngTheme: Seed Script

Labels to Render:
- Script: "Seed.ts"
- Plant 1: "User 1"
- Plant 2: "Memo 1-10"
- Field: "Firestore"

Visual Details:
1. Core Concept: Programmatic data generation.
2. Metaphor: A mechanical planter (Script) driving over a field (Firestore), planting exact rows of identical crops (Data).
3. Action: Planting.
4. Layout: Field view.		## 2) 次は種まき方式：seedスクリプトで「毎回同じ10件」🌱🗃️
69firebase_local_dev_ts_study_010firebase_local_dev_ts_study_010_env_vars.png./picture/firebase_local_dev_ts_study_010_env_vars.pngTheme: Env Vars Connection

Labels to Render:
- SDK: "Admin SDK"
- Bridge: "ENV VARS"
- Target: "Emulators"

Visual Details:
1. Core Concept: Implicit connection via environment variables.
2. Metaphor: Invisible wires becoming visible under a UV light labeled 'Environment Variables', connecting the SDK to the Emulators.
3. Action: Connecting.
4. Layout: Connection diagram.		## 手を動かす④：Admin SDK をエミュレータに向ける（環境変数）🎯
70firebase_local_dev_ts_study_010firebase_local_dev_ts_study_010_fixed_data.png./picture/firebase_local_dev_ts_study_010_fixed_data.pngTheme: Fixed Data

Labels to Render:
- Random: "Random ID (Bad)"
- Fixed: "Fixed ID (Good)"
- Goal: "Stability"

Visual Details:
1. Core Concept: The value of deterministic data.
2. Metaphor: A stack of chaos (Random dice) vs a neat stack of bricks (Fixed IDs).
3. Action: Stacking.
4. Layout: Contrast.		## 手を動かす⑤：seedスクリプト例（ユーザー1人＋メモ10件）🧑‍💻🗃️
71firebase_local_dev_ts_study_010firebase_local_dev_ts_study_010_auto_button.png./picture/firebase_local_dev_ts_study_010_auto_button.pngTheme: Automation Button

Labels to Render:
- Button: "npm run test"
- Gear 1: "Start"
- Gear 2: "Seed"
- Gear 3: "Test"

Visual Details:
1. Core Concept: Chaining commands.
2. Metaphor: A Rube Goldberg machine triggered by a single finger press, setting off a sequence of actions.
3. Action: Triggering.
4. Layout: Chain reaction.		## 3) ワンコマンド化：npm scripts で「毎回同じ」ボタンを作る🔘✨
72firebase_local_dev_ts_study_011firebase_local_dev_ts_study_011_functions_concept.png./picture/firebase_local_dev_ts_study_011_functions_concept.pngTheme: Functions Emulator Concept

Labels to Render:
- UI: "React (Frontend)"
- Backend: "Functions (Backend)"
- Boundary: "Network"

Visual Details:
1. Core Concept: Separation of concerns.
2. Metaphor: A restaurant scene. Diners (Users) interact with Waiters (React) in the front, while Chefs (Functions) cook in the closed kitchen back.
3. Action: Waiter passing order to kitchen.
4. Layout: Cutaway view.		## 1) まずは全体像をイメージ🧠🗺️
73firebase_local_dev_ts_study_011firebase_local_dev_ts_study_011_http_flow.png./picture/firebase_local_dev_ts_study_011_http_flow.pngTheme: HTTP Request Flow

Labels to Render:
- Req: "Request (JSON)"
- Func: "Code Logic"
- Res: "Response (JSON)"

Visual Details:
1. Core Concept: HTTP Request and Response.
2. Metaphor: A mail chute system. A capsule (Request) goes up, gets processed by gears (Function), and a new capsule (Response) comes down.
3. Action: Processing.
4. Layout: Vertical flow.		## 2-1. hello 関数を追加する🧩
74firebase_local_dev_ts_study_011firebase_local_dev_ts_study_011_build_step.png./picture/firebase_local_dev_ts_study_011_build_step.pngTheme: Build Step

Labels to Render:
- Input: "TypeScript (.ts)"
- Tool: "Build (tsc)"
- Output: "JavaScript (.js)"
- Target: "Node.js"

Visual Details:
1. Core Concept: Transpiling code.
2. Metaphor: A factory machine. Raw jagged rocks (TS) go in, are polished by the machine (Build), and smooth bricks (JS) come out.
3. Action: Manufacturing.
4. Layout: Process line.		## 2-2. いったん“ビルドの儀式”をする🧱✨
75firebase_local_dev_ts_study_011firebase_local_dev_ts_study_011_url_anatomy.png./picture/firebase_local_dev_ts_study_011_url_anatomy.pngTheme: URL Anatomy

Labels to Render:
- Host: "localhost:5001"
- Project: "demo-project"
- Region: "asia-northeast1"
- Name: "hello"

Visual Details:
1. Core Concept: Structure of the local URL.
2. Metaphor: A train with connected carriages, each labeled with a part of the URL.
3. Action: Moving on track.
4. Layout: Horizontal train.		## 2-4. URL を叩いて動作確認する🔨🌐
76firebase_local_dev_ts_study_011firebase_local_dev_ts_study_011_react_fetch.png./picture/firebase_local_dev_ts_study_011_react_fetch.pngTheme: React Fetch

Labels to Render:
- React: "Frontend"
- Hook: "fetch()"
- Line: "Connection"
- Data: "Result"

Visual Details:
1. Core Concept: Connecting frontend to backend.
2. Metaphor: A character throwing a grappling hook (fetch) from an island (React) to a ship (Functions) to pull a treasure chest (Data).
3. Action: Pulling.
4. Layout: Connection.		## 3) React から Functions Emulator へ接続する🔌⚛️
77firebase_local_dev_ts_study_011firebase_local_dev_ts_study_011_troubleshoot_404.png./picture/firebase_local_dev_ts_study_011_troubleshoot_404.pngTheme: Troubleshooting 404

Labels to Render:
- Sign 1: "Wrong Project?"
- Sign 2: "Wrong Region?"
- Sign 3: "Wrong Name?"
- Driver: "Request"

Visual Details:
1. Core Concept: Identifying URL errors.
2. Metaphor: A confused delivery drone hovering over three different landing pads, unable to find the right address.
3. Action: Confusion.
4. Layout: Map view.		## 6-1. 404 になる😭
78firebase_local_dev_ts_study_011firebase_local_dev_ts_study_011_ai_stub.png./picture/firebase_local_dev_ts_study_011_ai_stub.pngTheme: AI Stub

Labels to Render:
- Real: "Real AI ($$$)"
- Stub: "Stub (Free)"
- Test: "Local Test"

Visual Details:
1. Core Concept: Using a dummy for testing.
2. Metaphor: A movie set where a cardboard cutout (Stub) is used for lighting setup instead of the expensive actor (Real AI).
3. Action: Filming/Testing.
4. Layout: Studio scene.		## 8-1. まずは「スタブ（ダミーAI）」で安全に🧯
79firebase_local_dev_ts_study_012firebase_local_dev_ts_study_012_ts_flow.png./picture/firebase_local_dev_ts_study_012_ts_flow.pngTheme: TS Build Flow

Labels to Render:
- Input: "src/index.ts"
- Process: "tsc (Build)"
- Output: "lib/index.js"
- User: "Emulator"

Visual Details:
1. Core Concept: The emulator reads JS, not TS.
2. Metaphor: A conveyor belt where raw blue material (TS) enters a machine (tsc) and comes out as yellow bricks (JS), which are then consumed by a robot (Emulator).
3. Action: Processing.
4. Layout: Left to Right flow.		## 読む📖：まず“罠”の正体（頭の中の図）🧠🗺️
80firebase_local_dev_ts_study_012firebase_local_dev_ts_study_012_manual_build.png./picture/firebase_local_dev_ts_study_012_manual_build.pngTheme: Manual Build

Labels to Render:
- Step 1: "Build (npm run build)"
- Step 2: "Start (emulators:start)"
- Status: "Success"

Visual Details:
1. Core Concept: Order of operations.
2. Metaphor: Baking a cake. Step 1 is mixing batter (Build), Step 2 is putting it in the oven (Start).
3. Action: Sequential steps.
4. Layout: Timeline.		## 手を動かす🖐️：最短の成功ルート（まずこれで勝つ）🚀✨
81firebase_local_dev_ts_study_012firebase_local_dev_ts_study_012_deploy_trap.png./picture/firebase_local_dev_ts_study_012_deploy_trap.pngTheme: Trap: Deploy vs Local

Labels to Render:
- Cloud: "Deploy (Auto Build)"
- Local: "Emulator (Manual Build)"
- Trap: "Forgot Build"

Visual Details:
1. Core Concept: Difference in automation.
2. Metaphor: An automatic sliding door (Deploy) vs a heavy manual door (Local) that the user bumps into.
3. Action: Bumping/Stopping.
4. Layout: Comparison.		## 罠①：「デプロイでは動くのに、ローカルでは動かない」😇
82firebase_local_dev_ts_study_012firebase_local_dev_ts_study_012_hot_reload_trap.png./picture/firebase_local_dev_ts_study_012_hot_reload_trap.pngTheme: Trap: Hot Reload

Labels to Render:
- Editor: "TS Change"
- Build: "Build (Missing)"
- Emulator: "Old JS"
- Mood: "Confused"

Visual Details:
1. Core Concept: TS changes don't automatically update JS.
2. Metaphor: A painter changing a portrait, but the printer hasn't printed the new version yet, so the gallery still shows the old one.
3. Action: Disconnect.
4. Layout: Broken link.		## 罠②：「起動したのに反映されない」😵‍💫（ホットリロード勘違い）
83firebase_local_dev_ts_study_012firebase_local_dev_ts_study_012_missing_module.png./picture/firebase_local_dev_ts_study_012_missing_module.pngTheme: Trap: Missing Module

Labels to Render:
- Path: "lib/index.js"
- State: "Missing"
- Error: "Cannot find module"

Visual Details:
1. Core Concept: The file doesn't exist.
2. Metaphor: A file cabinet drawer labeled 'lib' being opened, and it's completely empty. Spiderwebs.
3. Action: Searching.
4. Layout: Close-up.		## 罠③：「Cannot find module 'lib/index.js'」系（ビルド成果物の迷子）🧟‍♂️
84firebase_local_dev_ts_study_012firebase_local_dev_ts_study_012_watch_mode.png./picture/firebase_local_dev_ts_study_012_watch_mode.pngTheme: Watch Mode

Labels to Render:
- Eye: "Watch Mode"
- Action: "Auto Rebuild"
- Target: "Emulator"

Visual Details:
1. Core Concept: Automatic updates.
2. Metaphor: A giant eye (Watch) observing the code, and instantly zapping the build machine whenever it sees movement.
3. Action: Zapping/Updating.
4. Layout: Dynamic interaction.		## 運用B：2ターミナルで watch（いちばん快適）👀⚡
85firebase_local_dev_ts_study_012firebase_local_dev_ts_study_012_concurrent.png./picture/firebase_local_dev_ts_study_012_concurrent.pngTheme: Concurrent Command

Labels to Render:
- Command: "npm run emu"
- Runner 1: "Build:watch"
- Runner 2: "Emulators"
- Sync: "Parallel"

Visual Details:
1. Core Concept: Running two processes at once.
2. Metaphor: Two rail tracks running parallel, with trains (Build and Emulator) moving at the same speed side-by-side.
3. Action: Moving together.
4. Layout: Parallel lines.		## 運用C：ワンコマンド化（“教材らしさ”MAX）🚀📦
86firebase_local_dev_ts_study_013firebase_local_dev_ts_study_013_secret_vs_config.png./picture/firebase_local_dev_ts_study_013_secret_vs_config.pngTheme: Secret vs Config Classification

Labels to Render:
- Open Box: "Config (Safe)"
- Closed Safe: "Secret (Danger)"
- Item 1: "API Key"

Visual Details:
1. Core Concept: Distinguishing between safe settings and dangerous secrets.
2. Metaphor: An open cardboard box containing harmless flags, next to a heavy steel safe containing glowing keys.
3. Action: Sorting.
4. Layout: Side-by-side comparison.		## 1) まず「秘密」と「秘密じゃない」を分けよう🧠🔎
87firebase_local_dev_ts_study_013firebase_local_dev_ts_study_013_env_hierarchy.png./picture/firebase_local_dev_ts_study_013_env_hierarchy.pngTheme: Env File Hierarchy

Labels to Render:
- Base: ".env (Common)"
- Layer: ".env.dev"
- Layer: ".env.prod"

Visual Details:
1. Core Concept: Configuration layering.
2. Metaphor: A base foundation block labeled '.env', with interchangeable blocks '.env.dev' and '.env.prod' that can be placed on top.
3. Action: Stacking.
4. Layout: Stacked layers.		## 2) .env の基本ルール🙂🧾
88firebase_local_dev_ts_study_013firebase_local_dev_ts_study_013_local_override.png./picture/firebase_local_dev_ts_study_013_local_override.pngTheme: Local Override

Labels to Render:
- Global: ".env"
- Local: ".env.local"
- Priority: "High Priority"

Visual Details:
1. Core Concept: Local settings taking precedence.
2. Metaphor: A 'Local' card being placed on top of a 'Global' card, covering the old value.
3. Action: Overriding.
4. Layout: Card game style.		## 3) ローカルだけ上書きする .env.local が神🧪🔀
89firebase_local_dev_ts_study_013firebase_local_dev_ts_study_013_secret_binding.png./picture/firebase_local_dev_ts_study_013_secret_binding.pngTheme: Secret Binding

Labels to Render:
- Vault: "Secret Manager"
- Func A: "Function A (Allowed)"
- Func B: "Function B (Denied)"

Visual Details:
1. Core Concept: Granting access to secrets per function.
2. Metaphor: A secure cable connecting the Vault to Function A, while Function B has no connection.
3. Action: Secure connection.
4. Layout: Network diagram.		## 5) 秘密を安全に使う最短手順🚀🔑
90firebase_local_dev_ts_study_013firebase_local_dev_ts_study_013_local_secret.png./picture/firebase_local_dev_ts_study_013_local_secret.pngTheme: Local Secret Replacement

Labels to Render:
- Cloud: "Secret Manager"
- Local: ".secret.local"
- Emulator: "Emulator"

Visual Details:
1. Core Concept: Using dummy secrets locally.
2. Metaphor: The Emulator ignoring the Cloud Vault and instead picking up a toy key from a box labeled '.secret.local'.
3. Action: Substitution.
4. Layout: Selection flow.		## 6) エミュレータで秘密を差し替える .secret.local 🧪🧰
91firebase_local_dev_ts_study_013firebase_local_dev_ts_study_013_ai_mode_switch.png./picture/firebase_local_dev_ts_study_013_ai_mode_switch.pngTheme: AI Mode Switch

Labels to Render:
- Switch: "AI_MODE"
- Left: "Stub (Free)"
- Right: "Real (Paid)"

Visual Details:
1. Core Concept: Switching logic based on mode.
2. Metaphor: A railway switch track diverting the train (Code Execution) to either the Safe track or the Paid track.
3. Action: Switching.
4. Layout: Branching path.		## 7) AIを絡めた実戦ミニ題材🤖🪄
92firebase_local_dev_ts_study_013firebase_local_dev_ts_study_013_legacy_trap.png./picture/firebase_local_dev_ts_study_013_legacy_trap.pngTheme: Legacy Config Trap

Labels to Render:
- Old: "functions.config()"
- New: "Secret Manager"
- Warning: "Deprecated"

Visual Details:
1. Core Concept: Avoiding deprecated methods.
2. Metaphor: A crumbling bridge labeled 'functions.config()' with a 'Do Not Cross' sign, next to a modern sturdy bridge.
3. Action: Warning.
4. Layout: Comparison.		## 9) ついでに大事な地雷🧨😵‍💫
93firebase_local_dev_ts_study_014firebase_local_dev_ts_study_014_double_guard.png./picture/firebase_local_dev_ts_study_014_double_guard.pngTheme: Double Guard Security

Labels to Render:
- Outer: "React (UX)"
- Inner: "Rules (Security)"
- Intruder: "Bad Actor"

Visual Details:
1. Core Concept: Two layers of protection.
2. Metaphor: A castle with a polite outer gate (UX) that suggests entry, but a heavily armored inner gate (Rules) that actually stops intruders.
3. Action: Blocking.
4. Layout: Layered defense.		## 1) まず “二重ガード” の考え方🧠🔐
94firebase_local_dev_ts_study_014firebase_local_dev_ts_study_014_id_match.png./picture/firebase_local_dev_ts_study_014_id_match.pngTheme: UID Matching

Labels to Render:
- Auth: "User UID"
- Doc: "Document UID"
- Result: "Match"

Visual Details:
1. Core Concept: Verifying ownership by matching IDs.
2. Metaphor: A key labeled 'User UID' fitting perfectly into a lock labeled 'Document UID'.
3. Action: Unlocking.
4. Layout: Close-up match.		## 2) “本人判定” のためのデータ設計（最小）🗂️✍️
95firebase_local_dev_ts_study_014firebase_local_dev_ts_study_014_rules_logic.png./picture/firebase_local_dev_ts_study_014_rules_logic.pngTheme: Rules Logic Flow

Labels to Render:
- Check 1: "Signed In?"
- Check 2: "Is Owner?"
- Result: "Allow"

Visual Details:
1. Core Concept: The decision process of security rules.
2. Metaphor: A security checkpoint with two gates. The user must pass both to get the 'Allow' stamp.
3. Action: Passing through.
4. Layout: Sequential flow.		## 3) ルールを書く：本人だけ read/write 🛡️🧾
96firebase_local_dev_ts_study_014firebase_local_dev_ts_study_014_emulator_connect.png./picture/firebase_local_dev_ts_study_014_emulator_connect.pngTheme: Emulator Connection

Labels to Render:
- App: "React App"
- Auth: "Port 9099"
- DB: "Port 8080"

Visual Details:
1. Core Concept: Connecting the frontend to local emulators.
2. Metaphor: A dual plug extending from the App, plugging into two distinct wall sockets labeled 'Auth' and 'Firestore'.
3. Action: Plugging in.
4. Layout: Connection diagram.		## 4-1) Auth / Firestore をエミュへ向ける🧪
97firebase_local_dev_ts_study_014firebase_local_dev_ts_study_014_react_state.png./picture/firebase_local_dev_ts_study_014_react_state.pngTheme: React Login State

Labels to Render:
- State: "User = null"
- View: "Login Screen"
- State: "User = LoggedIn"
- View: "Memo List"

Visual Details:
1. Core Concept: UI changing based on authentication state.
2. Metaphor: A flip-board or rotating sign. Side A is 'Login', Side B is 'Content'.
3. Action: Flipping.
4. Layout: State transition.		## 4-2) ログインしてないなら「見せない」画面にする🙈➡️🙂
98firebase_local_dev_ts_study_014firebase_local_dev_ts_study_014_user_creation.png./picture/firebase_local_dev_ts_study_014_user_creation.pngTheme: User Creation in Emulator

Labels to Render:
- Tool: "Emulator UI"
- Action: "Add User"
- Result: "User A / User B"

Visual Details:
1. Core Concept: Manually creating test users.
2. Metaphor: A character creator screen or a 3D printer in the Emulator UI generating two distinct avatars.
3. Action: Creation.
4. Layout: Interface view.		## 6-1) テストユーザーを作る（Emulator UI）👤✨
99firebase_local_dev_ts_study_014firebase_local_dev_ts_study_014_request_trace.png./picture/firebase_local_dev_ts_study_014_request_trace.pngTheme: Request Trace Debugging

Labels to Render:
- Tab: "Requests"
- Status: "DENIED"
- Tool: "Trace"

Visual Details:
1. Core Concept: Analyzing why a request failed.
2. Metaphor: A debugger view showing a red 'DENIED' line, with a magnifying glass revealing the specific rule line that blocked it.
3. Action: Inspecting.
4. Layout: Dashboard view.		## 7) 失敗の理由を “目で見る” ：Requestsタブで追跡👀🧾
100firebase_local_dev_ts_study_015firebase_local_dev_ts_study_015_event_cycle.png./picture/firebase_local_dev_ts_study_015_event_cycle.pngTheme: Event Driven Cycle

Labels to Render:
- 1: "Add (React)"
- 2: "Event (Firestore)"
- 3: "Trigger (Functions)"
- 4: "Update (Done)"

Visual Details:
1. Core Concept: The circular flow of data and events.
2. Metaphor: A circular conveyor belt or relay race where data moves from App to DB, triggers Logic, and writes back to DB.
3. Action: Cycling.
4. Layout: Circular flow.		## まずイメージ図🧠🗺️（これが“イベント駆動”）
101firebase_local_dev_ts_study_015firebase_local_dev_ts_study_015_doc_structure.png./picture/firebase_local_dev_ts_study_015_doc_structure.pngTheme: Document Fields Structure

Labels to Render:
- Field: "rawText (Input)"
- Field: "formattedText (Output)"
- Status: "done"

Visual Details:
1. Core Concept: The database document schema.
2. Metaphor: A file folder showing the raw input data and the processed output data side-by-side.
3. Action: Displaying.
4. Layout: Document view.		## 1) データ設計：まずフィールドを決めよう🧩🗃️
102firebase_local_dev_ts_study_015firebase_local_dev_ts_study_015_trigger_watch.png./picture/firebase_local_dev_ts_study_015_trigger_watch.pngTheme: Firestore Trigger Watch

Labels to Render:
- Path: "users/{uid}/memos"
- Action: "Create"
- Watcher: "Function"

Visual Details:
1. Core Concept: Monitoring a specific path for new documents.
2. Metaphor: A security camera or sensor focused on a specific mailbox, lighting up when a letter is dropped in.
3. Action: Detection.
4. Layout: Focused observation.		## 2) Functions側：Firestore “作成イベント”で動く関数を書く⚙️🔥
103firebase_local_dev_ts_study_015firebase_local_dev_ts_study_015_loop_guard.png./picture/firebase_local_dev_ts_study_015_loop_guard.pngTheme: Infinite Loop Guard

Labels to Render:
- Check: "Is Formatted?"
- Yes: "Stop (Return)"
- No: "Process"

Visual Details:
1. Core Concept: Preventing redundant execution.
2. Metaphor: A gatekeeper checking a ticket. If the ticket is already punched (Formatted), entry is denied (Stop).
3. Action: Blocking.
4. Layout: Decision gate.		## 2-1. 例：メモ作成時に整形する（TypeScript）
104firebase_local_dev_ts_study_015firebase_local_dev_ts_study_015_ui_transition.png./picture/firebase_local_dev_ts_study_015_ui_transition.pngTheme: UI State Transition

Labels to Render:
- State 1: "Pending"
- Visual: "Spinner"
- State 2: "Done"
- Visual: "Text"

Visual Details:
1. Core Concept: Visualizing the background process status.
2. Metaphor: A transformation from a grey loading spinner to a bright green document.
3. Action: Transformation.
4. Layout: Before/After.		## 3) React側：メモを “pending” で作って、結果を待つ🕐🖥️
105firebase_local_dev_ts_study_015firebase_local_dev_ts_study_015_emulator_chain.png./picture/firebase_local_dev_ts_study_015_emulator_chain.pngTheme: Emulator Chain Reaction

Labels to Render:
- Start: "Auth"
- Mid: "Firestore"
- End: "Functions"

Visual Details:
1. Core Concept: Multiple emulators working in concert.
2. Metaphor: A line of dominoes where pushing the first one (Auth/User) triggers the rest (Firestore -> Functions).
3. Action: Chain reaction.
4. Layout: Linear flow.		## 4-1. 起動（Auth/Firestore/Functions）
106firebase_local_dev_ts_study_015firebase_local_dev_ts_study_015_loop_trap.png./picture/firebase_local_dev_ts_study_015_loop_trap.pngTheme: Infinite Loop Trap

Labels to Render:
- Trigger: "Update"
- Action: "Function"
- Result: "Update"
- Cycle: "Infinite"

Visual Details:
1. Core Concept: The danger of self-triggering functions.
2. Metaphor: An Ouroboros (snake eating its tail) or a dog chasing its tail, representing the endless cycle.
3. Action: Spinning.
4. Layout: Circular trap.		## 事故②：無限ループ（更新→トリガー→更新→…）♾️🔥
107firebase_local_dev_ts_study_016firebase_local_dev_ts_study_016_manual_vs_auto.png./picture/firebase_local_dev_ts_study_016_manual_vs_auto.pngTheme: Manual vs Auto Workflow

Labels to Render:
- Manual: "Start -> Test -> Stop"
- Auto: "emulators:exec"
- Result: "One Command"

Visual Details:
1. Core Concept: Simplifying a multi-step process.
2. Metaphor: A chaotic juggling act (Manual) vs a streamlined conveyor belt (Auto).
3. Action: Simplifying.
4. Layout: Comparison.		## 読む📖　emulators:exec の考え方（なにが嬉しい？）🧠✨
108firebase_local_dev_ts_study_016firebase_local_dev_ts_study_016_smoke_flow.png./picture/firebase_local_dev_ts_study_016_smoke_flow.pngTheme: Smoke Test Logic

Labels to Render:
- 1: "Write Data"
- 2: "Wait Loop"
- 3: "Check Data"
- 4: "Exit 0/1"

Visual Details:
1. Core Concept: The logic flow of an async test.
2. Metaphor: A flowchart showing a loop that checks for a condition (Data present) and exits with success or failure (timeout).
3. Action: Looping.
4. Layout: Flowchart.		### 1) まずはテスト用スクリプトを作る🧪
109firebase_local_dev_ts_study_016firebase_local_dev_ts_study_016_command_anatomy.png./picture/firebase_local_dev_ts_study_016_command_anatomy.pngTheme: Command Anatomy

Labels to Render:
- Cmd: "emulators:exec"
- Opt: "--only firestore"
- Script: "npm run test"

Visual Details:
1. Core Concept: Breaking down the command parts.
2. Metaphor: A train engine (exec) pulling specific cars (options and script).
3. Action: Moving.
4. Layout: Horizontal structure.		### 2) package.json にコマンドを用意する🧰✨
110firebase_local_dev_ts_study_016firebase_local_dev_ts_study_016_exec_timeline.png./picture/firebase_local_dev_ts_study_016_exec_timeline.pngTheme: Execution Timeline

Labels to Render:
- Phase 1: "Start Emulators"
- Phase 2: "Run Script"
- Phase 3: "Stop Emulators"

Visual Details:
1. Core Concept: The sequence of events managed by the tool.
2. Metaphor: A timeline bar with three distinct colored sections: Green (Start), Blue (Run), Red (Stop).
3. Action: Progressing.
4. Layout: Timeline.		### 3) 実行してみよう🚀（PowerShellでもOK）
111firebase_local_dev_ts_study_016firebase_local_dev_ts_study_016_persistence_cycle.png./picture/firebase_local_dev_ts_study_016_persistence_cycle.pngTheme: Persistence Cycle

Labels to Render:
- File: "./seed-data"
- Start: "Import"
- End: "Export"
- Test: "Consistent State"

Visual Details:
1. Core Concept: Loading and saving data for consistency.
2. Metaphor: A safe being opened (Import) at the start, and locked (Export) at the end, ensuring the treasure (Data) is preserved.
3. Action: Opening/Closing.
4. Layout: Cycle.		## もう一段上👑　データ固定（import/export）で“再現性100%”へ🔁🧪
112firebase_local_dev_ts_study_016firebase_local_dev_ts_study_016_id_trap.png./picture/firebase_local_dev_ts_study_016_id_trap.pngTheme: Project ID Trap

Labels to Render:
- Emulator: "ID: demo-1"
- Script: "ID: demo-2"
- Result: "Error / Warning"

Visual Details:
1. Core Concept: Mismatch causing failures.
2. Metaphor: Two puzzle pieces (Emulator and Script) trying to connect but their shapes (IDs) don't match.
3. Action: Failed connection.
4. Layout: Mismatch.		### ✅ 1) Project ID がズレると、連携が壊れやすい🧩💥
113firebase_local_dev_ts_study_016firebase_local_dev_ts_study_016_ai_generator.png./picture/firebase_local_dev_ts_study_016_ai_generator.pngTheme: AI Test Generator

Labels to Render:
- Input: "Create Smoke Test"
- AI: "Gemini CLI"
- Output: "e2e-smoke.mjs"

Visual Details:
1. Core Concept: AI generating the test code.
2. Metaphor: A futuristic printer or robot arm writing code onto a file based on a voice command.
3. Action: Generating.
4. Layout: Flow.		## AIでさらに加速🤖💨（Gemini CLI / Firebase MCP / Studio）
114firebase_local_dev_ts_study_017firebase_local_dev_ts_study_017_admin_sdk_key.png./picture/firebase_local_dev_ts_study_017_admin_sdk_key.pngTheme: Admin SDK Master Key

Labels to Render:
- User: "Client SDK"
- Gate: "Security Rules"
- Admin: "Admin SDK"
- Item: "Master Key"

Visual Details:
1. Core Concept: Admin SDK bypassing security rules.
2. Metaphor: A normal user stopped at a gate, while an Admin character walks through the wall using a glowing Master Key.
3. Action: Bypassing.
4. Layout: Contrast.		## 読む📖：Admin SDKってなに？なんで要るの？🤔
115firebase_local_dev_ts_study_017firebase_local_dev_ts_study_017_env_bridge.png./picture/firebase_local_dev_ts_study_017_env_bridge.pngTheme: Env Var Bridge

Labels to Render:
- Script: "Seed Script"
- Env: "ENV VARS"
- Emulator: "Emulator"
- Connection: "Auto Connect"

Visual Details:
1. Core Concept: Environment variables enabling connection.
2. Metaphor: A bridge constructing itself between a cliff (Script) and a castle (Emulator) when the 'ENV VARS' block is placed.
3. Action: Connecting.
4. Layout: Bridge.		## 3) エミュレータ接続の“核”＝環境変数を用意する🔌🧠
116firebase_local_dev_ts_study_017firebase_local_dev_ts_study_017_protocol_warning.png./picture/firebase_local_dev_ts_study_017_protocol_warning.pngTheme: Protocol Warning

Labels to Render:
- Good: "127.0.0.1:9099"
- Bad: "http://..."
- Result: "Error"

Visual Details:
1. Core Concept: Correct format for emulator host variables.
2. Metaphor: A traffic sign. The address without 'http' gets a green checkmark. The address with 'http' gets a red stop sign.
3. Action: Warning.
4. Layout: Comparison.		## 3) エミュレータ接続の“核”＝環境変数を用意する🔌🧠
117firebase_local_dev_ts_study_017firebase_local_dev_ts_study_017_seed_logic.png./picture/firebase_local_dev_ts_study_017_seed_logic.pngTheme: Seed Script Logic

Labels to Render:
- Step 1: "Check Env"
- Step 2: "Get/Create User"
- Step 3: "Upsert Memo"

Visual Details:
1. Core Concept: The idempotent flow of the seed script.
2. Metaphor: A robotic gardening arm. It checks the soil, plants a seed (User), and waters it (Memo).
3. Action: Planting.
4. Layout: Step-by-step.		## 4) seed.ts を書く✍️（ユーザー作成＋メモ投入）
118firebase_local_dev_ts_study_017firebase_local_dev_ts_study_017_exec_comparison.png./picture/firebase_local_dev_ts_study_017_exec_comparison.pngTheme: Execution Method Comparison

Labels to Render:
- Manual: "2 Terminals"
- Auto: "1 Command"
- Result: "Easy"

Visual Details:
1. Core Concept: Simplifying execution.
2. Metaphor: A juggler managing two balls (Terminals) vs a person pressing a single 'Play' button.
3. Action: Simplifying.
4. Layout: Comparison.		## 5) 実行する🏃‍♂️💨（方法は2通り）
119firebase_local_dev_ts_study_017firebase_local_dev_ts_study_017_id_mismatch.png./picture/firebase_local_dev_ts_study_017_id_mismatch.pngTheme: Project ID Mismatch

Labels to Render:
- World A: "Project: demo-1"
- World B: "Project: demo-2"
- Seed: "Data"
- User: "Where is it?"

Visual Details:
1. Core Concept: Data written to the wrong project ID is invisible.
2. Metaphor: Two parallel dimensions. The seed is planted in Dimension A, but the user is looking for it in Dimension B.
3. Action: Searching in vain.
4. Layout: Parallel worlds.		## ❷ projectId がズレて「別世界」にseedしてる問題🌍
120firebase_local_dev_ts_study_017firebase_local_dev_ts_study_017_safety_guard.png./picture/firebase_local_dev_ts_study_017_safety_guard.pngTheme: Safety Guard Logic

Labels to Render:
- Env: "EMULATOR_HOST?"
- Yes: "Connect"
- No: "STOP!"
- Danger: "Production"

Visual Details:
1. Core Concept: Preventing accidental production connection.
2. Metaphor: A circuit breaker. If the 'Emulator' signal is missing, the switch flips to 'OFF', cutting the line to 'Production'.
3. Action: Breaking circuit.
4. Layout: Logic gate.		## 4) seed.ts を書く✍️（ユーザー作成＋メモ投入）
121firebase_local_dev_ts_study_018firebase_local_dev_ts_study_018_mcp_hands.png./picture/firebase_local_dev_ts_study_018_mcp_hands.pngTheme: MCP Hands Concept

Labels to Render:
- Brain: "AI Model"
- Arms: "MCP"
- Target: "Firebase Project"

Visual Details:
1. Core Concept: MCP giving AI the ability to manipulate external tools.
2. Metaphor: A glowing AI brain growing mechanical arms labeled 'MCP' that are reaching out to touch/configure a Firebase logo block.
3. Action: Reaching/Touching.
4. Layout: Connection.		## 1) まずMCPって何？（超ざっくり）🧠
122firebase_local_dev_ts_study_018firebase_local_dev_ts_study_018_setup_options.png./picture/firebase_local_dev_ts_study_018_setup_options.pngTheme: Setup Options

Labels to Render:
- Path A: "Antigravity"
- Path B: "Gemini CLI"
- Goal: "MCP Ready"

Visual Details:
1. Core Concept: Multiple ways to achieve the same setup.
2. Metaphor: A fork in the road with two signposts pointing to the same destination 'MCP Ready'. One path is paved (Easy), the other is standard.
3. Action: Guiding.
4. Layout: Fork path.		## 2) セットアップ：Antigravity / Gemini CLI どっちでもOK⚙️✨
123firebase_local_dev_ts_study_018firebase_local_dev_ts_study_018_hands_vs_textbook.png./picture/firebase_local_dev_ts_study_018_hands_vs_textbook.pngTheme: MCP vs Skills

Labels to Render:
- Hands: "MCP (Action)"
- Book: "Skills (Knowledge)"
- Robot: "AI Agent"

Visual Details:
1. Core Concept: Distinction between ability to act (MCP) and knowing how to act (Skills).
2. Metaphor: A robot with versatile mechanical hands (MCP) reading a thick instruction manual (Skills).
3. Action: Reading/Preparing.
4. Layout: Character focus.		## 3) 追加ブースト：Firebase agent skillsも入れる🧠➡️🦾
124firebase_local_dev_ts_study_018firebase_local_dev_ts_study_018_slash_command.png./picture/firebase_local_dev_ts_study_018_slash_command.pngTheme: Slash Command Menu

Labels to Render:
- Input: "/firebase:"
- Menu Item 1: "generate_rules"
- Menu Item 2: "generate_tests"

Visual Details:
1. Core Concept: Using slash commands to trigger specific AI functions.
2. Metaphor: A chat interface where typing the command triggers a holographic menu of powerful options.
3. Action: Typing/Selecting.
4. Layout: UI mockup.		### 4-1. Gemini CLIで「スラッシュコマンド」を呼ぶ🧩
125firebase_local_dev_ts_study_018firebase_local_dev_ts_study_018_review_loop.png./picture/firebase_local_dev_ts_study_018_review_loop.pngTheme: AI Human Review Loop

Labels to Render:
- AI: "Draft Rules"
- Human: "Review & Fix"
- Result: "Safe Rules"

Visual Details:
1. Core Concept: AI provides a draft, Human provides the safety check.
2. Metaphor: A robot handing a blueprint to an engineer. The engineer is marking corrections with a red pen before approving it.
3. Action: Collaborating.
4. Layout: Interaction.		### 4-2. AIへのお願い文（コピペOK）📝🤖
126firebase_local_dev_ts_study_018firebase_local_dev_ts_study_018_seed_strategy.png./picture/firebase_local_dev_ts_study_018_seed_strategy.pngTheme: Seed Strategy Plan

Labels to Render:
- Step 1: "Auth Users"
- Step 2: "Link UIDs"
- Step 3: "Insert Data"

Visual Details:
1. Core Concept: The strategic steps for seeding data.
2. Metaphor: An architect's plan showing three building phases: Foundation (Auth), Structure (Link), and Decoration (Data).
3. Action: Planning.
4. Layout: Process flow.		## 5) ハンズオン②：seed（初期データ投入）方針をAIに作らせる🌱🧠
127firebase_local_dev_ts_study_018firebase_local_dev_ts_study_018_config_map.png./picture/firebase_local_dev_ts_study_018_config_map.pngTheme: Config File Map

Labels to Render:
- Folder: ".gemini/"
- File: "settings.json"
- Folder: ".idx/"
- File: "mcp.json"

Visual Details:
1. Core Concept: Locating the correct configuration files.
2. Metaphor: A treasure map or file explorer view highlighting the two critical config locations.
3. Action: Locating.
4. Layout: Split view.		## 8) よくある罠（先に潰す）🧯😵‍💫
128docs/firebase_local_dev_ts_study_019.mdfirebase_local_dev_ts_study_019_ai_stages.png./picture/firebase_local_dev_ts_study_019_ai_stages.pngTheme: AI Development Stages

Labels to Render:
- Lv1: "Stub (Local)"
- Lv2: "Genkit (Dev)"
- Lv3: "Real AI (Prod)"

Visual Details:
1. Core Concept: Three distinct environments for AI development.
2. Metaphor: A staircase with three steps. Lv1 is a toy robot (Stub), Lv2 is a mechanical arm (Genkit), Lv3 is a futuristic brain (Real AI).
3. Action: Climbing up.
4. Layout: Steps ascending.		## 2) AIは「3段階」で試すと強い💪🤖
129docs/firebase_local_dev_ts_study_019.mdfirebase_local_dev_ts_study_019_stub_switch.png./picture/firebase_local_dev_ts_study_019_stub_switch.pngTheme: Stub Switch Concept

Labels to Render:
- Switch: "AI_MODE"
- Path 1: "Stub (Fixed)"
- Path 2: "Error (Not Ready)"

Visual Details:
1. Core Concept: Switching logic to return safe data locally.
2. Metaphor: A railway switch set to 'Stub', diverting the train to a loop track that returns the same cargo every time.
3. Action: Switching.
4. Layout: Track split.		### 例：functions/src/ai/formatter.ts（AI切替スイッチ）🔀
130docs/firebase_local_dev_ts_study_019.mdfirebase_local_dev_ts_study_019_genkit_flow.png./picture/firebase_local_dev_ts_study_019_genkit_flow.pngTheme: Genkit Flow

Labels to Render:
- Input: "Text"
- Flow: "Genkit Flow"
- Model: "Gemini"
- Output: "JSON"

Visual Details:
1. Core Concept: The data processing pipeline.
2. Metaphor: A transparent pipe (Flow) where text enters, gets processed by a glowing gem (Gemini), and comes out as a neat cube (JSON).
3. Action: Processing.
4. Layout: Linear flow.		## 19-4）Genkit Flow を作る🧩
131docs/firebase_local_dev_ts_study_019.mdfirebase_local_dev_ts_study_019_mode_routing.png./picture/firebase_local_dev_ts_study_019_mode_routing.pngTheme: Mode Routing Logic

Labels to Render:
- Entrance: "formatMemo"
- Switch: "Mode Check"
- Target 1: "Stub Logic"
- Target 2: "Genkit Logic"

Visual Details:
1. Core Concept: Single entry point routing to different implementations.
2. Metaphor: A reception desk (formatMemo) directing visitors left (Stub) or right (Genkit) based on their ticket (Mode).
3. Action: Routing.
4. Layout: Branching path.		## 19-6）最終的に「入口は formatMemo のまま」にする🔁✨
132docs/firebase_local_dev_ts_study_019.mdfirebase_local_dev_ts_study_019_server_prompt.png./picture/firebase_local_dev_ts_study_019_server_prompt.pngTheme: Server Prompt Template

Labels to Render:
- App: "App Code"
- Server: "Prompt Store"
- Fetch: "Get Template"

Visual Details:
1. Core Concept: Decoupling prompts from code.
2. Metaphor: The App Code reaching out to a Cloud Library to borrow a book (Prompt), instead of carrying it in its backpack.
3. Action: Fetching.
4. Layout: Cloud vs Local.		## 19-7）プロンプトは“サーバー側で管理”が安心🧯
133docs/firebase_local_dev_ts_study_019.mdfirebase_local_dev_ts_study_019_remote_config.png./picture/firebase_local_dev_ts_study_019_remote_config.pngTheme: Remote Config Model Switch

Labels to Render:
- Config: "Remote Config"
- Switch: "Version"
- Model A: "Gemini 1.5"
- Model B: "Gemini 2.0"

Visual Details:
1. Core Concept: Changing the model without code changes.
2. Metaphor: A control panel slider (Remote Config) moving from '1.5' to '2.0', causing the underlying engine to upgrade instantly.
3. Action: Switching.
4. Layout: Control panel.		## 19-8）モデル切替は Remote Config などで“後から変えられる”設計へ🔀
134docs/firebase_local_dev_ts_study_019.mdfirebase_local_dev_ts_study_019_data_filter.png./picture/firebase_local_dev_ts_study_019_data_filter.pngTheme: Data Minimization

Labels to Render:
- Input: "Full Data"
- Filter: "Sanitizer"
- Output: "Safe Data"
- Trash: "Private Info"

Visual Details:
1. Core Concept: Sending only necessary data.
2. Metaphor: A shredder or filter that takes a document, removes the sensitive blacked-out parts, and passes only the clean text to the AI.
3. Action: Filtering.
4. Layout: Process flow.		## ✅ 1) “AIに渡すデータ”は最小限にする
135docs/firebase_local_dev_ts_study_020.mdfirebase_local_dev_ts_study_020_deploy_stages.png./picture/firebase_local_dev_ts_study_020_deploy_stages.pngTheme: Deployment Stages

Labels to Render:
- Step 1: "Local (Dev)"
- Step 2: "Staging (Test)"
- Step 3: "Prod (Real)"

Visual Details:
1. Core Concept: Safe progression of code.
2. Metaphor: A car manufacturing line. Step 1 is design/prototype, Step 2 is crash testing, Step 3 is the showroom.
3. Action: Moving forward.
4. Layout: Left to Right flow.		## 2) “検証→本番”の2段階を作る🚦🚦
136docs/firebase_local_dev_ts_study_020.mdfirebase_local_dev_ts_study_020_env_files.png./picture/firebase_local_dev_ts_study_020_env_files.pngTheme: Environment Variable Files

Labels to Render:
- File 1: ".env (Common)"
- File 2: ".env.staging"
- File 3: ".env.prod"
- File 4: ".env.local (Override)"

Visual Details:
1. Core Concept: distinct configuration files for each stage.
2. Metaphor: Four different colored folders (Common, Staging, Prod, Local) containing specific setting sheets.
3. Action: Organizing.
4. Layout: Grouped folders.		## Step 2-2. 環境変数のファイルを分ける📁✨
137docs/firebase_local_dev_ts_study_020.mdfirebase_local_dev_ts_study_020_config_migration.png./picture/firebase_local_dev_ts_study_020_config_migration.pngTheme: Config Migration

Labels to Render:
- Old: "functions.config()"
- Status: "Deprecated"
- New: ".env / Secret Manager"
- Status: "Recommended"

Visual Details:
1. Core Concept: Upgrading configuration methods.
2. Metaphor: A moving truck moving boxes from an old crumbling house (functions.config) to a modern secure building (Secret Manager).
3. Action: Moving.
4. Layout: Before/After.		## 3) “functions.config”を使ってたら今すぐ卒業🎓🚪
138docs/firebase_local_dev_ts_study_020.mdfirebase_local_dev_ts_study_020_split_deploy.png./picture/firebase_local_dev_ts_study_020_split_deploy.pngTheme: Split Deployment

Labels to Render:
- Command: "firebase deploy --only"
- Step 1: "Rules"
- Step 2: "Functions"
- Step 3: "Hosting"

Visual Details:
1. Core Concept: Deploying components one by one for safety.
2. Metaphor: A builder constructing a house layer by layer. Foundation (Rules) first, then Walls (Functions), then Roof (Hosting).
3. Action: Building.
4. Layout: Vertical stack.		## 4) デプロイを“分割”して安全に進める🧯🪜
139docs/firebase_local_dev_ts_study_020.mdfirebase_local_dev_ts_study_020_app_check_switch.png./picture/firebase_local_dev_ts_study_020_app_check_switch.pngTheme: App Check Switch

Labels to Render:
- Switch: "Environment"
- Local: "Debug Token"
- Prod: "Enforced"
- Shield: "App Check"

Visual Details:
1. Core Concept: Different security levels for dev and prod.
2. Metaphor: A shield that is transparent/ghostly in 'Local' mode (Debug) but turns into solid steel in 'Prod' mode.
3. Action: Hardening.
4. Layout: Contrast.		## 5) App Check の“本番スイッチ”を忘れない🧿🔒
140docs/firebase_local_dev_ts_study_020.mdfirebase_local_dev_ts_study_020_ai_reviewer.png./picture/firebase_local_dev_ts_study_020_ai_reviewer.pngTheme: AI Deployment Reviewer

Labels to Render:
- Human: "Runbook"
- AI: "Reviewer"
- Comment: "Check this!"

Visual Details:
1. Core Concept: AI checking the deployment plan.
2. Metaphor: An astronaut (Human) showing a flight plan to a high-tech computer (AI) which is scanning it for errors.
3. Action: Scanning.
4. Layout: Interaction.		## 6) AIを“移行の安全係”として使う🤖🦺
141docs/firebase_local_dev_ts_study_020.mdfirebase_local_dev_ts_study_020_runbook.png./picture/firebase_local_dev_ts_study_020_runbook.pngTheme: Runbook Checklist

Labels to Render:
- List: "Runbook"
- Item 1: "Secrets OK?"
- Item 2: "Rules OK?"
- Item 3: "Backup OK?"

Visual Details:
1. Core Concept: The final safety check.
2. Metaphor: A pilot's pre-flight checklist on a clipboard with all items checked off in green.
3. Action: Checking.
4. Layout: Clipboard view.		## 7) 仕上げ：移行手順書（Runbook）テンプレ🧾✅