第四章：パフォーマンスの救世主！Marker Clustering（マーカークラスタリング）の実装

地図上に10個のマーカーしかない場合、動作は非常にスムーズです。しかし、データベースに5,000件の駐車スポットがあり、ユーザーが地図を台湾全体にズームアウトした場合、ブラウザが5,000個の画像マーカーを同時にレンダリングすると、深刻なラグやクラッシュが発生します！

この問題を解決するために、地図開発において必須の技術が Marker Clustering（マーカークラスタリング） です。

🎯 本章の目標

Marker Clusteringの概念を理解する。
Vibe Promptを使用してAIにleaflet.markerclusterライブラリの統合を依頼する。
地図を縮小した際に近接するマーカーが数字付きの円にまとまる機能を実装する。

🧩 ステップ1：MarkerClusterライブラリのインストール

クラスタリング処理専用の拡張ライブラリが必要です。

[!TIP] Vibe Prompt（AIにコピーして送信）： React + Leafletを使用しています。マーカーが多すぎるとパフォーマンスが低下します。 leaflet.markerclusterとその型宣言をnpmでインストールするコマンドを教えてください。

ターミナルでAIが提供するコマンドを実行：

npm install leaflet.markercluster
npm install -D @types/leaflet.markercluster

🕸️ ステップ2：必須CSSの導入（初心者がよく犯すミス！）

Leafletと同様に、markerclusterにも専用のスタイルシートがあります。これを忘れると、クラスターの円が透明になり、数字がバラバラに表示されます！

Layout.astroの<head>またはグローバルCSSで以下を必ず導入：

<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />

🚀 ステップ3：React地図ロジックの改修

Vibe Codingを使ってAIに依頼し、「マーカーを直接地図に追加する」ロジックから「まずクラスタグループに追加し、そのグループを地図に追加する」方式に変更します。

[!TIP] Vibe Prompt（AIにコピーして送信）： leaflet.markerclusterをインストールしました。React Mapコンポーネントを修正してください。 以前はL.marker(...).addTo(map)を使用していました。 現在はL.markerClusterGroup()を作成し、 1000件のテストデータマーカーをこのグループに追加した後、最後にgroupをaddTo(map)する必要があります。 完全なuseEffectコードを提供してください。

AIが生成する魔法のコード：

import 'leaflet.markercluster'; // 必須インポート

useEffect(() => {
  if (!mapRef.current) return;
  const map = L.map(mapRef.current).setView([23.5, 121.0], 7);
  // ...タイルレイヤー読み込み省略...

  // 1. クラスタグループを作成
  const markersGroup = L.markerClusterGroup();

  // 2. データベースから取得したキャンプ場配列を想定
  data.forEach(camp => {
    const marker = L.marker([camp.lat, camp.lng], { icon: customIcon });
    marker.bindPopup(`<b>${camp.name}</b>`);
    
    // 3. マーカーを直接mapに追加せず、グループに追加！
    markersGroup.addLayer(marker);
  });

  // 4. 最後にグループごと地図に追加
  map.addLayer(markersGroup);

  return () => {
    map.remove();
  };
}, [data]);

これで、地図を縮小すると近接する数百のマーカーが自動的に「352」のような数字が書かれたオレンジや黄色の円にまとまります。円をクリックすると、地図が自動的にズームインしてマーカーが展開されます。この機能は非常に高性能で、視覚的にもプロフェッショナルな体験を提供します！

![Marker Cluster]([SCREENSHOT_PLACEHOLDER: 数字付きカラフルなクラスター円が表示された地図のスクリーンショット])

✅ 本章のまとめ

パフォーマンスの問題に直面した時、自力で解決しようとせず、AIに業界の「Best Practice（ベストプラクティス）」を尋ね、ライブラリの適用を依頼することが現代のソフトウェア開発の近道です。この機能を実装することで、あなたの駐車場マップは商用アプリケーションレベルの品質を備えたと言えるでしょう！

章のまとめ

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

さらに読む

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