Skip to main content

image_generation_plan.foundation_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
400docs/firebase_frontend_foundation_ts_index.mdfirebase_frontend_foundation_ts_index_01_app_wireframe.png./picture/firebase_frontend_foundation_ts_index_01_app_wireframe.pngTheme: App Wireframe Overview

Labels to Render:
- Layout: "Sidebar + Header"
- Content: "List / Form"
- Style: "Dashboard"

Visual Details:
1. Core Concept: The overall look of the app.
2. Metaphor: A blueprint or wireframe sketch of a modern dashboard.
3. Action: Planning.
4. Layout: Dashboard UI.		管理画面っぽいWebアプリ（ダッシュボード風）を作ります📊✨
401docs/firebase_frontend_foundation_ts_index.mdfirebase_frontend_foundation_ts_index_02_layout_pattern.png./picture/firebase_frontend_foundation_ts_index_02_layout_pattern.pngTheme: Dashboard Layout Pattern

Labels to Render:
- Left: "Nav"
- Top: "Global Actions"
- Center: "Main Content"

Visual Details:
1. Core Concept: Standard layout regions.
2. Metaphor: A puzzle with 3 main pieces fitting together to form the screen.
3. Action: Assembling.
4. Layout: UI Regions.		### 第01章：ゴールと完成イメージを固める 🗺️✨
402docs/firebase_frontend_foundation_ts_index.mdfirebase_frontend_foundation_ts_index_03_component_tree.png./picture/firebase_frontend_foundation_ts_index_03_component_tree.pngTheme: Component Tree

Labels to Render:
- Root: "App"
- Branch: "Layout"
- Leaf: "Page -> Widget"

Visual Details:
1. Core Concept: React component hierarchy.
2. Metaphor: An inverted tree structure showing components branching out.
3. Action: Branching.
4. Layout: Tree diagram.		### 第02章：プロジェクト雛形を作る ⚡🧱（Vite × React × TypeScript）
403docs/firebase_frontend_foundation_ts_index.mdfirebase_frontend_foundation_ts_index_04_ui_states.png./picture/firebase_frontend_foundation_ts_index_04_ui_states.pngTheme: UI State Variations

Labels to Render:
- Loading: "Spinner"
- Error: "Alert"
- Empty: "No Data"
- Data: "Content"

Visual Details:
1. Core Concept: Handling different data states.
2. Metaphor: A slot machine or carousel showing 4 different faces for the same component.
3. Action: Cycling.
4. Layout: 4 panels.		### 第07章：状態の3点セットを覚える 🔁😵‍💫（loading / error / data）
404docs/firebase_frontend_foundation_ts_index.mdfirebase_frontend_foundation_ts_index_05_central_config.png./picture/firebase_frontend_foundation_ts_index_05_central_config.pngTheme: Centralized Firebase Config

Labels to Render:
- File: "firebase.ts"
- Import: "App / Auth / DB"
- Usage: "Shared Instance"

Visual Details:
1. Core Concept: Single source of truth for Firebase.
2. Metaphor: A power strip (firebase.ts) where all appliances (Components) plug in.
3. Action: Plugging in.
4. Layout: Hub and Spoke.		### 第10章：Firebaseの接続口を1ファイルにまとめる 🔌🔥
405docs/firebase_frontend_foundation_ts_index.mdfirebase_frontend_foundation_ts_index_06_auth_guard.png./picture/firebase_frontend_foundation_ts_index_06_auth_guard.pngTheme: Auth Guard Flow

Labels to Render:
- User: "Guest"
- Guard: "Check Auth"
- Redirect: "Login Page"
- User: "Member" -> "Dashboard"

Visual Details:
1. Core Concept: Protecting routes.
2. Metaphor: A bouncer at a club door. Guests are sent to the line (Login), Members are let in (Dashboard).
3. Action: Checking ID.
4. Layout: Flowchart.		### 第11章：認証状態で画面を切り替える 🔐🚧（ログイン監視 → ガード → ログアウト）
406docs/firebase_frontend_foundation_ts_index.mdfirebase_frontend_foundation_ts_index_07_realtime_sync.png./picture/firebase_frontend_foundation_ts_index_07_realtime_sync.pngTheme: Realtime Sync View

Labels to Render:
- User A: "Update"
- Cloud: "Sync"
- User B: "See Change"

Visual Details:
1. Core Concept: Instant updates across users.
2. Metaphor: Two mirrors reflecting the same object via a beam of light (Cloud).
3. Action: Reflection.
4. Layout: Connection.		### 第14章：リアルタイム更新の気持ちよさを入れる ⚡👀（Firestore購読 onSnapshot 編）
407docs/firebase_frontend_foundation_ts_study_001.mdfirebase_frontend_foundation_ts_study_001_01_standard_flow.png./picture/firebase_frontend_foundation_ts_study_001_01_standard_flow.pngTheme: Standard App Flow

Labels to Render:
- List: "Browse"
- Detail: "Edit"
- Save: "Update"

Visual Details:
1. Core Concept: The typical CRUD flow.
2. Metaphor: A user journey map. Step 1: Pick item. Step 2: Change item. Step 3: Save item.
3. Action: Flowing.
4. Layout: Linear sequence.		この型は、Firestoreに繋いだときもブレないので最強です💪🔥
408docs/firebase_frontend_foundation_ts_study_001.mdfirebase_frontend_foundation_ts_study_001_02_sitemap.png./picture/firebase_frontend_foundation_ts_study_001_02_sitemap.pngTheme: Three Page Site Map

Labels to Render:
- /dashboard: "Overview"
- /items: "List"
- /items/🆔 "Detail"

Visual Details:
1. Core Concept: The 3 main pages.
2. Metaphor: A simple sitemap or org chart showing the 3 nodes.
3. Action: Branching.
4. Layout: Hierarchy.		おすすめの3ページ構成はコレ👇（超王道で迷いません）
409docs/firebase_frontend_foundation_ts_study_001.mdfirebase_frontend_foundation_ts_study_001_03_wireframe.png./picture/firebase_frontend_foundation_ts_study_001_03_wireframe.pngTheme: Screen Layout Wireframe

Labels to Render:
- Sidebar: "Menu"
- Header: "Nav"
- Main: "Content"

Visual Details:
1. Core Concept: The wireframe structure.
2. Metaphor: A pencil sketch of the layout blocks.
3. Action: Sketching.
4. Layout: Wireframe.		“それっぽい枠”だけ先に描くと、実装が爆速になります🚀
410docs/firebase_frontend_foundation_ts_study_001.mdfirebase_frontend_foundation_ts_study_001_04_data_patterns.png./picture/firebase_frontend_foundation_ts_study_001_04_data_patterns.pngTheme: Data Collection Patterns

Labels to Render:
- Blog: "Post / Author / Comment"
- Ticket: "Ticket / User / Msg"
- Shop: "Item / Category / Log"

Visual Details:
1. Core Concept: Three common data schemas.
2. Metaphor: Three recipe cards. Each card lists the ingredients (Collections) for a specific dish (App Type).
3. Action: Choosing.
4. Layout: 3 Cards.		迷ったらこの3パターンから選ぶ（おすすめ）🧠
411docs/firebase_frontend_foundation_ts_study_001.mdfirebase_frontend_foundation_ts_study_001_05_data_ui_map.png./picture/firebase_frontend_foundation_ts_study_001_05_data_ui_map.pngTheme: Data to UI Mapping

Labels to Render:
- DB: "Collection Field"
- Arrow: "Map"
- UI: "Screen Element"

Visual Details:
1. Core Concept: Connecting backend data to frontend UI.
2. Metaphor: Wiring a circuit board. Wires connect the data pins to the display pins.
3. Action: Connecting.
4. Layout: Left-to-right flow.		次のテンプレを埋めてください。
412docs/firebase_frontend_foundation_ts_study_001.mdfirebase_frontend_foundation_ts_study_001_06_safe_ai_call.png./picture/firebase_frontend_foundation_ts_study_001_06_safe_ai_call.pngTheme: Safe AI Call Architecture

Labels to Render:
- Unsafe: "Key in Client ❌"
- Safe: "Firebase SDK (Proxy) ✅"
- Gate: "App Check"

Visual Details:
1. Core Concept: Comparison of unsafe vs safe AI calls.
2. Metaphor: A person handing a house key to a stranger (Unsafe) vs A secure reception desk handling requests (Safe).
3. Action: Protecting.
4. Layout: Comparison.		“キー直置きで叩く”みたいなのは事故りやすいのでやらない🙅‍♂️💥（この教材では安全側で組む）
413docs/firebase_frontend_foundation_ts_study_002.mdfirebase_frontend_foundation_ts_study_002_01_components.png./picture/firebase_frontend_foundation_ts_study_002_01_components.pngTheme: React Components visualization

Labels to Render:
- Header: "ヘッダー"
- Card: "カード"
- Button: "ボタン"
- Component: "コンポーネント"

Visual Details:
A clean UI mockup of a simple dashboard page.
The UI is exploded or annotated to show that each part is a separate block.
Dotted lines or brackets group the "Header" area, a "Card" area, and a "Button" inside the card.
Arrows point from these UI elements to labels "Header", "Card", "Button".
A large bracket or embracing shape labeled "Component" encompasses each of these elements, showing they are all the same fundamental building block.
Flat vector style, blue and teal tones.		ボタン、カード、ヘッダー…全部コンポーネントとして分けられます。
414docs/firebase_frontend_foundation_ts_study_002.mdfirebase_frontend_foundation_ts_study_002_02_state.png./picture/firebase_frontend_foundation_ts_study_002_02_state.pngTheme: React State Mechanism

Labels to Render:
- State: "状態 (State)"
- Update: "更新"
- View: "画面 (View)"
- Data: "データ"

Visual Details:
A circular flow or cycle diagram.
Top: A brain or database icon labeled "State" holding "Data".
Arrow flows clockwise to "View" (a monitor/screen).
Arrow flows from "View" (user action like click) back to "State", triggering "Update".
Visual emphasis on the automatic nature of the update (sparkles or magic dust on the arrow from State to View).
Simple, clean icons.		状態が変わると、Reactがいい感じに画面を更新します🔁✨
415docs/firebase_frontend_foundation_ts_study_002.mdfirebase_frontend_foundation_ts_study_002_03_vite_setup.png./picture/firebase_frontend_foundation_ts_study_002_03_vite_setup.pngTheme: Vite Project Setup Flow

Labels to Render:
- Command: "npm create vite@latest"
- Project Name: "Project Name"
- Framework: "Framework"
- Variant: "Variant"
- React: "React"
- TypeScript: "TypeScript"

Visual Details:
A linear process flow moving left to right.
Step 1: A terminal window showing the command "npm create vite@latest".
Step 2: A branching decision tree or selection menu.
"Project Name" -> Input box.
"Framework" -> Highlighted selection "React".
"Variant" -> Highlighted selection "TypeScript".
The flow ends with a folder icon labeled with the project name.		Variant: TypeScript（または TypeScript + SWC）
416docs/firebase_frontend_foundation_ts_study_002.mdfirebase_frontend_foundation_ts_study_002_04_hmr.png./picture/firebase_frontend_foundation_ts_study_002_04_hmr.pngTheme: Hot Module Replacement (HMR)

Labels to Render:
- Code: "コード編集"
- Save: "保存 (Ctrl+S)"
- Browser: "ブラウザ"
- Instant: "即反映"

Visual Details:
Split screen composition.
Left side: VS Code style editor window with colorful code. A "Save" icon or keyboard shortcut visualization.
Right side: A web browser window displaying a dashboard.
A lightning bolt or fast arrow connects the Left side to the Right side, labeled "Instant".
The browser does NOT show a refresh icon (to imply no reload), but sparkles indicating content update.		保存した瞬間にブラウザが即更新されたら勝ちです✅🎉
417docs/firebase_frontend_foundation_ts_study_002.mdfirebase_frontend_foundation_ts_study_002_05_ai_help.png./picture/firebase_frontend_foundation_ts_study_002_05_ai_help.pngTheme: AI Development Assistance

Labels to Render:
- Developer: "開発者"
- Question: "質問 / エラー"
- AI: "Gemini / AI"
- Solution: "解決策 / コード"

