この住所、読めますか？ 難読地名チャレンジ！ 関東・中部編

# 🏠 はじめに
関東・中部地方は、日本の **政治・経済の中心地** であり、**古くからの歴史と現代の都市文化が融合** したエリアです。しかし…  
この地域には **「これ、読める？」** と思わず首をかしげる **難読地名** がたくさんあります！ 🤔💡  

## 🗾 関東地方の難読地名にチャレンジ！  
関東地方には、**古い地名や方言に由来する** 読み方が多く存在します。例えば、  

🔹 **埼玉県**：「蕨市」（**わらび**）  
🔹 **千葉県**：「匝瑳市」（**そうさ**）  

「えっ…どう読むの？」と戸惑うこと間違いなし！ 🤯  

## 🏔 中部地方の難読地名もスゴイ！  
中部地方にも、**一見しただけでは読み方が想像できない地名** が盛りだくさん！  

🔹 **新潟県**：「新発田市」（**しばた**）  
🔹 **富山県**：「滑川市」（**なめりかわ**）  

知っていると **ちょっと自慢できるかも？** 😏  

## 🏯 難読地名に隠された秘密とは？  
これらの **難読地名** には、その土地の **歴史・文化・自然環境** が色濃く反映されています。  

🌱 **地域の特色を知る手がかり** になる！  
📜 **同じ漢字でも地域ごとに読み方が異なることも！**  

これらを知ることで、**日本語の奥深さ** や **地域ごとのユニークな文化** を発見できるんです！  

🚀 **日本の地名の魅力をもっと深掘りしてみましょう！**


## 🔍 住所検索で使ったAPIはこちら！ 🚀  

今回の **YomiMap** で使用したAPIはコチラ👇  
[🌍 ZENRIN Maps APIは２か月お試し無料！🚀](https://www.zenrin-datacom.net/solution/zenrin-maps-api/trial?fm_cp=6757baf3203e3a00bb118509&fm_mu=67639e840dbf8e060dd63765&utm_campaign=6757baf3203e3a00bb118509&utm_medium=else&utm_source=Qiita40)  

## 🎯 アプリの概要
このアプリでは、以下の機能を提供します。

✅ 難読住所クイズ：複数の選択肢から正しい読み方を選ぶ
✅ 地図表示：正解すると、その住所の位置を地図上に表示
✅ ZENRIN Maps API 活用：住所検索と位置情報の取得をAPI経由で実現

## 🎯 さあ、あなたも難読地名に挑戦しよう！  
実際にクイズを楽しめます。
実際の動作は、以下のデモをご覧ください。
[YomiMap（読みマップ　関東・中部編）](https://goldiek24.github.io/address_quiz/address_quiz_kanto_chubu.html)
![zma_address_quiz_kanto_chubu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965389/6cffc07f-9453-4270-8ff7-2dd0e9794c28.png)

## 🛠 開発の流れ
#### 1. クイズデータの作成
まず、難読住所クイズのデータを用意しました。JavaScriptのオブジェクト配列として、住所名とその選択肢を定義しています。

```javascript
const quizData = [
    { question: "「行方」の読み方は？", options: ["なめがた", "ゆくえ", "ぎょうほう"], correctAnswer: "なめがた" },
    { question: "「弘明寺町」の読み方は？", options: ["こうめいじまち", "ひろあきでらまち", "ぐみょうじちょう"], correctAnswer: "ぐみょうじちょう" },
    ...
];
```

#### 2. クイズ画面の作成
ユーザーが選択肢をクリックできるよう、HTMLとCSSでクイズのレイアウトを作成しました。
```html
<div id="quiz-container">
    <h2>問題 1</h2>
    <p>「行方」の読み方は？</p>
    <div class="button-group">
        <button onclick="checkAnswer('なめがた')">なめがた</button>
        <button onclick="checkAnswer('ゆくえ')">ゆくえ</button>
        <button onclick="checkAnswer('ぎょうほう')">ぎょうほう</button>
    </div>
</div>
```

#### 3. ZENRIN Maps API を使った地図表示
クイズに正解したら、その住所の位置を地図上に表示します。
ZENRIN Maps API を利用して、住所を検索し、緯度経度情報を取得して地図を更新します。
```javascript
async function searchAddress(address) {
    const response = await fetch('https://test-web.zmaps-api.com/search/address', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'x-api-key': 'YOUR_API_KEY',
            'Authorization': 'referer'
        },
        body: new URLSearchParams({ word: address, word_match_type: '3', address_level: 'SHK,OAZ', sort: 'address_read' })
    });

    const data = await response.json();
    if (data.status === "OK" && data.result.info.hit > 0) {
        const location = data.result.item[0].position;
        const latLng = new ZDC.LatLng(location[1], location[0]);
        map.setCenter(latLng);
    } else {
        alert("住所の位置情報が見つかりませんでした");
    }
}
```
## 🚀 今後の展望
**問題の追加：** さらに多くの難読住所を追加して、全国の地名を網羅  
**ランキング機能：** 連続正解数や正答率でランキングを競える仕組みを導入  
**ヒント機能：** 地名の由来やヒントを表示して学びながら挑戦できるように  
ZENRIN Maps API を活用することで、より正確な地図データと組み合わせた楽しい学習体験が可能になります。  
ぜひ皆さんも、APIを活用してユニークな地図アプリを作ってみてください！

📢 ご意見・感想をコメントでお待ちしています！