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

image_generation_plan.functions_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
510docs/firebase_functions_ts_index.mdfirebase_functions_ts_index_overview.png./picture/firebase_functions_ts_index_overview.pngTheme: Cloud Functions Role Overview

Labels to Render:
- Front: "Frontend (UI)"
- Back: "Cloud Functions (Logic)"
- DB: "Firestore"
- External: "Slack / AI"

Visual Details:
1. Core Concept: Separation of concerns.
2. Metaphor: A restaurant kitchen.
3. Action:
- Frontend (Waiter) takes order.
- Functions (Kitchen) cooks, talks to Fridge (DB), and calls Supplier (External).
- Frontend receives the Dish (Response).
4. Layout: Central Hub.		* HTTPで 自分のAPI を作って公開できる🌐
511docs/firebase_functions_ts_index.mdfirebase_functions_ts_index_folder_structure.png./picture/firebase_functions_ts_index_folder_structure.pngTheme: Functions Folder Structure

Labels to Render:
- Root: "functions/src"
- Logic: "/services (Business Logic)"
- Trigger: "/triggers (HTTP/DB)"
- Shared: "/utils (Helpers)"

Visual Details:
1. Core Concept: Organized codebase.
2. Metaphor: A well-organized filing cabinet.
3. Action:
- Drawer 1: Triggers (Entry points).
- Drawer 2: Services (Heavy lifting).
- Drawer 3: Utils (Tools).
4. Layout: Tree or File System view.		* 🛠️ 手を動かす：HTTP・Firestore・共通処理を分離する
512docs/firebase_functions_ts_index.mdfirebase_functions_ts_index_db_trigger.png./picture/firebase_functions_ts_index_db_trigger.pngTheme: Firestore Trigger Event

Labels to Render:
- User: "Write to DB"
- Firestore: "New Document"
- Trigger: "onDocumentCreated"
- Function: "Process & Update"

Visual Details:
1. Core Concept: Event-driven architecture.
2. Metaphor: A Rube Goldberg machine.
3. Action:
- Ball drops (User write) -> Hits Switch (Trigger) -> Machine starts (Function) -> Output (Updated DB).
4. Layout: Left to Right flow.		* 🛠️ 手を動かす：messages/{id} 作成→加工して別フィールドに保存
513docs/firebase_functions_ts_index.mdfirebase_functions_ts_index_cron_schedule.png./picture/firebase_functions_ts_index_cron_schedule.pngTheme: Scheduled Functions (Cron)

Labels to Render:
- Clock: "Every Morning 9:00"
- Cloud Scheduler: "Trigger"
- Function: "Generate Report"
- Output: "Save to DB"

Visual Details:
1. Core Concept: Time-based execution.
2. Metaphor: An alarm clock waking up a worker.
3. Action:
- Clock strikes 9.
- Worker wakes up, types report, files it.
4. Layout: Time cycle.		* 🛠️ 手を動かす：毎朝レポートを作る（Firestoreに書く）
514docs/firebase_functions_ts_index.mdfirebase_functions_ts_index_ai_integration.png./picture/firebase_functions_ts_index_ai_integration.pngTheme: AI Integration in Functions

Labels to Render:
- Client: "Request (Messy Text)"
- Function: "AI Logic / Genkit"
- Model: "Gemini"
- Output: "Response (Clean JSON)"

Visual Details:
1. Core Concept: AI as a processing unit.
2. Metaphor: A refinery.
3. Action:
- Raw material (Messy text) enters.
- Refinery (Function + AI) processes it.
- Refined product (Clean JSON) exits.
4. Layout: Process diagram.		* 🛠️ 手を動かす：短文を「整形/要約」して返すCallableを作る
515docs/firebase_functions_ts_index.mdfirebase_functions_ts_index_slack_webhook.png./picture/firebase_functions_ts_index_slack_webhook.pngTheme: Slack Notification Flow

Labels to Render:
- Event: "DB Update"
- Function: "Notifier"
- Secret: "Webhook URL (Hidden)"
- Slack: "#general Channel"

Visual Details:
1. Core Concept: Secure external communication.
2. Metaphor: A mail carrier with a secure pouch.
3. Action:
- Event triggers Mail Carrier.
- Carrier unlocks Pouch (Secret) to get address.
- Carrier delivers letter to Slack House.
4. Layout: Left to Right.		* 🛠️ 手を動かす：Webhookを作ってSecretに登録→テスト送信
516docs/firebase_functions_ts_index.mdfirebase_functions_ts_index_runtime_map.png./picture/firebase_functions_ts_index_runtime_map.pngTheme: Multi-Language Runtime Map

Labels to Render:
- Core: "Node.js (Functions)"
- Data Science: "Python (Functions)"
- Enterprise: ".NET (Cloud Run functions)"
- Gateway: "HTTP / Event"

Visual Details:
1. Core Concept: Choosing the right tool for the job.
2. Metaphor: A toolbox with compartments.
3. Action:
- Node.js compartment (Standard).
- Python compartment (AI/Data).
- .NET compartment (via Cloud Run).
4. Layout: Grid or Map.		* Firebase Functions自体は Node/TS が主軸で、Pythonも利用可能（3.10〜3.13） です([Firebase][6])
517docs/firebase_functions_ts_study_001.mdfirebase_functions_ts_study_001_01_overview_map.png./picture/firebase_functions_ts_study_001_01_overview_map.pngTheme: Functions Overview Map

Labels to Render:
- Frontend: "Frontend (Browser)"
- Backend: "Functions (Server)"
- Cloud: "Google Cloud"

Visual Details:
1. Core Concept: Separation of Frontend and Backend.
2. Metaphor: A visible island (Frontend) and a cloud above it (Backend/Functions) handling invisible tasks.
3. Action: Data flowing up to the cloud and back.
4. Layout: Vertical composition.		## 1) Functionsって一言でいうと？🧠
518docs/firebase_functions_ts_study_001.mdfirebase_functions_ts_study_001_02_frontend_limits.png./picture/firebase_functions_ts_study_001_02_frontend_limits.pngTheme: Frontend Limitations Warning

Labels to Render:
- Secrets: "API Keys 🔑"
- Heavy: "AI / Image Process 🏋️"
- Auto: "Cron / Batches ⏰"
- Warning: "Backend Only!"

Visual Details:
1. Core Concept: Tasks not suitable for Frontend.
2. Metaphor: Items bouncing off a browser window because they are too heavy or dangerous.
3. Action: Rejection/Warning.
4. Layout: Cluster of rejected items.		### ✅ フロントに置いちゃダメ（または危険）な代表例
519docs/firebase_functions_ts_study_001.mdfirebase_functions_ts_study_001_03_trigger_types.png./picture/firebase_functions_ts_study_001_03_trigger_types.pngTheme: Three Trigger Types

Labels to Render:
- HTTP: "URL (Request)"
- Event: "Firestore (Auto)"
- Schedule: "Clock (Cron)"

Visual Details:
1. Core Concept: The three ways to start a function.
2. Metaphor: Three distinct buttons or switches.
3. Action: Pressing the buttons.
4. Layout: Three panels side-by-side.		## 3) Functionsの“3つの起動ボタン”🎛️✨
520docs/firebase_functions_ts_study_001.mdfirebase_functions_ts_study_001_04_sorting_game.png./picture/firebase_functions_ts_study_001_04_sorting_game.pngTheme: Sorting Game Visual

Labels to Render:
- Bin A: "Frontend (UI)"
- Bin B: "Functions (Logic)"
- Bin C: "Rules (Security)"
- Item: "Tasks"

Visual Details:
1. Core Concept: Categorizing tasks.
2. Metaphor: Sorting mail or items into three labelled bins.
3. Action: Sorting.
4. Layout: Three bins.		## 4) ここでミニ演習✍️「どこに置く？」仕分けゲーム🎮
521docs/firebase_functions_ts_study_001.mdfirebase_functions_ts_study_001_05_ai_guardrail.png./picture/firebase_functions_ts_study_001_05_ai_guardrail.pngTheme: AI Guardrail

Labels to Render:
- User: "Request"
- Functions: "Guardrail (Filter/Limit)"
- AI: "Model (Gemini)"
- DB: "Save"

Visual Details:
1. Core Concept: Functions protecting the AI model.
2. Metaphor: A security checkpoint before the VIP lounge (AI).
3. Action: Filtering/Checking.
4. Layout: Linear flow.		## 6) AI時代のFunctionsは“ガードレール役”がめちゃ重要🤖🛡️
522docs/firebase_functions_ts_study_001.mdfirebase_functions_ts_study_001_06_ai_tools.png./picture/firebase_functions_ts_study_001_06_ai_tools.pngTheme: AI Development Tools

Labels to Render:
- Tool 1: "Gemini CLI"
- Tool 2: "MCP Server"
- Tool 3: "Prompt Catalog"
- Action: "Accelerate Dev"

Visual Details:
1. Core Concept: Tools helping development.
2. Metaphor: A futuristic toolbox with 3 specialized tools.
3. Action: Displaying tools.
4. Layout: Triptych.		## 7) AIで学習・設計を爆速にするコツ🛸💻✨
523docs/firebase_functions_ts_study_001.mdfirebase_functions_ts_study_001_07_runtime_status.png./picture/firebase_functions_ts_study_001_07_runtime_status.pngTheme: Node Runtime Status

Labels to Render:
- Node 18: "Deprecated ⚠️"
- Node 20: "Supported ✅"
- Node 22: "Supported ✅"

Visual Details:
1. Core Concept: Current status of Node versions.
2. Metaphor: A traffic light or status board. 18 is Red/Warning. 20/22 are Green/Go.
3. Action: Status display.
4. Layout: Comparison.		## 8) ちょいメモ：ランタイムの空気感だけ👀
524docs/firebase_functions_ts_study_002.mdfirebase_functions_ts_study_002_01_concept.png./picture/firebase_functions_ts_study_002_01_concept.pngTheme: 2nd Gen Architecture

Labels to Render:
- Base: "Cloud Run (Container)"
- Events: "Eventarc (Delivery)"
- Product: "Functions 2nd Gen"

Visual Details:
1. Core Concept: 2nd Gen is built on Cloud Run.
2. Metaphor: A building (Functions) standing on a strong foundation (Cloud Run) with a postman (Eventarc) delivering mail.
3. Action: Standing firm.
4. Layout: Layered structure.		## 2nd genって何者？🧠
525docs/firebase_functions_ts_study_002.mdfirebase_functions_ts_study_002_02_concurrency.png./picture/firebase_functions_ts_study_002_02_concurrency.pngTheme: Concurrency Metaphor

Labels to Render:
- 1st Gen: "1 Request = 1 Instance"
- 2nd Gen: "1 Instance = 80 Requests"
- Metaphor: "Food Stand vs Food Court"

Visual Details:
1. Core Concept: Parallel processing.
2. Metaphor: A small food stand with 1 seat (1st Gen) vs a large table with many people eating (2nd Gen).
3. Action: Serving customers.
4. Layout: Comparison.		### 1) 1台で“同時にさばける”＝混んだとき強い💪🍜
526docs/firebase_functions_ts_study_002.mdfirebase_functions_ts_study_002_03_power_duration.png./picture/firebase_functions_ts_study_002_03_power_duration.pngTheme: Power and Duration

Labels to Render:
- Timeout: "Max 60 mins"
- Memory: "Max 32GB"
- Use Case: "AI Processing"

Visual Details:
1. Core Concept: Increased limits for heavy tasks.
2. Metaphor: A bodybuilder (Functions) lifting a heavy weight (AI Model) with a long timer running.
3. Action: Lifting.
4. Layout: Feature highlight.		### 2) パワーが出る＆長く動ける🏋️⏱️
527docs/firebase_functions_ts_study_002.mdfirebase_functions_ts_study_002_04_ops_features.png./picture/firebase_functions_ts_study_002_04_ops_features.pngTheme: Operational Features

Labels to Render:
- Traffic: "Traffic Split"
- Action: "Rollback"
- Version: "Revision Control"

Visual Details:
1. Core Concept: Advanced deployment features.
2. Metaphor: A control panel with sliders for traffic splitting and a rewind button for rollback.
3. Action: Adjusting controls.
4. Layout: Control panel.		### 3) “運用がラク”寄りの機能が揃う🧯👀
528docs/firebase_functions_ts_study_002.mdfirebase_functions_ts_study_002_05_gen_comparison.png./picture/firebase_functions_ts_study_002_05_gen_comparison.pngTheme: 1st vs 2nd Gen Scope

