【React】axiosのGetで郵便番号から住所を取得する

はじめに

Web APIからJavaScriptを使ってデータを取得できると本格的なプログラムが作れますよね。
今回はaxiosを使って、郵便番号から住所を取得する方法を考えてみました。

axiosのインストール

まずはnpmを使ってプロジェクトにaxiosをインストールしておきましょう。

npm install axios

同様な機能として「fetch」がありますが、ブラウザの挙動に依存してしまいます。
「axios」を利用すれば環境差なく動作するので、とてもおすすめです。

axiosのGetの基本

axiosにはGet、Post、Putなどhttpリクエストを行う機能は一通りありますが、
今回は基本としてGetについて紹介します。

axios.getでURLを指定します。thenはリクエスト成功時の処理、catchはリクエスト失敗時の処理を書きます。

axios
  .get("[URL]")
      .then((res) => {
        // 成功時の処理
      })
      .catch((error) => {
        // 失敗時の処理
      });

axiosのGetで郵便番号から住所を取得する

応用編として郵便番号から住所を取得してみましょう。

APIはzipcloudさんのAPIを利用させていただいております。
郵便番号検索API - zipcloud

また、UIについては簡単にモダンなデザインを実現できるMaterial UIを利用しています。 必要でしたら下記の記事を参考に導入してみてください。
【React】npmを利用したMaterialUIのインストール方法のご紹介 - フロントエンドエンジニアのスターティングノート

App.js

import { useState } from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import axios from "axios";

function App() {
  const [postCode, setPostCode] = useState("");
  const [address, setAddress] = useState("");

  function getPostCodeToAddress() {
    axios
      .get("https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + postCode)
      .then((res) => {
        setAddress(
          res.data.results[0].address1 +
            res.data.results[0].address2 +
            res.data.results[0].address3
        );
      })
      .catch((error) => {
        console.log(error);
      });
  }

  return (
    <>
      <Box m={3}>
        <TextField
          variant="outlined"
          size="small"
          label="郵便番号"
          value={postCode}
          onChange={(e) => {
            setPostCode(e.target.value);
          }}
        />
      </Box>
      <Box m={3}>
        <Button
          variant="contained"
          color="secondary"
          onClick={getPostCodeToAddress}
        >
          GET
        </Button>
      </Box>
      <Box m={3}>{address}</Box>
    </>
  );
}

export default App;