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

image_generation_plan.startdash_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
1079docs/firebase_startdash_ts_index.mdfirebase_startdash_ts_index_01_service_map.png./picture/firebase_startdash_ts_index_01_service_map.pngTheme: Firebase Service Map

Labels to Render:
- Auth: "Login 🔑"
- Firestore: "Database 🗂️"
- Storage: "Files 📦"
- Functions: "Logic ⚙️"

Visual Details:
1. Core Concept: A map of the main services.
2. Metaphor: An isometric city map with distinct buildings for each service.
3. Action: Overview.
4. Layout: Map layout.		## 第01章：Firebaseって結局なにができるの？用途別マップ🙂🧭
1080docs/firebase_startdash_ts_index.mdfirebase_startdash_ts_index_02_project_box.png./picture/firebase_startdash_ts_index_02_project_box.pngTheme: Project Container

Labels to Render:
- Box: "Firebase Project"
- Item 1: "App (Android)"
- Item 2: "App (iOS)"
- Item 3: "App (Web)"

Visual Details:
1. Core Concept: A project can contain multiple apps.
2. Metaphor: A large delivery box labeled "Project ID" containing smaller packages (Apps).
3. Action: Containing.
4. Layout: Open box view.		## 第02章：プロジェクト＝アプリ？まず“入れ物”の考え方📦🧠
1081docs/firebase_startdash_ts_index.mdfirebase_startdash_ts_index_03_ai_question_card.png./picture/firebase_startdash_ts_index_03_ai_question_card.pngTheme: AI Question Template

Labels to Render:
- Section 1: "Goal 🎯"
- Section 2: "Status 🚦"
- Section 3: "Error 💥"
- AI: "Gemini"

Visual Details:
1. Core Concept: Structure of a good prompt.
2. Metaphor: A fill-in-the-blank form or index card being handed to a robot.
3. Action: Handover.
4. Layout: Card close-up.		## 第04章：🤖AIと一緒に学ぶ：聞き方テンプレ（超初心者向け）💬✨
1082docs/firebase_startdash_ts_index.mdfirebase_startdash_ts_index_04_cockpit_workspace.png./picture/firebase_startdash_ts_index_04_cockpit_workspace.pngTheme: Integrated Workspace

Labels to Render:
- Screen 1: "Editor 📝"
- Screen 2: "Terminal 💻"
- Screen 3: "Browser 🌍"
- User: "Pilot"

Visual Details:
1. Core Concept: The Antigravity/IDX environment.
2. Metaphor: A spaceship cockpit with three monitors wrapping around the pilot.
3. Action: Piloting.
4. Layout: Cockpit view.		## 第05章：Antigravityで作業場を作る：Mission Controlに慣れる🕹️🛸
1083docs/firebase_startdash_ts_index.mdfirebase_startdash_ts_index_05_new_project_flag.png./picture/firebase_startdash_ts_index_05_new_project_flag.pngTheme: First Project Creation

Labels to Render:
- Island: "New Project"
- Flag: "My First App 🚩"
- Action: "Create"

Visual Details:
1. Core Concept: Creating a new space in the cloud.
2. Metaphor: An astronaut planting a flag on a new planet or island.
3. Action: Planting flag.
4. Layout: Landscape.		## 第11章：Firebaseプロジェクト作成：最初の1回を最短で🌋🚀
1084docs/firebase_startdash_ts_index.mdfirebase_startdash_ts_index_06_connection_plug.png./picture/firebase_startdash_ts_index_06_connection_plug.pngTheme: SDK Initialization

Labels to Render:
- Socket: "Firebase"
- Plug: "App SDK"
- Spark: "Connected! ⚡"

Visual Details:
1. Core Concept: Connecting the app to the backend.
2. Metaphor: Inserting a power plug into a wall socket. A spark indicates a successful connection.
3. Action: Plugging in.
4. Layout: Close-up of connection.		## 第13章：SDK導入→初期化→起動確認：最小の「繋がった！」🌱⚡
1085docs/firebase_startdash_ts_index.mdfirebase_startdash_ts_index_07_env_worlds.png./picture/firebase_startdash_ts_index_07_env_worlds.pngTheme: Dev vs Prod Environments

Labels to Render:
- World 1: "Dev (Construction) 🚧"
- World 2: "Prod (City) 🏙️"
- Barrier: "Separation"

Visual Details:
1. Core Concept: Keeping environments separate.
2. Metaphor: Two separate globes or islands. One is under construction (cranes, scaffolding), the other is a finished city.
3. Action: Separation.
4. Layout: Side-by-side comparison.		## 第17章：プロジェクト分け（dev/prod）の超基本：事故らない運用の入口🧠🚧
1086docs/firebase_startdash_ts_study_001.mdfirebase_startdash_ts_study_001_01_service_map.png./picture/firebase_startdash_ts_study_001_01_service_map.pngTheme: Firebase Service Map

Labels to Render:
- Auth: "Login 🔑"
- Firestore: "Database 🗂️"
- Storage: "Files 📦"
- Functions: "Logic ⚙️"
- Hosting: "Web 🌍"

Visual Details:
1. Core Concept: A map of the main services.
2. Metaphor: An isometric city map with distinct buildings for each service.
3. Action: Overview.
4. Layout: Map layout.		1) 用途別マップ（まずはこの表だけでOK）🗺️✨
1087docs/firebase_startdash_ts_study_001.mdfirebase_startdash_ts_study_001_02_ai_types.png./picture/firebase_startdash_ts_study_001_02_ai_types.pngTheme: AI Types: User vs Dev

Labels to Render:
- User AI: "App Feature (Logic) 🤖"
- Dev AI: "Helper (Gemini) 🛠️"

Visual Details:
1. Core Concept: Distinguishing two types of AI.
2. Metaphor: A split screen. Left side shows a robot inside the phone (App Feature). Right side shows a robot helping a developer at a desk (Dev Helper).
3. Action: Comparison.
4. Layout: Split view.		2) AIは “2種類” ある（ここ超重要）🤖✨
1088docs/firebase_startdash_ts_study_001.mdfirebase_startdash_ts_study_001_03_tech_stack.png./picture/firebase_startdash_ts_study_001_03_tech_stack.pngTheme: Frontend Tech Stack

Labels to Render:
- Base: "Node.js 24 🟢"
- Frame: "React 19 ⚛️"
- Build: "Vite ⚡"
- Lang: "TypeScript 🧠"

Visual Details:
1. Core Concept: The technology stack layers.
2. Metaphor: A building foundation. Node.js is the concrete base. Vite and React are the pillars. TypeScript is the roof.
3. Action: Supporting.
4. Layout: Stacked layers.		3) いまのフロント開発の“土台”だけ先に知っておこう⚛️🧱
1089docs/firebase_startdash_ts_study_001.mdfirebase_startdash_ts_study_001_04_console_nav.png./picture/firebase_startdash_ts_study_001_04_console_nav.pngTheme: Console Navigation Map

Labels to Render:
- Build: "Login / DB / Files 🏗️"
- Run: "Analytics / Remote Config 🏃"
- AI: "Gemini / Logic 🤖"

Visual Details:
1. Core Concept: Navigating the 3 main sections.
2. Metaphor: A signpost with 3 arms pointing to different districts: Build, Run, AI.
3. Action: Navigation.
4. Layout: Signpost.		Step 1：左メニューを「Build / Run / AI」目線で眺める👀
1090docs/firebase_startdash_ts_study_001.mdfirebase_startdash_ts_study_001_05_ai_prompt_flow.png./picture/firebase_startdash_ts_study_001_05_ai_prompt_flow.pngTheme: Effective AI Prompting

Labels to Render:
- Context: "I want to make..."
- Reqs: "Requirements..."
- AI: "Gemini"
- Answer: "Perfect Plan! 📝"

Visual Details:
1. Core Concept: The flow of a good prompt.
2. Metaphor: Putting ingredients (Context, Reqs) into a machine (AI) and getting a cake (Answer).
3. Action: Processing.
4. Layout: Left-to-right flow.		5) AIに聞くと最強な質問テンプレ💬🤖（コピペ用）
1091docs/firebase_startdash_ts_study_001.mdfirebase_startdash_ts_study_001_06_app_checklist.png./picture/firebase_startdash_ts_study_001_06_app_checklist.pngTheme: App Idea to Features

Labels to Render:
- Idea: "Memo App 📝"
- Needs: "Auth, DB, Hosting"
- Check: "Selected ✅"

Visual Details:
1. Core Concept: Mapping an idea to specific features.
2. Metaphor: A thought bubble (Idea) connecting to a shopping list (Features) with items checked off.
3. Action: Selection.
4. Layout: Connection.		6) 「作りたいアプリ」を1行で書いて、必要機能に丸を付ける🙂✅
1092docs/firebase_startdash_ts_study_002.mdfirebase_startdash_ts_study_002_01_container_concept.png./picture/firebase_startdash_ts_study_002_01_container_concept.pngTheme: Project Container

Labels to Render:
- Container: "Project Box 📦"
- Item 1: "Web App 💻"
- Item 2: "iOS App 📱"

Visual Details:
1. Core Concept: Project holds multiple apps.
2. Metaphor: A large open box labeled "Firebase Project". Inside, small icons representing Web, iOS, and Android apps are hanging or sitting.
3. Action: Containing.
4. Layout: Central box.		1) まず結論：プロジェクトは「アプリ1個」じゃなくて「入れ物」🧺✨
1093docs/firebase_startdash_ts_study_002.mdfirebase_startdash_ts_study_002_02_id_types.png./picture/firebase_startdash_ts_study_002_02_id_types.pngTheme: Three Project Identifiers

Labels to Render:
- Name: "Label (Changeable) 🏷️"
- ID: "Address (Fixed) 🏠"
- Number: "Citizen ID (Auto) 🪪"

Visual Details:
1. Core Concept: Distinguishing the 3 types of IDs.
2. Metaphor: 1. A sticky tag (Name). 2. A metal house plate (ID). 3. A plastic ID card (Number).
3. Action: Displaying.
4. Layout: Three items side-by-side.		## 2) 迷子の原因トップ3：「名前が3つある」問題😵‍💫🧩
1094docs/firebase_startdash_ts_study_002.mdfirebase_startdash_ts_study_002_03_id_usage.png./picture/firebase_startdash_ts_study_002_03_id_usage.pngTheme: Project ID Usage

Labels to Render:
- ID: "my-app-123"
- Bucket: "my-app-123.appspot.com"
- Link: "Shared Name"

Visual Details:
1. Core Concept: Project ID permeates other resource names.
2. Metaphor: A root system. The Project ID is the seed/root, and branches (Bucket Name, Hostname) grow from it sharing the same name.
3. Action: Growing/Connecting.
4. Layout: Root structure.		## 3) Project ID が“めちゃ重要”な理由：リソース名に混ざるから🧷🪣
1095docs/firebase_startdash_ts_study_002.mdfirebase_startdash_ts_study_002_04_env_separation.png./picture/firebase_startdash_ts_study_002_04_env_separation.pngTheme: Dev vs Prod Separation

Labels to Render:
- Dev: "Construction (Safe) 🚧"
- Prod: "Live City (Risky) 🏙️"
- Wall: "Firewall 🧱"