Labels to Render:
- 2nd Gen: "HTTP, Firestore, Schedule"
- 1st Gen: "Analytics, Auth (Legacy)"
- Advice: "Mix & Match"

Visual Details:
1. Core Concept: Overlap and unique features.
2. Metaphor: Two overlapping circles (Venn Diagram). 2nd Gen covers most, 1st Gen has a small unique area.
3. Action: Comparison.
4. Layout: Venn Diagram.		## でも！2nd gen万能じゃない（ここ超大事）⚠️
529docs/firebase_functions_ts_study_002.mdfirebase_functions_ts_study_002_06_cost_warning.png./picture/firebase_functions_ts_study_002_06_cost_warning.pngTheme: Min Instances Cost Warning

Labels to Render:
- Setting: "min instances > 0"
- Result: "Fast Start"
- Risk: "Cost (Idle)"

Visual Details:
1. Core Concept: Cost implication of keeping instances warm.
2. Metaphor: An idling car engine consuming fuel (money) even when not moving.
3. Action: Idling.
4. Layout: Warning illustration.		## コストで事故らない小ワザ🧯💸（軽くでOK）
530docs/firebase_functions_ts_study_003.mdfirebase_functions_ts_study_003_01_runtime_concept.png./picture/firebase_functions_ts_study_003_01_runtime_concept.pngTheme: Runtime Concept

Labels to Render:
- Code: "Your Code"
- Runtime: "Engine (Node 22)"
- Cloud: "Functions"

Visual Details:
1. Core Concept: Runtime is the execution environment.
2. Metaphor: An engine block (Runtime) powering a car (Functions) with 'Your Code' as the fuel.
3. Action: Running.
4. Layout: Layered components.		## 1) そもそも「ランタイム」って何？🤔
531docs/firebase_functions_ts_study_003.mdfirebase_functions_ts_study_003_02_node_status.png./picture/firebase_functions_ts_study_003_02_node_status.pngTheme: Node Version Status

Labels to Render:
- Node 18: "Deprecated (Red)"
- Node 20: "Safe (Yellow)"
- Node 22: "Recommended (Green)"

Visual Details:
1. Core Concept: Choosing the right Node version.
2. Metaphor: A traffic light. Red (18), Yellow (20), Green (22).
3. Action: Choosing Green.
4. Layout: Vertical traffic light.		## 2) 迷わない結論：まずは Node.js（TypeScript）でOK ✅🟦
532docs/firebase_functions_ts_study_003.mdfirebase_functions_ts_study_003_03_why_node.png./picture/firebase_functions_ts_study_003_03_why_node.pngTheme: Benefits of Node.js

Labels to Render:
- Docs: "Rich Info"
- AI: "Genkit Support"
- Tool: "Gemini Helper"

Visual Details:
1. Core Concept: Advantages of using Node.js for Firebase.
2. Metaphor: A treasure chest filled with gold (Docs), a robot (AI), and a magical tool (Gemini).
3. Action: Opening chest.
4. Layout: Grouped items.		## 3) Node.js（TypeScript）を選ぶと何が嬉しい？🎁
533docs/firebase_functions_ts_study_003.mdfirebase_functions_ts_study_003_04_config_location.png./picture/firebase_functions_ts_study_003_04_config_location.pngTheme: Configuration Locations

Labels to Render:
- File A: "package.json (engines)"
- File B: "firebase.json (runtime)"
- Priority: "firebase.json wins"

Visual Details:
1. Core Concept: Where to specify the runtime.
2. Metaphor: Two documents. One is standard (package.json), the other is an override stamp (firebase.json).
3. Action: Stamping.
4. Layout: Side-by-side.		## 4) Node.js のランタイム指定（超重要）🔧
534docs/firebase_functions_ts_study_003.mdfirebase_functions_ts_study_003_05_python_support.png./picture/firebase_functions_ts_study_003_05_python_support.pngTheme: Python Support

Labels to Render:
- Python: "3.10 - 3.13"
- Use Case: "Data Science / AI"
- Default: "3.13"

Visual Details:
1. Core Concept: Python version support.
2. Metaphor: A snake (Python) wrapping around a data chart. The snake has segments labeled 3.10 to 3.13.
3. Action: Analyzing data.
4. Layout: Integrated visual.		## 5) Python を選ぶのはどんな時？🐍✨
535docs/firebase_functions_ts_study_003.mdfirebase_functions_ts_study_003_06_dotnet_strategy.png./picture/firebase_functions_ts_study_003_06_dotnet_strategy.pngTheme: C#/.NET Strategy

Labels to Render:
- Firebase: "Node/TS (Core)"
- Cloud Run: ".NET (Logic)"
- Link: "HTTP Call"

Visual Details:
1. Core Concept: Connecting Firebase (Node) with Cloud Run (.NET).
2. Metaphor: Two islands connected by a bridge. Firebase Island (Node) and Cloud Run Island (.NET).
3. Action: Crossing the bridge.
4. Layout: Connection diagram.		## 6) 「それ以外の言語」…C#/.NET はどうする？🟪
536docs/firebase_functions_ts_study_003.mdfirebase_functions_ts_study_003_07_ai_config.png./picture/firebase_functions_ts_study_003_07_ai_config.pngTheme: AI Configuration Helper

Labels to Render:
- User: "Which version?"
- AI: "Gemini (Node 22)"
- Output: "package.json snippet"

Visual Details:
1. Core Concept: AI helping with configuration.
2. Metaphor: A developer asking a robot helper. The robot hands over a configuration file.
3. Action: Assisting.
4. Layout: Interaction.		## 7) AIを使って“ランタイム選び”を秒速で終わらせる🤖⚡
537docs/firebase_functions_ts_study_004.mdfirebase_functions_ts_study_004_01_blaze_warning.png./picture/firebase_functions_ts_study_004_01_blaze_warning.pngTheme: Blaze Plan Requirement

Labels to Render:
- Plan: "Blaze (Pay-as-you-go)"
- Required: "Required for Functions"
- Free: "Spark (No Deploy)"

Visual Details:
1. Core Concept: Deployment is blocked on the free plan.
2. Metaphor: A gate that opens only for the "Blaze" badge. The "Spark" badge is stopped.
3. Action: Blocking/Allowing.
4. Layout: Gatekeeper.		## 0) 先に知っておく“最重要”ポイント💡
538docs/firebase_functions_ts_study_004.mdfirebase_functions_ts_study_004_02_cli_setup.png./picture/firebase_functions_ts_study_004_02_cli_setup.pngTheme: CLI Setup Steps

Labels to Render:
- Step 1: "Node 22"
- Step 2: "npm i -g firebase-tools"
- Step 3: "firebase login"

Visual Details:
1. Core Concept: The three steps to get ready.
2. Metaphor: A staircase. 1. Node base. 2. CLI tools. 3. Login key.
3. Action: Climbing.
4. Layout: Stairs.		## 1) 準備：Node.js と Firebase CLI を入れる🧰（Windows）
539docs/firebase_functions_ts_study_004.mdfirebase_functions_ts_study_004_03_init_flow.png./picture/firebase_functions_ts_study_004_03_init_flow.pngTheme: Firebase Init Wizard

Labels to Render:
- Command: "firebase init functions"
- Choice 1: "TypeScript"
- Choice 2: "ESLint (Yes)"
- Result: "Setup Complete"

Visual Details:
1. Core Concept: Interactive setup.
2. Metaphor: A wizard character casting a spell to create the project structure based on user choices.
3. Action: Casting spell.
4. Layout: Sequence.		## 2-2. 初期化コマンド🛠️
540docs/firebase_functions_ts_study_004.mdfirebase_functions_ts_study_004_04_folder_structure.png./picture/firebase_functions_ts_study_004_04_folder_structure.pngTheme: Functions Folder Structure

Labels to Render:
- Root: "my-project"
- Config: "firebase.json"
- Code: "functions/src/index.ts"

Visual Details:
1. Core Concept: The resulting file layout.
2. Metaphor: A clear file tree diagram. Highlighting the functions folder and index.ts.
3. Action: Displaying structure.
4. Layout: Tree view.		初期化が終わると、だいたい👇みたいな構成になります（超ざっくり）📦
541docs/firebase_functions_ts_study_004.mdfirebase_functions_ts_study_004_05_hello_code.png./picture/firebase_functions_ts_study_004_05_hello_code.pngTheme: Hello World Function

Labels to Render:
- Import: "v2/https"
- Func: "onRequest"
- Response: "res.json({ ok: true })"

Visual Details:
1. Core Concept: The anatomy of a simple function.
2. Metaphor: A blueprint of a machine. Input (Request) -> Processing (onRequest) -> Output (Response).
3. Action: Processing.
4. Layout: Schematic.		## 3) Hello HTTP 関数を書く👋🌐（2nd gen）
542docs/firebase_functions_ts_study_004.mdfirebase_functions_ts_study_004_06_deploy_process.png./picture/firebase_functions_ts_study_004_06_deploy_process.pngTheme: Deploy Process

Labels to Render:
- Local: "Source Code"
- Command: "firebase deploy"
- Cloud: "Google Cloud"
- Result: "Public URL"

Visual Details:
1. Core Concept: Uploading code to the cloud.
2. Metaphor: A rocket launching from Localhost to the Cloud. It drops a parachute containing the Public URL.
3. Action: Launching.
4. Layout: Vertical ascent.		## 4) デプロイする🚀（最初の1回を通す）
543docs/firebase_functions_ts_study_004.mdfirebase_functions_ts_study_004_07_troubleshooting.png./picture/firebase_functions_ts_study_004_07_troubleshooting.pngTheme: Common Errors

Labels to Render:
- Error 1: "Billing (Blaze)"
- Error 2: "Node Version"
- Error 3: "ESLint"
- Solution: "Fix & Retry"

Visual Details:
1. Core Concept: Identifying common blockers.
2. Metaphor: Obstacles on a race track. 1. Toll booth (Billing). 2. Height check (Node version). 3. Quality check (ESLint).
3. Action: Overcoming obstacles.
4. Layout: Track obstacles.		## 5) つまずきポイント集🧯（ここだけ見れば復帰できる）
544docs/firebase_functions_ts_study_005.mdfirebase_functions_ts_study_005_01_three_rules.png./picture/firebase_functions_ts_study_005_01_three_rules.pngTheme: Three Architecture Rules

Labels to Render:
- Rule 1: "Index = Door"
- Rule 2: "Folders = Type"
- Rule 3: "Lib = Shared"

Visual Details:
1. Core Concept: The three pillars of a clean codebase.
2. Metaphor: 1. A clean entrance door. 2. Labeled filing cabinets. 3. A shared toolbox.
3. Action: Organizing.
4. Layout: Triptych.		## 0) 先に結論：迷子にならない “3ルール” 🧭
545docs/firebase_functions_ts_study_005.mdfirebase_functions_ts_study_005_02_folder_structure.png./picture/firebase_functions_ts_study_005_02_folder_structure.pngTheme: Recommended Folder Structure

Labels to Render:
- src: "src/"
- http: "http/"
- firestore: "firestore/"
- lib: "lib/"
- ai: "ai/"

Visual Details:
1. Core Concept: Organized file hierarchy.
2. Metaphor: A clean, color-coded file tree diagram.
3. Action: Displaying structure.
4. Layout: Tree view.		Functions の中（functions/）は、こんな感じがおすすめです👇
546docs/firebase_functions_ts_study_005.mdfirebase_functions_ts_study_005_03_index_role.png./picture/firebase_functions_ts_study_005_03_index_role.pngTheme: Index.ts as Interface

Labels to Render:
- External: "Cloud"
- Index: "index.ts (Export Only)"
- Internal: "Implementation Files"

Visual Details:
1. Core Concept: index.ts delegates requests to internal files.
2. Metaphor: A receptionist (Index) directing calls to specific departments (Internal Files).
3. Action: Routing.
4. Layout: Flow diagram.		## 3) src/index.ts は “薄く” する（最重要）🚪✨
547docs/firebase_functions_ts_study_005.mdfirebase_functions_ts_study_005_04_singleton_init.png./picture/firebase_functions_ts_study_005_04_singleton_init.pngTheme: Singleton Initialization

Labels to Render:
- File 1: "Function A"
- File 2: "Function B"
- Init: "firebaseAdmin.ts (One Instance)"

