第一章：プロジェクト紹介とAstro地図パッケージの初期化

**Car Camping Map（車泊マップ）**のVibe Coding実践コースへようこそ！これは高度な地理情報システム（GIS）プロジェクトです。AIを使って地図座標を処理する方法、フルスクリーンインタラクティブマップの実装、そして大規模なキャンプ場データの読み込み方法を学びます。

🎯 本章の目標

Astroプロジェクトを作成し、Leaflet地図ライブラリを導入する
正確なPromptの使い方を学び、AIに面倒なCSSやパッケージロードの問題を解決してもらう
画面にフルスクリーンの世界地図を正常にレンダリングする

🗺️ Leafletを選ぶ理由

ウェブ地図の世界で最も有名なのはGoogle Maps APIですが、クレジットカードの登録が必要で、トラフィックが増えると課金されます。 Leafletは非常に軽量でオープンソース、完全無料の地図ライブラリです！LeafletとOpenStreetMapの地図データを組み合わせれば、Google Mapsに匹敵する体験をゼロコストで実現できます。

🚀 実践：Astroの初期化とLeafletのインストール

まずCourse 1の方法でAstroプロジェクトを作成し、その後Leafletをインストールします。

[!TIP] Vibe Prompt（AIにコピーして送信してください）： AstroプロジェクトでLeafletを使ってフルスクリーン地図を表示したいです。 以下の作業を完了させてください： 1. leafletと対応する@typesをnpmでインストールするコマンドを教えてください。 2. Astroの<head>内に導入する必要があるLeafletのCSSファイル（CDNまたはimport）を教えてください。 3. 簡単なMapコンポーネント（Astroコンポーネント内のscript、またはReactコンポーネント）を作成し、特定の緯度経度（例えば台湾中心）を初期ビューとして設定し、画面にレンダリングしてください。

AIは通常以下のインストールコマンドを提供します：

npm install leaflet
npm install -D @types/leaflet

CSS処理のポイント！

Leaflet初心者がよく遭遇する地図タイルの「四分五裂」問題は、CSSの導入忘れが原因です！上記のPromptを使えば、AIはLayout.astroの<head>に以下を追加するよう促します：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

![Leafletロード画面]([SCREENSHOT_PLACEHOLDER: ブラウザでフルスクリーンの台湾地図が正常に表示されている画面])

💻 Mapコンポーネントの実装

Reactで実装する場合、AIは以下のようなコードを提供します。クライアントサイドで実行されることを保証するため、index.astroにclient:only="react"を追加する必要があります。

import { useEffect, useRef } from 'react';
import L from 'leaflet';

export default function Map() {
  const mapRef = useRef(null);

  useEffect(() => {
    // 初期化は一度だけ
    if (!mapRef.current) return;
    
    // 台湾中心座標を設定（緯度23.5、経度121）
    const map = L.map(mapRef.current).setView([23.5, 121.0], 7);

    // OpenStreetMapタイルをロード
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    return () => {
      map.remove(); // マップインスタンスをクリーンアップ
    };
  }, []);

  return <div ref={mapRef} className="w-full h-screen z-0" />;
}

![React Map Code]([SCREENSHOT_PLACEHOLDER: エディタ内のReact地図コンポーネントコードのスクリーンショット])

✅ 本章のまとめ

これがVibe Codingの威力です。L.mapの書き方をLeafletの公式ドキュメントで調べる必要はなく、あなたの「意図」をAIに伝えれば、正しい書き方と落とし穴を回避するヒント（例えばCSSの導入）を提供してくれます。

次章では、難易度の高い「地理空間データベース設計（PostGIS）」に進み、Supabaseで「5km圏内のキャンプ場を検索」できるテーブルをAIのPromptを使って作成する方法を学びます！

章のまとめ

コアコンセプトと原理を理解
実装方法とテクニックを習得
一般的な問題と解決策に精通
実際のプロジェクトに適用可能

さらに読む

公式ドキュメントとAPIリファレンス
GitHubのオープンソース例
技術書とオンラインコース
コミュニティディスカッションと技術ブログ