Javascript (カレンダー014_Nodeへ移す4(同期処理))
■データベースの情報をカレンダーに表示する。
前回のjQueryを使ったコードは実現が難しそうだったので、jQueryを使用しない方向で進めていく。具体的には、一番はじめに使っていたテキスト、テキストエリア、ボタンをカレンダーの下につけて表示、更新の機能を付ける形とする。
データベースの情報をカレンダーに表示する部分もまだ完全にはうまくいっていなかったので、今回はそちらを進めてみた。
Mysqlからのデータの取得、更新は以前試したので、取得情報をカレンダーに表示させるようすすめる。単純に、データベースのクエリ（select * from (テーブル名)）で得た情報を配列に変換して使用すればよいかと思っていたけど、そのままコードしても情報がうまくとれなかった。調べていくと、Mysqlのクエリは、非同期処理のため、データの取得を待つことなくプログラムは進むらしい。つまり、下のselect * from 'diarydb'のクエリの実行を行っているときも、次のコードへ進んでいるということのよう。そのため、console.logで表示させてもデータがとれず空欄となって返ってくる。
async function getdataMysql() {
var array=[];
const mysql = require('mysql');
const util = require('util');
var pool = mysql.createPool({
host: 'localhost',
host: '127.0.0.1',
user: 'root',
password: '',
database: 'test'
})
pool.query = util.promisify(pool.query);
try {
var results = await pool.query('select * from `diarydb`');
pool.end();
for (let i = 0; i < results.length; i++) {
array.push(results[i]);
console.log("Date111"+array[i].date +"|"+array[i].title +"|"+array[i].Note+"|"+array[i].number);
}
}
catch (err) {
throw new Error(err)
}
console.log(array.findIndex(({date}) => date === '2020.10.24'));
return array;
}解決するには、同期処理となるようasyncやawaitといった宣言が必要になるとのこと。上のコードはasyncやawaitを入れた状態となっているので、下のようにconsole画面に情報は表示されている。ここで、配列（array）にデータベースから得た情報がすべて含まれている。
async function getdataMysqlのreturn array;でデータを返して、下のコードでsetDataに情報を入れる。特に型式を宣言するといったことはしなかったが、setDataへの入力も、その後のcal.displayCal(setData)としての使用でも、データは問題なく渡されていた。
var querystring = require("querystring");
var cal = require('./calender015.js');
var jsdom = require('jsdom');
var { JSDOM } = jsdom;
var body = new JSDOM();
async function start(response, postData) {
console.log("Request handler 'start' was called.");
setData = await getdataMysql()
body = '<html>'+
'<head>'+
'<meta charset="utf-8">'+
'<title>Calendar</title>'+
'<link href="calender015.css" rel="stylesheet" type="text/html">'+
'</head>'+
'<body>'+
'<div class="frame-box">'+
'<div class="calendar-box">'+
'<div id="calendar" class="calendar"'+
'<div>'+
cal.displayCal(setData)+
'</div>'+
データベースの列は、日付（date）、タイトル（title）、本文（Note）、数字（number）としているが（参考としてphpmyadminの図を一番下につける）、配列には、array[i].date, array[i].titleといった形でデータが入っていた（iは0からの連番）。
日付を指定してデータをとるにはどうずればよいか調べたが、findIndexという関数で該当する日付の番号(i)が取れたので、そこからタイトルや本文も取ることができた。式は、array.findIndex(({date}) => date === '2020.10.24'));
これを使って、カレンダーを作成する際にデータがあるかどうかを判断し、下の図のようにデータがある場合のみ、色を変えたり下線を入れたりできた。
ただ、数値をクリックしてテキストエリアにデータを出力することはできていない。動的なHTMLの更新など少し工夫が必要となるような内容なのかなー。そのあたりが出来ればNodeへ移すことも完了できそう。
phpmyadminの図。
