image_generation_plan.functions_ts

ID	File Name	Proposed Image Filename	Relative Link Path	Prompt	Insertion Point
510	docs/firebase_functions_ts_index.md	firebase_functions_ts_index_overview.png	./picture/firebase_functions_ts_index_overview.png	Theme: 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 を作って公開できる🌐
511	docs/firebase_functions_ts_index.md	firebase_functions_ts_index_folder_structure.png	./picture/firebase_functions_ts_index_folder_structure.png	Theme: 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・共通処理を分離する
512	docs/firebase_functions_ts_index.md	firebase_functions_ts_index_db_trigger.png	./picture/firebase_functions_ts_index_db_trigger.png	Theme: 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} 作成→加工して別フィールドに保存
513	docs/firebase_functions_ts_index.md	firebase_functions_ts_index_cron_schedule.png	./picture/firebase_functions_ts_index_cron_schedule.png	Theme: 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に書く）
514	docs/firebase_functions_ts_index.md	firebase_functions_ts_index_ai_integration.png	./picture/firebase_functions_ts_index_ai_integration.png	Theme: 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を作る
515	docs/firebase_functions_ts_index.md	firebase_functions_ts_index_slack_webhook.png	./picture/firebase_functions_ts_index_slack_webhook.png	Theme: 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に登録→テスト送信
516	docs/firebase_functions_ts_index.md	firebase_functions_ts_index_runtime_map.png	./picture/firebase_functions_ts_index_runtime_map.png	Theme: 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])
517	docs/firebase_functions_ts_study_001.md	firebase_functions_ts_study_001_01_overview_map.png	./picture/firebase_functions_ts_study_001_01_overview_map.png	Theme: 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って一言でいうと？🧠
518	docs/firebase_functions_ts_study_001.md	firebase_functions_ts_study_001_02_frontend_limits.png	./picture/firebase_functions_ts_study_001_02_frontend_limits.png	Theme: 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.	### ✅ フロントに置いちゃダメ（または危険）な代表例
519	docs/firebase_functions_ts_study_001.md	firebase_functions_ts_study_001_03_trigger_types.png	./picture/firebase_functions_ts_study_001_03_trigger_types.png	Theme: 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つの起動ボタン”🎛️✨
520	docs/firebase_functions_ts_study_001.md	firebase_functions_ts_study_001_04_sorting_game.png	./picture/firebase_functions_ts_study_001_04_sorting_game.png	Theme: 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) ここでミニ演習✍️「どこに置く？」仕分けゲーム🎮
521	docs/firebase_functions_ts_study_001.md	firebase_functions_ts_study_001_05_ai_guardrail.png	./picture/firebase_functions_ts_study_001_05_ai_guardrail.png	Theme: 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は“ガードレール役”がめちゃ重要🤖🛡️
522	docs/firebase_functions_ts_study_001.md	firebase_functions_ts_study_001_06_ai_tools.png	./picture/firebase_functions_ts_study_001_06_ai_tools.png	Theme: 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で学習・設計を爆速にするコツ🛸💻✨
523	docs/firebase_functions_ts_study_001.md	firebase_functions_ts_study_001_07_runtime_status.png	./picture/firebase_functions_ts_study_001_07_runtime_status.png	Theme: 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) ちょいメモ：ランタイムの空気感だけ👀
524	docs/firebase_functions_ts_study_002.md	firebase_functions_ts_study_002_01_concept.png	./picture/firebase_functions_ts_study_002_01_concept.png	Theme: 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って何者？🧠
525	docs/firebase_functions_ts_study_002.md	firebase_functions_ts_study_002_02_concurrency.png	./picture/firebase_functions_ts_study_002_02_concurrency.png	Theme: 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台で“同時にさばける”＝混んだとき強い💪🍜
526	docs/firebase_functions_ts_study_002.md	firebase_functions_ts_study_002_03_power_duration.png	./picture/firebase_functions_ts_study_002_03_power_duration.png	Theme: 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) パワーが出る＆長く動ける🏋️⏱️
527	docs/firebase_functions_ts_study_002.md	firebase_functions_ts_study_002_04_ops_features.png	./picture/firebase_functions_ts_study_002_04_ops_features.png	Theme: 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) “運用がラク”寄りの機能が揃う🧯👀
528	docs/firebase_functions_ts_study_002.md	firebase_functions_ts_study_002_05_gen_comparison.png	./picture/firebase_functions_ts_study_002_05_gen_comparison.png	Theme: 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万能じゃない（ここ超大事）⚠️
529	docs/firebase_functions_ts_study_002.md	firebase_functions_ts_study_002_06_cost_warning.png	./picture/firebase_functions_ts_study_002_06_cost_warning.png	Theme: 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）
530	docs/firebase_functions_ts_study_003.md	firebase_functions_ts_study_003_01_runtime_concept.png	./picture/firebase_functions_ts_study_003_01_runtime_concept.png	Theme: 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) そもそも「ランタイム」って何？🤔
531	docs/firebase_functions_ts_study_003.md	firebase_functions_ts_study_003_02_node_status.png	./picture/firebase_functions_ts_study_003_02_node_status.png	Theme: 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 ✅🟦
532	docs/firebase_functions_ts_study_003.md	firebase_functions_ts_study_003_03_why_node.png	./picture/firebase_functions_ts_study_003_03_why_node.png	Theme: 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）を選ぶと何が嬉しい？🎁
533	docs/firebase_functions_ts_study_003.md	firebase_functions_ts_study_003_04_config_location.png	./picture/firebase_functions_ts_study_003_04_config_location.png	Theme: 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 のランタイム指定（超重要）🔧
534	docs/firebase_functions_ts_study_003.md	firebase_functions_ts_study_003_05_python_support.png	./picture/firebase_functions_ts_study_003_05_python_support.png	Theme: 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 を選ぶのはどんな時？🐍✨
535	docs/firebase_functions_ts_study_003.md	firebase_functions_ts_study_003_06_dotnet_strategy.png	./picture/firebase_functions_ts_study_003_06_dotnet_strategy.png	Theme: 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 はどうする？🟪
536	docs/firebase_functions_ts_study_003.md	firebase_functions_ts_study_003_07_ai_config.png	./picture/firebase_functions_ts_study_003_07_ai_config.png	Theme: 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を使って“ランタイム選び”を秒速で終わらせる🤖⚡
537	docs/firebase_functions_ts_study_004.md	firebase_functions_ts_study_004_01_blaze_warning.png	./picture/firebase_functions_ts_study_004_01_blaze_warning.png	Theme: 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) 先に知っておく“最重要”ポイント💡
538	docs/firebase_functions_ts_study_004.md	firebase_functions_ts_study_004_02_cli_setup.png	./picture/firebase_functions_ts_study_004_02_cli_setup.png	Theme: 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）
539	docs/firebase_functions_ts_study_004.md	firebase_functions_ts_study_004_03_init_flow.png	./picture/firebase_functions_ts_study_004_03_init_flow.png	Theme: 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. 初期化コマンド🛠️
540	docs/firebase_functions_ts_study_004.md	firebase_functions_ts_study_004_04_folder_structure.png	./picture/firebase_functions_ts_study_004_04_folder_structure.png	Theme: 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.	初期化が終わると、だいたい👇みたいな構成になります（超ざっくり）📦
541	docs/firebase_functions_ts_study_004.md	firebase_functions_ts_study_004_05_hello_code.png	./picture/firebase_functions_ts_study_004_05_hello_code.png	Theme: 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）
542	docs/firebase_functions_ts_study_004.md	firebase_functions_ts_study_004_06_deploy_process.png	./picture/firebase_functions_ts_study_004_06_deploy_process.png	Theme: 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回を通す）
543	docs/firebase_functions_ts_study_004.md	firebase_functions_ts_study_004_07_troubleshooting.png	./picture/firebase_functions_ts_study_004_07_troubleshooting.png	Theme: 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) つまずきポイント集🧯（ここだけ見れば復帰できる）
544	docs/firebase_functions_ts_study_005.md	firebase_functions_ts_study_005_01_three_rules.png	./picture/firebase_functions_ts_study_005_01_three_rules.png	Theme: 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ルール” 🧭
545	docs/firebase_functions_ts_study_005.md	firebase_functions_ts_study_005_02_folder_structure.png	./picture/firebase_functions_ts_study_005_02_folder_structure.png	Theme: 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/）は、こんな感じがおすすめです👇
546	docs/firebase_functions_ts_study_005.md	firebase_functions_ts_study_005_03_index_role.png	./picture/firebase_functions_ts_study_005_03_index_role.png	Theme: 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 は “薄く” する（最重要）🚪✨
547	docs/firebase_functions_ts_study_005.md	firebase_functions_ts_study_005_04_singleton_init.png	./picture/firebase_functions_ts_study_005_04_singleton_init.png	Theme: 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）🧰
548	docs/firebase_functions_ts_study_005.md	firebase_functions_ts_study_005_05_logging_json.png	./picture/firebase_functions_ts_study_005_05_logging_json.png	Theme: 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) ログは “後で助かる形” に揃える 🧯👀
549	docs/firebase_functions_ts_study_005.md	firebase_functions_ts_study_005_06_runtime_choice.png	./picture/firebase_functions_ts_study_005_06_runtime_choice.png	Theme: 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 ランタイム（超重要）⚙️
550	docs/firebase_functions_ts_study_005.md	firebase_functions_ts_study_005_07_ai_folder.png	./picture/firebase_functions_ts_study_005_07_ai_folder.png	Theme: 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/ を最初に作っておく🔥
551	docs/firebase_functions_ts_study_011.md	firebase_functions_ts_study_011_01_trigger_concept.png	./picture/firebase_functions_ts_study_011_01_trigger_concept.png	Theme: 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.	## まずは用語を超かんたんに👶📚
552	docs/firebase_functions_ts_study_011.md	firebase_functions_ts_study_011_02_trigger_types.png	./picture/firebase_functions_ts_study_011_02_trigger_types.png	Theme: 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兄弟👨‍👩‍👧‍👦⚡
553	docs/firebase_functions_ts_study_011.md	firebase_functions_ts_study_011_03_data_structure.png	./picture/firebase_functions_ts_study_011_03_data_structure.png	Theme: 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の形（イメージ）🧾
554	docs/firebase_functions_ts_study_011.md	firebase_functions_ts_study_011_04_infinite_loop.png	./picture/firebase_functions_ts_study_011_04_infinite_loop.png	Theme: 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.	## つまずきポイント：更新ループ（無限発火）って何？🌀😇
555	docs/firebase_functions_ts_study_011.md	firebase_functions_ts_study_011_05_loop_avoidance.png	./picture/firebase_functions_ts_study_011_05_loop_avoidance.png	Theme: 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パターン”🛡️✨
556	docs/firebase_functions_ts_study_011.md	firebase_functions_ts_study_011_06_idempotency_check.png	./picture/firebase_functions_ts_study_011_06_idempotency_check.png	Theme: 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）ってこう考える🧠🔁
557	docs/firebase_functions_ts_study_011.md	firebase_functions_ts_study_011_07_ai_review.png	./picture/firebase_functions_ts_study_011_07_ai_review.png	Theme: 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）
558	docs/firebase_functions_ts_study_012.md	firebase_functions_ts_study_012_01_at_least_once.png	./picture/firebase_functions_ts_study_012_01_at_least_once.png	Theme: 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回だけ” を期待しちゃダメ🙅‍♂️💥
559	docs/firebase_functions_ts_study_012.md	firebase_functions_ts_study_012_02_idempotency_concept.png	./picture/firebase_functions_ts_study_012_02_idempotency_concept.png	Theme: 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）ってなに？🧩
560	docs/firebase_functions_ts_study_012.md	firebase_functions_ts_study_012_03_retry_timeline.png	./picture/firebase_functions_ts_study_012_03_retry_timeline.png	Theme: 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（再試行）を正しく怖がる😈➡️😌
561	docs/firebase_functions_ts_study_012.md	firebase_functions_ts_study_012_04_three_pillars.png	./picture/firebase_functions_ts_study_012_04_three_pillars.png	Theme: 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本柱” 🏗️✨
562	docs/firebase_functions_ts_study_012.md	firebase_functions_ts_study_012_05_lock_flow.png	./picture/firebase_functions_ts_study_012_05_lock_flow.png	Theme: 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）🛠️🔐
563	docs/firebase_functions_ts_study_012.md	firebase_functions_ts_study_012_06_ai_cost_warning.png	./picture/firebase_functions_ts_study_012_06_ai_cost_warning.png	Theme: 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を絡めるときの“重複対策”は最優先🧠💸🤖
564	docs/firebase_functions_ts_study_012.md	firebase_functions_ts_study_012_07_lock_state.png	./picture/firebase_functions_ts_study_012_07_lock_state.png	Theme: 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) ミニ課題（この章のゴール）🏁✨
565	docs/firebase_functions_ts_study_013.md	firebase_functions_ts_study_013_01_overview.png	./picture/firebase_functions_ts_study_013_01_overview.png	Theme: 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.	## この章でできるようになること🎯
566	docs/firebase_functions_ts_study_013.md	firebase_functions_ts_study_013_02_event_chaos.png	./picture/firebase_functions_ts_study_013_02_event_chaos.png	Theme: 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回とは限らない」⚡🧠
567	docs/firebase_functions_ts_study_013.md	firebase_functions_ts_study_013_03_schema.png	./picture/firebase_functions_ts_study_013_03_schema.png	Theme: 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) 今日の題材：投稿＋コメント＋通知（いちばん王道）🏗️🧩
568	docs/firebase_functions_ts_study_013.md	firebase_functions_ts_study_013_04_idempotent_counter.png	./picture/firebase_functions_ts_study_013_04_idempotent_counter.png	Theme: 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更新＋通知作成」🛡️🔔
569	docs/firebase_functions_ts_study_013.md	firebase_functions_ts_study_013_05_notification_flow.png	./picture/firebase_functions_ts_study_013_05_notification_flow.png	Theme: 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🔔🙂
570	docs/firebase_functions_ts_study_013.md	firebase_functions_ts_study_013_06_distributed_counter.png	./picture/firebase_functions_ts_study_013_06_distributed_counter.png	Theme: 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つのドキュメントに書き込み集中😵‍💫
571	docs/firebase_functions_ts_study_013.md	firebase_functions_ts_study_013_07_transaction_retry.png	./picture/firebase_functions_ts_study_013_07_transaction_retry.png	Theme: 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) つまずきポイント集（先に潰す）🧯😆
572	docs/firebase_functions_ts_study_014.md	firebase_functions_ts_study_014_01_alarm_clock.png	./picture/firebase_functions_ts_study_014_01_alarm_clock.png	Theme: 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.	## まず結論：スケジュール関数って何？🧠
573	docs/firebase_functions_ts_study_014.md	firebase_functions_ts_study_014_02_scheduler_arch.png	./picture/firebase_functions_ts_study_014_02_scheduler_arch.png	Theme: 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.	## 仕組みのイメージ（ここ大事）🧩
574	docs/firebase_functions_ts_study_014.md	firebase_functions_ts_study_014_03_cost_model.png	./picture/firebase_functions_ts_study_014_03_cost_model.png	Theme: 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.	## お金の感覚（ビビりポイントを先に潰す）💸🧯
575	docs/firebase_functions_ts_study_014.md	firebase_functions_ts_study_014_04_timezone_map.png	./picture/firebase_functions_ts_study_014_04_timezone_map.png	Theme: 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.	## タイムゾーン（日本はここをミスりがち）🌏🇯🇵
576	docs/firebase_functions_ts_study_014.md	firebase_functions_ts_study_014_05_idempotent_report.png	./picture/firebase_functions_ts_study_014_05_idempotent_report.png	Theme: 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 に書く📝🔥
577	docs/firebase_functions_ts_study_014.md	firebase_functions_ts_study_014_06_overlap_execution.png	./picture/firebase_functions_ts_study_014_06_overlap_execution.png	Theme: 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回動いてる気がする」😱
578	docs/firebase_functions_ts_study_014.md	firebase_functions_ts_study_014_07_ai_morning.png	./picture/firebase_functions_ts_study_014_07_ai_morning.png	Theme: 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を絡めて“朝レポ”を気持ちよくする🤖🌅
579	docs/firebase_functions_ts_study_015.md	firebase_functions_ts_study_015_01_three_windows.png	./picture/firebase_functions_ts_study_015_01_three_windows.png	Theme: 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つの観測窓」🪟🪟🪟
580	docs/firebase_functions_ts_study_015.md	firebase_functions_ts_study_015_02_structured_log.png	./picture/firebase_functions_ts_study_015_02_structured_log.png	Theme: 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”🧰✨
581	docs/firebase_functions_ts_study_015.md	firebase_functions_ts_study_015_03_log_pattern.png	./picture/firebase_functions_ts_study_015_03_log_pattern.png	Theme: 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 🧯✨
582	docs/firebase_functions_ts_study_015.md	firebase_functions_ts_study_015_04_error_grouping.png	./picture/firebase_functions_ts_study_015_04_error_grouping.png	Theme: 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：エラーを「一覧」で見れるようにする💥📌
583	docs/firebase_functions_ts_study_015.md	firebase_functions_ts_study_015_05_alert_types.png	./picture/firebase_functions_ts_study_015_05_alert_types.png	Theme: 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種類だけ覚えよう🔔✨
584	docs/firebase_functions_ts_study_015.md	firebase_functions_ts_study_015_06_slack_flow.png	./picture/firebase_functions_ts_study_015_06_slack_flow.png	Theme: 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 に飛ばすのが便利📣💬
585	docs/firebase_functions_ts_study_015.md	firebase_functions_ts_study_015_07_ai_ops.png	./picture/firebase_functions_ts_study_015_07_ai_ops.png	Theme: 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拡張）🤖🧰
586	docs/firebase_functions_ts_study_016.md	firebase_functions_ts_study_016_01_emulator_vs_prod.png	./picture/firebase_functions_ts_study_016_01_emulator_vs_prod.png	Theme: 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って何がうれしいの？🧠🧯
587	docs/firebase_functions_ts_study_016.md	firebase_functions_ts_study_016_02_three_essentials.png	./picture/firebase_functions_ts_study_016_02_three_essentials.png	Theme: 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” だけ）🧩
588	docs/firebase_functions_ts_study_016.md	firebase_functions_ts_study_016_03_import_export.png	./picture/firebase_functions_ts_study_016_03_import_export.png	Theme: 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) 起動コマンド：まずは “必要なものだけ” 起動する🚀
589	docs/firebase_functions_ts_study_016.md	firebase_functions_ts_study_016_04_connection_switch.png	./picture/firebase_functions_ts_study_016_04_connection_switch.png	Theme: 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 に接続する🔌🧪
590	docs/firebase_functions_ts_study_016.md	firebase_functions_ts_study_016_05_event_loop.png	./picture/firebase_functions_ts_study_016_05_event_loop.png	Theme: 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) “イベント → 関数実行” をローカルで確認する⚡➡️⚙️➡️🧾
591	docs/firebase_functions_ts_study_016.md	firebase_functions_ts_study_016_06_feedback_loop.png	./picture/firebase_functions_ts_study_016_06_feedback_loop.png	Theme: 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) 動作確認の手順（超シンプル）✅
592	docs/firebase_functions_ts_study_016.md	firebase_functions_ts_study_016_07_secrets_management.png	./picture/firebase_functions_ts_study_016_07_secrets_management.png	Theme: 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) ローカルでも「秘密」を雑に扱わない🗝️🧯
593	docs/firebase_functions_ts_study_017.md	firebase_functions_ts_study_017_01_backend_ai_safety.png	./picture/firebase_functions_ts_study_017_01_backend_ai_safety.png	Theme: 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を裏側」に置くの？🤔
594	docs/firebase_functions_ts_study_017.md	firebase_functions_ts_study_017_02_genkit_structure.png	./picture/firebase_functions_ts_study_017_02_genkit_structure.png	Theme: 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 を超ざっくり理解🧠
595	docs/firebase_functions_ts_study_017.md	firebase_functions_ts_study_017_03_secret_manager.png	./picture/firebase_functions_ts_study_017_03_secret_manager.png	Theme: 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に入れる🔐
596	docs/firebase_functions_ts_study_017.md	firebase_functions_ts_study_017_04_structured_io.png	./picture/firebase_functions_ts_study_017_04_structured_io.png	Theme: 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（入力/出力スキーマ付き）を作る🧩
597	docs/firebase_functions_ts_study_017.md	firebase_functions_ts_study_017_05_callable_wrapper.png	./picture/firebase_functions_ts_study_017_05_callable_wrapper.png	Theme: 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として公開する📞
598	docs/firebase_functions_ts_study_017.md	firebase_functions_ts_study_017_06_streaming_flow.png	./picture/firebase_functions_ts_study_017_06_streaming_flow.png	Theme: 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：ストリーミング（“打ってる感”）🌊✨
599	docs/firebase_functions_ts_study_017.md	firebase_functions_ts_study_017_07_three_guards.png	./picture/firebase_functions_ts_study_017_07_three_guards.png	Theme: 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点セット🛡️🧠
600	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_01_ai_roles.png	./picture/firebase_functions_ts_study_018_01_ai_roles.png	Theme: 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は“副操縦士＋作業員”✈️🧰
601	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_02_extension_arms.png	./picture/firebase_functions_ts_study_018_02_extension_arms.png	Theme: 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拡張 🧑‍💻✨
602	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_03_slash_commands.png	./picture/firebase_functions_ts_study_018_03_slash_commands.png	Theme: 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つ💥⌨️
603	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_04_mcp_architecture.png	./picture/firebase_functions_ts_study_018_04_mcp_architecture.png	Theme: 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に“手足”を生やす仕組み）🦾🤖
604	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_05_antigravity_loop.png	./picture/firebase_functions_ts_study_018_05_antigravity_loop.png	Theme: 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で“任務”として回す🛰️🧑‍🚀
605	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_06_three_scenarios.png	./picture/firebase_functions_ts_study_018_06_three_scenarios.png	Theme: 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本勝負」⚔️🔥
606	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_07_safety_rules.png	./picture/firebase_functions_ts_study_018_07_safety_rules.png	Theme: 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つ🧯✅
607	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_01_webhook_concept.png	./picture/firebase_functions_ts_study_019_01_webhook_concept.png	Theme: 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って何？🤔
608	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_02_slack_setup.png	./picture/firebase_functions_ts_study_019_02_slack_setup.png	Theme: 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 を作る手順 🧩
609	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_03_secret_command.png	./picture/firebase_functions_ts_study_019_03_secret_command.png	Theme: 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）🧰
610	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_04_define_secret.png	./picture/firebase_functions_ts_study_019_04_define_secret.png	Theme: 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）🧱
611	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_05_test_flight.png	./picture/firebase_functions_ts_study_019_05_test_flight.png	Theme: 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に投稿テストする 🚀📩
612	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_06_local_override.png	./picture/firebase_functions_ts_study_019_06_local_override.png	Theme: 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）で詰まったら 🧪😵‍💫
613	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_07_leak_accident.png	./picture/firebase_functions_ts_study_019_07_leak_accident.png	Theme: 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) よくある事故と対策 🧯
614	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_01_overall_flow.png	./picture/firebase_functions_ts_study_020_01_overall_flow.png	Theme: 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.	## この章で完成するもの 🎯✨
615	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_02_event_quirks.png	./picture/firebase_functions_ts_study_020_02_event_quirks.png	Theme: 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つ 🧠⚡
616	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_03_dedupe_schema.png	./picture/firebase_functions_ts_study_020_03_dedupe_schema.png	Theme: 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) ざっくり設計図 🗺️
617	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_04_idempotency_logic.png	./picture/firebase_functions_ts_study_020_04_idempotency_logic.png	Theme: 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）🛠️🔥
618	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_05_diff_check.png	./picture/firebase_functions_ts_study_020_05_diff_check.png	Theme: 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.	## このコードの「効いてるところ」💡
619	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_06_slack_blocks.png	./picture/firebase_functions_ts_study_020_06_slack_blocks.png	Theme: 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側のメッセージ整形（読みやすさ＝正義）🧾✨
620	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_07_safety_summary.png	./picture/firebase_functions_ts_study_020_07_safety_summary.png	Theme: 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) “本番で怖いポイント” を言語化しよう（チェック）✅🧠
967	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_03_setup_cli.png	./picture/firebase_functions_ts_study_018_03_setup_cli.png	Theme: 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で最短）🪟⚡
968	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_08_ai_logic.png	./picture/firebase_functions_ts_study_018_08_ai_logic.png	Theme: 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 を「初期化で混ぜる」🤖🧩
969	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_10_node_versions.png	./picture/firebase_functions_ts_study_018_10_node_versions.png	Theme: 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周辺）🔢🧩
970	docs/firebase_functions_ts_study_018.md	firebase_functions_ts_study_018_11_assignment.png	./picture/firebase_functions_ts_study_018_11_assignment.png	Theme: 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章）🏁✨
971	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_08_gemini_cli.png	./picture/firebase_functions_ts_study_019_08_gemini_cli.png	Theme: 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で爆速にする 🤖🛸
972	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_09_assignment.png	./picture/firebase_functions_ts_study_019_09_assignment.png	Theme: 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) ミニ課題（この章のゴール確認）📝🏁
973	docs/firebase_functions_ts_study_019.md	firebase_functions_ts_study_019_10_checklist.png	./picture/firebase_functions_ts_study_019_10_checklist.png	Theme: 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) チェックリスト ✅✅✅
974	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_08_gemini_review.png	./picture/firebase_functions_ts_study_020_08_gemini_review.png	Theme: 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で“仕上げ速度”を上げる 🤖🛸✨
975	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_09_runtime_versions.png	./picture/firebase_functions_ts_study_020_09_runtime_versions.png	Theme: 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) おまけ：ランタイムの最新版メモ（この章の立ち位置）🧩📌
976	docs/firebase_functions_ts_study_020.md	firebase_functions_ts_study_020_10_assignment.png	./picture/firebase_functions_ts_study_020_10_assignment.png	Theme: 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: ## ミニ課題（ちょい実務寄せ）🎒✨
1387	docs/firebase_functions_ts_study_006.md	firebase_functions_ts_study_006_01_http_trigger_concept.png	./picture/firebase_functions_ts_study_006_01_http_trigger_concept.png	Theme: 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) まずイメージをつかもう🧠✨
1388	docs/firebase_functions_ts_study_006.md	firebase_functions_ts_study_006_02_health_check.png	./picture/firebase_functions_ts_study_006_02_health_check.png	Theme: 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 ✅🩺
1389	docs/firebase_functions_ts_study_006.md	firebase_functions_ts_study_006_03_onrequest_options.png	./picture/firebase_functions_ts_study_006_03_onrequest_options.png	Theme: 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 🌐
1390	docs/firebase_functions_ts_study_006.md	firebase_functions_ts_study_006_04_code_flow.png	./picture/firebase_functions_ts_study_006_04_code_flow.png	Theme: 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
1391	docs/firebase_functions_ts_study_006.md	firebase_functions_ts_study_006_05_global_options.png	./picture/firebase_functions_ts_study_006_05_global_options.png	Theme: 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統一”する小ワザ🗾✨（おすすめ）
1392	docs/firebase_functions_ts_study_006.md	firebase_functions_ts_study_006_06_concurrency.png	./picture/firebase_functions_ts_study_006_06_concurrency.png	Theme: 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）⚡
1393	docs/firebase_functions_ts_study_006.md	firebase_functions_ts_study_006_07_ai_dev_cycle.png	./picture/firebase_functions_ts_study_006_07_ai_dev_cycle.png	Theme: 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）
1394	firebase_functions_ts_study_007.md	firebase_functions_ts_study_007_01_concept_flow.png	./picture/firebase_functions_ts_study_007_01_concept_flow.png	Theme: 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っぽい”🧩
1395	firebase_functions_ts_study_007.md	firebase_functions_ts_study_007_02_three_rules.png	./picture/firebase_functions_ts_study_007_02_three_rules.png	Theme: 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点セット」✅✅✅
1396	firebase_functions_ts_study_007.md	firebase_functions_ts_study_007_03_echo_spec.png	./picture/firebase_functions_ts_study_007_03_echo_spec.png	Theme: 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設計）🧪
1397	firebase_functions_ts_study_007.md	firebase_functions_ts_study_007_04_validation_funnel.png	./picture/firebase_functions_ts_study_007_04_validation_funnel.png	Theme: 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）🛠️✨
1398	firebase_functions_ts_study_007.md	firebase_functions_ts_study_007_05_status_codes.png	./picture/firebase_functions_ts_study_007_05_status_codes.png	Theme: 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.	ポイントまとめ💡
1399	firebase_functions_ts_study_007.md	firebase_functions_ts_study_007_06_powershell_test.png	./picture/firebase_functions_ts_study_007_06_powershell_test.png	Theme: 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で叩いて確認しよう🪟🔫（安全なテスト）
1400	firebase_functions_ts_study_007.md	firebase_functions_ts_study_007_07_pitfalls.png	./picture/firebase_functions_ts_study_007_07_pitfalls.png	Theme: 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. つまずきポイント集（ここ超あるある）🕳️🤣
1401	firebase_functions_ts_study_008.md	firebase_functions_ts_study_008_01_cors_traffic.png	./picture/firebase_functions_ts_study_008_01_cors_traffic.png	Theme: 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って何？🤔
1402	firebase_functions_ts_study_008.md	firebase_functions_ts_study_008_02_preflight_flow.png	./picture/firebase_functions_ts_study_008_02_preflight_flow.png	Theme: 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）って何👀？
1403	firebase_functions_ts_study_008.md	firebase_functions_ts_study_008_03_origin_components.png	./picture/firebase_functions_ts_study_008_03_origin_components.png	Theme: 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は「スキーム＋ドメイン＋ポート」🎯
1404	firebase_functions_ts_study_008.md	firebase_functions_ts_study_008_04_cors_not_security.png	./picture/firebase_functions_ts_study_008_04_cors_not_security.png	Theme: 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は“セキュリティ”ではない🙅‍♂️🔐
1405	firebase_functions_ts_study_008.md	firebase_functions_ts_study_008_05_defense_layers.png	./picture/firebase_functions_ts_study_008_05_defense_layers.png	Theme: 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 🛡️✨
1406	firebase_functions_ts_study_008.md	firebase_functions_ts_study_008_06_manual_verification.png	./picture/firebase_functions_ts_study_008_06_manual_verification.png	Theme: 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」を最低限いれる🧰🛡️
1407	firebase_functions_ts_study_008.md	firebase_functions_ts_study_008_07_ai_debugging.png	./picture/firebase_functions_ts_study_008_07_ai_debugging.png	Theme: 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）🛸🤖
1408	firebase_functions_ts_study_009.md	firebase_functions_ts_study_009_01_callable_overview.png	./picture/firebase_functions_ts_study_009_01_callable_overview.png	Theme: 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) まずイメージ図🧠✨
1409	firebase_functions_ts_study_009.md	firebase_functions_ts_study_009_02_server_check.png	./picture/firebase_functions_ts_study_009_02_server_check.png	Theme: 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」を作る最短ルート💡
1410	firebase_functions_ts_study_009.md	firebase_functions_ts_study_009_03_logic_flow.png	./picture/firebase_functions_ts_study_009_03_logic_flow.png	Theme: 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）⚙️
1411	firebase_functions_ts_study_009.md	firebase_functions_ts_study_009_04_error_handling.png	./picture/firebase_functions_ts_study_009_04_error_handling.png	Theme: 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() で呼ぶ📞✨
1412	firebase_functions_ts_study_009.md	firebase_functions_ts_study_009_05_enforce_app_check.png	./picture/firebase_functions_ts_study_009_05_enforce_app_check.png	Theme: 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）✅
1413	firebase_functions_ts_study_009.md	firebase_functions_ts_study_009_06_debug_token.png	./picture/firebase_functions_ts_study_009_06_debug_token.png	Theme: 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」で詰まりを回避🧯🧪
1414	firebase_functions_ts_study_009.md	firebase_functions_ts_study_009_07_ai_acceleration.png	./picture/firebase_functions_ts_study_009_07_ai_acceleration.png	Theme: 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）でここを爆速にする🤖🛸
1415	firebase_functions_ts_study_010.md	firebase_functions_ts_study_010_01_secret_types.png	./picture/firebase_functions_ts_study_010_01_secret_types.png	Theme: 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) まず「秘密情報」って何？🧨
1416	firebase_functions_ts_study_010.md	firebase_functions_ts_study_010_02_secret_architecture.png	./picture/firebase_functions_ts_study_010_02_secret_architecture.png	Theme: 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 を使う🧠✨
1417	firebase_functions_ts_study_010.md	firebase_functions_ts_study_010_03_code_pattern.png	./picture/firebase_functions_ts_study_010_03_code_pattern.png	Theme: 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）🧪
1418	firebase_functions_ts_study_010.md	firebase_functions_ts_study_010_04_local_vs_cloud.png	./picture/firebase_functions_ts_study_010_04_local_vs_cloud.png	Theme: 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）で秘密を扱う🧪🛡️
1419	firebase_functions_ts_study_010.md	firebase_functions_ts_study_010_05_ai_key_protection.png	./picture/firebase_functions_ts_study_010_05_ai_key_protection.png	Theme: 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連携の“鍵”も同じ考え方 🔥🤖
1420	firebase_functions_ts_study_010.md	firebase_functions_ts_study_010_06_leak_pitfall.png	./picture/firebase_functions_ts_study_010_06_leak_pitfall.png	Theme: 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.	### よくある事故ポイント 🚑
1421	firebase_functions_ts_study_010.md	firebase_functions_ts_study_010_07_config_evolution.png	./picture/firebase_functions_ts_study_010_07_config_evolution.png	Theme: 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 を使う🧠✨