前回はデータベースに全国郵便番号データをCSV形式で入れる事ができたので、今回は実際にサーバーで郵便番号が検索できるフォームを作成します。前回の記事でPostgres(データベース)を確認してみるとencoding collate ctypeがen_US.UTF-8になっていて、ログ確認時にブラウザで文字化けを起こしている挙動を得ました。なので、新たにaddressというデータベースを作りエンコーディングをja_JP.UTF-8に書き換えることにしました。

create database address template template0 ENCODING = 'UTF8' LC_COLLATE = 'ja_JP.UTF-8' LC_CTYPE = 'ja_JP.UTF-8';

同時にテーブルも作り直し、以下の通り作成し直しました。

                Table "public.address"
     Column     |       Type        | Collation | Nullable | Default 
----------------+-------------------+-----------+----------+---------
 post           | character(21)     |           | not null | 
 prefectures    | character varying |           | not null | 
 municipalities | character varying |           | not null | 
 address        | character varying |           | not null |

\COPYでCSVファイルをデータベースに保存し、select * from address;で確認。

post          | prefectures | municipalities     | address                                    
--------------+-------------+--------------------+----------------------------------------------
 600000       | 北海道       | 札幌市中央区         | 以下に掲載がない場合
 640941       | 北海道       | 札幌市中央区         | 旭ケ丘
 600041       | 北海道       | 札幌市中央区         | 大通東
 600042       | 北海道       | 札幌市中央区         | 大通西（１～１９丁目）
 640820       | 北海道       | 札幌市中央区         | 大通西（２０～２８丁目）
 600031       | 北海道       | 札幌市中央区         | 北一条東
 600001       | 北海道       | 札幌市中央区         | 北一条西（１～１９丁目）
 640821       | 北海道       | 札幌市中央区         | 北一条西（２０～２８丁目）
:

結局、ブラウザ確認時の文字化けは解消されずでしたが。細かな検証は今後の課題として、進んで行きたいと思います。今回は、React(JavaScriptのライブラリ)のSSR(サイバーサイドレンダリング)を可能にするJavaScriptのフレームワークであるNext.jsを導入し実装していきたいと思います。node.jsがインストールされていない方はこちらをインストールして下さい。チュートリアルに従って、ターミナルから次のコマンドを実行します。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

ディレクトリであるNESTJS-BLOGが作成され、各パッケージが入りました。

続けてIDE(統合開発環境)を整えます。開発時からエラーに気づけるように設定を書く為、タッチコマンドでtsconfig.jsonを入れ、npmやtypescriptなどのパッケージをsave-devの方にインストール。一度npm run devを実行します。

touch tsconfig.json

npm install --save-dev typescript @types/react

npm run dev

の準にターミナルで実行すると、以下の画面になり、

http://localhost:3000で確認すると、無事ローカル上で挙動を確認できました。

ここまで来たら、いよいよ本題であるページのレンダリング(データをもとに表示内容を作る)やルーティング(pagesディレクトリ内のファイルの結び付け)、Reactフック(クラスを作成せずに、状態やその他のReact機能を使用を可能にするもの)を使ってコードを書いていきましょう。pagesディレクトリ内にapiディレクトリを作ってaddress.tsファイルを作成し記述していきます。まずはSequelizeを使用してデータベースを呼び出します。Sequelizeとは、Node.js上でORMを提供するライブラリです。以下のコマンドでインストールしましょう。

npm install --save sequelize

構文・継承を用いたclass 子クラス extends 親クラスでAddressとModelを定義し、データベースのテーブルに文字列で値を渡します。init()内に各テーブルの要素を入れます。Sequelizeでデータベースのカラムを変更せずModelを定義するために、主キーに対応するpost(カラム)にprimaryKey:trueを追加。createdAt,updatedAtを追加しないfreezeTableName:trueとtimestamps:falseを利用してテーブルのスキーマを現状の形で使えるようにします。郵便番号データをasyncで以下のように記述。

pages/api/address.ts

import { Sequelize, Model, DataTypes } from 'sequelize';

const sequelize = new Sequelize({
  database: 'address',
  password: null,
  dialect: 'postgres',
  port: 5432,
  host: 'localhost',
  timezone: 'Asia/Tokyo',
});


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 });

export default async(req, res) => {
  await sequelize.sync();
  console.log(await Address.count());
  const address = await Address.findOne({
    where: {
     post: req.query['post'],
    }
  });
  console.log(address)
  res.status(200).send(JSON.stringify(address))
}

pagesディレクトリ内にあるindex.jsファイルをindex.tsxに書き換えてコードを以下のように記述します。

pages/index.tsx

import Head from 'next/head'
import React, { Props } from "react";

const Home = (props: Props) => {
  const [value, setValue] = React.useState("");
  const [prefectures, setPrefectures] = React.useState("");
  const [municipalities, setMunicipalities] = React.useState("");
  const [address, setAddress] = React.useState("");
  
  React.useEffect(()=>{
    fetch('/api/address?post='+value)
    .then(response => response.json())
    .then(data => {
      if(data !== null){ 
        setPrefectures(data.prefectures)
        setMunicipalities(data.municipalities)
        setAddress(data.address)}});
  },[value])
  
  return (
    <div>
      <h3>郵便番号を入力して下さい</h3>
      <label style={{ display: "block" }}> 
        <input type='text'
          placeholder="半角数字で入力"
          maxLength={8}
          size={14}
          value={value}
          onChange={event => setValue(event.target.value.replace("-",""))} />
      </label>
      {prefectures!=""&& <h3>住所</h3>}
      {prefectures!=""&& 
      
      <div><label style={{ display: "block" }}> 
          <input type='text'
          value={prefectures}
          onChange={event => setValue(event.target.value)} /><br/>
       </label>
          <label style={{ display: "block" }}> 
          <input type='text'
          value={municipalities}
          onChange={event => setValue(event.target.value)} /><br/>
       </label>
       <label style={{ display: "block" }}> 
          <input type='text'
          value={address}
          onChange={event => setValue(event.target.value)} /><br/>
          </label>
      </div>}
    </div>
  )
}

export default Home;

ターミナルで実行してみます。

nmp run dev

http://localhost:3000/にて挙動を検証。

郵便番号を入力してみます！

なんとか、それらしきものが出来上がりました。