Visual Details:
1. Core Concept: Multiple functions reusing the same Admin instance.
2. Metaphor: Multiple plugs connecting to a single power strip.
3. Action: Connecting.
4. Layout: Hub and spoke.		## 4) “共通の初期化” を 1か所にまとめる（Admin SDK）🧰
548docs/firebase_functions_ts_study_005.mdfirebase_functions_ts_study_005_05_logging_json.png./picture/firebase_functions_ts_study_005_05_logging_json.pngTheme: Structured JSON Logging

Labels to Render:
- Text Log: "Messy (Hard to Search)"
- JSON Log: "Structured (Easy Filter)"
- Fields: "severity, message, data"

Visual Details:
1. Core Concept: The benefit of structured logging.
2. Metaphor: A messy pile of papers (Text Log) vs a neatly organized filing system (JSON Log).
3. Action: Organizing.
4. Layout: Comparison.		## 5) ログは “後で助かる形” に揃える 🧯👀
549docs/firebase_functions_ts_study_005.mdfirebase_functions_ts_study_005_06_runtime_choice.png./picture/firebase_functions_ts_study_005_06_runtime_choice.pngTheme: Node Runtime Selection

Labels to Render:
- 1st Gen: "Node 18/20"
- 2nd Gen: "Node 22 (Best)"
- CLI: "Update Required"

Visual Details:
1. Core Concept: Choosing Node 22 for 2nd Gen.
2. Metaphor: A fork in the road. 2nd Gen path leads to a shiny Node 22 city. 1st Gen path is older.
3. Action: Choosing path.
4. Layout: Path selection.		### 7-1) Node ランタイム（超重要）⚙️
550docs/firebase_functions_ts_study_005.mdfirebase_functions_ts_study_005_07_ai_folder.png./picture/firebase_functions_ts_study_005_07_ai_folder.pngTheme: AI Folder Strategy

Labels to Render:
- Folder: "src/ai/"
- Content: "Genkit Flows"
- Future: "Scalable"

Visual Details:
1. Core Concept: Reserving space for AI logic.
2. Metaphor: An empty, futuristic plot of land labeled 'AI Zone' ready for construction.
3. Action: Planning.
4. Layout: Blueprint.		### 8-1) AI用フォルダ src/ai/ を最初に作っておく🔥
551docs/firebase_functions_ts_study_011.mdfirebase_functions_ts_study_011_01_trigger_concept.png./picture/firebase_functions_ts_study_011_01_trigger_concept.pngTheme: Firestore Trigger Concept

Labels to Render:
- User: "Write to DB"
- Function: "Wake Up (Function)"
- DB: "Update Doc"

Visual Details:
1. Core Concept: A change in the database waking up a function.
2. Metaphor: A sleeping giant (Function) waking up when a bell (DB Write) rings.
3. Action: Waking up.
4. Layout: Sequence.		## まずは用語を超かんたんに👶📚
552docs/firebase_functions_ts_study_011.mdfirebase_functions_ts_study_011_02_trigger_types.png./picture/firebase_functions_ts_study_011_02_trigger_types.pngTheme: Four Trigger Types

Labels to Render:
- Created: "New Only (Safe)"
- Updated: "Change Only"
- Deleted: "Remove Only"
- Written: "All (Danger)"

Visual Details:
1. Core Concept: Distinguishing the 4 trigger types.
2. Metaphor: Four distinct buttons. 3 are green/blue (Safe), 1 is red/warning (Written).
3. Action: Displaying options.
4. Layout: 2x2 Grid.		## 今日の主役：Firestoreトリガー4兄弟👨‍👩‍👧‍👦⚡
553docs/firebase_functions_ts_study_011.mdfirebase_functions_ts_study_011_03_data_structure.png./picture/firebase_functions_ts_study_011_03_data_structure.pngTheme: Message Document Structure

Labels to Render:
- Before: "{ text: 'Hello' }"
- Function: "Process"
- After: "{ text: 'Hello', normalized: 'hello', time: 'Now' }"

Visual Details:
1. Core Concept: Data transformation.
2. Metaphor: A raw stone (Before) being polished into a gem (After) by a machine (Function).
3. Action: Polishing.
4. Layout: Before -> Process -> After.		## 1) つくるFirestoreの形（イメージ）🧾
554docs/firebase_functions_ts_study_011.mdfirebase_functions_ts_study_011_04_infinite_loop.png./picture/firebase_functions_ts_study_011_04_infinite_loop.pngTheme: Infinite Loop Trap

Labels to Render:
- Trigger: "onDocumentWritten"
- Action: "Update Doc"
- Result: "Trigger Again"
- Cycle: "Loop Forever"

Visual Details:
1. Core Concept: The self-triggering loop.
2. Metaphor: A snake eating its own tail (Ouroboros). Or a dog chasing its tail.
3. Action: Spinning.
4. Layout: Circular cycle.		## つまずきポイント：更新ループ（無限発火）って何？🌀😇
555docs/firebase_functions_ts_study_011.mdfirebase_functions_ts_study_011_05_loop_avoidance.png./picture/firebase_functions_ts_study_011_05_loop_avoidance.pngTheme: Loop Avoidance Strategy

Labels to Render:
- Strategy A: "onCreated Only"
- Strategy B: "Processed Flag"
- Strategy C: "Separate Doc"

Visual Details:
1. Core Concept: Three ways to break the loop.
2. Metaphor: Three shields blocking the loop arrow.
3. Action: Blocking.
4. Layout: Three distinct strategies.		## ループ回避の“鉄板3パターン”🛡️✨
556docs/firebase_functions_ts_study_011.mdfirebase_functions_ts_study_011_06_idempotency_check.png./picture/firebase_functions_ts_study_011_06_idempotency_check.pngTheme: Idempotency Check

Labels to Render:
- Input: "Event"
- Check: "Has ProcessedAt?"
- Yes: "Stop"
- No: "Run Logic"

Visual Details:
1. Core Concept: Checking if work is already done.
2. Metaphor: A gatekeeper checking a hand stamp. If stamped, entry denied (Stop). If not, stamp and enter (Run).
3. Action: Checking.
4. Layout: Flowchart.		## “二重に動くかも”対策：冪等（idempotent）ってこう考える🧠🔁
557docs/firebase_functions_ts_study_011.mdfirebase_functions_ts_study_011_07_ai_review.png./picture/firebase_functions_ts_study_011_07_ai_review.pngTheme: AI Code Review

Labels to Render:
- Code: "Function Code"
- AI: "Gemini"
- Alert: "Loop Risk Found!"
- Fix: "Add Guard"

Visual Details:
1. Core Concept: AI spotting a bug.
2. Metaphor: A robot detective using a magnifying glass on code and finding a red bug.
3. Action: Detecting.
4. Layout: Detective view.		## AIで開発を加速する🤖🛸（Antigravity / Gemini CLI）
558docs/firebase_functions_ts_study_012.mdfirebase_functions_ts_study_012_01_at_least_once.png./picture/firebase_functions_ts_study_012_01_at_least_once.pngTheme: At-Least-Once Delivery

Labels to Render:
- Event: "Event A"
- Function: "Run 1"
- Event: "Event A (Again)"
- Function: "Run 2"

Visual Details:
1. Core Concept: The possibility of duplicate event delivery.
2. Metaphor: A postman delivering the same letter twice.
3. Action: Delivering.
4. Layout: Timeline or Sequence.		## 1) まず大前提：「イベント駆動」は “1回だけ” を期待しちゃダメ🙅‍♂️💥
559docs/firebase_functions_ts_study_012.mdfirebase_functions_ts_study_012_02_idempotency_concept.png./picture/firebase_functions_ts_study_012_02_idempotency_concept.pngTheme: Idempotency Concept

Labels to Render:
- Run 1: "Result X"
- Run 2: "Result X"
- Run 3: "Result X"
- Equal: "Same Outcome"

Visual Details:
1. Core Concept: Repeated execution yields the same result.
2. Metaphor: Pressing an elevator button multiple times. The elevator comes to the floor once, regardless of clicks.
3. Action: Pressing button.
4. Layout: Equation or Repetition.		## 2) 超重要ワード：冪等（idempotent）ってなに？🧩
560docs/firebase_functions_ts_study_012.mdfirebase_functions_ts_study_012_03_retry_timeline.png./picture/firebase_functions_ts_study_012_03_retry_timeline.pngTheme: Retry Timeline

Labels to Render:
- Fail: "Error 💥"
- Wait: "Backoff ⏳"
- Retry: "Run Again 🔄"
- Success: "Done ✅"

Visual Details:
1. Core Concept: Automatic retry with backoff.
2. Metaphor: A runner tripping, getting up, and running again.
3. Action: Retrying.
4. Layout: Horizontal timeline.		## 3) retry（再試行）を正しく怖がる😈➡️😌
561docs/firebase_functions_ts_study_012.mdfirebase_functions_ts_study_012_04_three_pillars.png./picture/firebase_functions_ts_study_012_04_three_pillars.pngTheme: Three Pillars of Safety

Labels to Render:
- 1: "Entry Guard"
- 2: "Dedupe (Lock)"
- 3: "Safe Side-Effect"

Visual Details:
1. Core Concept: The three defensive layers.
2. Metaphor: A castle defense. 1. Gate (Guard). 2. Register (Dedupe). 3. Safe room (Side-effect).
3. Action: Defending.
4. Layout: Triptych.		## 4) 壊れないイベント処理の “3本柱” 🏗️✨
562docs/firebase_functions_ts_study_012.mdfirebase_functions_ts_study_012_05_lock_flow.png./picture/firebase_functions_ts_study_012_05_lock_flow.pngTheme: Deduplication Lock Flow

Labels to Render:
- Check: "Lock Exists?"
- No: "Create Lock -> Run"
- Yes: "Stop (Duplicate)"

Visual Details:
1. Core Concept: Using a lock document to prevent double execution.
2. Metaphor: Taking a key from a hook. If key is gone, you can't enter.
3. Action: Checking hook.
4. Layout: Flowchart.		## 5) ハンズオン：event.id で二重通知を防ぐ（2nd gen）🛠️🔐
563docs/firebase_functions_ts_study_012.mdfirebase_functions_ts_study_012_06_ai_cost_warning.png./picture/firebase_functions_ts_study_012_06_ai_cost_warning.pngTheme: AI Cost Warning

Labels to Render:
- Without Dedupe: "Run x 2 = Cost $$"
- With Dedupe: "Run x 1 = Cost $"
- Risk: "Burning Money"

Visual Details:
1. Core Concept: Double execution means double cost for AI.
2. Metaphor: burning bills twice vs once.
3. Action: Comparison.
4. Layout: Side-by-side.		## 6) AIを絡めるときの“重複対策”は最優先🧠💸🤖
564docs/firebase_functions_ts_study_012.mdfirebase_functions_ts_study_012_07_lock_state.png./picture/firebase_functions_ts_study_012_07_lock_state.pngTheme: Lock State Transitions

Labels to Render:
- Start: "processing"
- Success: "done"
- Fail: "error"
- Retry: "error -> processing"

Visual Details:
1. Core Concept: Tracking the state of the process.
2. Metaphor: A status board changing lights. Yellow (Processing) -> Green (Done) or Red (Error).
3. Action: Transition.
4. Layout: State machine.		## 8) ミニ課題（この章のゴール）🏁✨
565docs/firebase_functions_ts_study_013.mdfirebase_functions_ts_study_013_01_overview.png./picture/firebase_functions_ts_study_013_01_overview.pngTheme: Aggregation and Notification Overview

Labels to Render:
- User: "Comment"
- System: "Count +1"
- UI: "Notify 🔔"

Visual Details:
1. Core Concept: A comment triggers a count update and a notification.
2. Metaphor: A chain reaction. A ball (Comment) hits a counter (Click +1) and rings a bell (Notify).
3. Action: Chain reaction.
4. Layout: Left-to-right flow.		## この章でできるようになること🎯
566docs/firebase_functions_ts_study_013.mdfirebase_functions_ts_study_013_02_event_chaos.png./picture/firebase_functions_ts_study_013_02_event_chaos.pngTheme: Event Ordering and Duplication

Labels to Render:
- Order: "Random Order"
- Count: "At Least Once"
- Result: "Chaos"

Visual Details:
1. Core Concept: Events arriving out of order or multiple times.
2. Metaphor: A chaotic mailroom. Letters arriving in wrong order, some duplicated.
3. Action: Disordered arrival.
4. Layout: Chaotic spread.		## 1) まず超重要：イベントは「1回とは限らない」⚡🧠
567docs/firebase_functions_ts_study_013.mdfirebase_functions_ts_study_013_03_schema.png./picture/firebase_functions_ts_study_013_03_schema.pngTheme: Data Schema Visualization