Visual Details:
Interaction between a Developer (person with laptop) and AI (robot or sparkly cloud icon).
Developer sends a speech bubble "Question" (e.g., Error log or "How to?").
AI processes it and returns a "Solution" (Code snippet or fixed file).
A shield or barrier represents the "Anti-gravity" or "Safety" aspect if relevant, but focus on the Q&A loop.
Clean, friendly illustration.		「src/App.tsx を “管理画面っぽい見た目” にして。まずはTailwindなしでOK」
418docs/firebase_frontend_foundation_ts_study_002.mdfirebase_frontend_foundation_ts_study_002_06_troubleshoot.png./picture/firebase_frontend_foundation_ts_study_002_06_troubleshoot.pngTheme: Troubleshooting Common Errors

Labels to Render:
- Error: "エラー発生"
- Node: "Node.js未検出"
- Port: "ポート競合"
- Action: "Geminiに聞く"

Visual Details:
Three warning signs or error popups arranged loosely.
1. "Node" icon with a question mark.
2. "Port 5173" icon with a "Stop" or "Busy" sign.
3. A generic red error terminal.
All three arrows point towards a central solution: An AI icon (Gemini) labeled "Action".
Visualizing that AI is the central hub for solving these different types of issues.		社内/セキュリティでnpmが落ちる → まずはエラー全文をGemini CLIに貼るのが最短です🤖🧯([Google Cloud Documentation][4])
419docs/firebase_frontend_foundation_ts_study_003.mdfirebase_frontend_foundation_ts_study_003_01_dashboard_goal.png./picture/firebase_frontend_foundation_ts_study_003_01_dashboard_goal.pngTheme: Dashboard Goal Visualization

Labels to Render:
- Title: "Dashboard"
- Card 1: "User: 1,248"
- Card 2: "Sales: ¥98,300"
- Card 3: "Error: 0"

Visual Details:
A clean, modern dashboard UI mockup.
Gray background (bg-gray-50).
White header bar.
Centered content area (max-w-5xl).
Three white cards in a row with rounded corners and soft shadows.
Clear typography, showing a "professional" look.		文字サイズと余白が整っていて「それっぽい」😎
420docs/firebase_frontend_foundation_ts_study_003.mdfirebase_frontend_foundation_ts_study_003_02_tailwind_lego.png./picture/firebase_frontend_foundation_ts_study_003_02_tailwind_lego.pngTheme: Tailwind CSS Building Blocks Metaphor

Labels to Render:
- Class 1: "p-6"
- Class 2: "rounded-xl"
- Class 3: "shadow-sm"
- Result: "UI Component"

Visual Details:
Lego-like blocks being stacked.
Block 1 labeled "p-6" (Padding).
Block 2 labeled "rounded-xl" (Border Radius).
Block 3 labeled "shadow-sm" (Shadow).
They stack together to form a completed "Card" UI element labeled "UI Component".
Arrow indicates the assembly process.		例）p-6（余白）＋rounded-xl（角丸）＋shadow-sm（影）…みたいに、レゴ感覚で積んでいきます🧱🧱🧱
421docs/firebase_frontend_foundation_ts_study_003.mdfirebase_frontend_foundation_ts_study_003_03_setup_flow.png./picture/firebase_frontend_foundation_ts_study_003_03_setup_flow.pngTheme: Tailwind Setup Flow

Labels to Render:
- Step 1: "Install"
- Step 2: "Config"
- Step 3: "Import CSS"
- Step 4: "Run Dev"

Visual Details:
Four step process diagram, left to right.
1. Icon of a package box (npm install).
2. Icon of a gear/settings file (vite.config.ts).
3. Icon of a CSS file with an arrow into the App.
4. Icon of a rocket launching (npm run dev).
Connected by arrows.		公式もこの流れ（install → plugin → import → dev）になってます✅([tailwindcss.com][2])
422docs/firebase_frontend_foundation_ts_study_003.mdfirebase_frontend_foundation_ts_study_003_04_grid_layout.png./picture/firebase_frontend_foundation_ts_study_003_04_grid_layout.pngTheme: CSS Grid Layout Visualization

Labels to Render:
- Container: "grid gap-6"
- Column: "md:grid-cols-3"
- Item 1: "Card 1"
- Item 2: "Card 2"
- Item 3: "Card 3"

Visual Details:
Wireframe showing the grid structure.
Dotted lines indicate the invisible grid container.
Arrows indicate the "gap-6" spacing between items.
Three card placeholders perfectly aligned in a row.
Annotation showing "md:grid-cols-3" controlling the 3-column layout.		3列：grid gap-6 md:grid-cols-3 📊
423docs/firebase_frontend_foundation_ts_study_003.mdfirebase_frontend_foundation_ts_study_003_05_dynamic_class.png./picture/firebase_frontend_foundation_ts_study_003_05_dynamic_class.pngTheme: Dynamic Class Name Pitfall

Labels to Render:
- Bad: "NG ❌"
- Code Bad: "bg-${color}-500"
- Good: "OK ✅"
- Code Good: "{ red: 'bg-red-500' }"
- Scanner: "Tailwind Scanner"

Visual Details:
Comparison between two code approaches.
Top (Red/Bad): "bg-${color}-500". A robot eye (Tailwind Scanner) looks confused/blind to it.
Bottom (Green/Good): A full object map. The robot eye clearly sees and picks up the classes.
Visualizing that string interpolation hides classes from the build tool.		代わりに👇みたいに 静的な候補をマップにしましょう✅([tailwindcss.com][1])
424docs/firebase_frontend_foundation_ts_study_003.mdfirebase_frontend_foundation_ts_study_003_06_ai_styling.png./picture/firebase_frontend_foundation_ts_study_003_06_ai_styling.pngTheme: AI Assisted Styling

Labels to Render:
- Input: "Make it professional"
- AI: "Gemini"
- Output: "Polished UI"
- Code: "Tailwind Classes"

Visual Details:
A "Before" and "After" transformation driven by AI.
Left: A plain, ugly HTML button.
Arrow through an AI brain/sparkle icon.
Right: A beautiful, styled button with shadow and gradient.
Code snippet floating nearby showing the added Tailwind classes.
User's command "Make it professional" feeding into the AI.		「差分を小さくして、App.tsx だけ変更で」🧩
425docs/firebase_frontend_foundation_ts_study_004.mdfirebase_frontend_foundation_ts_study_004_01_routing_concept.png./picture/firebase_frontend_foundation_ts_study_004_01_routing_concept.pngTheme: SPA Routing Concept

Labels to Render:
- URL 1: "/dashboard"
- URL 2: "/users"
- View 1: "Dashboard UI"
- View 2: "User List UI"
- Router: "Router"

Visual Details:
A diagram showing the mapping between URL and View.
Top: Browser Address Bar changing from "/dashboard" to "/users".
Middle: A "Router" gear or signpost processing the URL.
Bottom: The Main Content Area switching from "Dashboard UI" to "User List UI".
Emphasis that the "Frame" (Header/Sidebar) stays static while the content swaps.		つまり URL＝アプリの状態 です（どの画面を見てるか、どのユーザーを開いてるか、など）📌
426docs/firebase_frontend_foundation_ts_study_004.mdfirebase_frontend_foundation_ts_study_004_02_layout_outlet.png./picture/firebase_frontend_foundation_ts_study_004_02_layout_outlet.pngTheme: React Router Outlet Visualization

Labels to Render:
- Parent: "AppShell (Parent)"
- Outlet: ""
- Child: "Page Content (Child)"
- Result: "Combined View"

Visual Details:
A visual equation or assembly diagram.
"AppShell" is a frame with a hole in the middle labeled "".
"Page Content" is a block that fits perfectly into that hole.
Arrow points to the "Result", showing the Page Content securely inside the AppShell frame.		React Routerは 親（枠）＋子（ページ） を Outlet で合成できます。([reactrouter.com][2])
427docs/firebase_frontend_foundation_ts_study_004.mdfirebase_frontend_foundation_ts_study_004_03_router_tree.png./picture/firebase_frontend_foundation_ts_study_004_03_router_tree.pngTheme: Router Configuration Tree

Labels to Render:
- Root: "/" (AppShell)
- Child 1: "dashboard"
- Child 2: "users"
- Child 3: "settings"
- Child 4: "" (404)

Visual Details:
A tree structure diagram representing the route config.
Top Node: "AppShell" (Layout Route).
Branches coming down to:
- "dashboard" (Index)
- "users"
- "settings"
- "" (NotFound)
Visualizing the hierarchy where AppShell wraps all these pages.		さらに、pathなしの親ルートを使うと「URLを増やさずに枠だけ作る（Layout Route）」ができます。([reactrouter.com][3])
428docs/firebase_frontend_foundation_ts_study_004.mdfirebase_frontend_foundation_ts_study_004_04_dynamic_route.png./picture/firebase_frontend_foundation_ts_study_004_04_dynamic_route.pngTheme: Dynamic Route Parameter

Labels to Render:
- URL: "/users/u001"
- Capture: ":userId"
- Component: "UserDetailPage"
- Prop: "userId = 'u001'"

Visual Details:
Flow diagram of extracting a parameter.
Left: URL "/users/u001".
Middle: A "Capture" mechanism highlighting "u001" corresponding to the ":userId" pattern.
Right: The "UserDetailPage" component receiving "u001" as a value.
Arrow showing the data flowing from the URL into the component props/hooks.		userId: {userId}
429docs/firebase_frontend_foundation_ts_study_004.mdfirebase_frontend_foundation_ts_study_004_05_hosting_rewrite.png./picture/firebase_frontend_foundation_ts_study_004_05_hosting_rewrite.pngTheme: SPA Hosting Rewrite Rule

Labels to Render:
- User Request: "/users"
- Server: "Firebase Hosting"
- File: "index.html"
- Browser: "React Router"

Visual Details:
Sequence of events for a direct link access.
1. "User Request" asks for "/users".
2. "Server" (Hosting) does NOT have a "users.html", so it serves "index.html" (rewrites).
3. "Browser" loads "index.html", starts React.
4. "React Router" inside the browser looks at the URL "/users" and renders the correct page.
Visualizing the "Fallback to index.html" concept.		解決は「どのURLで来ても index.html を返す」設定にします。
430docs/firebase_frontend_foundation_ts_study_005.mdfirebase_frontend_foundation_ts_study_005_01_appshell_struct.png./picture/firebase_frontend_foundation_ts_study_005_01_appshell_struct.pngTheme: AppShell Structure Diagram

Labels to Render:
- Sidebar: "Sidebar (Fixed)"
- Topbar: "Topbar (Fixed)"
- Main: "Main Content (Scrollable)"
- Screen: "h-screen"

Visual Details:
A wireframe layout diagram.
Left column: "Sidebar".
Top row (next to sidebar): "Topbar".
Remaining area: "Main Content".
Arrows indicate that Sidebar and Topbar are "pinned" or "fixed".
A scroll icon inside the "Main Content" area showing vertical scrolling.
Outer frame labeled "h-screen" covering the entire view.		main にだけ overflow-y-auto → スクロールが迷子にならない🌀
431docs/firebase_frontend_foundation_ts_study_005.mdfirebase_frontend_foundation_ts_study_005_02_sidebar_visual.png./picture/firebase_frontend_foundation_ts_study_005_02_sidebar_visual.pngTheme: Sidebar Navigation Component

Labels to Render:
- App Name: "My Admin"
- Link 1: "Dashboard"
- Link 2: "Users" (Active)
- Link 3: "Settings"
- Active State: "Active Style"

Visual Details:
Closeup of the sidebar component.
"Users" link is highlighted (e.g., dark background, white text) to show the "Active State".
"Dashboard" and "Settings" are in normal state (gray text).
Mouse cursor hovering over "Settings" showing a hover effect.
Visualizing the isActive prop result.		NavLink の isActive で「今どこ？」が一発で分かる🚩
432docs/firebase_frontend_foundation_ts_study_005.mdfirebase_frontend_foundation_ts_study_005_03_topbar_visual.png./picture/firebase_frontend_foundation_ts_study_005_03_topbar_visual.pngTheme: Topbar Component Visual

Labels to Render:
- Menu: "☰"
- Title: "管理画面"
- AI Button: "🤖 AI"
- User: "User Icon"
- Effect: "Backdrop Blur"

Visual Details:
Closeup of the top header bar.
Left: Hamburger menu icon and Title.
Right: "AI" button and a circular User Avatar.
Background is semi-transparent white with a "blur" distortion effect visible on the content passing behind it.
Label "Backdrop Blur" pointing to the background texture.		sticky + blur で「上に張り付く管理画面感」が出ます🧊✨
433docs/firebase_frontend_foundation_ts_study_005.mdfirebase_frontend_foundation_ts_study_005_04_nested_route.png./picture/firebase_frontend_foundation_ts_study_005_04_nested_route.pngTheme: Nested Routing Architecture