Visual Details:
1. Core Concept: Isolating environments to prevent accidents.
2. Metaphor: Two separate islands. One has cranes and scaffolding (Dev). The other has tall buildings and traffic (Prod). A thick wall separates them.
3. Action: Isolation.
4. Layout: Split view.		## 4) dev/prod を分ける理由：事故を“構造で”防ぐ🧯🚧
1096docs/firebase_startdash_ts_study_002.mdfirebase_startdash_ts_study_002_05_console_switch.png./picture/firebase_startdash_ts_study_002_05_console_switch.pngTheme: Console Navigation

Labels to Render:
- Dropdown: "Select Project 👇"
- List: "my-app-dev / my-app-prod"
- Action: "Click ✅"

Visual Details:
1. Core Concept: Switching projects in the console.
2. Metaphor: A simplified UI mockup focusing on the top-left dropdown menu.
3. Action: Clicking the correct project.
4. Layout: UI focus.		### ① プロジェクト一覧 → 切り替え
1097docs/firebase_startdash_ts_study_002.mdfirebase_startdash_ts_study_002_06_ai_box.png./picture/firebase_startdash_ts_study_002_06_ai_box.pngTheme: AI in the Project Box

Labels to Render:
- Box: "Project"
- Item: "AI Quota 📊"
- Item: "Model Settings ⚙️"

Visual Details:
1. Core Concept: AI settings are scoped to the project.
2. Metaphor: A specific compartment within the Project Box containing AI-related gauges and switches.
3. Action: Scoping.
4. Layout: Inside view.		## 8) AI とプロジェクトの関係：AIこそ“箱”が超大事🤖📦
1098docs/firebase_startdash_ts_study_002.mdfirebase_startdash_ts_study_002_07_naming_rule.png./picture/firebase_startdash_ts_study_002_07_naming_rule.pngTheme: Naming Convention

Labels to Render:
- App: "myapp"
- Env: "dev / prod"
- ID: "myapp-dev-202X"

Visual Details:
1. Core Concept: Constructing a good Project ID.
2. Metaphor: Building blocks. Block "myapp" + Block "dev" + Block "year" = Complete ID.
3. Action: Assembling.
4. Layout: Equation.		## 10) ミニ課題：自分用「命名ルール」作成📝🎯
1099docs/firebase_startdash_ts_study_003.mdfirebase_startdash_ts_study_003_01_three_locations.png./picture/firebase_startdash_ts_study_003_01_three_locations.pngTheme: Console Map

Labels to Render:
- Home: "Overview 🏠"
- Gear: "Settings ⚙️"
- Money: "Billing 💸"

Visual Details:
1. Core Concept: The three pillars of the console.
2. Metaphor: A map with 3 landmarks. A house (Overview), a factory (Settings), and a bank (Billing).
3. Action: Mapping.
4. Layout: Map view.		読む：Consoleは「3つの場所」さえ押さえればOK🙂🧭
1100docs/firebase_startdash_ts_study_003.mdfirebase_startdash_ts_study_003_02_project_check.png./picture/firebase_startdash_ts_study_003_02_project_check.pngTheme: Project Selector

Labels to Render:
- Top Left: "Project Name"
- Action: "Check Here! 👀"
- Dropdown: "Select ▾"

Visual Details:
1. Core Concept: Verifying the current project context.
2. Metaphor: A magnifying glass focused on the top-left dropdown of a UI.
3. Action: Inspecting.
4. Layout: Close-up UI.		### 0) まず「いまどのプロジェクト？」を毎回チェック✅
1101docs/firebase_startdash_ts_study_003.mdfirebase_startdash_ts_study_003_03_settings_nav.png./picture/firebase_startdash_ts_study_003_03_settings_nav.pngTheme: Gear Icon Navigation

Labels to Render:
- Sidebar: "Menu"
- Icon: "⚙️"
- Link: "Project settings"

Visual Details:
1. Core Concept: Finding the settings menu.
2. Metaphor: A finger pointing to the gear icon next to 'Project Overview'.
3. Action: Pointing/Clicking.
4. Layout: UI Navigation.		### 2) Project settings（⚙️）に最短で行く⚙️🚀
1102docs/firebase_startdash_ts_study_003.mdfirebase_startdash_ts_study_003_04_sdk_config.png./picture/firebase_startdash_ts_study_003_04_sdk_config.pngTheme: Firebase Config Snippet

Labels to Render:
- Section: "Your apps"
- Option: "Config"
- Code: "const firebaseConfig = { ... }"

Visual Details:
1. Core Concept: Finding the code snippet.
2. Metaphor: Scrolling down a page to find a treasure chest (Your apps) containing a scroll (Config).
3. Action: Copying.
4. Layout: Scroll view.		### 3) 「WebアプリのSDK設定（firebaseConfig）」を見つける🏷️🌐
1103docs/firebase_startdash_ts_study_003.mdfirebase_startdash_ts_study_003_05_billing_dashboard.png./picture/firebase_startdash_ts_study_003_05_billing_dashboard.pngTheme: Usage & Billing

Labels to Render:
- Plan: "Spark / Blaze"
- Graph: "Usage 📈"
- Alert: "Budget 🔔"

Visual Details:
1. Core Concept: Monitoring costs and usage.
2. Metaphor: A dashboard with a fuel gauge (Usage) and a coin meter (Billing).
3. Action: Monitoring.
4. Layout: Dashboard.		### 4) Usage & billing に行って“見る場所”だけ覚える💸👀
1104docs/firebase_startdash_ts_study_003.mdfirebase_startdash_ts_study_003_06_ai_nav_help.png./picture/firebase_startdash_ts_study_003_06_ai_nav_help.pngTheme: AI Navigation Assistant

Labels to Render:
- User: "I'm lost!"
- AI: "Click Gear -> General"
- Map: "Route"

Visual Details:
1. Core Concept: AI guiding a lost user.
2. Metaphor: A user holding a confusing map, and an AI robot pointing the way with a laser pointer.
3. Action: Guiding.
4. Layout: Interaction.		## 🤖AI（Gemini）を“Console迷子防止ナビ”にする💬🧭
1105docs/firebase_startdash_ts_study_003.mdfirebase_startdash_ts_study_003_07_treasure_hunt.png./picture/firebase_startdash_ts_study_003_07_treasure_hunt.pngTheme: Console Treasure Hunt

Labels to Render:
- Start: "Overview"
- Goal: "Config"
- Path: "Settings -> General -> App"

Visual Details:
1. Core Concept: The task of finding the config.
2. Metaphor: A treasure map with a dotted line leading from the Start (House) to the X (Treasure Chest/Config).
3. Action: Hunting.
4. Layout: Map path.		## ミニ課題：「迷子ハント」3本勝負🎯🗺️
1106docs/firebase_startdash_ts_study_004.mdfirebase_startdash_ts_study_004_01_prompt_elements.png./picture/firebase_startdash_ts_study_004_01_prompt_elements.pngTheme: Five Elements of a Prompt

Labels to Render:
- Goal: "Goal 🎯"
- Current: "Status 🚦"
- Constraint: "Limits 🚧"
- Output: "Format ✅"
- Material: "Logs 🧾"

Visual Details:
1. Core Concept: Ingredients for a perfect prompt.
2. Metaphor: A hand holding 5 distinct playing cards, each representing an element.
3. Action: Displaying cards.
4. Layout: Fan of cards.		1) まず覚える！AIに通じる「黄金5点セット」📌🧠
1107docs/firebase_startdash_ts_study_004.mdfirebase_startdash_ts_study_004_02_prompt_templates.png./picture/firebase_startdash_ts_study_004_02_prompt_templates.pngTheme: Template Collection

Labels to Render:
- Card A: "Minimal Run 🔥"
- Card B: "Error Fix 🧯"
- Card C: "Design 🧭"
- Card D: "Official 🔎"

Visual Details:
1. Core Concept: Ready-to-use templates.
2. Metaphor: A rack of clipboards or recipe cards.
3. Action: Selection.
4. Layout: Grid of cards.		## 2) そのまま使える！質問テンプレ集（コピペOK）🧩📋
1108docs/firebase_startdash_ts_study_004.mdfirebase_startdash_ts_study_004_03_ai_roles.png./picture/firebase_startdash_ts_study_004_03_ai_roles.pngTheme: AI Agent Roles

Labels to Render:
- Researcher: "Research 🕵️‍♂️"
- Implementer: "Code 🧑‍💻"
- Verifier: "Test 🧪"

Visual Details:
1. Core Concept: Dividing tasks among specialized agents.
2. Metaphor: A team of 3 robots with different hats/tools. Detective hat, coding glasses, lab coat.
3. Action: Collaboration.
4. Layout: Team lineup.		## 3) Antigravity流：AIに“役割分担”させると爆速🏎️💨
1109docs/firebase_startdash_ts_study_004.mdfirebase_startdash_ts_study_004_04_gemini_cli.png./picture/firebase_startdash_ts_study_004_04_gemini_cli.pngTheme: Gemini CLI Interaction

Labels to Render:
- Terminal: "gemini start"
- AI: "How can I help?"
- Code: "npm install..."

Visual Details:
1. Core Concept: Chatting with AI in the terminal.
2. Metaphor: A terminal window where the text bubbles are popping out like a chat app.
3. Action: Chatting.
4. Layout: Terminal view.		## 4) Gemini CLI流：ターミナルで“聞きながら進む”💻🤖
1110docs/firebase_startdash_ts_study_004.mdfirebase_startdash_ts_study_004_05_firebase_ai_ecosystem.png./picture/firebase_startdash_ts_study_004_05_firebase_ai_ecosystem.pngTheme: Firebase AI Tools

Labels to Render:
- Console: "Gemini in Firebase"
- App: "AI Logic"
- Tool: "MCP Server"

Visual Details:
1. Core Concept: The three pillars of Firebase AI.
2. Metaphor: A triangular diagram connecting Console, App, and Dev Tools.
3. Action: Integration.
4. Layout: Triangle/Network.		## 5) FirebaseのAI機能も“学習の味方”にする🤝🤖
1111docs/firebase_startdash_ts_study_004.mdfirebase_startdash_ts_study_004_06_handson_flow.png./picture/firebase_startdash_ts_study_004_06_handson_flow.pngTheme: AI Workflow

Labels to Render:
- Step 1: "Request (Prompt)"
- Step 2: "Convert (ToDo)"
- Step 3: "Ask (Fix)"

Visual Details:
1. Core Concept: The iterative process of working with AI.
2. Metaphor: A cycle. 1. Feeding input. 2. Processing output into a checklist. 3. Troubleshooting.
3. Action: Cycling.
4. Layout: Circular flow.		## 6) ハンズオン：AIに「最小アプリ完成の手順書」を作らせよう🚀📘
1112docs/firebase_startdash_ts_study_004.mdfirebase_startdash_ts_study_004_07_prompt_snippet.png./picture/firebase_startdash_ts_study_004_07_prompt_snippet.pngTheme: Personal Snippet File

Labels to Render:
- File: "ai-prompts.md"
- Content: "My Templates"
- Action: "Copy & Paste"

Visual Details:
1. Core Concept: Saving useful prompts for later.
2. Metaphor: A notebook labeled "Secret Spells" or "Cheat Sheet".
3. Action: Writing/Saving.
4. Layout: Book/File view.		## 7) ミニ課題：自分専用「質問スニペ集」を作る📝✨
1113docs/firebase_startdash_ts_study_005.mdfirebase_startdash_ts_study_005_01_mission_control.png./picture/firebase_startdash_ts_study_005_01_mission_control.pngTheme: Antigravity Mission Control

Labels to Render:
- Screen 1: "Code Editor 📝"
- Screen 2: "Agent Chat 🤖"
- Center: "Manager 🚦"

