【JavaScript】Node.jsでAPI連携してみた（住所取得API）【Windows編】

2023年5月13日2023年5月22日

概要

やりたいこととしては、サーバー側でfetch関数でAPI連携→取得したデータをフロントサイドに流し込み。

粗末な参考画像ですが、こんな感じ。

少し前に上げた投稿では、フロントサイドでfetch関数を使用していたため、APIキーが丸見えでした。

その投稿はこちら

Fetch関数で取得したデータから欲しい箇所だけ取り出してみた。 – エンジニアの卵

これでは悪用たされる危険があるためよろしくない。

というかダメ。

今回行う方法もまだまだ対策としては不十分です。

ですが、一気にすべてをやろうとすると大変なので少しずつやっていこうと思います。

必然的に回数をこなすことになるので結果的に理解が深まると思う。

成果物

準備

前提として下記２つの投稿が完了した状態である必要があります。(Node.jsとExpressの環境構築)

Node.js準備編

body-parserのインストール

管理者権限でコマンドプロンプトを立ち上げます。

ディレクトリを移動します。

cd/d D: & cd server/app

移動が完了しましたら、インストールコマンドを入力します。

npm install --save body-parser

package.jsonを確認すると、”body-parser”: “バージョン”,が追加されます。

これで準備は完了です。

コード

Node.js側

const express = require("express"); 
const app = express();
//下記3行がないと、ブラウザ側にデータをうまく送信できません。
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())


//住所APIで住所を取得
async function api(req){

	let para=req;
    let url='https://zipcloud.ibsnet.co.jp/api/search?zipcode='+para;
    const arr=await fetch(url) 
    .then(response => response.json());

    return arr;
}

//html読み込み
app.get("/", function (req, res) { 

    res.sendFile(__dirname + "/index.html");

});

//htmlからのpostリクエストを受けとる
app.post("/", async function (req, res) {

	res.setHeader("Content-Type","application/json");
    const kekka=await api(req.body.number);
	res.json(kekka);

});


app.listen(5000,function() {

    console.log("Listening on localhost port 5000"); 

});

ブラウザ側のコードはこちら。

<!DOCTYPE html>
<html lang="ja">
<head>

    <meta charset="utf-8">
    <title>住所自動入力</title>

</head>

<script>

    async function jidou() {
        
        const jidou = document.querySelector("#jidou");
        const banngou = document.querySelector("#numbers");
        const para = { number: banngou.value };

        try {

            const response = await fetch("http://127.0.0.1:5000/", {

                method: "POST",

                headers: {
                "Content-Type": "application/json",
                },

                body: JSON.stringify(para),

            });

            const data = await response.json();

            document.querySelector("#ken").value = data.results[0].address1;
            document.querySelector("#si").value = data.results[0].address2;
            document.querySelector("#banti").value = data.results[0].address3;

        } catch (error) {

            console.error(error);
            alert("エラーが発生しました。もう一度やり直してください。");

        }
    }
</script>

<body>

    <div>

        郵便番号：<input type="number" id="numbers" size="40" value="1000011" name="para">
        <input type="button" id="jidou" onclick="jidou()" value="自動入力">
        <br>
        都道府県：<input type="text" id="ken" size="40"><br>
        市区町村：<input type="text" id="si" size="40"><br>
        番地：<input type="text" id="banti" size="40"><br>

    </div>

</body>

</html>