NEXT.JSで住所を入力して郵便番号を検索するフォームを作ってみる

[前回](https://qiita.com/ume-bar/items/259dad659157d8a04fee)はNEXT.JSを使って郵便番号検索フォームらしき物を作ってみましたが、NEXT.JSの理解が今一つで、その他の概念にも知見が乏しかった為、今度は郵便番号を住所から入力して出力させるフォームを作成しつつ、苦手な部分を克服しようと挑戦してみました。ルート直下の`pages`ディレクトリに`api/prefec.ts`と`index.tsx`ファイルを作成します。前回データベースの構造体は作り上げてCSVファイルで郵便番号をテーブル内に入れてあるので、今回はファイル名をちょこっと変えて書き換えてリファクタリングして行きます。

```api/prefec.ts
// importで以下３点を呼び出します
import { Sequelize, Model, DataTypes } from 'sequelize';

// sequelizeを定義します
const sequelize = new Sequelize({
  database: 'address',
  username: 'umehara',
  password: null,
  dialect: 'postgres',
  port: 5432,
  host: 'localhost',
  timezone: 'Asia/Tokyo',
});

// Modelを定義します
class Address extends Model {}
Address.init({
  post: {type:DataTypes.STRING,primaryKey:true},
  prefectures: DataTypes.STRING,
  municipalities: DataTypes.STRING,
  address: DataTypes.STRING
}, { sequelize, modelName: 'address',freezeTableName:true,timestamps:false });

// sequelizeのwhere句を定義
export default async(req, res) => {
  await sequelize.sync();
  console.log(await Address.count());
  const address = await Address.findOne({
    where: {
     prefectures: req.query['prefectures'],
     municipalities: req.query['municipalities'],
     address: req.query['address']
    }
  });
  console.log(address)
  res.status(200).send(JSON.stringify(address))
}
```
`api/prefec.ts`ファイルでは主に`sequelizeのwhere句`条件を使い、都道府県・市区郡・市区町村をテーブル列から呼び出せるように関連付けます。

```index.tsx
// それぞれの場所からモジュールを読み込みます
import Head from 'next/head'
import React, { useState } from "react";
import { values } from 'sequelize/types/lib/operators';

// Homeを定義しJSXのエレメントを返します
const Home = (props: any) => {
  const [post, setPost] = React.useState("");
  const [prefectures, setPrefectures] = React.useState("");
  const [municipalities, setMunicipalities] = React.useState("");
  const [address, setAddress] = React.useState("");
  const [count, setCount] = useState(0);
  const blue = '#0000FF'

// React Hooksを使ってfetchメソッドでデータベースから情報を引っ張ってきます。thenチェイン使ってみました
  React.useEffect(()=>{
    fetch('/api/prefec?prefectures='+ prefectures+ '&municipalities=' + municipalities+'&address=' + address)
    .then(response => response.json())
    .then(data => {
      if(data !== null){ 
        setPost(data.post)
      } else { setPost(null)
      }
    });
    // 一文字が変わったらifが実行される
  },[prefectures, municipalities, address])

// このreturn内にJSXでフォームのHTML部分を記述  
  return (
    <div style={{color: blue, }} > 
      <h3>都道府県から住所を入力して下さい</h3>
        <div>
          <label style={{ display: "block" }}> 
          <input type='text'
          value={prefectures}
          onChange={event => setPrefectures(event.target.value)} /><br/>
          </label>
          
          // !=""&&で見つかったら表示に変える
          {prefectures!=""&&
          <label style={{ display: "block" }}> 
          <input type='text'
          value={municipalities}
          onChange={event => setMunicipalities(event.target.value)} /><br/>
          </label>}
          
          {municipalities!=""&&
          <label style={{ display: "block" }}> 
          <input type='text'
          value={address}
          onChange={event => setAddress(event.target.value)} /><br/>
          </label>}
        </div>
          
          // post &&で住所データがマッチされたときだけラストの項目を表示
          {post &&<h3>あなたの調べた郵便番号はこちらです</h3>}
          
          {post &&<label style={{ display: "block" }}>  
          <input type='text'
          value={post}
          onChange={event => setPost(event.target.value.replace("-",""))} />
          </label>}
    </div>
  )
}
export default Home;
```
#それでは、`npm run dev`で挙動を検証してみます。ブラウザで確認してみましょう、最初はこちらの画面。
![スクリーンショット 2021-05-22 14.03.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/874a285c-8055-8c13-4751-266f0aa410e6.png)

#まずは、都道府県を入力。次のテキストボックスが現れるのでTABキーで移動。
![スクリーンショット 2021-05-22 14.04.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/273dfe3b-567e-d992-b2fa-a95b90f2e607.png)

#市区郡を入力します。ここまでは順調です。
![スクリーンショット 2021-05-22 14.04.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/4d3a3bf6-064a-0ee6-44fb-4be1bc2932e9.png)

#最後に市区町村です。入力と同時に調べたい郵便番号が出力されました。
![スクリーンショット 2021-05-22 14.04.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/440f6060-9699-5be1-97c1-23c3d3af80b2.png)

#ちなみに、わざと市区町村を間違えてみると！この通り、なにも表示されません。
![スクリーンショット 2021-05-22 14.05.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/eed5cf62-c912-6c80-08bf-aa6023172c07.png)
##ということで、今回もそれらしき物が出来上がりました。