Visual Details:
1. Core Concept: Antigravity as a central hub.
2. Metaphor: A futuristic mission control center with multiple screens monitoring different aspects (Code, Chat, Terminal).
3. Action: Managing.
4. Layout: Control room view.		普通のIDEは「ファイルを開いて書く」が中心だけど、Antigravityは最初に Agent Manager（Mission Control） が前面に来ます🚦
1114docs/firebase_startdash_ts_study_005.mdfirebase_startdash_ts_study_005_02_security_policies.png./picture/firebase_startdash_ts_study_005_02_security_policies.pngTheme: Three Security Gates

Labels to Render:
- Gate 1: "Terminal 💻 (Ask)"
- Gate 2: "Review 🧾 (Ask)"
- Gate 3: "Browser 🌐 (Ask)"

Visual Details:
1. Core Concept: User permission settings.
2. Metaphor: Three security gates with guards asking for ID. The user holds a "Stamp of Approval".
3. Action: Checking.
4. Layout: Three gates.		## セットアップで出てくる“3つの許可”が超重要⚠️🧯
1115docs/firebase_startdash_ts_study_005.mdfirebase_startdash_ts_study_005_03_workspace_folder.png./picture/firebase_startdash_ts_study_005_03_workspace_folder.pngTheme: Workspace Setup

Labels to Render:
- Home: "PC"
- Folder: "my-agy-projects 📁"
- Inside: "Project A, Project B"

Visual Details:
1. Core Concept: Organizing project folders.
2. Metaphor: A clean desk with a labeled file box "Workspace". Inside are project folders.
3. Action: Organizing.
4. Layout: Desktop view.		## 2) Workspacesを作る：プロジェクト置き場を決める📁🧭
1116docs/firebase_startdash_ts_study_005.mdfirebase_startdash_ts_study_005_04_editor_layout.png./picture/firebase_startdash_ts_study_005_04_editor_layout.pngTheme: Editor Three-Pane View

Labels to Render:
- Left: "File Editor 📄"
- Bottom: "Terminal 💻"
- Right: "Agent Chat 🤖"

Visual Details:
1. Core Concept: The IDE layout.
2. Metaphor: A schematic diagram of a computer screen divided into 3 distinct zones.
3. Action: Layout display.
4. Layout: Screen layout.		Editor側で見たいのはこの3つ👇
1117docs/firebase_startdash_ts_study_005.mdfirebase_startdash_ts_study_005_05_browser_bridge.png./picture/firebase_startdash_ts_study_005_05_browser_bridge.pngTheme: Agent-Browser Connection

Labels to Render:
- Agent: "Antigravity 🤖"
- Bridge: "Chrome Ext 🧩"
- Web: "Internet 🌐"

Visual Details:
1. Core Concept: The Chrome extension enabling browser control.
2. Metaphor: A robot (Agent) using a remote control (Extension) to navigate a globe (Web).
3. Action: Connecting/Controlling.
4. Layout: Connection flow.		## 5) ブラウザ連携：Chrome拡張を入れて“Web操作”を有効化🌐🧩
1118docs/firebase_startdash_ts_study_005.mdfirebase_startdash_ts_study_005_06_artifacts_flow.png./picture/firebase_startdash_ts_study_005_06_artifacts_flow.pngTheme: Artifact Generation

Labels to Render:
- AI: "Agent"
- Output: "Artifact (Draft) 🧾"
- Action: "Review & Apply"
- Result: "Code 💻"

Visual Details:
1. Core Concept: From AI generation to Code.
2. Metaphor: A 3D printer (Agent) creating a model (Artifact). A human inspects it before painting it (Applying).
3. Action: Printing/Reviewing.
4. Layout: Production line.		## 6) Artifacts（成果物）とReview Changes（差分確認）を知る🧾🔍
1119docs/firebase_startdash_ts_study_005.mdfirebase_startdash_ts_study_005_07_task_division.png./picture/firebase_startdash_ts_study_005_07_task_division.pngTheme: Human-AI Collaboration

Labels to Render:
- AI: "Research / Draft 🤖"
- Human: "Decide / Keys 🔐"
- Goal: "Teamwork 🤝"

Visual Details:
1. Core Concept: Splitting responsibilities.
2. Metaphor: A relay race or a handshake. AI passes the "Research" baton to Human who holds the "Decision" baton.
3. Action: Collaborating.
4. Layout: Interaction.		## 7) エージェントに任せる / 自分でやる：切り分けのコツ🧠🫱🫲
1120docs/firebase_startdash_ts_study_006.mdfirebase_startdash_ts_study_006_01_install_gemini.png./picture/firebase_startdash_ts_study_006_01_install_gemini.pngTheme: Installing Gemini CLI

Labels to Render:
- Command: "npm install -g @google/gemini-cli"
- Action: "Install"
- Tool: "Gemini CLI"

Visual Details:
1. Core Concept: Installing the tool via npm.
2. Metaphor: A package box labeled "Gemini CLI" being delivered by a truck (npm).
3. Action: Delivery.
4. Layout: Action scene.		## 2) セットアップ（最短）🚀
1121docs/firebase_startdash_ts_study_006.mdfirebase_startdash_ts_study_006_02_usage_patterns.png./picture/firebase_startdash_ts_study_006_02_usage_patterns.pngTheme: Three Usage Patterns

Labels to Render:
- Pattern 1: "Chat 💬"
- Pattern 2: "One-shot ⚡"
- Pattern 3: "Include Dir 📁"

Visual Details:
1. Core Concept: Three ways to use the CLI.
2. Metaphor: A Swiss Army knife with 3 distinct tools extending.
3. Action: Displaying tools.
4. Layout: Tool view.		## 3) 使い方の基本：まずはこの3パターンだけ覚える🧩✨
1122docs/firebase_startdash_ts_study_006.mdfirebase_startdash_ts_study_006_03_prompt_templates.png./picture/firebase_startdash_ts_study_006_03_prompt_templates.pngTheme: Prompt Templates

Labels to Render:
- Template A: "Minimal 🚀"
- Template B: "Error Fix 🧯"
- Template C: "Next Step 🧭"

Visual Details:
1. Core Concept: Pre-defined question formats.
2. Metaphor: Three recipe cards or form templates.
3. Action: Filling in the blanks.
4. Layout: Card spread.		## 4) 「聞き方」テンプレ3つ💬✨（これだけで強い）
1123docs/firebase_startdash_ts_study_006.mdfirebase_startdash_ts_study_006_04_geminiignore.png./picture/firebase_startdash_ts_study_006_04_geminiignore.pngTheme: .geminiignore Security

Labels to Render:
- File: ".geminiignore"
- Blocked: ".env 🔐"
- Allowed: "src/ 📄"

Visual Details:
1. Core Concept: Blocking sensitive files.
2. Metaphor: A security scanner. The .env file is rejected (Red Light), while src files pass through (Green Light).
3. Action: Filtering.
4. Layout: Process flow.		## 5-2. .geminiignore（見せたくないものを遮断）🔐
1124docs/firebase_startdash_ts_study_006.mdfirebase_startdash_ts_study_006_05_handson_flow.png./picture/firebase_startdash_ts_study_006_05_handson_flow.pngTheme: Hands-on Workflow

Labels to Render:
- Step 1: "Ask Gemini 💬"
- Step 2: "Get Code 🧱"
- Step 3: "Run App 🚀"

Visual Details:
1. Core Concept: The cycle of asking and implementing.
2. Metaphor: A loop or cycle. Inputting a question, receiving a code block, and seeing the app launch.
3. Action: Cycling.
4. Layout: Circular flow.		## 6) ハンズオン：FirebaseのWeb初期化「最小コード」を“聞いて”作る🧪🔥
1125docs/firebase_startdash_ts_study_006.mdfirebase_startdash_ts_study_006_06_ai_design.png./picture/firebase_startdash_ts_study_006_06_ai_design.pngTheme: AI Logic Design

Labels to Render:
- User: "Design Request"
- AI: "Gemini"
- Output: "Blueprint 📐"

Visual Details:
1. Core Concept: Using AI for design before coding.
2. Metaphor: An architect (AI) drawing a blueprint based on a client's (User) description.
3. Action: Drawing.
4. Layout: Interaction.		## 7) FirebaseのAIも絡める：AI Logicを“設計だけ先に”やってみる🤖🧠
1126docs/firebase_startdash_ts_study_007.mdfirebase_startdash_ts_study_007_01_node_npm_concept.png./picture/firebase_startdash_ts_study_007_01_node_npm_concept.pngTheme: Node.js and npm Concept

Labels to Render:
- Node.js: "Engine 💻"
- npm: "Store 📦"
- App: "Your App 🚀"

Visual Details:
1. Core Concept: Node.js as the runtime engine, npm as the package manager.
2. Metaphor: A car engine (Node.js) and a parts store (npm) supplying parts to build a car (App).
3. Action: Supplying parts.
4. Layout: Side-by-side or flow.		## 1) Node.js と npmって何者？🧠
1127docs/firebase_startdash_ts_study_007.mdfirebase_startdash_ts_study_007_02_node_versions.png./picture/firebase_startdash_ts_study_007_02_node_versions.pngTheme: Node Version Safety

Labels to Render:
- Node 18: "Old (EOL) 🚫"
- Node 24: "Active LTS 🟢"
- Vite 7: "Requires 20.19+ ⚠️"

Visual Details:
1. Core Concept: Choosing a safe, supported Node version.
2. Metaphor: A bridge. The "Node 18" bridge is broken. The "Node 24" bridge is strong and green.
3. Action: Crossing the bridge.
4. Layout: Comparison.		## 2) 2026年の「安全なNodeバージョン」🧯
1128docs/firebase_startdash_ts_study_007.mdfirebase_startdash_ts_study_007_03_npm_commands.png./picture/firebase_startdash_ts_study_007_03_npm_commands.pngTheme: Basic npm Commands

Labels to Render:
- Install: "npm install (Get) 📥"
- Dev: "npm install -D (Tool) 🛠️"
- Run: "npm run (Go) 🏃"

Visual Details:
1. Core Concept: The three main npm actions.
2. Metaphor: 1. Receiving a package (install). 2. Putting a tool in a toolbox (install -D). 3. Pressing a start button (run).
3. Action: Icons for each command.
4. Layout: Three panels.		## 4) npm の基本操作（これだけで当面OK）📦✨
1129docs/firebase_startdash_ts_study_007.mdfirebase_startdash_ts_study_007_04_lock_file.png./picture/firebase_startdash_ts_study_007_04_lock_file.pngTheme: package-lock.json Purpose

Labels to Render:
- File: "package-lock.json"
- Role: "Lock Versions 🔒"
- Team: "Same Env 🤝"

Visual Details:
1. Core Concept: Ensuring consistent environments.
2. Metaphor: A padlock on a box of supplies, ensuring everyone gets the exact same set.
3. Action: Locking.
4. Layout: Conceptual.		## 4-3. lockファイルは“守る”
1130docs/firebase_startdash_ts_study_007.mdfirebase_startdash_ts_study_007_05_package_json.png./picture/firebase_startdash_ts_study_007_05_package_json.pngTheme: package.json Anatomy

Labels to Render:
- scripts: "Commands 🎮"
- dependencies: "App Libs 🧱"
- devDependencies: "Dev Tools 🧰"

