Node.jsでMySQLのレコードデータを取得後、変数に格納できません

Question

問題

Node.jsでWebサーバーを作成しています。
MySQLから読み込んだレコードデータをサイト上に表示させるため実験中なのですが、
SELECT文で取得したデータを変数にうまく格納することができません。

undefined

該当のソースコード

const mysql = require('mysql2');

const db = mysql.createConnection({
  host: 'localhost',
  user: 'user1',
  password: 'password1',
  database: 'db1'
});

db.connect( (error) => {
  if (error) {
    console.log(error);
  } else {
    console.log('MySQL Connected...');
  }
});

let name;　// (1)

// テーブルmytableの最初レコードのカラムnameには'Yamada'が入力されている
db.query('SELECT * FROM mytable', (error, results) => {
  name = results[0].title; // (2)
  console.log(name); // 'Yamada'とコンソールに表示...(3)
});

console.log(name); // 'undefined'とコンソールに表示...(4)

/* コンソール
undefined
MySQL Connected...
Yamada
*/

補足情報

期待しているのは、上記コードの変数nameに(1)、
MySQLのテーブルから取得した'Yamada'が格納され(2)、
(4)のタイミングで'Yamada'と表示されることですが、
(1) -> (4) -> (2) -> (3)の順に実行されているようで、
(4)では'undefined'となります。

この問題はどのように解消すればよいのでしょうか。
基本的なことがわかっていないためとは思いますが、
どうぞよろしくお願いいたします。

Comments

[hoshi-takanori]

非同期処理とはそういうものです。

[kobo_jp]

そういうものですか。

[hoshi-takanori]

db.query 自体は、データベースにクエリーを投げたら結果を待たずにすぐに return します。ので (4) が先に表示されます。その後、結果が返ってきてから db.query の引数で渡したアロー関数の (2) と (3) が実行されます。
なお、mysql2 をお使いなら async/await に対応してるので、それを使うと幸せになれるかも。
https://thr3a.hatenablog.com/entry/20200817/1597650222

[kobo_jp]

私もその後ご指摘のサイトにたどり着き、試したところでした。
promiseとasync/awaitの使い方がよくわかっていなかったので助かりました。
これから解決法を簡単に書いてみようかと思います。
どうもありがとうございました。

Answer 1

結論から言いますが、
Promiseとawait/asyncの使い方を学習して、
mysql2のPromise版を扱いましょう。

参考記事: Express,mysql2/promiseでasync/await使って簡潔に書く - qiita

これにより質問文のコードは下記のようなコードに置き換えられるでしょう

// 参照先をこう改良する
const mysql = require('mysql2/promise');

const db = mysql.createConnection({
  host: 'localhost',
  user: 'user1',
  password: 'password1',
  database: 'db1'
});

db.connect( (error) => {
  if (error) {
    console.log(error);
  } else {
    console.log('MySQL Connected...');
  }
});

// await演算子で処理を待つにはasync関数内という制約があるので関数定義
const main = async () => {
  try {
    // await演算子を使う事でPromise.thenで値を取り出したのと同じ効果を得られる
    const results = await db.query('SELECT * FROM mytable');

    const name = results[0].title; // (2)
    console.log(name); // 'Yamada'とコンソールに表示...(3)

    console.log(name); // 'Yamada'とコンソールに表示...(4)
  } catch (e) {
    // Promiseをawaitで待つとtry-catchで拾うことが可能
    console.error(e);
  }
}

main();

---

// テーブルmytableの最初レコードのカラムnameには'Yamada'が入力されている
db.query('SELECT * FROM mytable', (error, results) => {
  name = results[0].title; // (2)
  console.log(name); // 'Yamada'とコンソールに表示...(3)
});

console.log(name); // 'undefined'とコンソールに表示...(4)

JS(Node.js)流儀の「イベントループ」の仕様上そうなります。
詳しくは「イベントループ」の勉強をしてくださいという感じですが、
理解しやすいよう多少噛み砕いて解説します。

JS(Node.js)にはイベント置き場というものがあり、
そこに達成条件と後で実行して欲しい処理を関数で包んだものを渡します。
これでイベント登録申請を行います。

全ての処理が終了して手待ちになった時、
「イベント登録申請」が行われていたら「そういやイベント登録されてたな？」と巡回します。
その巡回中に達成条件を満たしたイベントがあれば、対になっている関数を実行します。

そして「イベント登録申請」は「後でイベント達成した事を確認したらやっておいてね」という約束にほかなりません。
なので、4→3の順番で実行される事が決まっています。

イベント登録を挟んだコードの実行が遅延される事は
下記のコードで確認出来ますね。

setTimeout(
  () => console.log(1),
  0 // 0ミリ秒に満たした時に発火、実行した瞬間条件は達成しているはずである
);
console.log(2);

// 2 -> 1の順番で出力される

じゃあどうすれば良いのか？

