💡

郵便番号検索APIを使い住所の自動入力

2023/01/06に公開約3,600字

郵便番号検索APIを使い住所の自動入力

zipcloudサービスの郵便番号検索APIを使い、JavaScriputで住所を取得する方法

テスト

コード

HTML

<p>
  郵便番号:<input type="number" id="postal-code" placeholder="1000000">
  <input type="button" value="検索" id="bnt">
</p>
<p>ふりがな:<input type="text" id="hiragana"></p>
<p>住所:<input type="text" id="address"></p>

JS

let button = document.getElementById('btn');

// ボタンがクリックされた時の処理
button.addEventListener('click', function() {
  // 住所APIのURL
  let url = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
  
  // 入力された郵便番号のidから取得
  let number = document.getElementById("postal-code").value;
  // url変数に入植されたnumberを結合
  url += number;
  // console.log(url); // 確認用
  
  // 入力するinputタグのidの所得
  let element_address =  document.getElementById("address");
  let element_hiragana =  document.getElementById("hiragana");

  // https://cheat.co.jp/blog/archives/2691
  // urlが存在するか fetch
  fetch(url).then(function(response) {
    console.log('存在しない');
    return response.text();
  }).then(function(text) {
    // 取得したデータをjson型に変換
    let text_json = JSON.parse(text)
    console.log(text_json.results); // 確認用

    // テスト用表示
    // https://www.weed.nagoya/entry/2016/05/11/105145
    let kana = ""; // カタカナの連結
    let address = ""; // 住所の連結

    for (var i = 0; i < text_json.results.length; i++) {

      console.log(text_json.results[i]); // 確認用

      //
      for (let key in text_json.results[i]) {

        // addressとkanaを文字列連結をする
        if (key.match(/address/)) {
          address += text_json.results[i][key];
        } else if (key.match(/kana/)) {
          kana += text_json.results[i][key];
        }

        console.log(key + ': ' + text_json.results[i][key]); // 確認用
      }
    }
    
    console.log(address); // 確認用
    console.log(replaceKanaToHira(hankakuToZenkaku(kana))); // 確認用

    // タグに入力
    if (text_json.results !== null) {
      element_hiragana.value = replaceKanaToHira(hankakuToZenkaku(kana));
      element_address.value = address;
    } else {
      element.textContent = "エラー";
    }

  });
});

// カタカナ半角からカタカナ全角
function hankakuToZenkaku(str) {
    let kanaMap = {
        'ガ': 'ガ', 'ギ': 'ギ', 'グ': 'グ', 'ゲ': 'ゲ', 'ゴ': 'ゴ',
        'ザ': 'ザ', 'ジ': 'ジ', 'ズ': 'ズ', 'ゼ': 'ゼ', 'ゾ': 'ゾ',
        'ダ': 'ダ', 'ヂ': 'ヂ', 'ヅ': 'ヅ', 'デ': 'デ', 'ド': 'ド',
        'バ': 'バ', 'ビ': 'ビ', 'ブ': 'ブ', 'ベ': 'ベ', 'ボ': 'ボ',
        'パ': 'パ', 'ピ': 'ピ', 'プ': 'プ', 'ペ': 'ペ', 'ポ': 'ポ',
        'ヴ': 'ヴ', 'ヷ': 'ヷ', 'ヺ': 'ヺ',
        'ア': 'ア', 'イ': 'イ', 'ウ': 'ウ', 'エ': 'エ', 'オ': 'オ',
        'カ': 'カ', 'キ': 'キ', 'ク': 'ク', 'ケ': 'ケ', 'コ': 'コ',
        'サ': 'サ', 'シ': 'シ', 'ス': 'ス', 'セ': 'セ', 'ソ': 'ソ',
        'タ': 'タ', 'チ': 'チ', 'ツ': 'ツ', 'テ': 'テ', 'ト': 'ト',
        'ナ': 'ナ', 'ニ': 'ニ', 'ヌ': 'ヌ', 'ネ': 'ネ', 'ノ': 'ノ',
        'ハ': 'ハ', 'ヒ': 'ヒ', 'フ': 'フ', 'ヘ': 'ヘ', 'ホ': 'ホ',
        'マ': 'マ', 'ミ': 'ミ', 'ム': 'ム', 'メ': 'メ', 'モ': 'モ',
        'ヤ': 'ヤ', 'ユ': 'ユ', 'ヨ': 'ヨ',
        'ラ': 'ラ', 'リ': 'リ', 'ル': 'ル', 'レ': 'レ', 'ロ': 'ロ',
        'ワ': 'ワ', 'ヲ': 'ヲ', 'ン': 'ン',
        'ァ': 'ァ', 'ィ': 'ィ', 'ゥ': 'ゥ', 'ェ': 'ェ', 'ォ': 'ォ',
        'ッ': 'ッ', 'ャ': 'ャ', 'ュ': 'ュ', 'ョ': 'ョ',
        '。': '。', '、': '、', 'ー': 'ー', '「': '「', '」': '」', '・': '・'
    };
  
  let reg = new RegExp('(' + Object.keys(kanaMap).join('|') + ')', 'g');
    
    return str.replace(reg, function (match) {
                return kanaMap[match];
            })
            .replace(//g, '゙')
            .replace(//g, '゚');
};

// カタカナからひらがな
function replaceKanaToHira(str){
  return str.replace(/[\u30a1-\u30f6]/g, function(s){
    return String.fromCharCode(s.charCodeAt(0) - 0x60);
  });
};

Discussion

ログインするとコメントできます