【Next.js×TypeScript】フォームで郵便番号から住所を取得する

2022年12月31日2023年2月17日

本記事では、「フォームで入力した郵便番号から住所を取得する方法」をご紹介していきます！

こんな感じです。

See the Pen Address Form by Taichi.Y (@tai72) on CodePen.

このように、「ユーザーが入力した郵便番号」から「住所」を取得して入力を省けるような機能を実装しています。

公式ドキュメントはこちら。

※Node.js × TypeScript × SendGrid を用いてメールを送信する方法も紹介しておりますのでよかったらぜひ！

実装

ディレクトリ構成

ディレクトリ構成はこんな感じです。

pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Component {...pageProps} />
  )
}

pages/index.tsx

import { useState } from "react"
import axios from 'axios'


export default function Home() {
  const [zipcode, setZipcode] = useState('');   // 郵便番号
  const [pref, setPref] = useState('');         // 都道府県
  const [address, setAddress] = useState('');   // 住所
  const [msg, setMsg] = useState(null);         // エラーメッセージ

  const getAddress = async (): Promise<void> => {
    const res = await axios.get("https://zipcloud.ibsnet.co.jp/api/search", {
      params: { zipcode: zipcode }, 
    });
    console.log(res);    // 中身確認用
    if (res.data.status === 200) {
      setPref(res.data.results[0].address1);
      setAddress(res.data.results[0].address2 + res.data.results[0].address3);
      setMsg(null);
    } else {
      setPref('');
      setAddress('');
      setMsg(res.data.message);
    }
  }

  return (
    <>
      <div className="wrapper">
        <h4 className="label">住所</h4>
        <div className="form-address">
          <div className="disp-flex-col">
            <div className="form-content">
              <p>郵便番号</p>
              <input
                type="text" 
                placeholder="例）0123456" 
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setZipcode(e.target.value)}
              />
              <button onClick={getAddress}>住所自動入力</button>
              { msg ? <p className="errMsg">{msg}</p> : null }
            </div>
            <div className="form-content">
              <p>都道府県</p>
              <input
                type="text" 
                value={pref} 
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAddress(e.target.value)}
              />
            </div>
            <div className="form-content">
              <p>市区町村</p>
              <input
                type="text" 
                value={address} 
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAddress(e.target.value)}
              />
            </div>
            <div className="form-content">
              <p>番地</p>
              <input></input>
            </div>
            <div className="form-content">
              <p>建物名・部屋番号</p>
              <input></input>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

長いので分割して解説していきます。

const [zipcode, setZipcode] = useState('');   // 郵便番号
const [pref, setPref] = useState('');         // 都道府県
const [address, setAddress] = useState('');   // 住所
const [msg, setMsg] = useState(null);         // エラーメッセージ

react-hooks の useState() を用いて、「ユーザーが入力した郵便番号」や「APIを叩いて取得した住所」などを格納する state を定義します。

const getAddress = async (): Promise<void> => {
  const res = await axios.get("https://zipcloud.ibsnet.co.jp/api/search", {
    params: { zipcode: zipcode }, 
  });
  console.log(res);    // 中身確認用
  if (res.data.status === 200) {
    setPref(res.data.results[0].address1);
    setAddress(res.data.results[0].address2 + res.data.results[0].address3);
    setMsg(null);
  } else {
    setPref('');
    setAddress('');
    setMsg(res.data.message);
  }
}

getAddress関数内で、APIを叩いて住所を取得します。

APIを叩く際に、パラメータとして郵便番号を渡しています。（3行目）

APIが正常に叩けたら = レスポンスのステータスコードが 200 だった場合、取得した住所を先ほど定義した pref、address に格納しています。

もし正常に叩けなかった場合は

エラーメッセージを msg に格納
空欄を pref、address に格納

としています。

このままですと、郵便番号が間違っている状態でAPIを叩いた場合、住所が入力してあっても消されてしまいます。

必要に応じてロジックを修正してください。

<p>郵便番号</p>
<input
  type="text" 
  placeholder="例）0123456" 
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setZipcode(e.target.value)}
/>
<button onClick={getAddress}>住所自動入力</button>
{ msg ? <p className="errMsg">{msg}</p> : null }

ここでは、入力した郵便番号が変更されるたびに随時 zipcode に格納しています。

また、ボタンを押した時に先ほど定義した getAddress関数を呼び出しています。

<p>都道府県</p>
<input
  type="text" 
  value={pref} 
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAddress(e.target.value)}
/>

ここでは都道府県の入力フォームを定義しています。

APIを叩いて取得した住所を表示するために「value={pref}」としています。

このままですと、この入力フォームの値を変更することができないので onChange={…略}（5行目）を追加してあげましょう！

郵便番号からは「番地」「建物名・部屋番号」は取得できないので、特に属性値は設定していません。適宜修正してください。

styles/globals.css

本題とはあまり関係ないですが、cssです。

styles/globals.css

.disp-flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.disp-flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrapper {
  width: 600px;
  margin: 30px auto;
  padding: 30px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.label::after {
  content: "必須";
  background-color: #ba4923;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  min-width: 10px;
  padding: 5px 7px;
  margin: 0px 5px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
}

.form-content {
  width: 100%;
  margin: .5rem 0;
}

.form-content p {
  display: block;
  margin-bottom: 5px;
}

.form-content input {
  width: 100%;
  height: 30px;
  border: solid 1px grey;
  opacity: .3;
  border-radius: 3px;
  font-size: 16px;
  color: black!important;
}

button {
  margin: .5rem 0;
  padding: .5rem;
  border-radius: .2px;
  border: solid 1px black;
  transition-duration: .2s;
}

button:hover {
  opacity: .7;
  cursor: pointer;
}

.errMsg {
  color: red;
}

以上です！