Labels to Render:
- Post: "posts/{id}"
- Comment: "comments/{id}"
- Notification: "notifications/{id}"

Visual Details:
1. Core Concept: The relationship between the three collections.
2. Metaphor: Three interconnected nodes. Post is the parent, Comment is the child, Notification is a message sent to a User node.
3. Action: Connection.
4. Layout: ER Diagram style.		## 2) 今日の題材：投稿＋コメント＋通知（いちばん王道）🏗️🧩
568docs/firebase_functions_ts_study_013.mdfirebase_functions_ts_study_013_04_idempotent_counter.png./picture/firebase_functions_ts_study_013_04_idempotent_counter.pngTheme: Idempotent Counter Logic

Labels to Render:
- Step 1: "Create Marker"
- Success: "Count +1"
- Fail: "Skip"

Visual Details:
1. Core Concept: Only updating the counter if the marker creation succeeds.
2. Metaphor: A gate that only opens once. If open, pass through and increment counter. If locked (already created), bounce off.
3. Action: Gating.
4. Layout: Flowchart.		## 4) 実務形：冪等ガードつき「commentCount更新＋通知作成」🛡️🔔
569docs/firebase_functions_ts_study_013.mdfirebase_functions_ts_study_013_05_notification_flow.png./picture/firebase_functions_ts_study_013_05_notification_flow.pngTheme: Notification Document Flow

Labels to Render:
- Function: "Create Doc"
- Collection: "notifications"
- Frontend: "Listen & Show"

Visual Details:
1. Core Concept: Functions creating a doc that the frontend listens to.
2. Metaphor: A postman (Function) putting a letter in a mailbox (Collection). The homeowner (Frontend) sees the flag go up and retrieves it.
3. Action: Delivery.
4. Layout: Sequence.		## 5) 「通知」って結局なに？まずは“通知ドキュメント”でOK🔔🙂
570docs/firebase_functions_ts_study_013.mdfirebase_functions_ts_study_013_06_distributed_counter.png./picture/firebase_functions_ts_study_013_06_distributed_counter.pngTheme: Distributed Counter Concept

Labels to Render:
- Hotspot: "Single Doc (Busy)"
- Shards: "Shard 1, Shard 2, Shard 3"
- Total: "Sum"

Visual Details:
1. Core Concept: Splitting a hot counter into multiple shards.
2. Metaphor: A single busy cashier vs multiple cashiers handling the line. The total is the sum of all registers.
3. Action: Distribution.
4. Layout: One vs Many comparison.		## 6) 集計が増えてきた時の壁：1つのドキュメントに書き込み集中😵‍💫
571docs/firebase_functions_ts_study_013.mdfirebase_functions_ts_study_013_07_transaction_retry.png./picture/firebase_functions_ts_study_013_07_transaction_retry.pngTheme: Transaction Retry Mechanism

Labels to Render:
- Transaction: "Update Logic"
- Conflict: "Collision 💥"
- Action: "Auto Retry 🔄"
- Warning: "No Side Effects"

Visual Details:
1. Core Concept: Transactions retrying on conflict, so side effects inside are dangerous.
2. Metaphor: A video game character respawning at a checkpoint after a collision. If they fired a missile (Side Effect) before dying, it would fire again on retry.
3. Action: Respawning.
4. Layout: Loop with warning.		## 9) つまずきポイント集（先に潰す）🧯😆
572docs/firebase_functions_ts_study_014.mdfirebase_functions_ts_study_014_01_alarm_clock.png./picture/firebase_functions_ts_study_014_01_alarm_clock.pngTheme: Scheduled Function Concept

Labels to Render:
- Clock: "7:00 AM"
- Robot: "Function"
- Action: "Wake Up"

Visual Details:
1. Core Concept: A function waking up at a specific time.
2. Metaphor: An old-fashioned alarm clock ringing next to a sleeping robot (Function).
3. Action: Ringing/Waking.
4. Layout: Scene.		## まず結論：スケジュール関数って何？🧠
573docs/firebase_functions_ts_study_014.mdfirebase_functions_ts_study_014_02_scheduler_arch.png./picture/firebase_functions_ts_study_014_02_scheduler_arch.pngTheme: Scheduler Architecture

Labels to Render:
- Service: "Cloud Scheduler"
- Action: "HTTP Request"
- Target: "Cloud Function"

Visual Details:
1. Core Concept: Cloud Scheduler triggering a function via HTTP.
2. Metaphor: A control tower (Scheduler) sending a signal beam (HTTP) to a satellite (Function).
3. Action: Signaling.
4. Layout: Transmission flow.		## 仕組みのイメージ（ここ大事）🧩
574docs/firebase_functions_ts_study_014.mdfirebase_functions_ts_study_014_03_cost_model.png./picture/firebase_functions_ts_study_014_03_cost_model.pngTheme: Cost Model Visualization

Labels to Render:
- Item: "Job (1 Config)"
- Cost: "$0.10 / Month"
- Free: "3 Jobs Free"

Visual Details:
1. Core Concept: Billing is based on the number of jobs, not executions.
2. Metaphor: A vending machine where you pay for the "slot" (Job), not for how many times it dispenses.
3. Action: Renting a slot.
4. Layout: Conceptual diagram.		## お金の感覚（ビビりポイントを先に潰す）💸🧯
575docs/firebase_functions_ts_study_014.mdfirebase_functions_ts_study_014_04_timezone_map.png./picture/firebase_functions_ts_study_014_04_timezone_map.pngTheme: Timezone Setting

Labels to Render:
- Map: "World"
- Pin: "Asia/Tokyo"
- Time: "07:00 JST"
- Config: "timeZone: 'Asia/Tokyo'"

Visual Details:
1. Core Concept: Setting the correct timezone for the schedule.
2. Metaphor: A world map with a large pin on Tokyo. A clock shows 7:00.
3. Action: Pinning.
4. Layout: Map view.		## タイムゾーン（日本はここをミスりがち）🌏🇯🇵
576docs/firebase_functions_ts_study_014.mdfirebase_functions_ts_study_014_05_idempotent_report.png./picture/firebase_functions_ts_study_014_05_idempotent_report.pngTheme: Idempotent Report Logic

Labels to Render:
- Date: "2026-02-18"
- Doc ID: "dailyReports/2026-02-18"
- Run 1: "Create (Success)"
- Run 2: "Create (Fail/Skip)"

Visual Details:
1. Core Concept: Using the date as the ID to prevent duplicates.
2. Metaphor: A calendar slot. Once filled with a report, a second attempt to fill it bounces off.
3. Action: Blocking duplicate.
4. Layout: Time slot.		## ハンズオン：毎朝レポートを Firestore に書く📝🔥
577docs/firebase_functions_ts_study_014.mdfirebase_functions_ts_study_014_06_overlap_execution.png./picture/firebase_functions_ts_study_014_06_overlap_execution.pngTheme: Execution Overlap

Labels to Render:
- Run 1: "Long Process..."
- Schedule: "Next Trigger"
- Run 2: "Start"
- State: "Overlap"

Visual Details:
1. Core Concept: A new execution starting before the previous one finishes.
2. Metaphor: Two runners on a track. The second runner starts while the first is still running.
3. Action: Overlapping.
4. Layout: Timeline bars.		## ✅ 2) 「たまに2回動いてる気がする」😱
578docs/firebase_functions_ts_study_014.mdfirebase_functions_ts_study_014_07_ai_morning.png./picture/firebase_functions_ts_study_014_07_ai_morning.pngTheme: AI Morning Routine

Labels to Render:
- Sun: "Sunrise"
- Function: "Schedule"
- AI: "Generate Summary"
- App: "Fresh Content"

Visual Details:
1. Core Concept: Scheduled AI processing for the morning.
2. Metaphor: A rooster crowing (Schedule) waking up an AI chef who prepares a fresh breakfast (Content) for the user.
3. Action: Preparation.
4. Layout: Morning scene.		## AIを絡めて“朝レポ”を気持ちよくする🤖🌅
579docs/firebase_functions_ts_study_015.mdfirebase_functions_ts_study_015_01_three_windows.png./picture/firebase_functions_ts_study_015_01_three_windows.pngTheme: Three Observation Windows

Labels to Render:
- 1: "Logs (Detail)"
- 2: "Errors (Summary)"
- 3: "Alerts (Notice)"

Visual Details:
1. Core Concept: The three pillars of observability.
2. Metaphor: Three windows looking into the engine room. One shows raw data, one shows broken parts, one has a flashing red light.
3. Action: Observing.
4. Layout: Triptych.		## 1) まず覚える「3つの観測窓」🪟🪟🪟
580docs/firebase_functions_ts_study_015.mdfirebase_functions_ts_study_015_02_structured_log.png./picture/firebase_functions_ts_study_015_02_structured_log.pngTheme: Structured Logging

Labels to Render:
- Text: "Raw Text (Hard to Search)"
- JSON: "Structured (Easy Filter)"
- Fields: "uid, step, id"

Visual Details:
1. Core Concept: The benefit of structured JSON logs over plain text.
2. Metaphor: A messy pile of papers (Text) vs a neatly filed cabinet (JSON).
3. Action: Filing/Organizing.
4. Layout: Comparison.		## 2) ログは「console.log」でもいいけど、できれば“logger”🧰✨
581docs/firebase_functions_ts_study_015.mdfirebase_functions_ts_study_015_03_log_pattern.png./picture/firebase_functions_ts_study_015_03_log_pattern.pngTheme: Log Pattern Flow

Labels to Render:
- Start: "START"
- Process: "..."
- End: "OK / NG"
- Trace: "Execution ID"

Visual Details:
1. Core Concept: A standard logging pattern.
2. Metaphor: A sandwich. Top bun (Start), Meat (Process), Bottom bun (Result).
3. Action: Stacking.
4. Layout: Vertical stack.		## 3) “良いログ”の型：START / OK / NG 🧯✨
582docs/firebase_functions_ts_study_015.mdfirebase_functions_ts_study_015_04_error_grouping.png./picture/firebase_functions_ts_study_015_04_error_grouping.pngTheme: Error Reporting Grouping

Labels to Render:
- Log: "Error x 100"
- Report: "Issue x 1"
- Benefit: "Noise Reduction"

Visual Details:
1. Core Concept: Grouping many similar error logs into one issue.
2. Metaphor: A funnel. 100 small red balls enter, 1 big red block comes out.
3. Action: Filtering/Grouping.
4. Layout: Funnel.		## 6) Error Reporting：エラーを「一覧」で見れるようにする💥📌
583docs/firebase_functions_ts_study_015.mdfirebase_functions_ts_study_015_05_alert_types.png./picture/firebase_functions_ts_study_015_05_alert_types.pngTheme: Alert Types Comparison

Labels to Render:
- Metrics: "Graph Spike"
- Log: "Specific Text"
- Result: "Alarm 🔔"

Visual Details:
1. Core Concept: Triggering alerts from graphs or logs.
2. Metaphor: Two paths to a fire alarm. One path monitors a thermometer (Metrics). The other watches for smoke (Log).
3. Action: Triggering.
4. Layout: Split path.		## 7) アラートの入口：2種類だけ覚えよう🔔✨
584docs/firebase_functions_ts_study_015.mdfirebase_functions_ts_study_015_06_slack_flow.png./picture/firebase_functions_ts_study_015_06_slack_flow.pngTheme: Slack Alert Flow

Labels to Render:
- Event: "Crash"
- Cloud: "Monitoring"
- Slack: "Notification"
- Dev: "Fix It!"

Visual Details:
1. Core Concept: The flow from error to developer awareness.
2. Metaphor: A relay race. Crash passes baton to Cloud, Cloud passes to Slack, Slack wakes up Developer.
3. Action: Relaying.
4. Layout: Left-to-right flow.		## 8) 通知先：Slack に飛ばすのが便利📣💬
585docs/firebase_functions_ts_study_015.mdfirebase_functions_ts_study_015_07_ai_ops.png./picture/firebase_functions_ts_study_015_07_ai_ops.pngTheme: AI Ops Assistant

Labels to Render:
- Input: "Log Error"
- AI: "Analyze"
- Output: "Fix Suggestion"

Visual Details:
1. Core Concept: AI analyzing logs to find root causes.
2. Metaphor: A robot detective reading a log file and handing a solution card to a human.
3. Action: Solving.
4. Layout: Interaction.		## 9) AIで運用を楽にする（Gemini CLI / Firebase拡張）🤖🧰
586docs/firebase_functions_ts_study_016.mdfirebase_functions_ts_study_016_01_emulator_vs_prod.png./picture/firebase_functions_ts_study_016_01_emulator_vs_prod.pngTheme: Local Emulator vs Production