Visual Details:
1. Core Concept: The structure of package.json.
2. Metaphor: An instruction manual with tabbed sections.
3. Action: Reading.
4. Layout: Document view.		## 5) package.json の読み方（最低ライン）👀
1131docs/firebase_startdash_ts_study_007.mdfirebase_startdash_ts_study_007_06_handson.png./picture/firebase_startdash_ts_study_007_06_handson.pngTheme: Node Hands-on

Labels to Render:
- File: "index.mjs"
- Code: "import { nanoid }"
- Terminal: "node index.mjs"

Visual Details:
1. Core Concept: Running a simple script with a dependency.
2. Metaphor: A small experiment setup. A beaker (File) with a chemical (nanoid) being mixed.
3. Action: Mixing/Running.
4. Layout: Lab bench.		## 6) 5分で体験：Nodeで動かして、npmで1個入れる🧪✨
1132docs/firebase_startdash_ts_study_007.mdfirebase_startdash_ts_study_007_07_nix_env.png./picture/firebase_startdash_ts_study_007_07_nix_env.pngTheme: Nix Environment

Labels to Render:
- IDE: "Antigravity / IDX"
- Config: ".idx/dev.nix"
- Result: "Fixed Node Env ⚓"

Visual Details:
1. Core Concept: Fixing the environment with configuration.
2. Metaphor: An anchor holding a ship (IDE) steady in a specific spot.
3. Action: Anchoring.
4. Layout: Environmental.		## 7) Antigravity / Firebase Studio 側で詰まったとき🛸🧰
1133docs/firebase_startdash_ts_study_008.mdfirebase_startdash_ts_study_008_01_create_vite.png./picture/firebase_startdash_ts_study_008_01_create_vite.pngTheme: Vite Project Creation

Labels to Render:
- Command: "npm create vite@latest"
- Template: "react-ts"
- Result: "New Folder 📁"

Visual Details:
1. Core Concept: Generating a project using the CLI.
2. Metaphor: A wizard (npm) casting a spell to create a folder structure.
3. Action: Creation.
4. Layout: Magic/Creation scene.		## 2) Vite で React+TS プロジェクトを作る⚡📦
1134docs/firebase_startdash_ts_study_008.mdfirebase_startdash_ts_study_008_02_hello_world.png./picture/firebase_startdash_ts_study_008_02_hello_world.pngTheme: Hello World Screen

Labels to Render:
- Screen: "動いた！🎉"
- Button: "押してみる"
- Alert: "OK! ✅"

Visual Details:
1. Core Concept: The first successful run of the app.
2. Metaphor: A computer screen displaying the success message with confetti.
3. Action: Celebration.
4. Layout: Screen view.		## 3) “動いた！”を画面に出す🎉📸
1135docs/firebase_startdash_ts_study_008.mdfirebase_startdash_ts_study_008_03_file_structure.png./picture/firebase_startdash_ts_study_008_03_file_structure.pngTheme: Entry Point Flow

Labels to Render:
- File 1: "index.html 🏠"
- File 2: "main.tsx 🔌"
- File 3: "App.tsx 🖼️"

Visual Details:
1. Core Concept: How the app starts.
2. Metaphor: A visitor entering a house (index.html), flipping a switch (main.tsx), and seeing the room (App.tsx).
3. Action: Flow/Entry.
4. Layout: Sequence.		## 4) “迷子にならない”超ミニ構造理解🧭📁
1136docs/firebase_startdash_ts_study_008.mdfirebase_startdash_ts_study_008_04_ai_placeholder.png./picture/firebase_startdash_ts_study_008_04_ai_placeholder.pngTheme: AI Placeholder Logic

Labels to Render:
- File: "src/lib/ai.ts"
- Function: "askAi()"
- Current: "Dummy Data 📦"
- Future: "Firebase AI Logic 🤖"

Visual Details:
1. Core Concept: Preparing a slot for future AI integration.
2. Metaphor: A reserved parking spot labeled "AI Logic", currently occupied by a cardboard box "Dummy".
3. Action: Reservation.
4. Layout: Parking spot.		## 6) 🌟 Firebase AI を“後でラクする形”で仕込む（30秒）🧠🧩
1137docs/firebase_startdash_ts_study_008.mdfirebase_startdash_ts_study_008_05_troubleshooting.png./picture/firebase_startdash_ts_study_008_05_troubleshooting.pngTheme: Troubleshooting Common Issues

Labels to Render:
- Issue 1: "Old Node 👴"
- Issue 2: "Network Block 🚧"
- Issue 3: "Port Busy 🛑"

Visual Details:
1. Core Concept: Common hurdles.
2. Metaphor: An obstacle course.
3. Action: Overcoming.
4. Layout: Obstacles.		## よくある詰まり🐛🧯（ここだけ見ればOK）
1138docs/firebase_startdash_ts_study_009.mdfirebase_startdash_ts_study_009_01_file_map.png./picture/firebase_startdash_ts_study_009_01_file_map.pngTheme: Project File Map

Labels to Render:
- Root: "Project Root 🏠"
- src: "Code 🧠"
- public: "Assets 📦"
- package.json: "Manual 📘"

Visual Details:
1. Core Concept: Overview of the file structure.
2. Metaphor: A house blueprint showing different rooms (src, public) and the instruction manual (package.json).
3. Action: Mapping.
4. Layout: Blueprint view.		## 1) まずは「家の見取り図」🏠🗺️
1139docs/firebase_startdash_ts_study_009.mdfirebase_startdash_ts_study_009_02_package_json_manual.png./picture/firebase_startdash_ts_study_009_02_package_json_manual.pngTheme: package.json Manual

Labels to Render:
- Section A: "Scripts (Run) 🏃"
- Section B: "Dependencies (Tools) 🔧"
- File: "package.json"

Visual Details:
1. Core Concept: package.json acting as the manual.
2. Metaphor: An open instruction manual with two main chapters.
3. Action: Reading.
4. Layout: Open book.		## 2) 3点セット① package.json：このアプリの“取扱説明書”📘⚙️
1140docs/firebase_startdash_ts_study_009.mdfirebase_startdash_ts_study_009_03_src_workspace.png./picture/firebase_startdash_ts_study_009_03_src_workspace.pngTheme: src Directory Workspace

Labels to Render:
- main.tsx: "Switch 🔌"
- App.tsx: "Canvas 🎨"
- User: "Developer 🧑‍💻"

Visual Details:
1. Core Concept: src folder as the workspace.
2. Metaphor: An artist's studio. main.tsx is the light switch, App.tsx is the canvas where work happens.
3. Action: Painting/Coding.
4. Layout: Studio view.		## 3) 3点セット② src/：あなたがほぼ毎日触る場所🧠🔥
1141docs/firebase_startdash_ts_study_009.mdfirebase_startdash_ts_study_009_04_public_folder.png./picture/firebase_startdash_ts_study_009_04_public_folder.pngTheme: Public Folder Delivery

Labels to Render:
- Folder: "public/"
- Item: "favicon.ico"
- Action: "Direct Delivery 🚚"

Visual Details:
1. Core Concept: Files in public are served as-is.
2. Metaphor: A delivery truck taking boxes directly from the "public" warehouse to the user, skipping the "Build" factory.
3. Action: Delivering.
4. Layout: Delivery route.		## 4) 3点セット③ public/：そのまま配る素材置き場📦🖼️
1142docs/firebase_startdash_ts_study_009.mdfirebase_startdash_ts_study_009_05_component_extraction.png./picture/firebase_startdash_ts_study_009_05_component_extraction.pngTheme: Component Extraction

Labels to Render:
- Before: "Big App.tsx"
- Action: "Cut ✂️"
- After: "App + TopPage"

Visual Details:
1. Core Concept: Breaking a large component into smaller ones.
2. Metaphor: Cutting a piece of a puzzle or cake to make a separate unit.
3. Action: Cutting/Separating.
4. Layout: Transformation.		## Step 2：TopPage.tsx に切り出す🧩
1143docs/firebase_startdash_ts_study_009.mdfirebase_startdash_ts_study_009_06_lib_folder.png./picture/firebase_startdash_ts_study_009_06_lib_folder.pngTheme: Lib Folder Organization

Labels to Render:
- Folder: "src/lib/"
- File 1: "ai.ts 🤖"
- File 2: "firebase.ts 🔥"
- Goal: "Clean Room ✨"

Visual Details:
1. Core Concept: Organizing utility code.
2. Metaphor: A tidy tool shelf labeled "lib" where specialized tools (AI, Firebase) are stored.
3. Action: Organizing.
4. Layout: Shelf view.		## Step 4（任意）：AI/Firebaseコードの置き場所を“先に”作る🤖🔥
1144docs/firebase_startdash_ts_study_009.mdfirebase_startdash_ts_study_009_07_future_ai.png./picture/firebase_startdash_ts_study_009_07_future_ai.pngTheme: Future AI Integration

Labels to Render:
- Client: "AI Logic 📱"
- Server: "Genkit 🖥️"
- Guide: "MCP Server 🧭"

Visual Details:
1. Core Concept: The future AI landscape in the project.
2. Metaphor: A roadmap showing three future destinations: AI Logic (Client side), Genkit (Server side), and MCP (Development Guide).
3. Action: Planning.
4. Layout: Roadmap.		## 6) ここで“AI×Firebase”をちょい予告🤖⚡（でも今は重くしない）
1151docs/firebase_startdash_ts_study_010.mdfirebase_startdash_ts_study_010_01_design_four_elements.png./picture/firebase_startdash_ts_study_010_01_design_four_elements.pngTheme: Four Design Elements

Labels to Render:
- Header: "Nav 🧢"
- Main: "Hero 🚀"
- Features: "Info 👀"
- Footer: "Links 🧾"

Visual Details:
1. Core Concept: The 4 essential parts of a landing page.
2. Metaphor: A building with 4 distinct floors/sections.
3. Action: Stacking.
4. Layout: Stacked blocks.		## 1) まずは設計：ログイン前トップに必要な4点セット🧭
1152docs/firebase_startdash_ts_study_010.mdfirebase_startdash_ts_study_010_02_design_tips.png./picture/firebase_startdash_ts_study_010_02_design_tips.pngTheme: Design Tips

Labels to Render:
- Width: "max-w-* 📏"
- Padding: "px / py 🧼"
- Font: "Size Hierarchy 🔠"

Visual Details:
1. Core Concept: Three tips for a clean design.
2. Metaphor: A ruler (Width), a spacer (Padding), and steps (Font Size).
3. Action: Measuring/Aligning.
4. Layout: Triptych.		## 2) “最低限きれい”のコツ3つ（これだけ守れば勝ち）🏆✨
1153docs/firebase_startdash_ts_study_010.mdfirebase_startdash_ts_study_010_03_tailwind_v4_setup.png./picture/firebase_startdash_ts_study_010_03_tailwind_v4_setup.pngTheme: Tailwind v4 Setup

Labels to Render:
- Vite: "Plugin 🧩"
- CSS: "@import 📄"
- Result: "Ready ⚡"

Visual Details:
1. Core Concept: Setting up Tailwind v4.
2. Metaphor: Plugging a module into a Vite engine.
3. Action: Connection.
4. Layout: Process flow.		## 3) 実装：Tailwind v4で“秒でそれっぽく”する⚡（おすすめ）
1154docs/firebase_startdash_ts_study_010.mdfirebase_startdash_ts_study_010_04_hero_implementation.png./picture/firebase_startdash_ts_study_010_04_hero_implementation.pngTheme: Hero Implementation

Labels to Render:
- Code: ""
- Browser: "Hero UI"
- Action: "Render"