Labels to Render:
- Parent: ""
- Children: "children: [...]"
- Route 1: ""
- Route 2: ""
- Route 3: ""

Visual Details:
Hierarchical diagram.
Top box: "".
Three arrows branching down to child boxes: "DashboardPage", "UsersPage", "SettingsPage".
Visualizing that AppShell wraps these pages.
Similar to a family tree or folder structure.		AppShell を親にして children にページを入れます。
434docs/firebase_frontend_foundation_ts_study_005.mdfirebase_frontend_foundation_ts_study_005_05_layout_bugs.png./picture/firebase_frontend_foundation_ts_study_005_05_layout_bugs.pngTheme: Common Layout CSS Bugs

Labels to Render:
- Bug 1: "Double Scroll"
- Bug 2: "Overflow X"
- Solution: "flex-1 min-w-0"

Visual Details:
Two "Bad" examples and one "Good" example.
Bad 1: A screen with two vertical scrollbars (Double Scroll).
Bad 2: A screen with a horizontal scrollbar breaking the layout (Overflow X).
Good: A clean layout with a single scrollbar.
Text "flex-1 min-w-0" acting as a band-aid or fix tool applied to the Good layout.		（この章のコードはそれを入れてます😺）
435docs/firebase_frontend_foundation_ts_study_006.mdfirebase_frontend_foundation_ts_study_006_01_folder_struct.png./picture/firebase_frontend_foundation_ts_study_006_01_folder_struct.pngTheme: Project Folder Structure

Labels to Render:
- Root: "src/"
- Folder 1: "pages"
- Folder 2: "components"
- Folder 3: "services"
- Arrow: "Organized"

Visual Details:
Tree diagram of the folder structure.
"src" at the top.
Branches to "pages", "components", "services".
Each folder has an icon (page for pages, puzzle piece for components, cloud/plug for services).
A checkmark or "Organized" label showing this is a clean, scalable structure.		後の章で Firestore / Storage / AI（Firebase AI Logic） を足していくときに、迷子にならない構造にする🧭
436docs/firebase_frontend_foundation_ts_study_006.mdfirebase_frontend_foundation_ts_study_006_02_four_boxes.png./picture/firebase_frontend_foundation_ts_study_006_02_four_boxes.pngTheme: The Four Boxes Rule

Labels to Render:
- Box 1: "pages (Routing)"
- Box 2: "components (UI)"
- Box 3: "hooks (Logic)"
- Box 4: "services (External)"

Visual Details:
Four distinct boxes or bins arranged in a 2x2 grid.
Box 1: "pages" with a map/route icon.
Box 2: "components" with a lego block icon.
Box 3: "hooks" with a hook or gear icon.
Box 4: "services" with a cloud/lightning icon.
Visual guide for sorting code into these categories.		ここにまとめると、UI側がスッキリして事故が減ります💥
437docs/firebase_frontend_foundation_ts_study_006.mdfirebase_frontend_foundation_ts_study_006_03_button_variants.png./picture/firebase_frontend_foundation_ts_study_006_03_button_variants.pngTheme: Button Component Variants

Labels to Render:
- Primary: "Primary"
- Secondary: "Secondary"
- Danger: "Danger"
- Loading: "Loading..."

Visual Details:
Showcase of the Button component.
Row 1: Blue button labeled "Primary".
Row 2: Gray button labeled "Secondary".
Row 3: Red button labeled "Danger".
Row 4: Faded button with a spinner labeled "Loading...".
Clean, flat design matching Tailwind defaults (blue-600, slate-200, red-600).		children と props の受け渡しが基本動作です（Reactの基本）🙂([React][1])
438docs/firebase_frontend_foundation_ts_study_006.mdfirebase_frontend_foundation_ts_study_006_04_input_states.png./picture/firebase_frontend_foundation_ts_study_006_04_input_states.pngTheme: Input Component States

Labels to Render:
- Label: "Email Address"
- Input: "user@example.com"
- Error Label: "Invalid email"
- Error State: "Red Border"

Visual Details:
Two input fields.
Top: Normal state. Label "Email Address", input box with text, gray border.
Bottom: Error state. Label "Email Address", input box with text, Red border, and small red error message "Invalid email" below it.
Visualizing how the error prop changes the appearance.		## Step 5：Card（共通部品）🪪✨
439docs/firebase_frontend_foundation_ts_study_006.mdfirebase_frontend_foundation_ts_study_006_05_card_structure.png./picture/firebase_frontend_foundation_ts_study_006_05_card_structure.pngTheme: Card Component Structure

Labels to Render:
- Container: "Card"
- Header: "CardTitle"
- Body: "CardBody"
- Shadow: "Shadow"

Visual Details:
Exploded view of a Card component.
Outer box labeled "Card" (Container) with shadow.
Inner top section labeled "CardTitle" (Header).
Inner bottom section labeled "CardBody" (Content).
Showing how these sub-components nest together to form the UI.		## Step 6：まとめてexport（使う側が楽になる）📦
440docs/firebase_frontend_foundation_ts_study_006.mdfirebase_frontend_foundation_ts_study_006_06_path_alias.png./picture/firebase_frontend_foundation_ts_study_006_06_path_alias.pngTheme: Path Alias Visual

Labels to Render:
- Bad: "../../components/ui/Button"
- Good: "@/components/ui/Button"
- Alias: "@ = src"

Visual Details:
Comparison of import paths.
Left: "Bad" path with messy ../../.. dots. Red X or "Messy" label.
Right: "Good" path using @/. Green Check or "Clean" label.
A key or legend showing @ maps to src folder.		これで @/components/ui みたいに書けます🎉
441docs/firebase_frontend_foundation_ts_study_007.mdfirebase_frontend_foundation_ts_study_007_three_states_concept.png./picture/firebase_frontend_foundation_ts_study_007_three_states_concept.pngTheme: Four Core UI States (Loading, Error, Data, Empty)

Labels to Render:
- Loading: "読み込み中"
- Error: "失敗"
- Data: "成功（データあり）"
- Empty: "0件"

Visual Details:
Four distinct cards or panels arranged in a grid or row.
1. Loading: A simple spinner icon with a clock or hourglass.
2. Error: A warning triangle or cross mark, red accent.
3. Data: A list or grid of items (like a user list), green accent.
4. Empty: An empty box or a ghost icon, grey accent.
Arrows showing transitions between states (e.g., Loading -> Data, Loading -> Error).		なので、画面はこの4状態を最低限持つのが強いです💪
442docs/firebase_frontend_foundation_ts_study_007.mdfirebase_frontend_foundation_ts_study_007_async_state_type.png./picture/firebase_frontend_foundation_ts_study_007_async_state_type.pngTheme: AsyncState Union Type Structure

Labels to Render:
- Union Type: "AsyncState"
- Idle: "idle (初期)"
- Loading: "loading (読み込み中)"
- Success: "success (成功)"
- Error: "error (失敗)"

Visual Details:
A diagram showing a central "AsyncState" block branching into four distinct shapes representing the union members.
1. Idle: Empty or initial state icon.
2. Loading: Spinner icon, optionally showing data?: T (previous data).
3. Success: Checkmark icon, holding data: T.
4. Error: Cross icon, holding error: Error.
Clean lines connecting the central type to the variants.		// src/types/asyncState.ts
443docs/firebase_frontend_foundation_ts_study_007.mdfirebase_frontend_foundation_ts_study_007_use_async_flow.png./picture/firebase_frontend_foundation_ts_study_007_use_async_flow.pngTheme: useAsync Hook Execution Flow

Labels to Render:
- Hook: "useAsync"
- Action: "run()"
- State: "loading"
- Result: "success / error"
- Safety: "runId Check"

Visual Details:
A flowchart representing the run function.
1. Start with run() call.
2. Set state to loading (keeping prev data).
3. Async Promise execution (dotted line).
4. Critical Check: Diamond shape for runId === current.
5. If Match: Update state to success or error.
6. If Mismatch: Discard (trash can icon).		// src/hooks/useAsync.ts
444docs/firebase_frontend_foundation_ts_study_007.mdfirebase_frontend_foundation_ts_study_007_ui_components.png./picture/firebase_frontend_foundation_ts_study_007_ui_components.pngTheme: Three UI Components (Spinner, ErrorPanel, EmptyState)

Labels to Render:
- Component 1: "Spinner"
- Component 2: "ErrorPanel"
- Component 3: "EmptyState"

Visual Details:
Three component mocks displayed side-by-side.
1. Spinner: A simple loading indicator with text "読み込み中...".
2. ErrorPanel: A red-tinted box with an error message and a "Retry" button.
3. EmptyState: A clean, empty box with a friendly message "0件です".
Show them as reusable LEGO blocks or UI widgets.		## 手を動かす🛠️：表示部品を3つ作る（Spinner / Error / Empty）🧩
445docs/firebase_frontend_foundation_ts_study_007.mdfirebase_frontend_foundation_ts_study_007_users_page_demo.png./picture/firebase_frontend_foundation_ts_study_007_users_page_demo.pngTheme: UsersPage Demo UI

Labels to Render:
- Header: "ユーザー一覧 (Users)"
- Buttons: "成功", "0件", "失敗"
- List: "Alice", "Bob"

Visual Details:
A mock UI of the UsersPage.
Top section: Three buttons labeled "Success", "Empty", "Error" to manually switch states.
Main area: A list of users (Alice, Bob) with their details.
Callout bubbles pointing to the buttons saying "Test States Here".		// src/pages/UsersPage.tsx
446docs/firebase_frontend_foundation_ts_study_007.mdfirebase_frontend_foundation_ts_study_007_react_transition.png./picture/firebase_frontend_foundation_ts_study_007_react_transition.pngTheme: useTransition Pending State

Labels to Render:
- Button: "保存中..." (Saving...)
- State: "isPending: true"
- UI: "Disabled + Opacity"

Visual Details:
Visualizing the useTransition effect on a button.
Left: A normal "Save" button.
Right: The same button in "Pending" state (greyed out, spinner icon, "Saving..." text).
An arrow labeled startTransition connecting them.		## 追加で強くなる📌：保存ボタンの “pending” をReact 19で気持ちよくする🧠✨
447docs/firebase_frontend_foundation_ts_study_007.mdfirebase_frontend_foundation_ts_study_007_ai_error_explain.png./picture/firebase_frontend_foundation_ts_study_007_ai_error_explain.pngTheme: AI Error Explanation Flow

Labels to Render:
- Error: "Cryptic Error Message"
- Action: "AI Explain Button"
- AI: "Gemini Robot"
- Result: "Friendly Japanese Text"

Visual Details:
A linear process flow.
1. Input: A complex code error message block.
2. Trigger: A user clicking a button "AIでわかりやすくする".
3. Process: A Gemini robot icon thinking.
4. Output: A speech bubble with clear, simple Japanese text explaining the error.		## AIも同じ3点セットで扱う🤖✨（エラー文を“人間語”にする）
448docs/firebase_frontend_foundation_ts_study_008.mdfirebase_frontend_foundation_ts_study_008_form_validation_flow.png./picture/firebase_frontend_foundation_ts_study_008_form_validation_flow.pngTheme: Form Validation Process Flow

Labels to Render:
- Input: "Input (入力)"
- Validate: "Validation (検証)"
- Error: "Error Display (エラー表示)"
- Save: "Save (保存)"

Visual Details:
A linear process diagram.
1. User typing in a box.
2. Arrow to a magnifying glass/ruler icon (Validation).
3. Branch:
- If Fail: Red arrow to an error popup.
- If Pass: Green arrow to a floppy disk icon (Save).		「入力 → 検証 → エラー表示 → 保存」が、気持ちよく一通りできるフォームを完成させます😆
449docs/firebase_frontend_foundation_ts_study_008.mdfirebase_frontend_foundation_ts_study_008_tech_stack.png./picture/firebase_frontend_foundation_ts_study_008_tech_stack.pngTheme: Form Technology Stack

Labels to Render:
- Manager: "React Hook Form"
- Rules: "Zod"
- Bridge: "hookform/resolvers"

Visual Details:
A diagram showing how the three libraries interact.
- React Hook Form as the central engine block.
- Zod as a rule book or scroll.
- hookform/resolvers as a connector cable or bridge joining Zod to RHF.		今回のおすすめ構成（2026の王道）🏆
450docs/firebase_frontend_foundation_ts_study_008.mdfirebase_frontend_foundation_ts_study_008_zod_schema.png./picture/firebase_frontend_foundation_ts_study_008_zod_schema.pngTheme: Zod Schema Visualization