Labels to Render:
- Left: "Local (Safe)"
- Right: "Production (Real)"
- Barrier: "No Connection"

Visual Details:
1. Core Concept: Safe isolation of local environment.
2. Metaphor: A sandbox (Local) vs a busy highway (Production).
3. Action: Playing safely in sandbox.
4. Layout: Split screen comparison.		## 1) まずは全体像：Emulatorって何がうれしいの？🧠🧯
587docs/firebase_functions_ts_study_016.mdfirebase_functions_ts_study_016_02_three_essentials.png./picture/firebase_functions_ts_study_016_02_three_essentials.pngTheme: Three Essential Emulators

Labels to Render:
- 1: "Firestore (Data)"
- 2: "Functions (Logic)"
- 3: "UI (Viewer)"

Visual Details:
1. Core Concept: The minimum set of tools needed.
2. Metaphor: A starter kit toolbox with 3 specific tools.
3. Action: Displaying tools.
4. Layout: Triptych or Triangle.		## 2) 最小構成の考え方（今日は “Functions + Firestore + UI” だけ）🧩
588docs/firebase_functions_ts_study_016.mdfirebase_functions_ts_study_016_03_import_export.png./picture/firebase_functions_ts_study_016_03_import_export.pngTheme: Import/Export Cycle

Labels to Render:
- Start: "Import Data"
- Work: "Test / Change"
- Exit: "Export Data"

Visual Details:
1. Core Concept: Persisting state across sessions.
2. Metaphor: Opening a save file (Import), playing the game, and saving before quitting (Export).
3. Action: Cycle of data.
4. Layout: Circular cycle.		## 4) 起動コマンド：まずは “必要なものだけ” 起動する🚀
589docs/firebase_functions_ts_study_016.mdfirebase_functions_ts_study_016_04_connection_switch.png./picture/firebase_functions_ts_study_016_04_connection_switch.pngTheme: Connection Switch

Labels to Render:
- Condition: "localhost?"
- Yes: "Connect Emulator"
- No: "Connect Cloud"

Visual Details:
1. Core Concept: Code switching logic based on environment.
2. Metaphor: A railway switch track. Train goes to "Local Station" if flag is up. Goes to "Cloud City" if flag is down.
3. Action: Switching tracks.
4. Layout: Y-junction.		## 5) アプリ（React）を emulator に接続する🔌🧪
590docs/firebase_functions_ts_study_016.mdfirebase_functions_ts_study_016_05_event_loop.png./picture/firebase_functions_ts_study_016_05_event_loop.pngTheme: Event Trigger Loop

Labels to Render:
- 1: "Write Message"
- 2: "Trigger (Wake Up)"
- 3: "Function (Process)"
- 4: "Update DB"

Visual Details:
1. Core Concept: The automated flow of backend logic.
2. Metaphor: A domino effect. Pushing the first domino (Write) causes the last one (Update) to fall via the Function.
3. Action: Chain reaction.
4. Layout: Sequential flow.		## 6) “イベント → 関数実行” をローカルで確認する⚡➡️⚙️➡️🧾
591docs/firebase_functions_ts_study_016.mdfirebase_functions_ts_study_016_06_feedback_loop.png./picture/firebase_functions_ts_study_016_06_feedback_loop.pngTheme: Verification Feedback

Labels to Render:
- Screen 1: "Terminal (Logs)"
- Screen 2: "Emulator UI (Data)"
- Action: "Verify Both"

Visual Details:
1. Core Concept: Checking two places to confirm success.
2. Metaphor: A pilot checking instruments. Radar (UI) and System Log (Terminal).
3. Action: Monitoring.
4. Layout: Dual screen view.		### 6-2) 動作確認の手順（超シンプル）✅
592docs/firebase_functions_ts_study_016.mdfirebase_functions_ts_study_016_07_secrets_management.png./picture/firebase_functions_ts_study_016_07_secrets_management.pngTheme: Secrets Management

Labels to Render:
- Safe: ".env.local (Private)"
- Unsafe: "Source Code (Public)"
- Key: "API Key"

Visual Details:
1. Core Concept: Where to store secrets.
2. Metaphor: A secure safe (env.local) vs leaving keys on a park bench (Source Code).
3. Action: Securing the key.
4. Layout: Comparison.		## 7) ローカルでも「秘密」を雑に扱わない🗝️🧯
593docs/firebase_functions_ts_study_017.mdfirebase_functions_ts_study_017_01_backend_ai_safety.png./picture/firebase_functions_ts_study_017_01_backend_ai_safety.pngTheme: Frontend vs Backend AI Safety

Labels to Render:
- Frontend: "Direct Call (Risky)"
- Backend: "Proxy Call (Safe)"
- Key: "API Key"

Visual Details:
1. Core Concept: Protecting the API key.
2. Metaphor: Frontend holding a key out in the open vs Backend keeping the key in a vault.
3. Action: Hiding the key.
4. Layout: Comparison.		## 1) なぜ「AIを裏側」に置くの？🤔
594docs/firebase_functions_ts_study_017.mdfirebase_functions_ts_study_017_02_genkit_structure.png./picture/firebase_functions_ts_study_017_02_genkit_structure.pngTheme: Genkit Components

Labels to Render:
- Core: "Flow (Logic)"
- Box: "Genkit (Toolbox)"
- Wrapper: "onCallGenkit (Public)"

Visual Details:
1. Core Concept: The relationship between Flow, Genkit, and Callable.
2. Metaphor: A pipe (Flow) inside a toolbox (Genkit), wrapped in a shipping box (Callable).
3. Action: Encapsulation.
4. Layout: Concentric or Layered.		## 2) Genkit / onCallGenkit を超ざっくり理解🧠
595docs/firebase_functions_ts_study_017.mdfirebase_functions_ts_study_017_03_secret_manager.png./picture/firebase_functions_ts_study_017_03_secret_manager.pngTheme: Secret Manager

Labels to Render:
- Code: "Source Code"
- Secret: "Secret Manager"
- Key: "API Key"

Visual Details:
1. Core Concept: Moving secrets out of code.
2. Metaphor: Taking a key from a table (Code) and locking it in a safe (Secret Manager).
3. Action: Securing.
4. Layout: Movement flow.		## Step 2：Gemini APIキーをSecretに入れる🔐
596docs/firebase_functions_ts_study_017.mdfirebase_functions_ts_study_017_04_structured_io.png./picture/firebase_functions_ts_study_017_04_structured_io.pngTheme: Structured Input/Output

Labels to Render:
- Input: "Messy Text"
- AI: "Genkit Flow"
- Output: "{ Title, Summary, Bullets }"

Visual Details:
1. Core Concept: Transforming unstructured text into structured JSON.
2. Metaphor: A machine taking raw cotton and weaving it into distinct patterns (Title, Summary, etc).
3. Action: Structuring.
4. Layout: Input -> Process -> Output.		## Step 4：Flow（入力/出力スキーマ付き）を作る🧩
597docs/firebase_functions_ts_study_017.mdfirebase_functions_ts_study_017_05_callable_wrapper.png./picture/firebase_functions_ts_study_017_05_callable_wrapper.pngTheme: Callable Wrapper Security

Labels to Render:
- Center: "Flow"
- Layer 1: "Auth Check"
- Layer 2: "App Check"
- Layer 3: "Secret Injection"

Visual Details:
1. Core Concept: The wrapper provides security and dependencies.
2. Metaphor: An armored suit being put on a core body (Flow). The suit has slots for Auth, App Check, and Secrets.
3. Action: Equipping.
4. Layout: Layered armor.		## Step 5：onCallGenkit でCallableとして公開する📞
598docs/firebase_functions_ts_study_017.mdfirebase_functions_ts_study_017_06_streaming_flow.png./picture/firebase_functions_ts_study_017_06_streaming_flow.pngTheme: Streaming Data Flow

Labels to Render:
- Server: "Function"
- Chunks: "'H' 'e' 'l' 'l' 'o'"
- Client: "React App"

Visual Details:
1. Core Concept: Data arriving in small pieces over time.
2. Metaphor: A conveyor belt carrying individual letters or packets from Server to Client.
3. Action: Streaming.
4. Layout: Left-to-right flow.		## 4) ハンズオンB：ストリーミング（“打ってる感”）🌊✨
599docs/firebase_functions_ts_study_017.mdfirebase_functions_ts_study_017_07_three_guards.png./picture/firebase_functions_ts_study_017_07_three_guards.pngTheme: Three Guard Rails

Labels to Render:
- Gate 1: "Input Limit (2000)"
- Gate 2: "Schema Validation"
- Gate 3: "Auth / App Check"

Visual Details:
1. Core Concept: Three layers of defense for the AI.
2. Metaphor: Three hurdles or checkpoints on a track. The runner (Request) must clear all three.
3. Action: Clearing hurdles.
4. Layout: Sequential gates.		## 5) 「AIは間違う」前提のガード 3点セット🛡️🧠
600docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_01_ai_roles.png./picture/firebase_functions_ts_study_018_01_ai_roles.pngTheme: AI Roles

Labels to Render:
- Role 1: "Worker (Shorten Tasks)"
- Role 2: "Inspector (Find Holes)"
- Role 3: "Librarian (Search)"

Visual Details:
1. Core Concept: The three main ways AI helps developers.
2. Metaphor: Three specialized robots. One building bricks, one using a magnifying glass, one holding a book.
3. Action: Working.
4. Layout: Triptych.		## 1) まずイメージ：AIは“副操縦士＋作業員”✈️🧰
601docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_02_extension_arms.png./picture/firebase_functions_ts_study_018_02_extension_arms.pngTheme: Gemini Extension

Labels to Render:
- Base: "Gemini CLI"
- Add-on: "Firebase Extension"
- Result: "MCP Tools (Arms)"

Visual Details:
1. Core Concept: Extension adding capabilities to Gemini.
2. Metaphor: A robot (Gemini) equipping a backpack (Extension) that gives it extra mechanical arms (MCP Tools).
3. Action: Equipping.
4. Layout: Upgrade visual.		## 2) 今日の主役：Gemini CLI + Firebase拡張 🧑‍💻✨
602docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_03_slash_commands.png./picture/firebase_functions_ts_study_018_03_slash_commands.pngTheme: Slash Commands

Labels to Render:
- Cmd 1: "/firebase:init"
- Cmd 2: "/firebase:deploy"
- Cmd 3: "/crashlytics:connect"

Visual Details:
1. Core Concept: Quick access commands.
2. Metaphor: Three shortcut keys on a futuristic keyboard.
3. Action: Pressing a key.
4. Layout: Horizontal row.		## 4) まず叩くべきスラッシュコマンド3つ💥⌨️
603docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_04_mcp_architecture.png./picture/firebase_functions_ts_study_018_04_mcp_architecture.pngTheme: MCP Architecture

Labels to Render:
- Box: "MCP Server"
- Item 1: "Prompts"
- Item 2: "Tools"
- Item 3: "Resources"
- Gate: "Human Review"

Visual Details:
1. Core Concept: The components of MCP and the human safety check.
2. Metaphor: A toolbox with 3 compartments. A human guard stands in front of the tools to authorize use.
3. Action: Guarding.
4. Layout: Structure diagram.		## 5) MCP serverって何？（AIに“手足”を生やす仕組み）🦾🤖
604docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_05_antigravity_loop.png./picture/firebase_functions_ts_study_018_05_antigravity_loop.pngTheme: Antigravity Loop

Labels to Render:
- Center: "Mission Control"
- Step 1: "Plan"
- Step 2: "Implement"
- Step 3: "Verify"

Visual Details:
1. Core Concept: The autonomous loop of an agent.
2. Metaphor: A mission cycle. Satellites orbiting a central control station.
3. Action: Orbiting/Cycling.
4. Layout: Circular cycle.		## 6) Antigravityで“任務”として回す🛰️🧑‍🚀
605docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_06_three_scenarios.png./picture/firebase_functions_ts_study_018_06_three_scenarios.pngTheme: AI Task Scenarios

Labels to Render:
- Task 1: "Make Guide (Doc)"
- Task 2: "Check Rules (Security)"
- Task 3: "Analyze Logs (Debug)"