Visual Details:
1. Core Concept: Implementing the Hero component.
2. Metaphor: Converting code block into a visual UI block.
3. Action: Rendering.
4. Layout: Code to UI transition.		### 4-2) src/components/Hero.tsx
1155docs/firebase_startdash_ts_study_010.mdfirebase_startdash_ts_study_010_05_ai_polishing.png./picture/firebase_startdash_ts_study_010_05_ai_polishing.pngTheme: AI Polishing

Labels to Render:
- Draft: "Rough UI"
- AI: "Polish ✨"
- Final: "Clean UI"

Visual Details:
1. Core Concept: AI refining the design and text.
2. Metaphor: A robot polishing a rough gemstone into a diamond.
3. Action: Polishing.
4. Layout: Before/After.		## 5) 🤖AIと一緒に“文章と見た目”を整える（Gemini CLI / Antigravity）✨
1156docs/firebase_startdash_ts_study_010.mdfirebase_startdash_ts_study_010_06_future_ai_logic.png./picture/firebase_startdash_ts_study_010_06_future_ai_logic.pngTheme: Future AI Logic

Labels to Render:
- Feature: "Auto Text 📝"
- Feature: "Recommendations 💡"
- Backend: "Firebase AI Logic"

Visual Details:
1. Core Concept: Future AI features.
2. Metaphor: Seeds planted in the UI that will grow into AI features.
3. Action: Growing.
4. Layout: Future vision.		## 6) FirebaseのAI機能はどう絡むの？（この章の“伏線”）🧵🤖
1157docs/firebase_startdash_ts_study_011.mdfirebase_startdash_ts_study_011_01_id_types.png./picture/firebase_startdash_ts_study_011_01_id_types.pngTheme: Comparison of Project Name, ID, and Number

Labels to Render:
- Name: "Label (Changeable) 🏷️"
- ID: "Address (Fixed) 🏠"
- Number: "System Tag (Auto) 🔢"

Visual Details:
1. Core Concept: Distinguishing the three identifiers.
2. Metaphor: A sticky note (Name), a metal house plate (ID), and a barcode tag (Number).
3. Action: Displaying the three items side-by-side.
4. Layout: Horizontal comparison.		## ✅ プロジェクト名 / プロジェクトID / プロジェクト番号の違い
1158docs/firebase_startdash_ts_study_011.mdfirebase_startdash_ts_study_011_02_analytics_decision.png./picture/firebase_startdash_ts_study_011_02_analytics_decision.pngTheme: Analytics ON/OFF Decision

Labels to Render:
- ON: "Insights 📈"
- OFF: "Simple 🧹"
- Decision: "Your Choice"

Visual Details:
1. Core Concept: Choosing whether to enable Analytics.
2. Metaphor: A fork in the road. One path leads to a dashboard (ON), the other to a clean field (OFF).
3. Action: Choosing a path.
4. Layout: Fork in the road.		## ✅ Google Analyticsは「最初にON」か「後でON」か
1159docs/firebase_startdash_ts_study_011.mdfirebase_startdash_ts_study_011_03_create_project_ui.png./picture/firebase_startdash_ts_study_011_03_create_project_ui.pngTheme: Add Project Button UI

Labels to Render:
- Dashboard: "Firebase Console"
- Button: "Add project ➕"
- Action: "Click"

Visual Details:
1. Core Concept: Finding the starting point.
2. Metaphor: A simplified UI mockup focusing on the "Add project" card.
3. Action: A cursor hovering over the button.
4. Layout: UI Focus.		## Step 1：新規作成に入る🧭
1160docs/firebase_startdash_ts_study_011.mdfirebase_startdash_ts_study_011_04_id_constraints.png./picture/firebase_startdash_ts_study_011_04_id_constraints.pngTheme: Project ID Constraints

Labels to Render:
- Field: "Project ID"
- Rule 1: "Lowercase Only 🔡"
- Rule 2: "Unique 🌍"
- Lock: "Fixed Forever 🔒"

Visual Details:
1. Core Concept: The rules for creating a Project ID.
2. Metaphor: An input field with validation checkmarks and a heavy padlock indicating it cannot be changed.
3. Action: Typing/Locking.
4. Layout: Form input focus.		## Step 3：プロジェクトIDを（できれば）整える🧨
1161docs/firebase_startdash_ts_study_011.mdfirebase_startdash_ts_study_011_05_project_settings.png./picture/firebase_startdash_ts_study_011_05_project_settings.pngTheme: Project Settings Navigation

Labels to Render:
- Icon: "Gear ⚙️"
- Menu: "Project settings"
- Target: "Project ID"

Visual Details:
1. Core Concept: Finding the ID after creation.
2. Metaphor: A treasure map path leading from the Gear icon to the Project ID.
3. Action: Navigation.
4. Layout: UI Path.		## ✅ 1分：プロジェクトIDを控える
1162docs/firebase_startdash_ts_study_011.mdfirebase_startdash_ts_study_011_06_gemini_help.png./picture/firebase_startdash_ts_study_011_06_gemini_help.pngTheme: Gemini Assistance for Naming

Labels to Render:
- User: "Name ideas?"
- AI: "myapp-dev-2026"
- Tool: "Gemini in Firebase"

Visual Details:
1. Core Concept: Using AI to generate ID ideas.
2. Metaphor: A chat bubble interface where the user asks and a robot replies with a list of IDs.
3. Action: Chatting.
4. Layout: Chat view.		## A) Console内の「Gemini in Firebase」をONにする⚡
1163docs/firebase_startdash_ts_study_011.mdfirebase_startdash_ts_study_011_07_cli_extension.png./picture/firebase_startdash_ts_study_011_07_cli_extension.pngTheme: Gemini CLI Extension Install

Labels to Render:
- Command: "gemini extensions install firebase"
- Tool: "Gemini CLI"
- Result: "Firebase Power Up! ⚡"

Visual Details:
1. Core Concept: Enhancing the CLI with Firebase tools.
2. Metaphor: A robot (Gemini) equipping a new toolbelt (Firebase Extension).
3. Action: Equipping.
4. Layout: Character upgrade.		## B) Gemini CLI × Firebase Extension（ターミナル派の味方💻🤖）
1164docs/firebase_startdash_ts_study_012.mdfirebase_startdash_ts_study_012_01_room_nametag.png./picture/firebase_startdash_ts_study_012_01_room_nametag.pngTheme: Web App Registration Metaphor

Labels to Render:
- Building: "Firebase Project 🏢"
- Room: "Web App"
- Nametag: "firebaseConfig 🏷️"

Visual Details:
1. Core Concept: Registering an app is like labeling a room in a building.
2. Metaphor: A large building (Project) with many doors. One door (Web App) has a new nametag (Config) being attached.
3. Action: Labeling.
4. Layout: Building cross-section or door close-up.		## 1) まずイメージをつかもう🧠🗺️
1165docs/firebase_startdash_ts_study_012.mdfirebase_startdash_ts_study_012_02_register_flow.png./picture/firebase_startdash_ts_study_012_02_register_flow.pngTheme: Web App Registration Flow

Labels to Render:
- Step 1: "Click Web Icon 🌐"
- Step 2: "Name App ✍️"
- Step 3: "Get Config 📝"

Visual Details:
1. Core Concept: The 3-step process in the console.
2. Metaphor: A simple 1-2-3 path or flowchart.
3. Action: Progression.
4. Layout: Horizontal steps.		## 2) 手を動かす：Firebase ConsoleでWebアプリを追加🏗️🌐
1166docs/firebase_startdash_ts_study_012.mdfirebase_startdash_ts_study_012_03_config_safekeeping.png./picture/firebase_startdash_ts_study_012_03_config_safekeeping.pngTheme: Config Safekeeping

Labels to Render:
- Config: "firebaseConfig"
- Action: "Copy & Paste"
- Place: "Notepad / .env 📝"

Visual Details:
1. Core Concept: Saving the config immediately.
2. Metaphor: Copying text from a screen and pinning it to a corkboard or notepad.
3. Action: Saving.
4. Layout: Transfer of information.		## 3) configを“なくさない”保管ルール🗃️🧯
1167docs/firebase_startdash_ts_study_012.mdfirebase_startdash_ts_study_012_04_config_retrieval.png./picture/firebase_startdash_ts_study_012_04_config_retrieval.pngTheme: Config Retrieval Path

Labels to Render:
- Start: "Project settings ⚙️"
- Middle: "General > Your apps"
- Goal: "Config 🏷️"

Visual Details:
1. Core Concept: How to find the config again.
2. Metaphor: A navigation path through menu items.
3. Action: Navigating.
4. Layout: UI path.		## 4) いつでも取り直せる：config再取得の最短ルート🧭🔁
1168docs/firebase_startdash_ts_study_012.mdfirebase_startdash_ts_study_012_05_config_anatomy.png./picture/firebase_startdash_ts_study_012_05_config_anatomy.pngTheme: Anatomy of firebaseConfig

Labels to Render:
- apiKey: "Postman (Address)"
- projectId: "Name Tag"
- appId: "ID Card"

Visual Details:
1. Core Concept: Explaining what each key does.
2. Metaphor: Dissecting the config object. apiKey is like a destination address, projectId is the name, appId is the specific ID.
3. Action: Analysis.
4. Layout: Annotated code block or list.		## 5) firebaseConfigの中身を“超ざっくり”理解しよう🧩✨
1169docs/firebase_startdash_ts_study_012.mdfirebase_startdash_ts_study_012_06_ai_explanation.png./picture/firebase_startdash_ts_study_012_06_ai_explanation.pngTheme: AI Explaining Config

Labels to Render:
- User: "What is authDomain?"
- AI: "It's for Login! 🔑"
- Tool: "Gemini"

Visual Details:
1. Core Concept: Using AI to understand technical terms.
2. Metaphor: A user pointing at a code term and a robot assistant providing a simple explanation balloon.
3. Action: Explaining.
4. Layout: Q&A.		## 6) 🤖AIと一緒に爆速理解：Gemini CLI / Antigravity の使いどころ💬⚡
1170docs/firebase_startdash_ts_study_012.mdfirebase_startdash_ts_study_012_07_multiple_apps.png./picture/firebase_startdash_ts_study_012_07_multiple_apps.pngTheme: Multiple Apps in Project

Labels to Render:
- Project: "One Project"
- App 1: "Web (Dev)"
- App 2: "Web (Prod)"
- App 3: "iOS"

Visual Details:
1. Core Concept: A project can contain multiple apps.
2. Metaphor: A parent holding hands with multiple children (Apps) with different nametags.
3. Action: Grouping.
4. Layout: Hierarchy.		## ミニ課題B（余力があれば）🧪
1171docs/firebase_startdash_ts_study_013.mdfirebase_startdash_ts_study_013_01_flow_overview.png./picture/firebase_startdash_ts_study_013_01_flow_overview.pngTheme: Install, Init, Verify Flow

Labels to Render:
- 1. Install: "npm install"
- 2. Init: "initializeApp"
- 3. Verify: "Screen OK"

Visual Details:
1. Core Concept: The three steps to connect Firebase.
2. Metaphor: A 3-step assembly line. 1. Receiving a package. 2. Plugging it in. 3. Screen lighting up.
3. Action: Flow.
4. Layout: Horizontal sequence.		## 1) まず“何が起きる？”を超ざっくり理解🙂🧠
1172docs/firebase_startdash_ts_study_013.mdfirebase_startdash_ts_study_013_02_node_version.png./picture/firebase_startdash_ts_study_013_02_node_version.pngTheme: Node Version Check

