HOMEJavaScript【JavaScript】郵便番号検索APIで住所検索を実装する【JavaScript】郵便番号検索APIで住所検索を実装する2022.03.05JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptで郵便番号検索APIを使用して住所検索を実装する方法をご紹介しています。郵便番号検索APIで住所検索を実装したいんだけど、どうすればいいんだろう?上記の疑問にお答えしています。郵便番号検索APIとは郵便番号検索APIは、株式会社アイビスが運営するzipcloudのサービスです。郵便番号から住所を取得することができるAPIを提供しています。下記が公式のWebサイトです。公式サイト:http://zipcloud.ibsnet.co.jp/元データになっているのは日本郵便なので、正確な情報が期待できます。jQueryでよく使用されているajaxzip3も郵便局のデータとなっているため、使用感は似たようなものになるのではないかと思います。郵便番号検索APIで取得できる情報は下記のとおりです。ステータスコードとエラーメッセージなども用意されています。郵便番号から住所を取得するサンプル下記は動作確認のために作成したサンプルです。郵便番号を入力すると、住所情報が各入力項目の値に設定されるようにしています。クリックで住所を検索する処理に入ることを想定しています。クリックではなく自動で検索したい場合は、クリックイベント部分をキーボードイベントに変更し、入力された郵便番号の桁数が満たされれば自動的に検索するように変更すれば対応できるかと思います。下記はサンプルで使用しているソースです。HTMLとJavaScriptだけ掲載しています。HTMLHTMLは普通のフォームです。JSから要素を取得しやすいようにid属性を追加しています。要素の取得方法は環境に合わせて変更していただければと思います。</table></form>JSJavaScriptでは「住所検索」がクリックされた後の処理を記述しています。非同期通信にはfetchを使用しています。普通にfetchでアクセスするとクロスオリジンエラーになりますのでJSONPでアクセスします。下記のライブラリを読み込んでJSONPが使用できるようにしておきます。src="https://cdn.jsdelivr.net/npm/fetch-jsonp@1.1.3/build/fetch-jsonp.min.js"></script>後は入力された郵便番号から住所情報を取得するだけです。やっつけ感のあるスクリプトで申し訳ないですが、参考にしていただければ幸いです。'郵便番号から住所が見つかりませんでした。false);以上がサンプルで使用しているソース一式です。CSSが欲しい方はたぶんいないと思いますので、割愛しています。(もし必要であればコードペンから取得してください!)最後に今回初めてJavaScriptでfetchを使ってみましたが、XMLHttpRequestよりもだいぶすっきりとしたスクリプトを書くことができますね。fetchとpromiseはポリフィルを読み込めばIE11でも使えるので、今後非同期通信はfetchメインで使っていこうと思います!以上、JavaScriptで郵便番号検索APIを使用して住所検索を実装する方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。