Visual Details:
1. Core Concept: Practical uses of AI in development.
2. Metaphor: Three workstations. One for writing, one for security scanning, one for data analysis.
3. Action: Working.
4. Layout: Triptych.		## 7) ハンズオン：Functions開発をAIで爆速にする「3本勝負」⚔️🔥
606docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_07_safety_rules.png./picture/firebase_functions_ts_study_018_07_safety_rules.pngTheme: Safety Rules

Labels to Render:
- Rule 1: "Check Diffs"
- Rule 2: "Human Decide"
- Rule 3: "No Secrets in Code"

Visual Details:
1. Core Concept: Rules to prevent accidents.
2. Metaphor: A safety manual or checklist on a clipboard. Important items are highlighted.
3. Action: Checking off items.
4. Layout: Checklist.		## 9) 事故らないための「AI運用ルール」5つ🧯✅
607docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_01_webhook_concept.png./picture/firebase_functions_ts_study_019_01_webhook_concept.pngTheme: Incoming Webhook Mechanism

Labels to Render:
- Sender: "JSON Payload"
- Receiver: "Webhook URL"
- Output: "Slack Channel"

Visual Details:
1. Core Concept: Direct posting via URL.
2. Metaphor: Mailing a letter (JSON) into a specific postbox (URL) which delivers it to a house (Slack).
3. Action: Posting.
4. Layout: Left-to-right flow.		## 1) まず理解：Incoming Webhooksって何？🤔
608docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_02_slack_setup.png./picture/firebase_functions_ts_study_019_02_slack_setup.pngTheme: Slack Setup Steps

Labels to Render:
- 1: "Create App"
- 2: "Webhook ON"
- 3: "Add to Workspace"
- 4: "Pick Channel"

Visual Details:
1. Core Concept: The 4-step process on Slack.
2. Metaphor: A simple roadmap or checklist.
3. Action: Progressing.
4. Layout: Sequence.		## 2) Slack側：Webhook URL を作る手順 🧩
609docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_03_secret_command.png./picture/firebase_functions_ts_study_019_03_secret_command.pngTheme: Secret Set Command

Labels to Render:
- Terminal: "firebase functions:secrets:set"
- Vault: "Secret Manager"
- Key: "Webhook URL"

Visual Details:
1. Core Concept: Storing the key securely.
2. Metaphor: A terminal command pushing a physical key into a bank vault.
3. Action: Storing.
4. Layout: Command to Vault.		## 3-1. Secret を作成（Firebase CLI）🧰
610docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_04_define_secret.png./picture/firebase_functions_ts_study_019_04_define_secret.pngTheme: Accessing Secret in Code

Labels to Render:
- Code: "defineSecret('KEY')"
- Runtime: "Function"
- Vault: "Secret Manager"
- Value: "URL"

Visual Details:
1. Core Concept: The function retrieving the secret at runtime.
2. Metaphor: The function code extending a hand to unlock the vault using the defined name.
3. Action: Retrieving.
4. Layout: Connection.		## 4-1. TypeScript：defineSecret + secrets オプション（2nd gen）🧱
611docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_05_test_flight.png./picture/firebase_functions_ts_study_019_05_test_flight.pngTheme: Test Flight

Labels to Render:
- Step 1: "Deploy"
- Step 2: "Access URL"
- Step 3: "Slack Notify"

Visual Details:
1. Core Concept: The verification cycle.
2. Metaphor: Launching a paper plane (Deploy) which hits a button (URL) and rings a bell (Slack).
3. Action: Success chain.
4. Layout: Sequence.		## 5) デプロイして、Slackに投稿テストする 🚀📩
612docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_06_local_override.png./picture/firebase_functions_ts_study_019_06_local_override.pngTheme: Local Secret Override

Labels to Render:
- File: ".secret.local"
- Emulator: "Local Function"
- Cloud: "Secret Manager (Ignored)"

Visual Details:
1. Core Concept: Using a local file instead of cloud secrets.
2. Metaphor: The Emulator reading from a sticky note on the desk (.secret.local) instead of calling the bank (Cloud).
3. Action: Reading local.
4. Layout: Override visual.		## 6) ローカル検証（Emulator）で詰まったら 🧪😵‍💫
613docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_07_leak_accident.png./picture/firebase_functions_ts_study_019_07_leak_accident.pngTheme: Secret Leak Accident

Labels to Render:
- Repo: "GitHub (Public)"
- File: ".env"
- Content: "SLACK_URL = ..."
- Warning: "LEAKED!"

Visual Details:
1. Core Concept: The danger of committing secrets.
2. Metaphor: A transparent house (Public Repo) with valuables (Keys) clearly visible on the table.
3. Action: Exposure.
4. Layout: Warning scene.		## 7) よくある事故と対策 🧯
614docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_01_overall_flow.png./picture/firebase_functions_ts_study_020_01_overall_flow.pngTheme: Overall Flow

Labels to Render:
- Source: "Firestore Update"
- Logic: "Cloud Function"
- Dest: "Slack Notify"

Visual Details:
1. Core Concept: The pipeline from DB change to Notification.
2. Metaphor: A relay race. Firestore passes baton to Function, who runs to Slack.
3. Action: Relay.
4. Layout: Left-to-right flow.		## この章で完成するもの 🎯✨
615docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_02_event_quirks.png./picture/firebase_functions_ts_study_020_02_event_quirks.pngTheme: Event Quirks

Labels to Render:
- 1: "Out of Order"
- 2: "Duplicates"
- 3: "No Field Trigger"

Visual Details:
1. Core Concept: The three challenges of Firestore triggers.
2. Metaphor: 1. Number blocks 3-1-2. 2. Two identical letters. 3. A scanner reading the whole page, not just a line.
3. Action: Displaying quirks.
4. Layout: Three panels.		## まず押さえる「現実」3つ 🧠⚡
616docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_03_dedupe_schema.png./picture/firebase_functions_ts_study_020_03_dedupe_schema.pngTheme: Dedupe Schema

Labels to Render:
- Data: "reports/{id}"
- Lock: "_functionDedupe/{eventId}"
- Link: "Event ID"

Visual Details:
1. Core Concept: Separate collection for locking.
2. Metaphor: A main file cabinet (Reports) and a key rack (Dedupe). The Event ID connects the action to the key.
3. Action: Locking.
4. Layout: Connection diagram.		## 1) ざっくり設計図 🗺️
617docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_04_idempotency_logic.png./picture/firebase_functions_ts_study_020_04_idempotency_logic.pngTheme: Idempotency Logic

Labels to Render:
- Start: "Event"
- Action: "Create Lock"
- Success: "Process"
- Fail: "Stop (Already Done)"

Visual Details:
1. Core Concept: The decision flow based on lock creation.
2. Metaphor: A turnstile that only turns once per ticket. Second attempt blocked.
3. Action: Blocking duplicate.
4. Layout: Flowchart.		## 3) 実装（TypeScript）🛠️🔥
618docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_05_diff_check.png./picture/firebase_functions_ts_study_020_05_diff_check.pngTheme: Diff Logic

Labels to Render:
- Before: "{ status: 'draft' }"
- After: "{ status: 'published' }"
- Check: "Changed? Yes"
- Action: "Notify"

Visual Details:
1. Core Concept: Comparing snapshots to decide action.
2. Metaphor: Spot the difference game. Highlighting the changed 'status' field.
3. Action: Detecting change.
4. Layout: Comparison.		## このコードの「効いてるところ」💡
619docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_06_slack_blocks.png./picture/firebase_functions_ts_study_020_06_slack_blocks.pngTheme: Slack Blocks

Labels to Render:
- Input: "JSON Blocks"
- Process: "Render"
- Output: "Rich Message"

Visual Details:
1. Core Concept: Transforming code into UI.
2. Metaphor: A blueprint (JSON) turning into a building (Slack Card).
3. Action: Building/Rendering.
4. Layout: Code to UI.		## 4) Slack側のメッセージ整形（読みやすさ＝正義）🧾✨
620docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_07_safety_summary.png./picture/firebase_functions_ts_study_020_07_safety_summary.pngTheme: Safety Summary

Labels to Render:
- Shield: "Dedupe"
- Key: "Secret"
- Log: "Traceability"

Visual Details:
1. Core Concept: The three safety components.
2. Metaphor: A fortress. Shield on the wall, Key in the vault, Logbook on the desk.
3. Action: Protecting.
4. Layout: Grouped items.		## 6) “本番で怖いポイント” を言語化しよう（チェック）✅🧠
967docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_03_setup_cli.png./picture/firebase_functions_ts_study_018_03_setup_cli.pngTheme: Setup CLI

Labels to Render:
- Install: "npm install -g @google/gemini-cli@latest"
- Extension: "gemini extensions install firebase"
- Update: "gemini extensions update firebase"

Visual Details:
1. Core Concept: Installing the CLI and extension.
2. Metaphor: A terminal showing the commands being typed.
3. Action: Typing.
4. Layout: Terminal view.		After: ## 3) セットアップ（Windowsで最短）🪟⚡
968docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_08_ai_logic.png./picture/firebase_functions_ts_study_018_08_ai_logic.pngTheme: AI Logic Integration

Labels to Render:
- Init: "/firebase:init"
- Feature: "Add AI features"
- Code: "Generate AI Code"

Visual Details:
1. Core Concept: Adding AI features during initialization.
2. Metaphor: A checkbox "Add AI features" being selected in the CLI wizard.
3. Action: Selecting.
4. Layout: CLI Wizard view.		After: ## 8) FirebaseのAIサービスも絡める：AI Logic を「初期化で混ぜる」🤖🧩
969docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_10_node_versions.png./picture/firebase_functions_ts_study_018_10_node_versions.pngTheme: Node Versions

Labels to Render:
- Node: "v20 / v22 (Active) 🟢"
- Python: "v3.13 (Supported) 🐍"
- .NET: "Cloud Run (Separate) 🔵"

Visual Details:
1. Core Concept: Supported runtime versions.
2. Metaphor: Three pillars representing Node, Python, and .NET.
3. Action: Displaying versions.
4. Layout: Comparison.		After: ## 10) ちょい補足：この教材の言語バージョン感（Functions周辺）🔢🧩
970docs/firebase_functions_ts_study_018.mdfirebase_functions_ts_study_018_11_assignment.png./picture/firebase_functions_ts_study_018_11_assignment.pngTheme: Mini Assignment Deliverables

Labels to Render:
- List 1: "Checklist ✅"
- List 2: "Deploy Guide 📄"
- List 3: "Troubleshoot Guide 🧯"
- List 4: "Secret Rules 🔐"

Visual Details:
1. Core Concept: The deliverables of the assignment.
2. Metaphor: A desk with 4 documents neatly arranged.
3. Action: Organizing.
4. Layout: Top-down view.		After: ## ミニ課題（第18章）🏁✨
971docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_08_gemini_cli.png./picture/firebase_functions_ts_study_019_08_gemini_cli.pngTheme: Gemini CLI Helper

Labels to Render:
- Command: "/firebase:init"
- Question: "How to use Secret?"
- Answer: "Use defineSecret() 💡"

Visual Details:
1. Core Concept: Asking AI for help with Firebase commands.
2. Metaphor: A chat interface with the CLI robot.
3. Action: Chatting.
4. Layout: Chat view.		After: ## 8) AI活用：Gemini CLI / Antigravityで爆速にする 🤖🛸
972docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_09_assignment.png./picture/firebase_functions_ts_study_019_09_assignment.pngTheme: Assignment Goal

Labels to Render:
- Function: "slackTest"
- Action: "Deploy"
- Result: "1 Message Sent 📩"

Visual Details:
1. Core Concept: Deploying a function to send a message.
2. Metaphor: A rocket (Deploy) launching a paper plane (Message) to the Slack logo.
3. Action: Launching.
4. Layout: Action flow.		After: ## 9) ミニ課題（この章のゴール確認）📝🏁
973docs/firebase_functions_ts_study_019.mdfirebase_functions_ts_study_019_10_checklist.png./picture/firebase_functions_ts_study_019_10_checklist.pngTheme: Final Checklist

Labels to Render:
- Item 1: "Webhook OK 🔗"
- Item 2: "Secret OK 🗝️"
- Item 3: "Code OK 🧱"
- Item 4: "Test OK 📩"

Visual Details:
1. Core Concept: Verifying completion.
2. Metaphor: A golden checklist with 4 green checks.
3. Action: Checking.
4. Layout: List view.		After: ## 10) チェックリスト ✅✅✅
974docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_08_gemini_review.png./picture/firebase_functions_ts_study_020_08_gemini_review.pngTheme: AI Code Review