Labels to Render:
- Command: "node -v"
- Result: "v24.x.x (LTS) 🟢"
- Avoid: "v18 (Old) 🔴"

Visual Details:
1. Core Concept: Checking for the correct Node version.
2. Metaphor: A traffic light. v24 is Green, v18 is Red.
3. Action: Checking.
4. Layout: Comparison.		### 2-0. Nodeの確認（ここだけ最初に）🔎
1173docs/firebase_startdash_ts_study_013.mdfirebase_startdash_ts_study_013_03_npm_install.png./picture/firebase_startdash_ts_study_013_03_npm_install.pngTheme: npm install firebase

Labels to Render:
- Package: "firebase (12.x)"
- Project: "node_modules"
- Action: "Install 📥"

Visual Details:
1. Core Concept: Installing the Firebase SDK.
2. Metaphor: Dropping a Firebase-branded block into the project box.
3. Action: Installation.
4. Layout: Box filling.		### 2-1. Firebase JS SDK を入れる📦✨
1174docs/firebase_startdash_ts_study_013.mdfirebase_startdash_ts_study_013_04_firebase_ts.png./picture/firebase_startdash_ts_study_013_04_firebase_ts.pngTheme: firebase.ts Structure

Labels to Render:
- File: "src/lib/firebase.ts"
- Content: "config + initializeApp"
- Export: "app"

Visual Details:
1. Core Concept: The initialization file acting as a bridge.
2. Metaphor: A bridge or connector file. Inputs config, outputs an initialized app object.
3. Action: connecting.
4. Layout: File diagram.		### 2-2. firebase.ts を作って初期化する🌱⚡
1175docs/firebase_startdash_ts_study_013.mdfirebase_startdash_ts_study_013_05_app_tsx_success.png./picture/firebase_startdash_ts_study_013_05_app_tsx_success.pngTheme: Success Message UI

Labels to Render:
- Screen: "Browser"
- Text: "✅ Firebase初期化OK！"
- ID: "projectId: myapp-123"

Visual Details:
1. Core Concept: Visual verification of success.
2. Metaphor: A computer screen displaying a large green checkmark and the success message.
3. Action: Success.
4. Layout: Screen shot.		### 2-3. 画面に「Firebase初期化OK」を出す✅🖥️
1176docs/firebase_startdash_ts_study_013.mdfirebase_startdash_ts_study_013_06_duplicate_init_error.png./picture/firebase_startdash_ts_study_013_06_duplicate_init_error.pngTheme: Duplicate Init Error

Labels to Render:
- Error: "App named [DEFAULT] already exists"
- Cause: "Double Init 🔁"
- Fix: "Check getApps()"

Visual Details:
1. Core Concept: The error caused by initializing twice.
2. Metaphor: Two plugs trying to fit into one socket, causing a spark.
3. Action: Conflict.
4. Layout: Problem/Solution.		### B. Firebase App named '[DEFAULT]' already exists 系💥
1177docs/firebase_startdash_ts_study_013.mdfirebase_startdash_ts_study_013_07_ai_logic_prep.png./picture/firebase_startdash_ts_study_013_07_ai_logic_prep.pngTheme: AI Logic Foundation

Labels to Render:
- Base: "Firebase App (Initialized)"
- Layer 1: "Firestore"
- Layer 2: "Auth"
- Layer 3: "AI Logic 🤖"

Visual Details:
1. Core Concept: Initialization is the foundation for other services, including AI.
2. Metaphor: A building foundation (App) supporting pillars (Firestore, Auth) and a roof/statue (AI Logic).
3. Action: Supporting.
4. Layout: Architecture.		## 5) 🤖FirebaseのAIサービスも“ここから繋がる”✨（AI Logicの入口案内）
1178docs/firebase_startdash_ts_study_014.mdfirebase_startdash_ts_study_014_01_public_exposure.png./picture/firebase_startdash_ts_study_014_01_public_exposure.pngTheme: Frontend Public Exposure

Labels to Render:
- Code: "Front-end (.js)"
- Browser: "View Source"
- Secret: "Visible! 😱"

Visual Details:
1. Core Concept: Anything in the frontend code is visible to the user.
2. Metaphor: A glass house (Frontend) where everything inside is visible from the outside.
3. Action: Viewing.
4. Layout: Conceptual.		## 1) まず大前提：フロントに入れた時点で「公開される」🌍👀
1179docs/firebase_startdash_ts_study_014.mdfirebase_startdash_ts_study_014_02_ok_ng_list.png./picture/firebase_startdash_ts_study_014_02_ok_ng_list.pngTheme: OK vs NG Config Items

Labels to Render:
- OK: "apiKey / projectId 🟢"
- NG: "Secret Key / Service Account 🔴"

Visual Details:
1. Core Concept: Classifying config items.
2. Metaphor: Two sorting bins. One green for public items, one red for secret items.
3. Action: Sorting.
4. Layout: Comparison.		## 2) 「公開していいもの / ダメなもの」仕分け一覧🧠🗂️
1180docs/firebase_startdash_ts_study_014.mdfirebase_startdash_ts_study_014_03_env_benefits.png./picture/firebase_startdash_ts_study_014_03_env_benefits.pngTheme: Benefits of .env

Labels to Render:
- Env: ".env"
- Dev: "dev config"
- Prod: "prod config"
- Code: "Clean Code ✨"

Visual Details:
1. Core Concept: Switching environments easily and keeping code clean.
2. Metaphor: A switch board connected to different power sources (Dev/Prod) feeding into the same machine (Code).
3. Action: Switching.
4. Layout: Diagram.		## 3) じゃあ、なぜ .env に移すの？🤔💡
1181docs/firebase_startdash_ts_study_014.mdfirebase_startdash_ts_study_014_04_vite_env_rule.png./picture/firebase_startdash_ts_study_014_04_vite_env_rule.pngTheme: Vite Environment Variable Rule

Labels to Render:
- Variable: "VITE_API_KEY"
- Filter: "Vite Build"
- Output: "Visible 🟢"
- Variable 2: "SECRET_KEY"
- Output 2: "Hidden (undefined) 🔴"

Visual Details:
1. Core Concept: Only variables starting with VITE_ are exposed.
2. Metaphor: A security scanner allowing passengers with "VITE_" badges to pass, while stopping others.
3. Action: Filtering.
4. Layout: Flowchart.		## 4) Viteの環境変数ルール（ここだけ覚えればOK）⚡
1182docs/firebase_startdash_ts_study_014.mdfirebase_startdash_ts_study_014_05_env_local_setup.png./picture/firebase_startdash_ts_study_014_05_env_local_setup.pngTheme: .env.local Setup

Labels to Render:
- File: ".env.local"
- Content: "VITE_FIREBASE_API_KEY=..."
- Location: "Project Root 🏠"

Visual Details:
1. Core Concept: Creating the local environment file.
2. Metaphor: Writing a secret note and placing it in a specific drawer (Project Root).
3. Action: Writing.
4. Layout: File view.		## Step 1：プロジェクト直下に .env.local を作る📄✨
1183docs/firebase_startdash_ts_study_014.mdfirebase_startdash_ts_study_014_06_gitignore.png./picture/firebase_startdash_ts_study_014_06_gitignore.pngTheme: gitignore Protection

Labels to Render:
- File: ".gitignore"
- Entry: ".env.local"
- Git: "Commit 📦"
- Result: "Ignored (Safe) 🛡️"

Visual Details:
1. Core Concept: Preventing the file from being committed.
2. Metaphor: A shield or barrier labeled ".gitignore" stopping the ".env.local" file from entering the "Git" box.
3. Action: Blocking.
4. Layout: Protection scene.		## Step 2：.gitignore に追加して、Gitに入らないようにする🙈🧯
1184docs/firebase_startdash_ts_study_014.mdfirebase_startdash_ts_study_014_07_env_example.png./picture/firebase_startdash_ts_study_014_07_env_example.pngTheme: .env.example Template

Labels to Render:
- File: ".env.example"
- Content: "KEY=xxxx"
- User: "Copy to .env.local"

Visual Details:
1. Core Concept: Providing a template for other developers.
2. Metaphor: A stencil or blueprint (.env.example) used to create the actual file (.env.local).
3. Action: Tracing/Copying.
4. Layout: Blueprint to object.		## 8) ミニ課題🎯✨（10分）
1185docs/firebase_startdash_ts_study_015.mdfirebase_startdash_ts_study_015_01_mcp_concept.png./picture/firebase_startdash_ts_study_015_01_mcp_concept.pngTheme: MCP Concept

Labels to Render:
- AI: "Antigravity / Gemini"
- Plug: "MCP Server"
- Tool: "Firebase"

Visual Details:
1. Core Concept: MCP acting as a universal plug connecting AI to tools.
2. Metaphor: An electrical plug (MCP) connecting a robot (AI) to a power source or machine (Firebase).
3. Action: Connecting.
4. Layout: Diagram.		## 1) まず読む：MCPってなに？（超ざっくり）🧩
1186docs/firebase_startdash_ts_study_015.mdfirebase_startdash_ts_study_015_02_cli_auth.png./picture/firebase_startdash_ts_study_015_02_cli_auth.pngTheme: MCP Authentication

Labels to Render:
- User: "You"
- CLI: "Firebase CLI Login 🔑"
- MCP: "Uses CLI Auth 🪪"

Visual Details:
1. Core Concept: MCP reuses the CLI's authentication.
2. Metaphor: An ID card (CLI Login) being passed to the MCP agent to verify identity.
3. Action: Verification.
4. Layout: Flow.		## 重要：権限は「Firebase CLIのログイン権限」が使われる🪪
1187docs/firebase_startdash_ts_study_015.mdfirebase_startdash_ts_study_015_03_antigravity_install.png./picture/firebase_startdash_ts_study_015_03_antigravity_install.pngTheme: Antigravity MCP Install

Labels to Render:
- Menu: "MCP Servers"
- Item: "Firebase"
- Action: "Install 🔌"

Visual Details:
1. Core Concept: Installing the MCP server via UI.
2. Metaphor: A simple UI mockup of the Agent settings menu.
3. Action: Clicking Install.
4. Layout: UI view.		## 3) 手を動かす：Antigravityで入れる（いちばん簡単）🛸✨
1188docs/firebase_startdash_ts_study_015.mdfirebase_startdash_ts_study_015_04_gemini_extension.png./picture/firebase_startdash_ts_study_015_04_gemini_extension.pngTheme: Gemini CLI Extension

Labels to Render:
- Command: "gemini extensions install ..."
- Box: "Firebase Ext"
- Inside: "MCP + Context + Slash"

Visual Details:
1. Core Concept: The extension bundles MCP, context, and commands.
2. Metaphor: A gift box labeled "Firebase Extension" containing three items: A plug (MCP), a book (Context), and a sword (Slash commands).
3. Action: Unboxing.
4. Layout: Composition.		## 4) 手を動かす：WindowsでGemini CLIに入れる（おすすめは拡張）💻🤖
1189docs/firebase_startdash_ts_study_015.mdfirebase_startdash_ts_study_015_05_slash_commands.png./picture/firebase_startdash_ts_study_015_05_slash_commands.pngTheme: Slash Commands

Labels to Render:
- Command: "/firebase:init"
- Command: "/firebase:deploy"
- Action: "Shortcut ⚡"