Labels to Render:
- Schema: "profileSchema"
- Name: "displayName (min 1, max 30)"
- Email: "email (email format)"
- Bio: "bio (max 200)"

Visual Details:
A document metaphor representing the Zod schema.
Lines pointing to specific fields with their constraints (ruler for length, envelope for email).
Visualizing the "Single Source of Truth" concept.		// src/features/profile/profileSchema.ts
451docs/firebase_frontend_foundation_ts_study_008.mdfirebase_frontend_foundation_ts_study_008_form_ui_state.png./picture/firebase_frontend_foundation_ts_study_008_form_ui_state.pngTheme: Form UI Validation States

Labels to Render:
- Normal: "Normal"
- Error: "Error (Required)"
- Success: "Success"

Visual Details:
Three input fields stacked vertically showing different states.
1. Normal: Grey border, placeholder text.
2. Error: Red border, red error text "Required field", warning icon.
3. Success: Green border or checkmark icon.		React Hook FormにZodをつなぐ 🔌
452docs/firebase_frontend_foundation_ts_study_008.mdfirebase_frontend_foundation_ts_study_008_button_logic.png./picture/firebase_frontend_foundation_ts_study_008_button_logic.pngTheme: Button Enable Logic

Labels to Render:
- Input: "Input Changed? (isDirty)"
- Valid: "No Errors? (isValid)"
- Idle: "Not Saving? (!isSubmitting)"
- Result: "Enable Button"

Visual Details:
A logic gate diagram (AND gate).
Three inputs feeding into an AND gate.
1. isDirty (Yes)
2. isValid (Yes)
3. !isSubmitting (Yes)
Output: Light bulb or enabled button "Save".		// ヒント💡：保存ボタンは「変更あり」かつ「エラーなし」の時だけ押せるようにしてます🙂
453docs/firebase_frontend_foundation_ts_study_008.mdfirebase_frontend_foundation_ts_study_008_validation_modes.png./picture/firebase_frontend_foundation_ts_study_008_validation_modes.pngTheme: Validation Trigger Modes

Labels to Render:
- Mode: "onBlur vs onChange"
- User Action: "Typing... Click Away"
- Trigger: "Check!"

Visual Details:
A timeline comparing two modes.
Top (onBlur): User types (no check) -> User clicks outside (CHECK!).
Bottom (onChange): User types (CHECK! CHECK! CHECK!).
Highlighting onBlur as "Gentle" and onChange as "Real-time".		① エラーが出ないんだけど？
454docs/firebase_frontend_foundation_ts_study_008.mdfirebase_frontend_foundation_ts_study_008_ai_bio_rewrite.png./picture/firebase_frontend_foundation_ts_study_008_ai_bio_rewrite.pngTheme: AI Text Refinement

Labels to Render:
- Input: "Messy Text"
- Agent: "AI Robot"
- Action: "Rewrite / Polish"
- Output: "Clean, Polite Text"

Visual Details:
Transformation process.
Left: A notepad with scribbled, messy text.
Center: A cute robot with a magic wand or pen.
Right: A document with perfectly aligned, clean text.
Arrow showing the flow from Left to Right through the Robot.		## 例：AIで自己紹介を整形して、入力欄に反映する🪄
455docs/firebase_frontend_foundation_ts_study_009.mdfirebase_frontend_foundation_ts_study_009_design_pillars.png./picture/firebase_frontend_foundation_ts_study_009_design_pillars.pngTheme: Three Pillars of UI Consistency

Labels to Render:
- Pillar 1: "Design Tokens (色/形)"
- Pillar 2: "Components (部品)"
- Pillar 3: "States (状態)"
- Roof: "Consistent App (一貫性)"

Visual Details:
A Greek temple structure.
Three columns supporting a roof.
Each column labeled with one of the pillars.
The structure represents a stable, professional application.		0) まず結論：一貫性は “3点セット” で作る 🧰✨
456docs/firebase_frontend_foundation_ts_study_009.mdfirebase_frontend_foundation_ts_study_009_tailwind_theme.png./picture/firebase_frontend_foundation_ts_study_009_tailwind_theme.pngTheme: Tailwind v4 Theme Config

Labels to Render:
- Config: "@theme"
- Color: "--color-primary: #4f7cff"
- Radius: "--radius-card: 1rem"
- Class: "bg-primary"

Visual Details:
A conceptual mapping diagram.
Left: CSS variables definition in a code block style.
Right: Tailwind utility classes.
Arrows mapping the variables to the classes (e.g., --color-primary -> bg-primary).		2) Tailwind v4 の @theme で “色と角丸と影” を1か所に集約 🧩✨
457docs/firebase_frontend_foundation_ts_study_009.mdfirebase_frontend_foundation_ts_study_009_button_variants.png./picture/firebase_frontend_foundation_ts_study_009_button_variants.pngTheme: Button Variants

Labels to Render:
- Primary: "Main Action" (Blue)
- Secondary: "Sub Action" (Dark Blue/Grey)
- Danger: "Delete" (Red)

Visual Details:
Three button designs displayed in a row.
1. Primary: Solid blue background, white text.
2. Secondary: Dark background, light text (less prominent).
3. Danger: Red background, white text.
Show them as a standard set.		3) “ボタン3兄弟” を共通コンポーネントで固定する 🔘🔘🔘
458docs/firebase_frontend_foundation_ts_study_009.mdfirebase_frontend_foundation_ts_study_009_ui_states.png./picture/firebase_frontend_foundation_ts_study_009_ui_states.pngTheme: UI Interactive States

Labels to Render:
- State: "Hover / Focus / Disabled / Loading"
- Feedback: "Visual Change"

Visual Details:
A matrix of the same button in different states.
- Hover: Slightly lighter color, cursor hand.
- Focus: Blue ring around the button.
- Disabled: Faded opacity, 'not allowed' cursor.
- Loading: Spinner inside the button replacing text.		4) “状態の見た目” を統一する（ここがUIの格を上げる）🚦✨
459docs/firebase_frontend_foundation_ts_study_009.mdfirebase_frontend_foundation_ts_study_009_antigravity_check.png./picture/firebase_frontend_foundation_ts_study_009_antigravity_check.pngTheme: AI Consistency Check (Antigravity/Gemini)

Labels to Render:
- Input: "Codebase (React + Tailwind)"
- Agent: "Antigravity Agent"
- Output: "Inconsistent Colors List"
- Action: "Fix PR"