Labels to Render:
- Input: "Code & Logs"
- AI: "Review for Bugs"
- Output: "Fix Proposal 💡"

Visual Details:
1. Core Concept: Using AI to review code and logs.
2. Metaphor: A robot detective examining a blueprint and pointing out a flaw.
3. Action: Reviewing.
4. Layout: Interaction.		After: ## 7) AIで“仕上げ速度”を上げる 🤖🛸✨
975docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_09_runtime_versions.png./picture/firebase_functions_ts_study_020_09_runtime_versions.pngTheme: Node Runtime Status

Labels to Render:
- Node 18: "Deprecated ⚠️"
- Node 20: "Supported ✅"
- Node 22: "Supported ✅"

Visual Details:
1. Core Concept: Current status of Node versions.
2. Metaphor: Traffic lights. Red (18), Green (20/22).
3. Action: Signaling.
4. Layout: Horizontal sequence.		After: ## 8) おまけ：ランタイムの最新版メモ（この章の立ち位置）🧩📌
976docs/firebase_functions_ts_study_020.mdfirebase_functions_ts_study_020_10_assignment.png./picture/firebase_functions_ts_study_020_10_assignment.pngTheme: Assignment Tasks

Labels to Render:
- Task 1: "Add watchKeys"
- Task 2: "Status Check"
- Task 3: "Batching Idea"

Visual Details:
1. Core Concept: Enhancing the function.
2. Metaphor: Adding upgrades to a machine.
3. Action: Upgrading.
4. Layout: Blueprint.		After: ## ミニ課題（ちょい実務寄せ）🎒✨
1387docs/firebase_functions_ts_study_006.mdfirebase_functions_ts_study_006_01_http_trigger_concept.png./picture/firebase_functions_ts_study_006_01_http_trigger_concept.pngTheme: HTTP Trigger Concept

Labels to Render:
- Client: "Browser 🌍"
- URL: "Request (GET) ➡️"
- Cloud: "Functions (req, res) ☁️"
- Response: "Response (JSON) ⬅️"

Visual Details:
1. Core Concept: The request-response cycle of an HTTP function.
2. Metaphor: A mail carrier (URL) delivering a letter (Request) to an office (Functions) and bringing back a reply (Response).
3. Action: Round trip.
4. Layout: Loop or linear flow.		## 0) まずイメージをつかもう🧠✨
1388docs/firebase_functions_ts_study_006.mdfirebase_functions_ts_study_006_02_health_check.png./picture/firebase_functions_ts_study_006_02_health_check.pngTheme: Health Check API

Labels to Render:
- Monitor: "Monitoring Tool 🩺"
- Endpoint: "GET /health"
- Status: "200 OK ✅"
- Usage: "Alive Check"

Visual Details:
1. Core Concept: Using a simple API to check system health.
2. Metaphor: A doctor (Monitor) checking a patient's pulse (Endpoint).
3. Action: Checking.
4. Layout: Interaction view.		## 1) 今日作るもの：GET /health ✅🩺
1389docs/firebase_functions_ts_study_006.mdfirebase_functions_ts_study_006_03_onrequest_options.png./picture/firebase_functions_ts_study_006_03_onrequest_options.pngTheme: onRequest Options

Labels to Render:
- Function: "onRequest({...})"
- Opt 1: "Region 🗾"
- Opt 2: "Timeout ⏱️"
- Opt 3: "CORS 🧱"

Visual Details:
1. Core Concept: Configuring the function with options.
2. Metaphor: A control panel with switches and dials for Region, Timeout, and CORS.
3. Action: Configuring.
4. Layout: Dashboard.		## 2) HTTP関数の基本：onRequest 🌐
1390docs/firebase_functions_ts_study_006.mdfirebase_functions_ts_study_006_04_code_flow.png./picture/firebase_functions_ts_study_006_04_code_flow.pngTheme: Health Function Logic

Labels to Render:
- Start: "Request 📨"
- Decision: "Is GET?"
- No: "405 Method Not Allowed 🚫"
- Yes: "200 OK + JSON ✅"

Visual Details:
1. Core Concept: The logic flow inside the health function.
2. Metaphor: A flowchart or decision tree.
3. Action: Branching.
4. Layout: Flowchart.		## ✅ functions/src/http/health.ts
1391docs/firebase_functions_ts_study_006.mdfirebase_functions_ts_study_006_05_global_options.png./picture/firebase_functions_ts_study_006_05_global_options.pngTheme: Global Options Scope

Labels to Render:
- Global: "setGlobalOptions 🌍"
- Func A: "health (Asia)"
- Func B: "user (Asia)"
- Func C: "admin (Asia)"

Visual Details:
1. Core Concept: Setting a default that applies to all functions.
2. Metaphor: An umbrella covering multiple people (Functions) with the same policy (Region).
3. Action: Covering.
4. Layout: Hierarchy.		## 4) ついでに“全関数にregion統一”する小ワザ🗾✨（おすすめ）
1392docs/firebase_functions_ts_study_006.mdfirebase_functions_ts_study_006_06_concurrency.png./picture/firebase_functions_ts_study_006_06_concurrency.pngTheme: Concurrency 2nd Gen

Labels to Render:
- 1st Gen: "1 Req / 1 Instance 🐢"
- 2nd Gen: "80 Reqs / 1 Instance 🐇"
- Benefit: "Cheaper & Faster"

Visual Details:
1. Core Concept: Multiple requests handled by a single instance.
2. Metaphor: A single cashier (1st Gen) vs a multi-lane checkout managed by one super-clerk (2nd Gen).
3. Action: Handling traffic.
4. Layout: Comparison.		## 6) 2nd genの“地味に大事”ポイント：同時処理（concurrency）⚡
1393docs/firebase_functions_ts_study_006.mdfirebase_functions_ts_study_006_07_ai_dev_cycle.png./picture/firebase_functions_ts_study_006_07_ai_dev_cycle.pngTheme: AI Development Cycle

Labels to Render:
- User: "Ask Gemini 💬"
- Tool: "Gemini CLI 🤖"
- Output: "Code Skeleton 📝"
- Action: "Deploy 🚀"

Visual Details:
1. Core Concept: Accelerating development with AI tools.
2. Metaphor: A developer brainstorming with a robot, who instantly hands over a blueprint.
3. Action: Collaborating.
4. Layout: Cycle.		## 8) AIで爆速にする🤖🛸（Gemini CLI × Firebase）
1394firebase_functions_ts_study_007.mdfirebase_functions_ts_study_007_01_concept_flow.png./picture/firebase_functions_ts_study_007_01_concept_flow.pngTheme: API Processing Flow

Labels to Render:
- Input: "JSON Request"
- Process: "Validate & Echo"
- Output: "JSON Response"

Visual Details:
1. Core Concept: API Processing Flow
2. Metaphor: A clean left-to-right flow. A JSON document enters a processing box (gear/chip), and a new JSON document comes out. Simple and direct.
3. Action: Processing.
4. Layout: Left-to-right flow.		## 7-1. まず大事な前提：FunctionsのHTTPは“Expressっぽい”🧩
1395firebase_functions_ts_study_007.mdfirebase_functions_ts_study_007_02_three_rules.png./picture/firebase_functions_ts_study_007_02_three_rules.pngTheme: The Three Rules of JSON API

Labels to Render:
- Rule 1: "Check Content-Type"
- Rule 2: "Validate Input"
- Rule 3: "JSON Error"

Visual Details:
1. Core Concept: The Three Rules of JSON API
2. Metaphor: Three distinct pillars or checklist items. Maybe a shield (Content-Type), a magnifying glass (Validation), and a package (JSON Error).
3. Action: Checking.
4. Layout: Three pillars.		## 7-2. HTTPでJSONを扱うときの「3点セット」✅✅✅
1396firebase_functions_ts_study_007.mdfirebase_functions_ts_study_007_03_echo_spec.png./picture/firebase_functions_ts_study_007_03_echo_spec.pngTheme: Echo API Specification

Labels to Render:
- Request: "{ message, count }"
- Success: "{ ok: true, data }"
- Error: "{ ok: false, error }"

Visual Details:
1. Core Concept: Echo API Specification
2. Metaphor: A diagram showing the request payload branching into two possible outcomes: Success (Green) and Error (Red).
3. Action: Branching.
4. Layout: Diagram.		## 7-3. 今回作る POST /echo の仕様（ミニAPI設計）🧪
1397firebase_functions_ts_study_007.mdfirebase_functions_ts_study_007_04_validation_funnel.png./picture/firebase_functions_ts_study_007_04_validation_funnel.pngTheme: Validation Funnel

Labels to Render:
- Top: "req.body (unknown)"
- Filter: "Validation Logic"
- Bottom: "Typed Data (Safe)"

Visual Details:
1. Core Concept: Validation Funnel
2. Metaphor: A funnel metaphor. messy/mixed items go in the top, pass through a filter layer, and clean, organized blocks come out the bottom.
3. Action: Filtering.
4. Layout: Funnel.		## 7-4. 実装（TypeScript / onRequest）🛠️✨
1398firebase_functions_ts_study_007.mdfirebase_functions_ts_study_007_05_status_codes.png./picture/firebase_functions_ts_study_007_05_status_codes.pngTheme: HTTP Status Code Gates

Labels to Render:
- 200: "OK (Open)"
- 400: "Bad Req (Block)"
- 405: "Method (Block)"
- 415: "Type (Block)"

Visual Details:
1. Core Concept: HTTP Status Code Gates
2. Metaphor: A set of gates. 200 is open and green. The others are closed/blocked with red signs indicating the specific error type.
3. Action: Blocking/Opening.
4. Layout: Gates.		ポイントまとめ💡
1399firebase_functions_ts_study_007.mdfirebase_functions_ts_study_007_06_powershell_test.png./picture/firebase_functions_ts_study_007_06_powershell_test.pngTheme: PowerShell Testing

Labels to Render:
- User: "PowerShell"
- Command: "Invoke-RestMethod"
- API: "Cloud Function"
- Result: "200 OK"

Visual Details:
1. Core Concept: PowerShell Testing
2. Metaphor: A terminal window sending a command to a cloud icon, and receiving a checkmark response.
3. Action: Testing.
4. Layout: Interaction.		## 7-5. Windowsで叩いて確認しよう🪟🔫（安全なテスト）
1400firebase_functions_ts_study_007.mdfirebase_functions_ts_study_007_07_pitfalls.png./picture/firebase_functions_ts_study_007_07_pitfalls.pngTheme: API Pitfalls

Labels to Render:
- Pitfall 1: "Empty Body?"
- Pitfall 2: "HTML Error?"
- Pitfall 3: "Wrong Method?"

Visual Details:
1. Core Concept: API Pitfalls
2. Metaphor: Three warning signs or traps on a road. "Empty Body" could be an empty box. "HTML Error" could be a messy page. "Wrong Method" could be a wrong-way sign.
3. Action: Warning.
4. Layout: Triptych.		## 7-6. つまずきポイント集（ここ超あるある）🕳️🤣
1401firebase_functions_ts_study_008.mdfirebase_functions_ts_study_008_01_cors_traffic.png./picture/firebase_functions_ts_study_008_01_cors_traffic.pngTheme: CORS Traffic Controller

Labels to Render:
- Browser: "Can I call API?"
- Traffic Cop: "CORS (Server)"
- Origin A: "Allowed (Go) ✅"
- Origin B: "Blocked (Stop) 🛑"

Visual Details:
1. Core Concept: CORS Traffic Controller
2. Metaphor: A traffic cop standing between the browser and the server API. He is checking the license plates (Origins) of the cars (Requests).
3. Action: Directing traffic.
4. Layout: Traffic scene.		## 1) まず結論：CORSって何？🤔
1402firebase_functions_ts_study_008.mdfirebase_functions_ts_study_008_02_preflight_flow.png./picture/firebase_functions_ts_study_008_02_preflight_flow.pngTheme: Preflight (OPTIONS) Flow

Labels to Render:
- Step 1: "OPTIONS (Can I post?)"
- Step 2: "204 OK (Yes)"
- Step 3: "POST (Data)"
- Result: "200 OK"

Visual Details:
1. Core Concept: Preflight (OPTIONS) Flow
2. Metaphor: A conversation bubble sequence. The browser asks permission first (OPTIONS), gets approval, then sends the actual data.
3. Action: Handshaking.
4. Layout: Sequential flow.		## 2) つまずきポイント：Preflight（OPTIONS）って何👀？
1403firebase_functions_ts_study_008.mdfirebase_functions_ts_study_008_03_origin_components.png./picture/firebase_functions_ts_study_008_03_origin_components.pngTheme: Origin Components