Visual Details:
1. Core Concept: Using shortcuts to trigger actions.
2. Metaphor: A keyboard with special keys glowing.
3. Action: Typing.
4. Layout: Keyboard close-up.		## ✅ Gemini CLIなら：スラッシュコマンドで導線が速い⚡
1190docs/firebase_startdash_ts_study_015.mdfirebase_startdash_ts_study_015_06_safety_rules.png./picture/firebase_startdash_ts_study_015_06_safety_rules.pngTheme: MCP Safety Rules

Labels to Render:
- Read: "OK (List/Get) 🟢"
- Create: "Check First 🟡"
- Delete: "Stop! 🔴"

Visual Details:
1. Core Concept: Traffic light system for AI actions.
2. Metaphor: Traffic lights. Green for Read, Yellow for Create, Red for Delete.
3. Action: Signaling.
4. Layout: Horizontal lights.		## 6) 安全運転のコツ：許可の出し方（ここ超重要）🧯🔐
1191docs/firebase_startdash_ts_study_015.mdfirebase_startdash_ts_study_015_07_ai_navigation.png./picture/firebase_startdash_ts_study_015_07_ai_navigation.pngTheme: AI Project Navigation

Labels to Render:
- User: "Where is config?"
- AI: "Here is the path 🧭"
- Map: "Project Map"

Visual Details:
1. Core Concept: AI guiding the user through the project structure.
2. Metaphor: A robot holding a map and compass, guiding a user.
3. Action: Guiding.
4. Layout: Exploration.		## 8) ミニ課題（5分）🎯✨
1192docs/firebase_startdash_ts_study_016.mdfirebase_startdash_ts_study_016_01_toolbox.png./picture/firebase_startdash_ts_study_016_01_toolbox.pngTheme: Firebase Extension Toolbox

Labels to Render:
- Tool: "Gemini CLI"
- Box: "Firebase Ext 🧰"
- Inside: "MCP + Prompts + Context"

Visual Details:
1. Core Concept: Installing the extension adds powerful tools.
2. Metaphor: A robot (Gemini) receiving a glowing toolbox labeled "Firebase".
3. Action: Equipping.
4. Layout: Character upgrade.		## 1) まずは導入　Gemini CLI と Firebase拡張を入れる🧩🔧
1193docs/firebase_startdash_ts_study_016.mdfirebase_startdash_ts_study_016_02_slash_menu.png./picture/firebase_startdash_ts_study_016_02_slash_menu.pngTheme: Slash Command Menu

Labels to Render:
- Command: "/firebase:init"
- Option 1: "Set up backend 🔥"
- Option 2: "Add AI features 🤖"

Visual Details:
1. Core Concept: The interactive menu provided by the command.
2. Metaphor: A terminal screen with a holographic menu popping up.
3. Action: Selection.
4. Layout: Terminal UI.		## /firebase:init　最強の出発点🚀
1194docs/firebase_startdash_ts_study_016.mdfirebase_startdash_ts_study_016_03_error_fix_cycle.png./picture/firebase_startdash_ts_study_016_03_error_fix_cycle.pngTheme: Error Fix Cycle

Labels to Render:
- Step 1: "Copy Error 📋"
- Step 2: "Paste to Gemini 💬"
- Step 3: "Get Fix 🛠️"

Visual Details:
1. Core Concept: The workflow of fixing errors with AI.
2. Metaphor: A cycle or loop. Copying a red error block, feeding it to a robot, receiving a green code block.
3. Action: Cycling.
4. Layout: Circular flow.		## 3) “詰まった瞬間”の黄金ムーブ🥇💥
1195docs/firebase_startdash_ts_study_016.mdfirebase_startdash_ts_study_016_04_common_errors.png./picture/firebase_startdash_ts_study_016_04_common_errors.pngTheme: Common Error Trio

Labels to Render:
- Error 1: "No App 🚫"
- Error 2: "Config Mismatch 🧩"
- Error 3: "Build Fail 🧱"

Visual Details:
1. Core Concept: Visualizing the three main error types.
2. Metaphor: Three warning signs. 1. Missing puzzle piece (App). 2. Key not fitting lock (Config). 3. Wall collapsing (Build).
3. Action: Warning.
4. Layout: Triptych.		## 4) よくある詰まり3連発　ここで8割勝てる🥊😆
1196docs/firebase_startdash_ts_study_016.mdfirebase_startdash_ts_study_016_05_ai_logic_setup.png./picture/firebase_startdash_ts_study_016_05_ai_logic_setup.pngTheme: AI Logic Setup

Labels to Render:
- Command: "/firebase:init"
- Feature: "Add AI features"
- Result: "AI Logic Ready 🤖✨"

Visual Details:
1. Core Concept: Enabling AI features through the CLI.
2. Metaphor: A command activating a futuristic AI core.
3. Action: Activation.
4. Layout: Activation sequence.		## 6) ついでに触れる　Firebase AI Logic を最速で入口まで🚪🤖
1197docs/firebase_startdash_ts_study_016.mdfirebase_startdash_ts_study_016_06_tool_choice.png./picture/firebase_startdash_ts_study_016_06_tool_choice.pngTheme: Antigravity vs Gemini CLI

Labels to Render:
- Antigravity: "Visual / Manage 🖥️"
- Gemini CLI: "Terminal / Chat 💬"
- Center: "Your Style"

Visual Details:
1. Core Concept: Choosing the right tool for the task.
2. Metaphor: A developer with two screens. One shows a complex dashboard (Antigravity), the other a clean chat window (CLI).
3. Action: Comparison.
4. Layout: Split screen.		## Antigravity と Gemini CLI どっちで作業すべき❓
1198docs/firebase_startdash_ts_study_017.mdfirebase_startdash_ts_study_017_01_dev_prod_worlds.png./picture/firebase_startdash_ts_study_017_01_dev_prod_worlds.pngTheme: Dev vs Prod Worlds

Labels to Render:
- Dev: "Playground 🚧"
- Prod: "Live City 🏙️"
- Wall: "Safety Wall 🧱"

Visual Details:
1. Core Concept: Isolating environments to prevent accidents.
2. Metaphor: Two islands separated by a thick wall. One has toys and construction (Dev), the other has skyscrapers and people (Prod).
3. Action: Separation.
4. Layout: Split view.		## 1) なんで分けるの？（ここが一番大事）💥🧯
1199docs/firebase_startdash_ts_study_017.mdfirebase_startdash_ts_study_017_02_vite_switch.png./picture/firebase_startdash_ts_study_017_02_vite_switch.pngTheme: Vite Mode Switch

Labels to Render:
- Cmd 1: "npm run dev"
- File 1: ".env"
- Cmd 2: "npm run build"
- File 2: ".env.prod"

Visual Details:
1. Core Concept: Vite switching environment files based on the command.
2. Metaphor: A railway switch routing the train (App) to different tracks (Config files).
3. Action: Switching.
4. Layout: Branching path.		## 4) 手を動かす③：Viteの.envで “dev/prod config差し替え” を作る🔁⚛️
1200docs/firebase_startdash_ts_study_017.mdfirebase_startdash_ts_study_017_03_safety_display.png./picture/firebase_startdash_ts_study_017_03_safety_display.pngTheme: Environment Indicator

Labels to Render:
- Screen: "App UI"
- Badge: "Mode: DEV"
- ID: "myapp-dev"
- Status: "Safe ✅"

Visual Details:
1. Core Concept: Visual verification of the current environment.
2. Metaphor: A computer screen with a prominent banner or badge showing the current environment.
3. Action: Displaying.
4. Layout: Screen shot.		## 4-3. 画面に「今どっち？」を出す（事故防止の最強お守り🧿）
1201docs/firebase_startdash_ts_study_017.mdfirebase_startdash_ts_study_017_04_cli_alias.png./picture/firebase_startdash_ts_study_017_04_cli_alias.pngTheme: CLI Alias Manager

Labels to Render:
- Command: "firebase use"
- Alias 1: "dev (active) 🟢"
- Alias 2: "prod (inactive) ⚪"

Visual Details:
1. Core Concept: Switching projects using aliases.
2. Metaphor: A character (CLI) holding two masks or hats labeled "dev" and "prod", putting one on.
3. Action: Switching.
4. Layout: Character interaction.		## 5) 手を動かす④：Firebase CLIで dev/prod を切り替える🧰🔁
1202docs/firebase_startdash_ts_study_017.mdfirebase_startdash_ts_study_017_05_backend_scope.png./picture/firebase_startdash_ts_study_017_05_backend_scope.pngTheme: Backend Environment Scope

Labels to Render:
- Box 1: "Project Dev 🚧"
- Content 1: "AI / Funcs"
- Box 2: "Project Prod 🏙️"
- Content 2: "AI / Funcs"

Visual Details:
1. Core Concept: Backend resources are isolated within their projects.
2. Metaphor: Two separate sealed boxes. Inside each is a set of gears (Functions) and a brain (AI). They do not cross over.
3. Action: Isolation.
4. Layout: Side-by-side.		## 6) AI時代の「分け方」ポイント（Functions / App Hosting / AI Logic）🤖🧠
1203docs/firebase_startdash_ts_study_017.mdfirebase_startdash_ts_study_017_06_prevention_shield.png./picture/firebase_startdash_ts_study_017_06_prevention_shield.pngTheme: Accident Prevention Shield

Labels to Render:
- Threat: "Mistake / Accident 🏹"
- Shield: "Env Separation 🛡️"
- Target: "Production DB 💎"

Visual Details:
1. Core Concept: Separation protects production data from accidents.
2. Metaphor: A strong shield labeled "Env Separation" blocking an arrow labeled "Mistake" from hitting a diamond (Production DB).
3. Action: Blocking.
4. Layout: Defense scene.		## 7) よくある事故トップ5🧨 → 即死回避チェック✅
1204docs/firebase_startdash_ts_study_018.mdfirebase_startdash_ts_study_018_01_safety_trio.png./picture/firebase_startdash_ts_study_018_01_safety_trio.pngTheme: Billing Safety Trio

Labels to Render:
- Budget: "Alert 🔔"
- Monitor: "Check 👀"
- Knowledge: "Rules 🧠"

Visual Details:
1. Core Concept: Three elements protecting the user from billing accidents.
2. Metaphor: A shield divided into 3 sections, protecting a wallet.
3. Action: Protection.
4. Layout: Shield emblem.		## この章のゴール🎯
1205docs/firebase_startdash_ts_study_018.mdfirebase_startdash_ts_study_018_02_spark_vs_blaze.png./picture/firebase_startdash_ts_study_018_02_spark_vs_blaze.pngTheme: Plan Comparison

Labels to Render:
- Spark: "Free 🌱"
- Blaze: "Pay-as-you-go 🔥"
- Quota: "Free Tier 🆓"

Visual Details:
1. Core Concept: Blaze includes a free tier before charging.
2. Metaphor: Spark is a small potted plant. Blaze is a large field, but the entrance area (Free Tier) is free to walk in.
3. Action: Comparison.
4. Layout: Split view.		## 1) Spark / Blaze を「事故らない視点」で理解する🧠💡
1206docs/firebase_startdash_ts_study_018.mdfirebase_startdash_ts_study_018_03_storage_trap.png./picture/firebase_startdash_ts_study_018_03_storage_trap.pngTheme: Storage Pricing Trap

Labels to Render:
- Date: "2026/2/3"
- Spark: "Block 🛑"
- Blaze: "OK ✅"
- Error: "402/403"