Visual Details:
A futuristic scene.
A floating "Mission Control" screen scanning lines of code.
Red dots highlighting inconsistencies (e.g., #4f7cff vs #4e7bff).
An agent robot generating a fix report.		## Antigravity（エージェントIDE）でできること 🧠✨
460docs/firebase_frontend_foundation_ts_study_009.mdfirebase_frontend_foundation_ts_study_009_ui_guide_page.png./picture/firebase_frontend_foundation_ts_study_009_ui_guide_page.pngTheme: UI Style Guide Page Layout

Labels to Render:
- Header: "UI Guide"
- Section 1: "Colors (Palette)"
- Section 2: "Typography (Aa)"
- Section 3: "Buttons (Primary, Danger)"

Visual Details:
A wireframe or mock of a documentation page.
Clean layout showing a color palette grid, font examples, and component instances.
Resembles a professional design system doc (like Material Design or Radix UI).		## ミニ課題 🎯：UIガイドページを作って、3種ボタンを並べる 📚✨
461docs/firebase_frontend_foundation_ts_study_009.mdfirebase_frontend_foundation_ts_study_009_ai_loading_state.png./picture/firebase_frontend_foundation_ts_study_009_ai_loading_state.pngTheme: AI Loading State UI

Labels to Render:
- User: "Generate!"
- UI: "Thinking... (Spinner)"
- Feeling: "Not Frozen"

Visual Details:
Split screen comparison.
Left (Bad): App freezes, no feedback. User looks confused.
Right (Good): Button shows spinner, text says "Thinking...", rest of UI is dimmed but visible. User looks calm.		> 🔥 Firebase AIを入れる時、AI生成中がいちばんユーザー不安になります
462docs/firebase_frontend_foundation_ts_study_010.mdfirebase_frontend_foundation_ts_study_010_centralized_config.png./picture/firebase_frontend_foundation_ts_study_010_centralized_config.pngTheme: Centralized Firebase Configuration

Labels to Render:
- Center: "firebase.ts"
- Service 1: "Auth"
- Service 2: "Firestore"
- Service 3: "Functions"
- Usage: "Pages / Components"

Visual Details:
A hub-and-spoke diagram.
Central node is firebase.ts.
Spokes connecting to various services (Auth, DB, Storage).
Arrows flowing OUT to "Pages" and "Components", showing they all consume from this one source.		「Firebaseを使うための入口」を 1つのファイル（例：firebase.ts）に集約して、どこからでも同じインスタンスを使える状態にします🙂✨
463docs/firebase_frontend_foundation_ts_study_010.mdfirebase_frontend_foundation_ts_study_010_tree_shaking.png./picture/firebase_frontend_foundation_ts_study_010_tree_shaking.pngTheme: Tree Shaking Concept

Labels to Render:
- Tree: "SDK Bundle"
- Falling Leaves: "Unused Code"
- Fruit: "Used Functions (getAuth, getFirestore)"
- Basket: "App Bundle"

Visual Details:
A tree being shaken.
Brown leaves (unused modules) falling to the ground.
Shiny fruits (imported functions) landing in a basket labeled "App".
Visualizes import { getAuth } vs import firebase.		## ✅ 理由2：必要なものだけ import して軽くできる（Tree Shaking）🌲
464docs/firebase_frontend_foundation_ts_study_010.mdfirebase_frontend_foundation_ts_study_010_env_flow.png./picture/firebase_frontend_foundation_ts_study_010_env_flow.pngTheme: Environment Variable Flow

Labels to Render:
- File: ".env.local"
- Loader: "Vite"
- Code: "import.meta.env"
- Config: "firebaseConfig"

Visual Details:
A data flow pipeline.
1. Text file icon .env.local containing secrets.
2. Lightning bolt icon (Vite) processing it.
3. Code snippet showing import.meta.env.VITE_KEY.
4. Object block firebaseConfig being filled.		## 1) env を用意する（Vite流）🌱
465docs/firebase_frontend_foundation_ts_study_010.mdfirebase_frontend_foundation_ts_study_010_env_type_safety.png./picture/firebase_frontend_foundation_ts_study_010_env_type_safety.pngTheme: TypeScript Env Autocomplete

Labels to Render:
- Editor: "VS Code"
- Code: "import.meta.env."
- Popup: "VITE_FIREBASE_API_KEY"
- File: "vite-env.d.ts"

Visual Details:
A screenshot-like mockup of a code editor.
User typing import.meta.env. and an autocomplete dropdown appearing with the correct environment variables.
A background file vite-env.d.ts glowing, indicating it provides the types.		## 2) envをTypeScriptで補完する（地味に神）✨
466docs/firebase_frontend_foundation_ts_study_010.mdfirebase_frontend_foundation_ts_study_010_init_check.png./picture/firebase_frontend_foundation_ts_study_010_init_check.pngTheme: Singleton Initialization Pattern

Labels to Render:
- Question: "Initialized?"
- Yes: "getApp()"
- No: "initializeApp()"
- Result: "Single Instance"

Visual Details:
A flowchart for the initialization logic.
Start -> Diamond "Apps Length > 0?".
Yes -> Box "Use Existing App".
No -> Box "Create New App".
Both paths merge to "Export App".		// ✅ 初期化は1回だけ（ViteのHMRでも二重初期化を避ける）
467docs/firebase_frontend_foundation_ts_study_010.mdfirebase_frontend_foundation_ts_study_010_ai_integration.png./picture/firebase_frontend_foundation_ts_study_010_ai_integration.pngTheme: Adding AI to the Power Strip

Labels to Render:
- Strip: "firebase.ts"
- Plugs: "Auth, DB, Storage"
- New Plug: "AI (Gemini)"
- Action: "Plug In!"

Visual Details:
A power strip metaphor.
Existing plugs (Auth, DB) are connected.
A hand holding a new plug labeled "AI" ready to insert into the strip.
Visualizes how easy it is to extend the centralized config.		## ✅ AI Logic を“後で足す”前提の設計にする
468docs/firebase_frontend_foundation_ts_study_010.mdfirebase_frontend_foundation_ts_study_010_antigravity_env.png./picture/firebase_frontend_foundation_ts_study_010_antigravity_env.pngTheme: AI Generating Type Definitions

Labels to Render:
- Input: ".env.local"
- Agent: "Gemini CLI"
- Output: "vite-env.d.ts"
- Action: "Auto-Generate"

Visual Details:
A magic transformation.
Left: A rough .env file.
Center: Gemini logo/sparkles.
Right: A clean TypeScript definition file.
Caption: "1-Click Type Safety".		## Antigravity / Gemini CLI 活用（この章で効くやつ）🤖⚡
469docs/firebase_frontend_foundation_ts_study_011.mdfirebase_frontend_foundation_ts_study_011_auth_state_timeline.png./picture/firebase_frontend_foundation_ts_study_011_auth_state_timeline.pngTheme: Auth State Initialization Timeline

Labels to Render:
- Start: "App Load"
- Phase 1: "Auth Initializing (User: unknown)"
- Event: "onAuthStateChanged"
- Phase 2: "Auth Ready (User: null or object)"

Visual Details:
A timeline chart.
Time 0: "App Start".
Time 0 to T1: Grey zone labeled "Uncertainty (Don't redirect yet!)".
T1: A lightning bolt or flag "Callback Fires".
Time T1+: Green zone "Safe to Check Auth".
Visualizes why ready flag is needed.		## まず超重要：認証は“最初の数瞬”だけ不確定 😵‍💫
470docs/firebase_frontend_foundation_ts_study_011.mdfirebase_frontend_foundation_ts_study_011_auth_provider.png./picture/firebase_frontend_foundation_ts_study_011_auth_provider.pngTheme: AuthProvider Architecture

Labels to Render:
- Context: "AuthProvider"
- State: "user, ready"
- Children: "Pages / Components"
- Flow: "Broadcast"

Visual Details:
A diagram showing AuthProvider as a cloud or umbrella covering the entire component tree.
Raindrops or signals (user data) falling down to child components.
Shows that useAuth() can be called anywhere under the umbrella.		## Step 1：AuthProvider を作る（“配給所”）📦👑
471docs/firebase_frontend_foundation_ts_study_011.mdfirebase_frontend_foundation_ts_study_011_protected_route_logic.png./picture/firebase_frontend_foundation_ts_study_011_protected_route_logic.pngTheme: Protected Route Logic Flow

Labels to Render:
- Input: "Access /dashboard"
- Check 1: "Ready?"
- No: "Spinner ⏳"
- Yes: "Authed?"
- No: "Redirect /login 🚧"
- Yes: "Show Page 🎉"

Visual Details:
A clear flowchart.
Start point at the top.
First diamond: "Is Ready?".
Second diamond: "Is Authed?".
Three terminal states: Loading Spinner, Login Page, Dashboard.		## Step 2：ルートガード（ProtectedRoute）を作る 🚧🛡️
472docs/firebase_frontend_foundation_ts_study_011.mdfirebase_frontend_foundation_ts_study_011_login_flow.png./picture/firebase_frontend_foundation_ts_study_011_login_flow.pngTheme: Login Page Process

Labels to Render:
- User: "Enter Creds"
- Action: "Click Login"
- API: "signInWithEmailAndPassword"
- Success: "Redirect to 'from'"

Visual Details:
A user journey map.
Step 1: Form input.
Step 2: Firebase logo processing.
Step 3: Green checkmark.
Step 4: Automatic navigation back to the dashboard.		## Step 4：LoginPage を作る（ログイン後に元のページへ戻す）🔐↩️
473docs/firebase_frontend_foundation_ts_study_011.mdfirebase_frontend_foundation_ts_study_011_persistence_types.png./picture/firebase_frontend_foundation_ts_study_011_persistence_types.pngTheme: Auth Persistence Modes

Labels to Render:
- Local: "HDD Icon (Persistent)"
- Session: "Tab Icon (Temporary)"
- None: "Memory Icon (Volatile)"

Visual Details:
Comparison of three storage types.
1. Local: A safe or hard drive. Stays after restart.
2. Session: A browser tab. Disappears when closed.
3. None: A thought bubble. Disappears on reload.		## 「保持（Persistence）」の超ざっくり 🧠
474docs/firebase_frontend_foundation_ts_study_011.mdfirebase_frontend_foundation_ts_study_011_logout_action.png./picture/firebase_frontend_foundation_ts_study_011_logout_action.pngTheme: Logout Mechanism

Labels to Render:
- Action: "signOut()"
- Effect: "user = null"
- Guard: "ProtectedRoute Reacts"
- Result: "Go to Login"

Visual Details:
A cause-and-effect chain.
Button click -> Auth State Change (User vanishes) -> Guard wakes up -> Kick to Login.
Visualizes the reactive nature of the system.		## Step 5：ヘッダーにログアウトボタンを付ける 🚪✨
475docs/firebase_frontend_foundation_ts_study_011.mdfirebase_frontend_foundation_ts_study_011_antigravity_ui.png./picture/firebase_frontend_foundation_ts_study_011_antigravity_ui.pngTheme: Rapid UI Construction with AI

Labels to Render:
- Instruction: "Build Login Page"
- Agent: "Antigravity"
- Output: "Ready-to-use Code"

Visual Details:
A construction site scene.
A robot (Antigravity) building a Login UI from a blueprint (Instruction).
Fast, efficient, automated.		## 1) UI実装を一気に作る（Antigravity / Gemini CLI）🛸💻
476docs/firebase_frontend_foundation_ts_study_012.mdfirebase_frontend_foundation_ts_study_012_01_structure.png./picture/firebase_frontend_foundation_ts_study_012_01_structure.pngTheme: Users Collection Structure

Labels to Render:
- Collection: "users"
- Document: "userId (Auto-ID)"
- Fields: "displayName, role, updatedAt"

Visual Details:
1. Core Concept: Visualizing the Firestore data structure for users.
2. Metaphor: A box labeled 'users' containing multiple file folders.
3. Action: One folder is open showing the fields inside.
4. Layout: Hierarchy view.		## 1) まず “Firestoreの形” をイメージしよう 🧠🧩
477docs/firebase_frontend_foundation_ts_study_012.mdfirebase_frontend_foundation_ts_study_012_02_console_entry.png./picture/firebase_frontend_foundation_ts_study_012_02_console_entry.pngTheme: Console Data Entry

Labels to Render:
- Action: "Add Document"
- Collection: "users"
- ID: "Auto-ID"
- Field: "updatedAt (Now)"

Visual Details:
1. Core Concept: Manually adding data in the Firebase Console.
2. Metaphor: A simplified UI of the Firebase Console.
3. Action: Clicking the 'Add document' button and filling in fields.
4. Layout: UI mockup.		## 2) Consoleでサンプルデータを入れる 🧪🧑‍💼
478docs/firebase_frontend_foundation_ts_study_012.mdfirebase_frontend_foundation_ts_study_012_03_fetch_logic.png./picture/firebase_frontend_foundation_ts_study_012_03_fetch_logic.pngTheme: Fetch Logic Flow

Labels to Render:
- Source: "Collection (users)"
- Order: "orderBy(updatedAt)"
- Limit: "limit(20)"
- Result: "User List"

Visual Details:
1. Core Concept: The query pipeline.
2. Metaphor: A data pipeline. Raw data enters a sorter (Order), then a gate (Limit), and emerges as a clean list.
3. Action: Flowing through the pipe.
4. Layout: Left-to-right flow.		## 4-2) 取得サービスを書く（servicesに寄せる）🧰
479docs/firebase_frontend_foundation_ts_study_012.mdfirebase_frontend_foundation_ts_study_012_04_hook_flow.png./picture/firebase_frontend_foundation_ts_study_012_04_hook_flow.pngTheme: useUsers Hook Flow

Labels to Render:
- Start: "useUsers()"
- State 1: "Loading (True)"
- Action: "Fetch API"
- State 2: "Data (Rows)"

Visual Details:
1. Core Concept: The state transition inside the hook.
2. Metaphor: A timeline or state machine. Starts at Loading, moves to Data or Error.
3. Action: Transitioning.
4. Layout: Timeline.		## 5) React側：useUsersフックで “3点セット” を回す 🔁😵‍💫✨
480docs/firebase_frontend_foundation_ts_study_012.mdfirebase_frontend_foundation_ts_study_012_05_table_ui.png./picture/firebase_frontend_foundation_ts_study_012_05_table_ui.pngTheme: Users Table UI

Labels to Render:
- Header: "Name / Role / Date"
- Row 1: "Alice (Admin)"
- Row 2: "Bob (Viewer)"
- State: "Empty State (0 items)"

Visual Details:
1. Core Concept: The visual appearance of the table component.
2. Metaphor: A clean UI mockup of a data table.
3. Action: Displaying data rows.
4. Layout: Table view.		## 6) UI：管理画面っぽいテーブルを作る 🧱📊✨
481docs/firebase_frontend_foundation_ts_study_012.mdfirebase_frontend_foundation_ts_study_012_06_missing_field.png./picture/firebase_frontend_foundation_ts_study_012_06_missing_field.pngTheme: Missing Field Trap

Labels to Render:
- Doc A: "Has updatedAt"
- Doc B: "No updatedAt"
- Query: "orderBy(updatedAt)"
- Result: "Doc A Only"

Visual Details:
1. Core Concept: Documents missing the sort field are excluded.
2. Metaphor: A filter or sieve. Doc A passes through. Doc B bounces off because it lacks the 'ticket' (field).
3. Action: Filtering.
4. Layout: Filter process.		## ✅ orderBy したフィールドが無いと “出てこない”
482docs/firebase_frontend_foundation_ts_study_012.mdfirebase_frontend_foundation_ts_study_012_07_index_error.png./picture/firebase_frontend_foundation_ts_study_012_07_index_error.pngTheme: Index Required Error

Labels to Render:
- Error: "The query requires an index"
- Link: "https://console.firebase..."
- Action: "Click to Fix"

Visual Details:
1. Core Concept: The error message when a composite index is missing.
2. Metaphor: A red warning popup with a blue link. A mouse cursor is about to click the link to solve the problem.
3. Action: Clicking.
4. Layout: Error dialog.		## 9-1) 「The query requires an index」って怒られた😵
483docs/firebase_frontend_foundation_ts_study_013.mdfirebase_frontend_foundation_ts_study_013_01_update_flow.png./picture/firebase_frontend_foundation_ts_study_013_01_update_flow.pngTheme: Update Flow Overview

Labels to Render:
- URL: "/users/123"
- Fetch: "getDoc('123')"
- Form: "Edit Data"
- Save: "updateDoc('123')"

Visual Details:
1. Core Concept: The cycle of updating a document.
2. Metaphor: A circular flow. 1. URL provides Key. 2. Key unlocks Data. 3. User edits Data. 4. Data is saved back to Box.
3. Action: Flowing.
4. Layout: Cycle diagram.		## まず全体像（ここだけ覚えれば勝ち）🧠✨
484docs/firebase_frontend_foundation_ts_study_013.mdfirebase_frontend_foundation_ts_study_013_02_routing_params.png./picture/firebase_frontend_foundation_ts_study_013_02_routing_params.pngTheme: Route Params Extraction

Labels to Render:
- Route: "/users/:userId"
- URL: "/users/abc-123"
- Params: "{ userId: 'abc-123' }"
- Hook: "useParams()"

Visual Details:
1. Core Concept: Extracting the variable part of the URL.
2. Metaphor: A pattern matching machine. The URL slides into a slot, and the machine extracts the ID based on the pattern.
3. Action: Extracting.
4. Layout: Left-to-right extraction.		## Step 1：ルート（URL）を「/users/:userId」にする 🧭
485docs/firebase_frontend_foundation_ts_study_013.mdfirebase_frontend_foundation_ts_study_013_03_service_layer.png./picture/firebase_frontend_foundation_ts_study_013_03_service_layer.pngTheme: Service Layer Isolation

Labels to Render:
- UI: "UserDetailPage"
- Barrier: "Service Boundary"
- Logic: "getUser / updateUser"
- DB: "Firestore"

Visual Details:
1. Core Concept: Separating UI code from DB logic.
2. Metaphor: A clean counter (UI) where orders are placed. A kitchen (Service) where cooking happens. The customer (UI) doesn't enter the kitchen.
3. Action: Ordering/Serving.
4. Layout: Layered architecture.		## Firestoreアクセスは “service” に寄せる（超おすすめ）📦✨
486docs/firebase_frontend_foundation_ts_study_013.mdfirebase_frontend_foundation_ts_study_013_04_ui_states.png./picture/firebase_frontend_foundation_ts_study_013_04_ui_states.pngTheme: Detail Form UI States

Labels to Render:
- Loading: "Loading Spinner"
- Editing: "Form (Clean)"
- Saving: "Button (Disabled/Spinner)"
- Error: "Error Message"

Visual Details:
1. Core Concept: The different states of the form.
2. Metaphor: Four snapshots of the same screen. 1. Grey with spinner. 2. White with inputs. 3. Button spinning. 4. Red alert at top.
3. Action: State changes.
4. Layout: Grid of screens.		## Step 4：UserDetailPage（詳細フォーム）を作る 🧑‍💻✨
487docs/firebase_frontend_foundation_ts_study_013.mdfirebase_frontend_foundation_ts_study_013_05_dirty_check.png./picture/firebase_frontend_foundation_ts_study_013_05_dirty_check.pngTheme: Dirty Check Logic

Labels to Render:
- Initial: "{ name: 'A' }"
- Current: "{ name: 'A' }" -> "Clean (Disabled)"
- Change: "{ name: 'B' }" -> "Dirty (Enabled)"

Visual Details:
1. Core Concept: Comparing initial vs current state to enable save.
2. Metaphor: A scale. If weights (Initial/Current) are equal, the scale is balanced (Button Disabled). If unequal, it tips (Button Enabled).
3. Action: Balancing/Tipping.
4. Layout: Comparison.		async function onSave() {
488docs/firebase_frontend_foundation_ts_study_013.mdfirebase_frontend_foundation_ts_study_013_06_ai_polish.png./picture/firebase_frontend_foundation_ts_study_013_06_ai_polish.pngTheme: AI Text Polish Flow

Labels to Render:
- Input: "Messy Draft"
- AI: "Gemini 2.5"
- Output: "Polished Text"
- Action: "Review & Save"

Visual Details:
1. Core Concept: AI assisting with text editing.
2. Metaphor: A robot editor taking a crumpled paper (Draft) and ironing it into a crisp document (Polished). The user then approves it.
3. Action: Ironing/Polishing.
4. Layout: Process flow.		## 🔥おまけ：メモ欄に「AI整形」ボタンを付ける 🤖✨
489docs/firebase_frontend_foundation_ts_study_014.mdfirebase_frontend_foundation_ts_study_014_01_fetch_vs_stream.png./picture/firebase_frontend_foundation_ts_study_014_01_fetch_vs_stream.pngTheme: Fetch vs Realtime Comparison

Labels to Render:
- One-time: "getDocs (Pull)"
- Realtime: "onSnapshot (Push)"
- Data: "Updates"

Visual Details:
1. Core Concept: Pulling data manually vs receiving a stream of updates.
2. Metaphor: Picking apples one by one (One-time) vs Standing under a waterfall of apples (Realtime). Or a Letter (Fetch) vs a Phone Call (Stream).
3. Action: Picking vs Receiving.
4. Layout: Side-by-side comparison.		## 1) まずイメージ：購読（subscribe）ってなに？📡
490docs/firebase_frontend_foundation_ts_study_014.mdfirebase_frontend_foundation_ts_study_014_02_lifecycle_pattern.png./picture/firebase_frontend_foundation_ts_study_014_02_lifecycle_pattern.pngTheme: React Effect Lifecycle

Labels to Render:
- Mount: "Start Listen"
- Update: "Receive Data"
- Unmount: "Stop Listen (Cleanup)"
- Component: "UI"

Visual Details:
1. Core Concept: Starting and stopping the listener based on component lifecycle.
2. Metaphor: Plugging in a device when entering a room (Mount), using it (Update), and unplugging it when leaving (Unmount).
3. Action: Plugging/Unplugging.
4. Layout: Timeline or Cycle.		## 3) いちばん大事：Reactでの正しい型 🧠🧹
491docs/firebase_frontend_foundation_ts_study_014.mdfirebase_frontend_foundation_ts_study_014_03_hook_structure.png./picture/firebase_frontend_foundation_ts_study_014_03_hook_structure.pngTheme: Realtime Hook Structure

Labels to Render:
- Input: "Query"
- Hook: "onSnapshot"
- Output: "unsubscribe"
- State: "Data / Loading / Error"

Visual Details:
1. Core Concept: The internal logic of the realtime hook.
2. Metaphor: A radio receiver. Tuning into a frequency (Query), receiving audio (Data), and having an off switch (unsubscribe).
3. Action: Tuning/Listening.
4. Layout: Diagram.		## 4-2. 「購読をまとめるhook」を作る（おすすめ）🪝✨
492docs/firebase_frontend_foundation_ts_study_014.mdfirebase_frontend_foundation_ts_study_014_04_multitab_sync.png./picture/firebase_frontend_foundation_ts_study_014_04_multitab_sync.pngTheme: Multi-tab Synchronization

Labels to Render:
- Tab A: "Update User"
- Cloud: "Firestore"
- Tab B: "Auto Update"

Visual Details:
1. Core Concept: Updates in one tab instantly appearing in another.
2. Metaphor: Two mirrors reflecting the same cloud. Changing the cloud changes both reflections instantly.
3. Action: Reflection.
4. Layout: Connection.		## 5) ミニ課題：別タブ更新で「勝手に変わる」を体験 🎯⚡
493docs/firebase_frontend_foundation_ts_study_014.mdfirebase_frontend_foundation_ts_study_014_05_doc_changes.png./picture/firebase_frontend_foundation_ts_study_014_05_doc_changes.pngTheme: docChanges Events

Labels to Render:
- Added: "New Item (+)"
- Modified: "Update (Refreshed)"
- Removed: "Deleted (Gone)"

Visual Details:
1. Core Concept: The three types of changes.
2. Metaphor: 1. A box appearing (Added). 2. A box changing color (Modified). 3. A box vanishing (Removed).
3. Action: Appearance/Change/Disappearance.
4. Layout: Three panels.		## 6) さらに気持ちよく：差分（docChanges）で“追加/変更/削除”を演出 🎉
494docs/firebase_frontend_foundation_ts_study_014.mdfirebase_frontend_foundation_ts_study_014_06_memory_leak.png./picture/firebase_frontend_foundation_ts_study_014_06_memory_leak.pngTheme: Memory Leak Ghost

Labels to Render:
- Component: "Unmounted (Gone)"
- Listener: "Still Active (Ghost)"
- Memory: "Leaking"

Visual Details:
1. Core Concept: Listeners continuing to run after the component is gone.
2. Metaphor: A ghost listening to a radio in an empty room. The person left, but the radio is still playing and wasting electricity.
3. Action: Haunting.
4. Layout: Warning illustration.		## ❌ 1) 購読解除し忘れ（メモリリーク）😱
495docs/firebase_frontend_foundation_ts_study_014.mdfirebase_frontend_foundation_ts_study_014_07_ai_realtime.png./picture/firebase_frontend_foundation_ts_study_014_07_ai_realtime.pngTheme: AI Realtime Update Flow

Labels to Render:
- User: "Request"
- AI: "Process & Save"
- Firestore: "Update"
- UI: "Auto Reflect"

Visual Details:
1. Core Concept: AI backend updating DB, and Frontend UI updating automatically.
2. Metaphor: User orders a pizza. Kitchen (AI) bakes it. Delivery (Firestore) brings it. User (UI) sees it arrive without asking again.
3. Action: Delivery.
4. Layout: Cycle flow.		## 9) AIとのつながり（この章の裏テーマ）🤖✨
496docs/firebase_frontend_foundation_ts_study_015.mdfirebase_frontend_foundation_ts_study_015_01_offset_vs_cursor.png./picture/firebase_frontend_foundation_ts_study_015_01_offset_vs_cursor.pngTheme: Offset vs Cursor Cost

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

Visual Details:
1. Core Concept: Visualizing the hidden cost of offset paging.
2. Metaphor: A toll road. Offset pays for every car it skips. Cursor teleports to the start line.
3. Action: Paying vs Teleporting.
4. Layout: Side-by-side comparison.		## 1) offset じゃなく cursor（カーソル）を使う理由 🧾➡️🎯
497docs/firebase_frontend_foundation_ts_study_015.mdfirebase_frontend_foundation_ts_study_015_02_missing_field.png./picture/firebase_frontend_foundation_ts_study_015_02_missing_field.pngTheme: Missing Field Trap

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

Visual Details:
1. Core Concept: Documents without the sort field are excluded.
2. Metaphor: A sieve or filter. Doc A passes through. Doc B bounces off because it lacks the 'ticket' (field).
3. Action: Filtering.
4. Layout: Filter process.		## 0) 先に“並び順”を決めよう（超重要）🧭
498docs/firebase_frontend_foundation_ts_study_015.mdfirebase_frontend_foundation_ts_study_015_03_tie_breaker.png./picture/firebase_frontend_foundation_ts_study_015_03_tie_breaker.pngTheme: Tie Breaker

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

Visual Details:
1. Core Concept: Resolving ambiguity when values are identical.
2. Metaphor: A photo finish at a race. Two runners tie on time, but the camera (2nd Key) sees who is ahead by ID.
3. Action: Judging.
4. Layout: Race finish line.		* “同点”（同じ updatedAt）で順序がブレないように、第2キーに documentId() を足す（安定する）✨
499docs/firebase_frontend_foundation_ts_study_015.mdfirebase_frontend_foundation_ts_study_015_04_paging_flow.png./picture/firebase_frontend_foundation_ts_study_015_04_paging_flow.pngTheme: Paging Function Flow

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

Visual Details:
1. Core Concept: The logic flow of fetching a page.
2. Metaphor: A relay race baton pass. The 'Cursor' baton starts the 'Query' runner, who fetches the 'Data' box and a new 'Next Cursor' baton.
3. Action: relaying.
4. Layout: Left-to-right flow.		## 1) ページング用の hook を作る 🪝✨
500docs/firebase_frontend_foundation_ts_study_015.mdfirebase_frontend_foundation_ts_study_015_05_hook_state.png./picture/firebase_frontend_foundation_ts_study_015_05_hook_state.pngTheme: Infinite Scroll State Machine

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

Visual Details:
1. Core Concept: Appending data to the existing state.
2. Metaphor: Adding cars to a train. The engine (State) keeps pulling, and new carriages (New Items) are hooked onto the back.
3. Action: Coupling.
4. Layout: Train assembly.		setItems((prev) => [...prev, ...nextItems]);
501docs/firebase_frontend_foundation_ts_study_015.mdfirebase_frontend_foundation_ts_study_015_06_sentinel_trigger.png./picture/firebase_frontend_foundation_ts_study_015_06_sentinel_trigger.pngTheme: Sentinel Trigger

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

Visual Details:
1. Core Concept: Detecting when the user scrolls to the bottom.
2. Metaphor: A laser tripwire (Sentinel) at the bottom of the page. When the Scroll Viewport hits it, the 'Observer' eye wakes up and triggers a fetch.
3. Action: Tripping the wire.
4. Layout: Side view of scroll.		## 3) 無限スクロール版（入口だけ）🌊✨
502docs/firebase_frontend_foundation_ts_study_015.mdfirebase_frontend_foundation_ts_study_015_07_ai_guard.png./picture/firebase_frontend_foundation_ts_study_015_07_ai_guard.pngTheme: AI Rate Limit Guard

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

Visual Details:
1. Core Concept: Protecting AI from too many requests during scroll.
2. Metaphor: A dam or sluice gate (Guard) controlling the flow of water (Requests) to a turbine (AI).
3. Action: Regulating flow.
4. Layout: Flow control.		## 課題B：一覧は軽く、詳細でAIを呼ぶ 🤖🧠
503docs/firebase_frontend_foundation_ts_study_016.mdfirebase_frontend_foundation_ts_study_016_01_firestore_vs_storage.png./picture/firebase_frontend_foundation_ts_study_016_01_firestore_vs_storage.pngTheme: Firestore vs Storage

Labels to Render:\n- Firestore: "Data (JSON)"\n- Storage: "Files (Images/Video)"\n- Link: "URL Reference"\n
Visual Details:
1. Core Concept: Distinguishing the two services.
2. Metaphor: A filing cabinet (Firestore) for documents vs A warehouse (Storage) for heavy boxes. A string connects a document to a box.
3. Action: Storing.
4. Layout: Side-by-side.		## 1) まず“仕組み”を超ざっくり理解する 🧠💡
504docs/firebase_frontend_foundation_ts_study_016.mdfirebase_frontend_foundation_ts_study_016_02_upload_flow.png./picture/firebase_frontend_foundation_ts_study_016_02_upload_flow.pngTheme: Upload Process Flow

Labels to Render:\n- Step 1: "Select File"\n- Step 2: "Preview"\n- Step 3: "Upload (%)"\n- Step 4: "Save URL"\n
Visual Details:
1. Core Concept: The user journey for uploading.
2. Metaphor: A linear progression. 1. Hand picking a photo. 2. Eye seeing it. 3. Arrow moving up to a cloud. 4. Pen writing URL in a notebook.
3. Action: Uploading.
4. Layout: Linear steps.		## 2) コンソール側の準備 🛠️（最短ルート）
505docs/firebase_frontend_foundation_ts_study_016.mdfirebase_frontend_foundation_ts_study_016_03_path_strategy.png./picture/firebase_frontend_foundation_ts_study_016_03_path_strategy.pngTheme: Storage Path Strategy

Labels to Render:\n- Root: "users"\n- Folder: "{uid}"\n- File: "avatar.jpg (Fixed)"\n- Cache: "?v=time"\n
Visual Details:
1. Core Concept: Organizing files by user ID.
2. Metaphor: A directory tree. Root 'users' branches to specific user folders. Inside is a single file 'avatar.jpg'. A clock icon represents the cache buster.
3. Action: Overwriting.
4. Layout: Tree structure.		## 3) パス設計：どこに置く？📁✨
506docs/firebase_frontend_foundation_ts_study_016.mdfirebase_frontend_foundation_ts_study_016_04_rules_logic.png./picture/firebase_frontend_foundation_ts_study_016_04_rules_logic.pngTheme: Storage Security Rules

Labels to Render:\n- Check 1: "Auth?"\n- Check 2: "Owner?"\n- Check 3: "Image?"\n- Check 4: "Size < 5MB"\n
Visual Details:
1. Core Concept: The four checks for a valid upload.
2. Metaphor: A security checkpoint with 4 stations. Badge check, ID check, Content scan, Weight check.
3. Action: Validating.
4. Layout: Checklist or Gate.		## 4) Storageルール例 🔐（“自分だけアップできる”）
507docs/firebase_frontend_foundation_ts_study_016.mdfirebase_frontend_foundation_ts_study_016_05_upload_state.png./picture/firebase_frontend_foundation_ts_study_016_05_upload_state.pngTheme: Upload Task State Machine

Labels to Render:\n- State: "running"\n- Event: "pause()"\n- State: "paused"\n- Event: "resume()"\n
Visual Details:
1. Core Concept: Controlling the upload task.
2. Metaphor: A media player controller. Play, Pause, Stop buttons controlling the flow of data packets to the cloud.
3. Action: Controlling.
4. Layout: State diagram.		## 5) 実装：アップロード“サービス関数”を作る 🔧✨
508docs/firebase_frontend_foundation_ts_study_016.mdfirebase_frontend_foundation_ts_study_016_06_ui_mock.png./picture/firebase_frontend_foundation_ts_study_016_06_ui_mock.pngTheme: Avatar Uploader UI

Labels to Render:\n- Preview: "Circle Image"\n- Bar: "Progress 50%"\n- Buttons: "Pause / Cancel"\n- Status: "Uploading..."\n
Visual Details:
1. Core Concept: The visual components of the uploader.
2. Metaphor: A clean UI card. Circular avatar preview on left. Progress bar and control buttons on right.
3. Action: Uploading.
4. Layout: UI Card.		## 6) 実装：Reactコンポーネント（プレビュー＋進捗バー）🖼️📊
509docs/firebase_frontend_foundation_ts_study_016.mdfirebase_frontend_foundation_ts_study_016_07_ai_metadata.png./picture/firebase_frontend_foundation_ts_study_016_07_ai_metadata.pngTheme: AI Metadata Generation

Labels to Render:\n- Input: "User Name"\n- AI: "Generate"\n- Output 1: "Alt Text"\n- Output 2: "Filename"\n
Visual Details:
1. Core Concept: AI suggesting file metadata.
2. Metaphor: A robot assistant labeling a photo. It writes a tag (Alt Text) and a label (Filename) for the image.
3. Action: Labeling.
4. Layout: Process flow.		## 8) AIを絡める：ファイル名＆代替テキストをAIに決めさせる 🤖📝✨
1359docs/firebase_frontend_foundation_ts_study_017.mdfirebase_frontend_foundation_ts_study_017_01_callable_vs_http.png./picture/firebase_frontend_foundation_ts_study_017_01_callable_vs_http.pngTheme: Callable vs HTTP Functions

Labels to Render:
- Callable: "Safe & Easy ☎️"
- HTTP: "Flexible but Hard 🌐"
- User: "Frontend"

Visual Details:
1. Core Concept: Comparison of two function types.
2. Metaphor: Callable is a direct hotline (Red Phone) with built-in security. HTTP is a public megaphone requiring manual setup.
3. Action: User choosing the hotline.
4. Layout: Side-by-side comparison.		## 1) まず結論：UIから呼ぶなら「Callable」が最強 🥇✨
1360docs/firebase_frontend_foundation_ts_study_017.mdfirebase_frontend_foundation_ts_study_017_02_function_structure.png./picture/firebase_frontend_foundation_ts_study_017_02_function_structure.pngTheme: Callable Function Structure

Labels to Render:
- Input: "Check Args ✅"
- Auth: "Check Login 🔐"
- Logic: "Process Text ⚙️"
- Return: "Result 📦"

Visual Details:
1. Core Concept: The internal flow of a secure function.
2. Metaphor: A factory line. Raw material (Input) passes through a Quality Check (Args) and Security Gate (Auth) before being processed (Logic) and packaged (Return).
3. Action: Processing flow.
4. Layout: Sequential steps.		## 2-2) 関数例：テキスト整形（formatText）🧽✨
1361docs/firebase_frontend_foundation_ts_study_017.mdfirebase_frontend_foundation_ts_study_017_03_service_pattern.png./picture/firebase_frontend_foundation_ts_study_017_03_service_pattern.pngTheme: Service Pattern Architecture

Labels to Render:
- UI: "Button Component 🔘"
- Service: "functions.ts 🔌"
- SDK: "Firebase SDK 📦"
- Cloud: "Functions ☁️"

Visual Details:
1. Core Concept: Centralizing API calls in a service file.
2. Metaphor: A switchboard operator (Service) connecting calls from various rooms (UI) to the outside world (Cloud).
3. Action: Connecting.
4. Layout: Layered architecture.		## 3-2) src/services/functions.ts を作る 🔌
1362docs/firebase_frontend_foundation_ts_study_017.mdfirebase_frontend_foundation_ts_study_017_04_ui_states.png./picture/firebase_frontend_foundation_ts_study_017_04_ui_states.pngTheme: UI State Machine

Labels to Render:
- Idle: "Start Button"
- Loading: "Spinner ⏳"
- Success: "Result Text ✨"
- Error: "Friendly Message 😇"

Visual Details:
1. Core Concept: The lifecycle of a button interaction.
2. Metaphor: A storyboard showing the button transforming based on state.
3. Action: Transitioning.
4. Layout: Flowchart or State Diagram.		## 4) UI：ボタン → 実行中 → 成功 → 失敗 を気持ちよく作る 🎮✨
1363docs/firebase_frontend_foundation_ts_study_017.mdfirebase_frontend_foundation_ts_study_017_05_emulator_connection.png./picture/firebase_frontend_foundation_ts_study_017_05_emulator_connection.pngTheme: Emulator Connection Switch

Labels to Render:
- Env: "DEV Mode"
- Switch: "connectFunctionsEmulator"
- Local: "localhost:5001 🏠"
- Cloud: "Production 🔥"

Visual Details:
1. Core Concept: Switching between local and cloud environments.
2. Metaphor: A railroad switch routing the train (Requests) to the Local Station instead of the Cloud Terminal.
3. Action: Switching tracks.
4. Layout: Bifurcation.		## 5) Emulatorでローカル検証する 🧪✨（超重要！）
1364docs/firebase_frontend_foundation_ts_study_017.mdfirebase_frontend_foundation_ts_study_017_06_error_handling.png./picture/firebase_frontend_foundation_ts_study_017_06_error_handling.pngTheme: User-Friendly Error Handling

Labels to Render:
- Code: "internal-error 🤖"
- Translator: "friendlyMessage()"
- User: "Server is busy 😇"

Visual Details:
1. Core Concept: Translating technical errors into human language.
2. Metaphor: A translation robot taking a jagged red rock (Error Code) and turning it into a smooth round stone (Friendly Message).
3. Action: Translating.
4. Layout: Transformation flow.		## 6) つまづきポイント集（ここで詰まりやすい）🧯
1365docs/firebase_frontend_foundation_ts_study_017.mdfirebase_frontend_foundation_ts_study_017_07_ai_preview.png./picture/firebase_frontend_foundation_ts_study_017_07_ai_preview.pngTheme: AI Integration Preview

Labels to Render:
- Current: "Text Formatter 🧽"
- Future: "AI Logic 🤖"
- UI: "Same Button! 🔘"

Visual Details:
1. Core Concept: Swapping the backend logic without changing the frontend.
2. Metaphor: Replacing the engine of a car while keeping the chassis and controls the same.
3. Action: Swapping engine.
4. Layout: Before/After.		## 7) AIへ繋げる布石：次章（AIボタン🤖）が超ラクになる話 🚀
1366docs/firebase_frontend_foundation_ts_study_018.mdfirebase_frontend_foundation_ts_study_018_01_direct_call_risk.png./picture/firebase_frontend_foundation_ts_study_018_01_direct_call_risk.pngTheme: Direct API Call Risk

Labels to Render:
- Browser: "Browser 🌍"
- Key: "API Key (Exposed) 🔑"
- API: "Gemini API 🤖"
- Hacker: "Stolen Key! 😈"

Visual Details:
1. Core Concept: The danger of exposing API keys in client-side code.
2. Metaphor: A person handing a house key to a robot in a public square, and a thief snatching it.
3. Action: Leaking key.
4. Layout: Risk scenario.		## なんで“ブラウザからGemini直呼び”は危ないの？😱
1367docs/firebase_frontend_foundation_ts_study_018.mdfirebase_frontend_foundation_ts_study_018_02_ai_logic_arch.png./picture/firebase_frontend_foundation_ts_study_018_02_ai_logic_arch.pngTheme: Firebase AI Logic Architecture

Labels to Render:
- App: "App Check Token 🛡️"
- Gateway: "Firebase AI Logic 🧱"
- API: "Gemini API 🤖"
- Key: "Hidden Key 🔒"

Visual Details:
1. Core Concept: Secure AI calls via a gateway.
2. Metaphor: A secure tunnel where the App Check token opens the gate, and the Gateway uses a hidden key to talk to the AI.
3. Action: Secure passage.
4. Layout: Flow diagram.		## そこで Firebase AI Logic が強い 💪🔥
1368docs/firebase_frontend_foundation_ts_study_018.mdfirebase_frontend_foundation_ts_study_018_03_ui_workflow.png./picture/firebase_frontend_foundation_ts_study_018_03_ui_workflow.pngTheme: AI Suggestion Workflow

Labels to Render:
- Step 1: "Ask AI 🤖"
- Step 2: "Review Suggestion 👀"
- Step 3: "Apply ✅"
- Step 4: "Save to DB 💾"

Visual Details:
1. Core Concept: The safe workflow of using AI suggestions.
2. Metaphor: A drafting process. AI drafts -> Human reviews/edits -> Human stamps 'Approved' -> Human files it.
3. Action: Progression.
4. Layout: Sequential steps.		## 1) この章の完成イメージ 🏁✨
1369docs/firebase_frontend_foundation_ts_study_018.mdfirebase_frontend_foundation_ts_study_018_04_enable_ai_logic.png./picture/firebase_frontend_foundation_ts_study_018_04_enable_ai_logic.pngTheme: Enable AI Logic UI

Labels to Render:
- Tab: "AI Logic 🧠"
- Button: "Get started 🚀"
- API: "Gemini Developer API"

Visual Details:
1. Core Concept: Activating the feature in the console.
2. Metaphor: A simplified UI mockup focusing on the activation button.
3. Action: Clicking.
4. Layout: UI focus.		## Step 1) Firebase側で AI Logic を有効化する 🤖⚙️
1370docs/firebase_frontend_foundation_ts_study_018.mdfirebase_frontend_foundation_ts_study_018_05_code_structure.png./picture/firebase_frontend_foundation_ts_study_018_05_code_structure.pngTheme: AI Code Structure

Labels to Render:
- File 1: "firebase.ts (Model) 🔌"
- File 2: "useAiPolish.ts (Hook) 🪝"
- File 3: "Component (UI) 🖼️"

Visual Details:
1. Core Concept: Separation of concerns in the code.
2. Metaphor: Building blocks. The 'Model' block supports the 'Hook' block, which supports the 'UI' block.
3. Action: Stacking/Supporting.
4. Layout: Architecture diagram.		## Step 4) AI整形の “呼び出し処理” を hook にする 🪝✨
1371docs/firebase_frontend_foundation_ts_study_018.mdfirebase_frontend_foundation_ts_study_018_06_ui_component.png./picture/firebase_frontend_foundation_ts_study_018_06_ui_component.pngTheme: AI Editor Component

Labels to Render:
- Area: "Text Body 📝"
- Button: "AI Polish 🤖"
- Box: "Suggestion Preview ✨"
- Action: "Apply ✅"

Visual Details:
1. Core Concept: The layout of the editor component.
2. Metaphor: A wireframe showing the placement of elements.
3. Action: Interaction flow.
4. Layout: Wireframe.		## Step 5) 詳細フォームに「🤖AIで整形」→「✅反映」UIを付ける 🧩
1372docs/firebase_frontend_foundation_ts_study_018.mdfirebase_frontend_foundation_ts_study_018_07_app_check_shield.png./picture/firebase_frontend_foundation_ts_study_018_07_app_check_shield.pngTheme: App Check Protection

Labels to Render:
- Shield: "App Check 🛡️"
- Target: "AI Logic 🧠"
- Attacker: "Bots 🤖🚫"
- User: "Real App ✅"

Visual Details:
1. Core Concept: Protecting the AI resource from abuse.
2. Metaphor: A shield deflecting arrows (Bots) while letting friendly messengers (Real App) through to the brain (AI Logic).
3. Action: Deflecting.
4. Layout: Defense scene.		## 4) （重要）悪用対策：App Check をONにしよう 🛡️🔥
1373docs/firebase_frontend_foundation_ts_study_019.mdfirebase_frontend_foundation_ts_study_019_01_ai_tools_triad.png./picture/firebase_frontend_foundation_ts_study_019_01_ai_tools_triad.pngTheme: AI Development Tools Triad

Labels to Render:
- Antigravity: "Mission Control 🎮"
- Gemini CLI: "Terminal Agent ⌨️"
- Studio: "Environment 🧊"

Visual Details:
1. Core Concept: The three pillars of AI-assisted development.
2. Metaphor: A futuristic workstation with three screens/modules. One for planning (Antigravity), one for executing (CLI), one for stabilizing (Studio).
3. Action: Integrated workflow.
4. Layout: Triptych or Triangle.		## 3) 今回使う3つの“加速エンジン” 🚀🧰
1374docs/firebase_frontend_foundation_ts_study_019.mdfirebase_frontend_foundation_ts_study_019_02_antigravity_flow.png./picture/firebase_frontend_foundation_ts_study_019_02_antigravity_flow.pngTheme: Antigravity Workflow

Labels to Render:
- User: "Mission 📝"
- System: "Antigravity 🛸"
- Agent: "Code Generation 🤖"
- Result: "Implementation 📦"

Visual Details:
1. Core Concept: Giving a high-level mission to an AI system that manages agents.
2. Metaphor: A commander sending a mission brief to a spaceship, which deploys drones to build a structure.
3. Action: Deploying/Building.
4. Layout: Top-down flow.		## A. Google Antigravity：ミッションで「まとめて作らせる」🎮🤖
1375docs/firebase_frontend_foundation_ts_study_019.mdfirebase_frontend_foundation_ts_study_019_03_gemini_cli_loop.png./picture/firebase_frontend_foundation_ts_study_019_03_gemini_cli_loop.pngTheme: Gemini CLI ReAct Loop

Labels to Render:
- Step 1: "Think 🧠"
- Step 2: "Act (Command) ⌨️"
- Step 3: "Observe (Result) 👀"
- Loop: "Repeat 🔁"

Visual Details:
1. Core Concept: The cognitive loop of an AI agent in the terminal.
2. Metaphor: A robot typing on a terminal, reading the output, thinking, and typing again.
3. Action: Looping.
4. Layout: Circular cycle.		## B. Gemini CLI：ターミナルで「差分作業＆自動化」⌨️🧠
1376docs/firebase_frontend_foundation_ts_study_019.mdfirebase_frontend_foundation_ts_study_019_04_component_factory.png./picture/firebase_frontend_foundation_ts_study_019_04_component_factory.pngTheme: UI Component Factory

Labels to Render:
- Input: "1 Prompt 📝"
- Factory: "AI Agent 🏗️"
- Output 1: "EmptyState 🫙"
- Output 2: "Loading ⏳"
- Output 3: "Confirm ⚠️"

Visual Details:
1. Core Concept: Generating multiple components from a single instruction.
2. Metaphor: A 3D printer or factory line producing three distinct UI widgets from one blueprint.
3. Action: Production.
4. Layout: One-to-many flow.		## Step 1：Antigravityに「UI部品を3つまとめて」作らせる 🧱🤖✨
1377docs/firebase_frontend_foundation_ts_study_019.mdfirebase_frontend_foundation_ts_study_019_05_refactor_flow.png./picture/firebase_frontend_foundation_ts_study_019_05_refactor_flow.pngTheme: Safe Refactoring Flow

Labels to Render:
- 1. Proposal: "Plan 📝"
- 2. Diff: "Review (+/-) 👀"
- 3. Apply: "Update Code 💾"
- 4. Verify: "Test ✅"

Visual Details:
1. Core Concept: The step-by-step process of safe AI refactoring.
2. Metaphor: An architect showing a blueprint (1), then a transparent overlay of changes (2), then construction (3), then inspection (4).
3. Action: Progression.
4. Layout: Sequential steps.		## Step 2：Gemini CLIで「リファクタ案→差分確認→適用」まで回す 🔁🧼🧠
1378docs/firebase_frontend_foundation_ts_study_019.mdfirebase_frontend_foundation_ts_study_019_06_prompt_spec.png./picture/firebase_frontend_foundation_ts_study_019_06_prompt_spec.pngTheme: Structured Prompt Specification

Labels to Render:
- Input: "Messy Text 🌫️"
- Mold: "Prompt Spec 📏"
- Output: "Clean JSON 📦"

Visual Details:
1. Core Concept: Using a strict prompt to force structured output.
2. Metaphor: Pouring liquid (Messy Text) into a rigid mold (Prompt Spec) to get a solid brick (JSON).
3. Action: Molding/Forming.
4. Layout: Transformation process.		## Step 4：Firebase AI（AI Logic）で“プロンプトを仕様化”しておく 🧠📐🤖
1379docs/firebase_frontend_foundation_ts_study_019.mdfirebase_frontend_foundation_ts_study_019_07_version_safety.png./picture/firebase_frontend_foundation_ts_study_019_07_version_safety.pngTheme: Runtime Version Safety

Labels to Render:
- Node: "v20 / v22 ✅"
- Node Old: "v18 ❌"
- Python: "3.11+ ✅"
- Action: "Check Package.json 🔍"

Visual Details:
1. Core Concept: Choosing supported runtime versions to avoid deprecation issues.
2. Metaphor: A version checker gate. Safe versions pass (Green), old versions are stopped (Red).
3. Action: Checking.
4. Layout: Checklist or Gate.		## 5) “AIがクラウド側のコードを出してきた時”のバージョン注意 ⚙️📌
1380docs/firebase_frontend_foundation_ts_study_020.mdfirebase_frontend_foundation_ts_study_020_01_hosting_vs_app_hosting.png./picture/firebase_frontend_foundation_ts_study_020_01_hosting_vs_app_hosting.pngTheme: Hosting vs App Hosting

Labels to Render:
- Hosting: "Static (React) 🏠"
- App Hosting: "Dynamic (Next.js) ⚙️"
- Use Case: "SPA vs SSR"

Visual Details:
1. Core Concept: Distinguishing the two hosting services.
2. Metaphor: A simple house (Hosting) for static content vs a factory (App Hosting) for dynamic processing.
3. Action: Comparison.
4. Layout: Side-by-side.		## 1) まず結論：Hosting と App Hosting、どっち？🤔
1381docs/firebase_frontend_foundation_ts_study_020.mdfirebase_frontend_foundation_ts_study_020_02_hosting_init.png./picture/firebase_frontend_foundation_ts_study_020_02_hosting_init.pngTheme: Hosting Initialization Flow

Labels to Render:
- Command: "firebase init hosting"
- Public: "dist 📂"
- SPA: "Yes (Rewrites) 🔄"
- Result: "firebase.json 📝"

Visual Details:
1. Core Concept: Key configuration steps in the CLI.
2. Metaphor: A setup wizard asking questions and generating a config file.
3. Action: Configuration.
4. Layout: Process flow.		## 2-4) Hosting 初期化（Viteのdistを指定）🏗️
1382docs/firebase_frontend_foundation_ts_study_020.mdfirebase_frontend_foundation_ts_study_020_03_preview_channel.png./picture/firebase_frontend_foundation_ts_study_020_03_preview_channel.pngTheme: Preview Channel Concept

Labels to Render:
- Main: "Live Site (Stable) 🌍"
- Channel: "dev Channel 🧪"
- URL: "web.app/dev 🔗"

Visual Details:
1. Core Concept: A parallel deployment environment.
2. Metaphor: A main road (Live) and a side testing track (Preview) with its own signpost (URL).
3. Action: Parallel deployment.
4. Layout: Parallel paths.		## 3) “レビュー用URL” を作る：Preview Channel 🧪🔗
1383docs/firebase_frontend_foundation_ts_study_020.mdfirebase_frontend_foundation_ts_study_020_04_rollback_flow.png./picture/firebase_frontend_foundation_ts_study_020_04_rollback_flow.pngTheme: Hosting Rollback

Labels to Render:
- v2: "Broken 💥"
- Action: "Rollback ↩️"
- v1: "Restored (Safe) ✅"

Visual Details:
1. Core Concept: Reverting to a previous version.
2. Metaphor: A time machine or undo button reverting the state from a broken version back to a working one.
3. Action: Reverting.
4. Layout: Timeline.		## 4) 失敗しても大丈夫：リリース履歴 & ロールバック ⏪🛟
1384docs/firebase_frontend_foundation_ts_study_020.mdfirebase_frontend_foundation_ts_study_020_05_github_integration.png./picture/firebase_frontend_foundation_ts_study_020_05_github_integration.pngTheme: GitHub Integration Workflow

Labels to Render:
- Action: "Push to PR ⤴️"
- Bot: "Firebase Bot 🤖"
- Comment: "Preview URL 🔗"

Visual Details:
1. Core Concept: Automated preview generation on Pull Request.
2. Metaphor: A robot (Firebase) watching the GitHub repo and pasting a sticker (URL) on every new PR.
3. Action: Automation.
4. Layout: Interaction flow.		## 5) 自動化：PRでプレビュー、マージで本番（GitHub連携）🤝🚀
1385docs/firebase_frontend_foundation_ts_study_020.mdfirebase_frontend_foundation_ts_study_020_06_app_hosting_pipeline.png./picture/firebase_frontend_foundation_ts_study_020_06_app_hosting_pipeline.pngTheme: App Hosting Pipeline

Labels to Render:
- Code: "GitHub 📦"
- Build: "Cloud Build 🏗️"
- Run: "Cloud Run 🚀"
- Edge: "CDN 🌍"

Visual Details:
1. Core Concept: The backend pipeline of App Hosting.
2. Metaphor: An automated factory line taking raw code, building a container, launching a rocket (Run), and delivering globally (CDN).
3. Action: Pipeline flow.
4. Layout: Left-to-right flow.		## 7) App Hosting分岐：SSRやフルスタックに行きたくなったら 🌿🚀
1386docs/firebase_frontend_foundation_ts_study_020.mdfirebase_frontend_foundation_ts_study_020_07_env_safety.png./picture/firebase_frontend_foundation_ts_study_020_07_env_safety.pngTheme: Environment Variable Safety

Labels to Render:
- Hosting: "VITE_ (Public) 🔓"
- App Hosting: "Secrets (Private) 🔐"
- Rule: "No Keys in Hosting! 🚫"

Visual Details:
1. Core Concept: Difference in secret handling.
2. Metaphor: A glass display case (Hosting) vs a steel safe (App Hosting/Functions).
3. Action: Comparison.
4. Layout: Side-by-side.		## 6) “運用”で一番やらかしやすい：環境変数と秘密情報 🔐😱