Labels to Render:
- Scheme: "https://"
- Domain: "example.com"
- Port: ":3000"
- Result: "Unique Origin"

Visual Details:
1. Core Concept: Origin Components
2. Metaphor: A puzzle piecing together the three parts of an Origin. Emphasizing that changing any piece makes it a different origin.
3. Action: Assembling.
4. Layout: Equation or Puzzle.		## ⚠️ あるある注意：Originは「スキーム＋ドメイン＋ポート」🎯
1404firebase_functions_ts_study_008.mdfirebase_functions_ts_study_008_04_cors_not_security.png./picture/firebase_functions_ts_study_008_04_cors_not_security.pngTheme: CORS is Not Security

Labels to Render:
- Browser: "Blocked by CORS 🧱"
- Hacker Script: "Bypasses CORS 🔫"
- Server: "Vulnerable API 🔓"

Visual Details:
1. Core Concept: CORS is Not Security
2. Metaphor: A wall that only stops the browser. A hacker/script simply walks around the wall because it doesn't apply to them.
3. Action: Bypassing.
4. Layout: Side-by-side comparison.		## 4) 超重要：CORSは“セキュリティ”ではない🙅‍♂️🔐
1405firebase_functions_ts_study_008.mdfirebase_functions_ts_study_008_05_defense_layers.png./picture/firebase_functions_ts_study_008_05_defense_layers.pngTheme: Three Layers of Defense

Labels to Render:
- Layer 1: "CORS (Browser Traffic)"
- Layer 2: "App Check (App Integrity)"
- Layer 3: "Auth (User Identity)"

Visual Details:
1. Core Concept: Three Layers of Defense
2. Metaphor: Three concentric shields or walls protecting the API core.
3. Action: Protecting.
4. Layout: Concentric circles.		## 5) “本当の守り”の基本セット：Auth + App Check 🛡️✨
1406firebase_functions_ts_study_008.mdfirebase_functions_ts_study_008_06_manual_verification.png./picture/firebase_functions_ts_study_008_06_manual_verification.pngTheme: Manual Token Verification

Labels to Render:
- Request: "Headers"
- Extract: "Bearer Token & App Check"
- Verify: "Admin SDK"
- Result: "Allow/Deny"

Visual Details:
1. Core Concept: Manual Token Verification
2. Metaphor: A process flow. Taking headers from a request packet, inspecting them with a tool (SDK), and giving a thumbs up/down.
3. Action: Verifying.
4. Layout: Flowchart.		## 7) ハンズオン：HTTP関数で「CORS + Auth + App Check」を最低限いれる🧰🛡️
1407firebase_functions_ts_study_008.mdfirebase_functions_ts_study_008_07_ai_debugging.png./picture/firebase_functions_ts_study_008_07_ai_debugging.pngTheme: AI Debugging CORS

Labels to Render:
- Error: "CORS Error 🔴"
- AI: "Gemini 🤖"
- Solution: "Add Origin to Config 📝"

Visual Details:
1. Core Concept: AI Debugging CORS
2. Metaphor: A developer showing a red error screen to a robot, who points to a line of config code to fix it.
3. Action: Debugging.
4. Layout: Interaction.		## 9) AIでデバッグを爆速にする（Antigravity / Gemini CLI）🛸🤖
1408firebase_functions_ts_study_009.mdfirebase_functions_ts_study_009_01_callable_overview.png./picture/firebase_functions_ts_study_009_01_callable_overview.pngTheme: Callable Overview

Labels to Render:
- Client: "React (httpsCallable)"
- SDK: "Auto-Attach"
- Token 1: "Auth 🔐"
- Token 2: "App Check 🧿"
- Server: "Functions ☁️"

Visual Details:
1. Core Concept: Callable Overview
2. Metaphor: A package labeled "Request" moving from Client to Server. The SDK robot arm stamps it with "Auth" and "App Check" symbols automatically.
3. Action: Stamping/Sending.
4. Layout: Left-to-right flow.		## 0) まずイメージ図🧠✨
1409firebase_functions_ts_study_009.mdfirebase_functions_ts_study_009_02_server_check.png./picture/firebase_functions_ts_study_009_02_server_check.pngTheme: Server-Side Checks

Labels to Render:
- Request: "Incoming"
- Check 1: "request.auth (User)"
- Check 2: "request.app (App Check)"
- Action: "Allow/Deny"

Visual Details:
1. Core Concept: Server-Side Checks
2. Metaphor: A security checkpoint. The guard checks the "User ID" and the "App Badge" before letting the request pass.
3. Action: Checking.
4. Layout: Checkpoint scene.		## 2) Callableは「AuthつきAPI」を作る最短ルート💡
1410firebase_functions_ts_study_009.mdfirebase_functions_ts_study_009_03_logic_flow.png./picture/firebase_functions_ts_study_009_03_logic_flow.pngTheme: Callable Logic Flow

Labels to Render:
- Step 1: "Auth Check 🔐"
- Step 2: "Input Check 📦"
- Step 3: "Logic (AI) 🤖"
- Step 4: "Return Data ↩️"

Visual Details:
1. Core Concept: Callable Logic Flow
2. Metaphor: A flowchart showing the sequential steps inside the function code. Step 1 and 2 are filters/gates.
3. Action: Flowing.
4. Layout: Vertical flowchart.		### 3-1) Functions側（TypeScript）⚙️
1411firebase_functions_ts_study_009.mdfirebase_functions_ts_study_009_04_error_handling.png./picture/firebase_functions_ts_study_009_04_error_handling.pngTheme: HttpsError Handling

Labels to Render:
- Server: "Throw HttpsError 📛"
- Client: "Catch Error 🪝"
- UI: "Show Message 💬"

Visual Details:
1. Core Concept: HttpsError Handling
2. Metaphor: The server throwing a red ball (Error). The client catches it with a glove (Catch block) and shows a text bubble (UI).
3. Action: Throwing/Catching.
4. Layout: Interaction.		## 4) React側：httpsCallable() で呼ぶ📞✨
1412firebase_functions_ts_study_009.mdfirebase_functions_ts_study_009_05_enforce_app_check.png./picture/firebase_functions_ts_study_009_05_enforce_app_check.pngTheme: App Check Enforcement

Labels to Render:
- Setting: "enforceAppCheck: true"
- Gate: "Strict Gate 🧱"
- Request: "No Token"
- Result: "Reject 🚫"

Visual Details:
1. Core Concept: App Check Enforcement
2. Metaphor: A heavy gate that is closed. A request without a token bounces off it.
3. Action: Blocking.
4. Layout: Gate scene.		### 6-1) Functions側：enforceAppCheck: true を付ける（v2）✅
1413firebase_functions_ts_study_009.mdfirebase_functions_ts_study_009_06_debug_token.png./picture/firebase_functions_ts_study_009_06_debug_token.pngTheme: Debug Token Usage

Labels to Render:
- Env: "Localhost 🏠"
- Key: "Debug Token 🔑"
- Gate: "App Check 🧿"
- Result: "Pass ✅"

Visual Details:
1. Core Concept: Debug Token Usage
2. Metaphor: A developer using a special key to open the App Check gate, bypassing the strict check for local testing.
3. Action: Unlocking.
4. Layout: Key interaction.		### 6-3) 開発中は「Debug token」で詰まりを回避🧯🧪
1414firebase_functions_ts_study_009.mdfirebase_functions_ts_study_009_07_ai_acceleration.png./picture/firebase_functions_ts_study_009_07_ai_acceleration.pngTheme: AI Acceleration

Labels to Render:
- User: "Generate Callable"
- Tool: "Gemini CLI + MCP 🛠️"
- Output: "Boilerplate Code 📝"

Visual Details:
1. Core Concept: AI Acceleration
2. Metaphor: A user giving a command to a high-tech tool, which instantly 3D prints the code structure.
3. Action: Generating.
4. Layout: Creation scene.		## 8) AI開発（Antigravity / Gemini CLI）でここを爆速にする🤖🛸
1415firebase_functions_ts_study_010.mdfirebase_functions_ts_study_010_01_secret_types.png./picture/firebase_functions_ts_study_010_01_secret_types.pngTheme: Types of Secrets

Labels to Render:
- API Key: "Gemini Key 🔑"
- Webhook: "Slack URL 🔔"
- Password: "DB Pass 🔒"

Visual Details:
1. Core Concept: Types of Secrets
2. Metaphor: Three distinct items marked as "TOP SECRET". A key, a bell with a tag, and a padlock.
3. Action: Displaying.
4. Layout: Group.		## 1) まず「秘密情報」って何？🧨
1416firebase_functions_ts_study_010.mdfirebase_functions_ts_study_010_02_secret_architecture.png./picture/firebase_functions_ts_study_010_02_secret_architecture.pngTheme: Secret Manager Architecture

Labels to Render:
- CLI: "Set Secret 💻"
- Manager: "Secret Manager ☁️"
- Function: "Read Secret ⚙️"

Visual Details:
1. Core Concept: Secret Manager Architecture
2. Metaphor: A flow where a user pushes a secret into a cloud vault, and a function pulls it out securely.
3. Action: Storing/Retrieving.
4. Layout: Flowchart.		## 2) 2026の正解：Secrets + params を使う🧠✨
1417firebase_functions_ts_study_010.mdfirebase_functions_ts_study_010_03_code_pattern.png./picture/firebase_functions_ts_study_010_03_code_pattern.pngTheme: Code Pattern for Secrets

Labels to Render:
- Definition: "defineSecret()"
- Binding: "secrets: [...]"
- Usage: ".value()"

Visual Details:
1. Core Concept: Code Pattern for Secrets
2. Metaphor: A code snippet metaphor. Defining a variable, attaching it to a function box, and extracting the value inside.
3. Action: Coding.
4. Layout: Code structure.		## 3-3) 「Secretを使う関数」を1つ作る（TypeScript）🧪
1418firebase_functions_ts_study_010.mdfirebase_functions_ts_study_010_04_local_vs_cloud.png./picture/firebase_functions_ts_study_010_04_local_vs_cloud.pngTheme: Local vs Cloud Secrets

Labels to Render:
- Emulator: ".secret.local 🏠"
- Production: "Secret Manager 🔥"
- Function: "Unified Code ⚙️"

Visual Details:
1. Core Concept: Local vs Cloud Secrets
2. Metaphor: A switch or dual-source system. The function code stays the same, but the source of the secret changes based on environment.
3. Action: Switching.
4. Layout: Branching.		## 4) ローカル（Emulator）で秘密を扱う🧪🛡️
1419firebase_functions_ts_study_010.mdfirebase_functions_ts_study_010_05_ai_key_protection.png./picture/firebase_functions_ts_study_010_05_ai_key_protection.pngTheme: AI Key Protection

Labels to Render:
- AI: "Gemini 🤖"
- Key: "API Key 🔑"
- Vault: "Secret Manager 🛡️"

Visual Details:
1. Core Concept: AI Key Protection
2. Metaphor: A robot reaching into a secure vault to get the key needed to operate.
3. Action: Retrieving.
4. Layout: Interaction.		## 5) AI連携の“鍵”も同じ考え方 🔥🤖
1420firebase_functions_ts_study_010.mdfirebase_functions_ts_study_010_06_leak_pitfall.png./picture/firebase_functions_ts_study_010_06_leak_pitfall.pngTheme: Console Log Leak

Labels to Render:
- Code: "console.log(secret)"
- Log: "Value Exposed! 😱"
- Hacker: "Watching 👀"

Visual Details:
1. Core Concept: Console Log Leak
2. Metaphor: A pipe leaking water (secret) onto the floor where a spy is watching.
3. Action: Leaking.
4. Layout: Hazard scene.		### よくある事故ポイント 🚑
1421firebase_functions_ts_study_010.mdfirebase_functions_ts_study_010_07_config_evolution.png./picture/firebase_functions_ts_study_010_07_config_evolution.pngTheme: Config Evolution

Labels to Render:
- Old: "functions.config() 🏚️"
- New: "defineSecret() 🏰"
- Future: "Safe ✅"

Visual Details:
1. Core Concept: Config Evolution
2. Metaphor: A crumbling old house (Old) vs a modern secure fortress (New).
3. Action: Upgrading.
4. Layout: Comparison.		## 2) 2026の正解：Secrets + params を使う🧠✨