それは上のコールバック関数に以後やるべき事を全て書けという事になります。

setTimeout(
  () => {
    console.log(1);

    // 以降の処理全部をここに書け！
    console.log(2);
  },
  0
);

いやいや、そんなことしたら
非同期処理を行う度に無名関数宣言→インデントが作られて
インデントだらけのクソみたいなコードになっちゃうでしょ？

なりますね。
これを「コールバック地獄」と呼びます。
多くのWebエンジニアを長い事困らせる原因になっていました。

そこでこのコールバック地獄を解消する為に2段階での技術の導入が行われる事に成ります。
それはES2017というJavaScriptの2017年度版仕様で導入済みであり
その仕様はNode.jsにも取り込まれています。

要するにこの書き方や課題は既に大昔の話なので、
新しいやり方に追従しましょう。

---

ES2015でまずPromiseオブジェクトが用意されます。

上記のコールバック地獄をオブジェクト指向言語のテクニックを駆使して
関数をメソッドで包んで管理すればネストは1個に押さえ込めるよね？
という発想からきています。

質問文のコードはこうなります。

const mysql = require('mysql2');

const db = mysql.createConnection({
  host: 'localhost',
  user: 'user1',
  password: 'password1',
  database: 'db1'
});

db.connect( (error) => {
  if (error) {
    console.log(error);
  } else {
    console.log('MySQL Connected...');
  }
});

let name = null;

new Promise((resolve, reject) => {
  db.query('SELECT * FROM mytable', (err, results) => {
    // Promise流儀の結果を加工するやり方で終わらせる
    if (err) {
      reject(err);
      return;
    }
    resolve(results);
  });
}).then(results => {
  name = results[0].title;
}).then(() => {
  console.log(name); // 'Yamada'とコンソールに表示...(3)
}).then(() => {
  console.log(name); // 'Yamada'とコンソールに表示...(4)
})

コードの動作は確認していませんが、まぁ動くでしょう。
Promiseをnewで作って.then(fn)メソッドを数珠つなぎに繋げています。

上の処理が終わったら次のthenメソッドで登録した関数がロードされて実行されます。

Promiseは途中で変数に保管できますので、
続きを後からthenメソッド実行で書き足す事も可能です。
for文で100個のSQLを投げる事もシンプルに記述出来るようになります。

既存のコールバックを使った非同期処理はfor文を使ってこういう事をやることは不可能レベルに困難でしたから
大きな一歩と呼んでも差し支えない大偉業です。

ですが、これでもまだ不便は不便。
やりたい事がPromise流儀のthenだらけになって読み辛いですよね？
JSの開発者達はさらなる改良を行います。

---

それがasync/awaitです。
ES2017で仕様が確定され、新しいブラウザやNode.jsに取り込まれました。

これはコード上のPromiseの気持ち悪い書き方を
内部に押し込め、コードを記述するプログラマーにとって読み書きを楽にするための方法です。

関数を宣言する時、async関数を定義することが出来ます。
これは普通のコードをPromise的なコードで無理やり置き換えます

// () => new Promise(fn) と同じコードになり、
// 結果は必ずPromiseのインスタンスである
async () => {
  await 123; // await構文でPromise.then(fn)のように待つ事が可能
  throw "失敗"; // return reject("失敗")と同じコード
  return 123; // return resolve(123)と同じコード
}

このようにasync関数の内部をゴリ押しで変換して解決している状態なので、
Promiseの正しい理解がないと上手く使いこなせないはずです。

という訳でasync/awaitを使いこなす事で、
回答文頭のコードに落とし込む事が可能となります。

全て解説し始めると日が暮れるので、
コレを機にasync/awaitを勉強してみてください。

Comments

[kobo_jp]

とても親切丁寧なご説明とコードありがとうございました。
ぼんやりしていたものがくっきり見えてきた感じです。
本当にありがとうございました。

Answer 2

解決しました。
こんな感じで同期できるようです。
(1) -> (2) -> (4)の順に実行されます。

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

(async () => {
  const db = await mysql.createConnection(
    {
      host:'localhost',
      user: 'user1',
      password: 'password1',
      database: 'db1'
    }
  );

  let name;　// (1)

  // テーブルmytableの最初レコードのカラムnameには'Yamada'が入力されている
  const [rows, fields] = await db.query('SELECT * FROM toppage');
  name = rows[0].name; // (2)

  console.log(name); // 'Yamada'とコンソールに表示...(4)
})();

Comments

[miyabi-sun]

修正欄でのアドバイスがあったとはいえ、
自力でここまでたどり着けたのは素直に素晴らしいです。
頑張ってください。

[kobo_jp]

いえいえ、未だサンプルがないとまともにコードが組めないのは情けない限りです。
Node.jsは奥が深いですが、習得するとかなり良いものが作成できそうなので頑張りがいがあります。
ありがとうございました。