zipcloudを$.getJSONで叩いてみた。

郵便番号をもとに、住所が入力されるフォームを作ってみました。
何番煎じかわかりませんが、jQueryでの$.getJSONの扱いに落とし穴がありましたので、記事にしてみます。

１．zipcloudとは
２．zipcloudの使い方
1. リクエストURL
2. パラメータ
３．$.getJSONで叩く
４．zipcloudを使うサンプル
５．出典

１．zipcloudとは

日本郵便が公開している、郵便番号データ検索のAPIを提供してくれています。
無償で利用することができ、軽快にデータを返してくれます。

詳しい使い方は後述するとともに、以下に詳しく書かれています。

zipcloud 郵便番号検索API

JSONPも使うことができるので、javascriptだけで郵便番号検索を実装できます。

２．zipcloudの使い方

リクエストURL

https://zipcloud.ibsnet.co.jp/api/search

パラメータ

zipcode（必須）･････　郵便番号 -（ハイフン省略可）
callback　･････　JSONPを使う際のコールバック関数名
limit　･････　最大の取得件数（初期値：20）

例）〒790-0001　松山市一番町の場合
　https://zipcloud.ibsnet.co.jp/api/search?zipcode=7900001

JSONで取得する場合は、これでokです。
ただし、XmlHttpRequestのクロスドメイン制約を受けるので、実際の運用ではcallbackを指定してJSONPとして取得する必要があります。

３．$.getJSONで叩く

$.getJSONの使い方

まず、jQueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

次に、javascriptを記述していきます。
使い方は以下の通り。簡単ですね。

$.getJSON(
  'https://hoge.com/api', // リクエストURL
  { // リクエストパラメータ（省略可）
    key1: 'value1',
    key2: 'value2'
  },
  function( json ){ // 通信成功時のコールバック関数（戻り値=json）
    .....
});

URL，パラメータをいれて、叩く･････が

$.getJSON(
  'https://zipcloud.ibsnet.co.jp/api/search', // リクエストURL
  { // リクエストパラメータ
    zipcode: '7900001',
    callback: '?'
  },
  function( data ){ // 通信成功時のコールバック関数（無名）
    .....
});

失敗！！
JSONPが使いたいので、callbackを指定しているのですが、これではいけません。

結論：callbackはリクエストURLにつける

$.getJSON(
  'https://zipcloud.ibsnet.co.jp/api/search?callback=?', // リクエストURL
  { // リクエストパラメータ
    zipcode: '7900001'
  },
  function( data ){ // 通信成功時のコールバック関数（無名）
    .....
});

同じじゃないの？と思いますが、これなら動きます。
どうして？と、思って簡単に調べてみました。

JSONP
If the URL includes the string “callback=?” (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.
（Google翻訳）
URL に「callback=?」という文字列が含まれている場合 (またはサーバー側 API で定義されている同様のもの)、要求は代わりに JSONP として扱われます。詳細については、jsonpデータ型の説明を参照し$.ajax()てください。
https://api.jquery.com/jquery.getjson/

つまりは、URLに「callback=?」をつけることで、JSONPとして扱うことができるようです。
これが、まんまと引っかかった落とし穴でした。