Node.jsを使ってMySQLのSUM関数により取得した値をビューファイルで表示する方法

Question

実現したいこと

• Node.jsを使ってMySQLのSUM関数で取得した値をビューファイルで表示したい。

前提

初心者です。お忙しいところ見てくださりありがとうございます。
勉強のため、Node.jsを使って家計簿アプリを作成しています。
MySQLのデータから抽出したデータで「今月の支出合計」を表示したいのですが、viewファイルにうまく反映されません。
コマンドプロンプトにはconsole.logで正しい合計金額が表示されるため、関数の処理は間違っていないと考えます。
（multipleStatements: trueは記述済み）

どのようにしたらviewファイルに反映されるか、アドバイスをいただけますと幸いです。

発生している問題・エラーメッセージ

・エラーの表示はないが、
「今月の支出は　円です」という風に、値が表示されない。
その他生じた問題は「試したこと」にて後述いたします。

該当のソースコード

app.get('/index', (req, res) => {
    const select = 
    connection.query(
        `SELECT * 
         FROM spendings 
         ORDER BY date DESC, id DESC; 
         SELECT SUM(price) 
         FROM spendings
         WHERE DATE_FORMAT(date,'%Y%m') = DATE_FORMAT(NOW(),'%Y%m')`,
        (error, results) => {
            res.render('index.ejs', {spendings: results[0],sums: results[1]});
        }
    );
});

<div class="container-text">
    <h2>支出リスト</h2>
    <h1>今月の支出は
           <span class="sum">
             <%= sums['SUM(price)'] %>
           </span>    
            円です
    </h1>
</div>

試したこと

①ソースコードに記載のとおり
結果→「今月の支出は　円です」のように、値が表示されない。

②index.ejs内の
<%= sums['SUM(price)'] %>
を
<%= sums %>とする
結果→「今月の支出は［object Object］円です」と表示される。

③index.ejs内の
<%= sums['SUM(price)'] %>
を
<%= JSON.stringify(sums) %>とする
結果→「今月の支出は [{"SUM(price)":1940}] 円です」
※1940は正しい合計数値です

その他にもいくつか記述方法を変えて試しましたが、表示は上の3つのパターンのいずれか
になりました。

補足情報（FW/ツールのバージョンなど）

環境Windows10、MySQL5.7、Node.js 18

拙い文章で恐縮ですが、何卒宜しくお願いします。

Comments

[yuma.inaura]

配列要素の1番目を使わなければいかないとか、それ系だったりしませんか

[fujiyamaru]

コメントをいただき、ありがとうございました。参考にさせていただきました。
問題についても、解決いたしました。

Answer 1

質問文に対してシンプルに解決策を出すなら、
SQL文には列別名(as)が存在します。

SELECT * 
FROM spendings 
ORDER BY date DESC, id DESC; 
SELECT SUM(price) as sum
FROM spendings
WHERE DATE_FORMAT(date,'%Y%m') = DATE_FORMAT(NOW(),'%Y%m')`

シンプルな列別名が与えられたので、簡単にアクセスできるようになりました。

<div class="container-text">
    <h2>支出リスト</h2>
    <h1>今月の支出は
           <span class="sum">
             <%= sum %>
           </span>
            円です
    </h1>
</div>

ですが……
なんじゃこりゃ、SQLインジェクションを自分で引き起こしてるじゃん。
誰だよこんな書き方を質問者さんに勧めたヤツは。

https://www.npmjs.com/package/mysql#multiple-statement-queries

Multiple statement queries

Support for multiple statements is disabled for security reasons (it allows for SQL injection attacks if values are not properly escaped).
To use this feature you have to enable it for your connection:
和訳: 複数のステートメントのサポートは、セキュリティ上の理由から無効になっています (値が適切にエスケープされていない場合、SQL インジェクション攻撃が可能になります)。
この機能を使用するには、接続に対して有効にする必要があります。

2個のSQL文は個別に投げましょう。
その為のベストプラクティスまで解説していきます。

それを踏まえて手直しするとこんな感じ。

app.get('/index', (req, res) => {
    connection.query(
        `SELECT *
         FROM spendings
         ORDER BY date DESC, id DESC;`
        (err, spendings) => {
            if (err) console.error(err);
            connection.query(
                `SELECT SUM(price) as sum
                 FROM spendings
                 WHERE DATE_FORMAT(date,'%Y%m') = DATE_FORMAT(NOW(),'%Y%m')`,
                (err, results) => {
                    if (err) console.error(err);
                    res.render('index.ejs', {spendings, sum: results[0].sum});
                }
            );
        }
    );
});

2個のSQL文を投げるだけでご覧の有様です。
こういうコールバック関数を引数として渡す機能を使い、
それがネストしていってコードが汚れる事を「コールバック地獄」と呼びます。

これに関してはPromiseとasync/awaitを覚えましょう。

---

JavaScriptではコールバック地獄に対して
Promiseというオブジェクト指向プログラミングのテクニックを用いた解決策があり、
async/await構文というPromiseを上手く使って同期処理っぽく非同期処理を書ける構文も用意されています。
(ECMAScript2017という2017年のバージョンで追加されました)

そして世のコード・ライブラリの多くがPromise前提で書き直されていきました。
従来のコールバック関数を引数として渡す方法は古臭い手法になりつつあります。

Node.jsのmysqlもその一つで3年前からもうメンテナンスされておらず
作者はmysql2というライブラリへ移行しました。

mysql2ではPromiseを使った最新の書き方があるのでそちらも見ていきましょう。

$ npm install mysql2

プロジェクト説明のREADMEを眺めても使い方は分かりますが、
GitHubのexamplesにはより詳細な使い方が載っているのでそこから抜粋しつつ手直ししましょうか
https://github.com/sidorares/node-mysql2/tree/master/examples/promise-co-await

const mysql = require('mysql2/promise');

// createConnectionがPromiseを返すようになっている
// awaitしなければコネクションを取り出せなくなっている事に注意
const connection = mysql.createConnection({host:'localhost', user: 'root', database: 'test'});

// await構文を使う為にはasync関数を定義しなければならない
app.get('/index', async (req, res) => {
    // promiseインスタンスにawait構文を使うと、
    // promise.then(val => {})のvalを引っ張り出すのと同じ効果を得られる
    const conn = await connection;

    // tryはpromiseをawaitした時、promiseが失敗していた時にキャッチできるようになる
    try {
        const [spendings] = await conn.query(`
            SELECT *
            FROM spendings
            ORDER BY date DESC, id DESC;
        `);
        const [results] = await conn.query(`
            SELECT SUM(price) as sum
            FROM spendings
            WHERE DATE_FORMAT(date,'%Y%m') = DATE_FORMAT(NOW(),'%Y%m')
        `);
        res.render('index.ejs', {spendings, sum: results[0].sum});
    } catch (err) {
        console.error(err);
    }
});

Comments

[fujiyamaru]

具体的なコードも含めた丁寧な回答をいただき、ありがとうございました。
単なる解決方法だけでなく、ベターなものを順を追って、論理的に説明していただいたので非常に分かりやすく、また、勉強になりました。
取り急ぎ2番目のコールバック地獄の書き方でも正しく表示されましたが、
Promiseとasync/awaitについて初めて知りましたので、自分でも咀嚼したのち、書き直してみたいと思います。