【React】郵便番号による予測機能のある住所入力コンポーネントの作成とその課題

import axios from "axios";

interface ResponseAddress {
  address1: string;
  address2: string;
  address3: string;
  zipcode: string;
}

interface Response {
  results: ResponseAddress[] | null;
  status: number;
}

const URL = "https://zipcloud.ibsnet.co.jp/api/search";

export const getAddress = async (zipcode: string) =>
  await axios.get<Response>(URL, { params: { zipcode } });

import { getAddress } from "../api/zipcode";

const pattern = /^\d{3}-\d{4}$|^\d{7}$/;

function isValidZipcode(input: string): boolean {
  return pattern.test(toHalfWidth(input));
}

function toHalfWidth(str: string): string {
  return str.replace(/[０-９]/g, (s) =>
    String.fromCharCode(s.charCodeAt(0) - 0xfee0)
  );
}

interface ResponseAddress {
  error: false;
  addressBody: string;
  zipcode: string;
}
interface ErrorAddress {
  error: true;
  message: string;
}

export const getAddressFromZipcode = async (
  zipcode: string
): Promise<ResponseAddress | ErrorAddress> => {
  const fixed = toHalfWidth(zipcode);
  if (!isValidZipcode(fixed)) {
    return { error: true, message: "7桁の郵便番号を入力してください" };
  }
  const res = await getAddress(fixed);
  if (!res.data.results) {
    return { error: true, message: "存在しない郵便番号のようです" };
  }
  return {
    error: false,
    addressBody: `${res.data.results[0].address1} ${res.data.results[0].address2} ${res.data.results[0].address3}`,
    zipcode: res.data.results[0].zipcode,
  };
};

export default function Index(): ReactElement | null {
  const [zipcode, setZipcode] = useState("");
  const [addressBody, setAddressBody] = useState("");
  const [suffix, setSuffix] = useState("");
  const [zipcodeErrorMessage, setZipcodeErrorMessage] = useState("");

  useEffect(() => {
    getAddressFromZipcode(zipcode).then((res) => {
      if (!zipcode) return setZipcodeErrorMessage("");
      if (res.error) return setZipcodeErrorMessage(res.message);
      setZipcode(res.zipcode);
      setAddressBody(res.addressBody);
      setZipcodeErrorMessage("");
    });
  }, [zipcode]);

  return (
    <PageBase title={"AddressFromZipcode"}>
      <div>
        <h1 className={styles.title}>Address</h1>
        <TextField
          label="郵便番号"
          value={zipcode}
          onChange={(e) => setZipcode(e.target.value)}
          error={Boolean(zipcodeErrorMessage)}
          helperText={zipcodeErrorMessage}
        />
        <TextField
          label="都道府県・市区町村"
          value={addressBody}
          onChange={(e) => setAddressBody(e.target.value)}
        />
        <TextField
          label="番地・建物名・部屋番号"
          value={suffix}
          onChange={(e) => setSuffix(e.target.value)}
        />
        <Button
          variant="contained"
          color="primary"
          disabled={Boolean(
            !zipcode || !addressBody || !suffix || zipcodeErrorMessage
          )}
          onChange={submit}
        >
          登録
        </Button>
      </div>
    </PageBase>
  );
}