第九章：初心者が必ずハマる地獄！なぜ私の地図は真っ灰色なのか？

React-Leafletを使った地図アプリ開発で、初心者が最も遭遇する頭を抱える現象といえば：「コードは正常にコンパイルされ、ターミナルにはエラーも出ていないのに、ブラウザ上では地図が表示されず、ただの灰色の四角が現れる」あるいは：「地図のタイルがバラバラに表示され、マーカーも全て間違った位置に配置されて、空間が歪んでいるかのようだ！」

この時、初心者は自分を疑い始めます：Reactが壊れたのか？コマンドを間違えたのか？PCの問題なのか？慌てる必要はありません。99%の場合、これは非常に古典的で初歩的なミスが原因です。

🎯 本章の目標

Leaflet開発で最もよくある「CSS消失」問題を理解する
地図コンテナの高さが0になる現象を解決する
ビルドツールによる「マーカーアイコン破損（Icon Not Found）」問題への対処
Vibe Coder流デバッグ思考をマスターする

👻 古典的災害1：Leaflet CSSの消失（地図の崩壊）

症状： 地図は表示されるが、タイルがバラバラに重なり合い、整列していない。青い位置マーカーが画面左上に飛んでいき、抽象画のような状態になる。

原因： Leafletは単なるJavaScriptライブラリではなく、タイル配置やレイヤー位置決めのためのCSSスタイルに依存しています。 npm install leafletだけで、CSSファイルをインポートし忘れると、ブラウザは地図タイルを正しくレイアウトできず、画面が崩壊します。

🔥【Vibe Prompt Debug実戦】 「Next.jsでReact-Leafletを使っていますが、地図タイルが整列せず重なっています。ターミナルとコンソールにはエラーがありません。CSSのインポート忘れでしょうか？どのファイルにどんなimport文を追加すべきか教えてください。」

解決策： グローバルCSSファイル（例：globals.css）またはコンポーネントの先頭に以下を追加：

@import "leaflet/dist/leaflet.css";

またはReactファイルの先頭で：

import 'leaflet/dist/leaflet.css';

保存すれば、地図がパズルのように自動的に整列します！

📏 古典的災害2：高さを失ったコンテナ（真っ灰or真っ白）

症状： 地図が表示されるべき領域が真っ白、または1ピクセルの線しか表示されない。クリックしても反応なし。

原因： Leafletは「明示的な高さ（Height）」を必要とします。地図を<div>コンテナに入れた場合、高さを設定しないとブラウザは内容がないと判断し、高さを0に縮めてしまいます。

Vibe Coder流解決法（Tailwind CSS）： <MapContainer>を囲む外側のdiv（またはMapContainer自身）に高さを設定：

// 悪い例（高さなし）：
<div className="w-full">
  <MapContainer ... />
</div>

// 良い例：h-[500px] または h-screen（全画面高さ）
<div className="w-full h-[600px] rounded-xl z-10">
  <MapContainer className="h-full w-full" ... />
</div>

※地図のz-indexは0～10の間で設定しましょう。高すぎるとナビゲーションを覆い隠します！

❌ 古典的災害3：アイコン画像が見つからない（青マーカーが破損）

症状： 地図は正常だが、青い水滴マーカーの代わりに四角��破損アイコンが表示される。コンソールに404 (Not Found)エラーが記録される。

原因： Leafletのデフォルトマーカーはパッケージ内の特定パスを参照しますが、Webpack/Vite/Next.jsなどのビルドツールは静的リソースのパスを変更するため、画像が見つからなくなります。

解決策： 「第三章：カスタムマーカー」で学んだように： Leafletのデフォルト画像に依存してはいけません！

Flaticonなどから好みのアイコン（例：テント.png）をダウンロード
public/フォルダに配置
カスタムアイコンを明示的に定義：

const customIcon = L.icon({
  iconUrl: '/tent-icon.png', // publicディレクトリを参照
  iconSize: [38, 38],
  iconAnchor: [19, 38]
});

これで破損問題が解決するだけでなく、ブランドイメージも向上します。

✅ 本章のまとめ：Vibe Debugマインド

この章では、地図開発トラブルへの3つの対処法を学びました。最も重要なのはこの心構えです： 不可解な現象に遭遇した時、コードをじっと見つめて人生を疑うより、「画面の異常な状態」をAIに正確に伝えましょう。 「奇妙な現象が発生しています。画面は○○○状態ですが、エラーは出ていません」世界中のエンジニアが過去10年間に経験したバグを記憶したAIは、あなたが書き忘れたCSSを一瞬で指摘し、すぐに退社させてくれます！

次章では、地図開発の最終奥義：キャンプ場検索とスムーズなFlyTo機能を実装します！