Express.jsとPostgreSQLの連携はじめの一歩〜コネクションプール, express-promise-router〜

watanabe_kf1983

2023年6月30日 12:51

プログラム自学案内の33回目です。今回の記事では、Express.jsとPostgreSQLを連携させます。前回までの記事はこちらです。

この記事でやることの説明

今回は、24回目の記事までに作ったExpress.jsアプリに画面を追加し、26回目の記事で作ったDB（磯野家テーブル）の内容を表示させます。

イメージはこうです。

トップページにリンクを足します。リンクをクリックすると

isono_familyテーブルの内容が表示されるようにします。

やり方を次に説明しますが、コードの理解は結構難しいです。最低、次の二つは必要です。

前々回の記事の課題が解けていること
前回の記事の理解

今回の記事で紹介するサンプルコードには、async, await が頻出します。この語には注意し、なぜその場所にasync, awaitが入っているか説明できるようにしてください。

準備：パッケージ追加

まずは、プロジェクトにPostgreSQLに読み書きするためのパッケージ、pgが要りますね。ついでに、Express.jsで async/awaitを簡単に使うためのライブラリ、express-promise-router も足します。

npm install pg
npm install express-promise-router

DBへの接続

ではコードを書き始めます。はじめに、PostgreSQLに接続するためのコードを書きます。

db/index.js

const pg = require("pg")

const pool = new pg.Pool({
    database: 'mydb',
    user: 'watanabe',
    password: 'pass',
    max: 10
})

async function query(text, params) {
    return await pool.query(text, params)
}

module.exports = { query: query };

database, user, password は適宜変更してください。

ところで、このコードに出てきている Pool ってなんだと思います？これは、コネクションプール(connection pool) の略で、「DBのコネクションが貯めこまれた場所」と理解してください。お金を貯めこむことを「プールしておく」なんて言う人がいますでしょう、そのプールの意味に由来しています。

理由の説明は省きますが、WebアプリがDBと接続するときには、DBのコネクションをコネクションプールに貯めこんで、使いまわすのが定石なのです。

Model

磯野家テーブルを読むコードをModelに書きます。

models/family.js

const db = require('../db');

async function family() {
    result = await db.query('SELECT full_name, age FROM isono_family');
    return result.rows
}

module.exports = family;

Controller

磯野家テーブルを読むコードと、HTTPリクエストのパス "/family" を関連付けます。

"/family" は、磯野家テーブルを読むコード、すなわち async 関数を呼び出さなければいけません。これをするためには、express.jsの Router のかわりに expressPromiseRouterを使ってリクエストパスと処理を紐づけるようにコードを変更します。そうして、リクエストパス "/family" を非同期処理に紐づけます。

controllers/router.js

const expressPromiseRouter = require('express-promise-router');
const router = expressPromiseRouter();
const family = require('../models/family');

(中略)

router.get('/family', async function (req, res, next) {
    const data = await family();
    res.render('family.html', { "family": data });
});

(以下略)

View

磯野家のページはこんな感じです。

views/family.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <title> Family </title>
</head>

<body>
    <h1> Family </h1>
    <table>
        <tr>
            <th>なまえ</th>
            <th>年齢</th>
        </tr>
        {{#family}}
        <tr>
            <td>{{full_name}}</td>
            <td class="number">{{age}}</td>
        </tr>
        {{/family}}
    </table>

    <hr>
    <a href="/">ホームへ</a>

</body>

</html>

CSSも、表の見栄えを良くするためにちょっと追記します。

static/stylesheets/style.css

（中略）
th {
    border-bottom: solid 1px black;
}
td {
    border-bottom: solid 1px lightgray;
}
td.number {
    text-align: right;
}

メインの画面には磯野家のページのリンクを作ります。

views/list_view.html

（中略）
    <hr>

    <a href="/family">磯野家の人々</a>

</body>

</html>

以上で終わりです。

まとめと次回予告

今回の記事では、とりあえずExpress.jsアプリで PostgreSQLのテーブルの内容を表示させてみました。次回は、PostgreSQLへの書き込みをしてみます。じつはここからが本番でして、パラメータクエリ、例外処理、トランザクション制御、入力チェックという重要トピックにも触れることになると思います。

#コラム #プログラミング #JavaScript #Node .js #Express .js #PostgreSQL

この記事が気に入ったらサポートをしてみませんか？