Visual Details:
1. Core Concept: The policy change for Storage on Spark plan.
2. Metaphor: A calendar marking the date. After this date, the Spark path to the Storage bucket is blocked by a wall.
3. Action: Blocking.
4. Layout: Timeline/Path.		## 2) 2026/2 時点での「ここが罠！」早見⚠️🧨
1207docs/firebase_startdash_ts_study_018.mdfirebase_startdash_ts_study_018_04_budget_setup.png./picture/firebase_startdash_ts_study_018_04_budget_setup.pngTheme: Budget Navigation Map

Labels to Render:
- Start: "Firebase Console 🏠"
- Link: "Manage Billing 🔗"
- Goal: "Google Cloud ☁️"

Visual Details:
1. Core Concept: Navigating from Firebase to Google Cloud for billing.
2. Metaphor: A bridge connecting the Firebase island to the Google Cloud continent.
3. Action: Crossing.
4. Layout: Map view.		## 3-1. どこから行く？（迷子防止）🧭
1208docs/firebase_startdash_ts_study_018.mdfirebase_startdash_ts_study_018_05_alert_thresholds.png./picture/firebase_startdash_ts_study_018_05_alert_thresholds.pngTheme: Alert Levels

Labels to Render:
- 50%: "Warning 🟢"
- 90%: "Critical 🟡"
- 100%: "Limit 🔴"
- Action: "Email 📩"

Visual Details:
1. Core Concept: Progressive alerts as usage increases.
2. Metaphor: A pressure gauge or fuel meter with 3 colored zones. Emails fly out at each marker.
3. Action: Meter rising.
4. Layout: Gauge.		## 3-2. 作成手順（初心者向けの型）🧩
1209docs/firebase_startdash_ts_study_018.mdfirebase_startdash_ts_study_018_06_stop_vs_notify.png./picture/firebase_startdash_ts_study_018_06_stop_vs_notify.pngTheme: Budget != Stop

Labels to Render:
- Budget: "Notify Only 🔔"
- Disable: "Stop Service 🛑"
- Reality: "Budget won't stop"

Visual Details:
1. Core Concept: Clarifying that budget alerts do not automatically stop billing.
2. Metaphor: A ringing alarm clock (Budget) vs pulling the power plug (Disable). The alarm doesn't stop the machine.
3. Action: Contrast.
4. Layout: Side-by-side.		## 3-3. 重要な注意（ここで事故が減る）🧯
1210docs/firebase_startdash_ts_study_018.mdfirebase_startdash_ts_study_018_07_accident_sources.png./picture/firebase_startdash_ts_study_018_07_accident_sources.pngTheme: Top Accident Sources

Labels to Render:
- Storage: "Bucket Cost 🪣"
- Firestore: "Read/Write 📚"
- AI: "Tokens 🤖"

Visual Details:
1. Core Concept: The three main sources of unexpected costs.
2. Metaphor: Three distinct hazards. An overflowing bucket (Storage), a burning book (Firestore), and a robot eating coins (AI).
3. Action: Cost impact.
4. Layout: Hazard icons.		## 6) 典型的な“課金事故”パターン6選🧨😇
1211docs/firebase_startdash_ts_study_019.mdfirebase_startdash_ts_study_019_01_architecture_map.png./picture/firebase_startdash_ts_study_019_01_architecture_map.pngTheme: Frontend Backend Map

Labels to Render:
- Front: "React ⚛️"
- SDK: "Firebase SDK 🏗️"
- Back: "Functions ⚙️"
- AI: "Genkit 🤖"

Visual Details:
1. Core Concept: The relationship between frontend, SDK, backend logic, and AI.
2. Metaphor: A city map. Frontend is the User's House. SDK is the Direct Highway. Backend is the Factory. AI is the Research Lab.
3. Action: Connection.
4. Layout: Map view.		## 1) まず全体地図：Reactの“外側”で何が起きる？🗺️🔌
1212docs/firebase_startdash_ts_study_019.mdfirebase_startdash_ts_study_019_02_functions_runtimes.png./picture/firebase_startdash_ts_study_019_02_functions_runtimes.pngTheme: Functions Runtime Version

Labels to Render:
- Node: "22 / 20 ✅"
- Node Old: "18 (Deprecated) ❌"
- Python: "3.11 ✅"

Visual Details:
1. Core Concept: Valid and invalid runtime versions.
2. Metaphor: A shelf with labeled boxes. The "Node 18" box is dusty and marked "Do Not Use". The "Node 22" and "Python 3.11" boxes are shiny and new.
3. Action: Selection.
4. Layout: Shelf display.		## 2) Cloud Functions for Firebase：まずは“2nd gen＋ランタイム”だけ押さえる🔧👀
1213docs/firebase_startdash_ts_study_019.mdfirebase_startdash_ts_study_019_03_cloud_run_runtimes.png./picture/firebase_startdash_ts_study_019_03_cloud_run_runtimes.pngTheme: Cloud Run Functions Options

Labels to Render:
- Node: "24 (New) ✨"
- .NET: "8 (LTS) 🔷"
- Calendar: "Support Date 📅"

Visual Details:
1. Core Concept: Extended options in Cloud Run functions.
2. Metaphor: A futuristic menu showing advanced options like Node 24 and .NET, with expiration dates clearly visible.
3. Action: Browsing.
4. Layout: Menu/Dashboard.		## 3) Cloud Run functions：選べる言語が増える＆サポート期限が見える📅🚦
1214docs/firebase_startdash_ts_study_019.mdfirebase_startdash_ts_study_019_04_version_check.png./picture/firebase_startdash_ts_study_019_04_version_check.pngTheme: Local Version Check

Labels to Render:
- Terminal: "PowerShell 💻"
- Command: "node -v"
- Result: "v22.x.x"
- Check: "OK ✅"

Visual Details:
1. Core Concept: Verifying installed versions.
2. Metaphor: A checklist on a clipboard next to a terminal screen showing version numbers.
3. Action: Checking off.
4. Layout: Desktop view.		## 5) 手を動かす②：Windowsで“今の自分のバージョン”を確認🔍💻
1215docs/firebase_startdash_ts_study_019.mdfirebase_startdash_ts_study_019_05_ai_fork.png./picture/firebase_startdash_ts_study_019_05_ai_fork.pngTheme: AI Implementation Choice

Labels to Render:
- Left: "Client (AI Logic) 📱"
- Right: "Server (Genkit) 🖥️"
- Sign: "Easy vs Strong"

Visual Details:
1. Core Concept: Two paths for AI integration.
2. Metaphor: A fork in the road. The left path is paved and sunny (Client). The right path leads to a fortress (Server).
3. Action: Choosing.
4. Layout: Branching path.		## 7) AIの予告：クライアント直叩き（AI Logic） vs サーバー側（Genkit）🤖🧠
1216docs/firebase_startdash_ts_study_019.mdfirebase_startdash_ts_study_019_06_ai_tools_ecosystem.png./picture/firebase_startdash_ts_study_019_06_ai_tools_ecosystem.pngTheme: AI Tool Suite

Labels to Render:
- Antigravity: "Workspace 🛸"
- Gemini CLI: "Chat / Help 🤖"
- MCP: "Connector 🔌"

Visual Details:
1. Core Concept: The synergy between Antigravity, Gemini CLI, and MCP.
2. Metaphor: Three gears or modules locking together to form a powerful engine.
3. Action: Integration.
4. Layout: Gear/Module assembly.		## 8) Antigravity / Gemini CLI：Firebaseを“シームレスに扱う”導線🛸🤖
1217docs/firebase_startdash_ts_study_020.mdfirebase_startdash_ts_study_020_01_wireframe.png./picture/firebase_startdash_ts_study_020_01_wireframe.pngTheme: Landing Page Wireframe

Labels to Render:
- Header: "Nav 🧢"
- Hero: "Main 🚀"
- Features: "Info 📌"
- Footer: "Links 🧾"

Visual Details:
1. Core Concept: The structural layout of the page.
2. Metaphor: A blueprint or wireframe showing 4 distinct stacked blocks.
3. Action: Stacking.
4. Layout: Vertical stack.		## 1) 今日作るトップ画面の“型”🧱✨
1218docs/firebase_startdash_ts_study_020.mdfirebase_startdash_ts_study_020_02_file_structure.png./picture/firebase_startdash_ts_study_020_02_file_structure.pngTheme: File Structure Strategy

Labels to Render:
- Page: "TopPage.tsx 🧠"
- Layout: "TopLayout.tsx 🎨"
- Lib: "firebase.ts ⚙️"

Visual Details:
1. Core Concept: Separating logic, UI, and configuration.
2. Metaphor: Three distinct folders or file icons. Arrows show 'TopPage' importing the other two.
3. Action: Importing.
4. Layout: Network/Tree.		## Step A：ファイルを3つに分けて“迷子防止”🧭📁
1219docs/firebase_startdash_ts_study_020.mdfirebase_startdash_ts_study_020_03_vite_env_rule.png./picture/firebase_startdash_ts_study_020_03_vite_env_rule.pngTheme: Vite Env Prefix

Labels to Render:
- Env: ".env"
- Var 1: "VITE_KEY ✅"
- Var 2: "SECRET_KEY ❌"
- App: "Client Code"

Visual Details:
1. Core Concept: Only variables with VITE_ prefix are exposed.
2. Metaphor: A sieve or filter. 'VITE_' items pass through to the 'Client Code' box. Others are blocked.
3. Action: Filtering.
4. Layout: Process flow.		## Step B：Firebase 初期化を「失敗しても画面が死なない」形にする🌱🧯
1220docs/firebase_startdash_ts_study_020.mdfirebase_startdash_ts_study_020_04_ui_mockup.png./picture/firebase_startdash_ts_study_020_04_ui_mockup.pngTheme: Simple UI Layout

Labels to Render:
- Title: "My Firebase App"
- Status: "Firebase: OK ✅"
- Button: "Start 🚀"

Visual Details:
1. Core Concept: The visual result of the code.
2. Metaphor: A browser window displaying the clean, simple landing page.
3. Action: Displaying.
4. Layout: Browser UI.		## Step C：トップ画面（ページ）を作る⚛️🎨
1221docs/firebase_startdash_ts_study_020.mdfirebase_startdash_ts_study_020_05_init_logic.png./picture/firebase_startdash_ts_study_020_05_init_logic.pngTheme: Initialization Logic

Labels to Render:
- Check: "Env Exists?"
- No: "Return Error ❌"
- Yes: "initializeApp()"
- Catch: "Safe Error ⚠️"

Visual Details:
1. Core Concept: Safe initialization flow avoiding crashes.
2. Metaphor: A flowchart. Start -> Check Env -> If Missing (Stop safely) -> Try Init -> If Crash (Catch safely) -> Success.
3. Action: Flowing.
4. Layout: Flowchart.		### 2) src/lib/firebase.ts を作る🧩
1222docs/firebase_startdash_ts_study_020.mdfirebase_startdash_ts_study_020_06_ai_copy.png./picture/firebase_startdash_ts_study_020_06_ai_copy.pngTheme: AI Copy Assist

Labels to Render:
- User: "Request Copy 💬"
- AI: "Generates Ideas 💡"
- UI: "New Text ✨"

Visual Details:
1. Core Concept: Using AI to generate UI text.
2. Metaphor: A user whispering to a robot, who writes beautiful text on the UI screen.
3. Action: Writing.
4. Layout: Interaction.		## 5) AIを“実務の相棒”にする使い方（今日の範囲）🤖🧠