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

郵便番号検索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);
  });
};