setTimeoutって結構使える（ChatGPTに教えてもらった）

SEDでプログラムを担当しています、川満です。

現在、SPIRAL（https://www.spiral-platform.co.jp/）を使ったイベントの受付や、実際の会期にて受付等の管理を行う為のWEBアプリの開発を担当しています。

今回は、その開発を行う中で「これってどうしたらいいだろう？」と思い、実際に組んでみたプログラムに関して、書かせていただきます。

次のような要件があって、どうしたものかを考えておりました。

要件：複数の時間に実行するプログラムが必要。それぞれの実行時に、実行する関数への引数を変えて、別々のメッセージが送信されるようにしたい。

当初は、1秒ごとに実行して、該当する時間になったら関数を実行するといったものを考えていました。

しかし、1秒ごとに実行するプログラムだと、ブラウザのメモリをたくさん消費してしまうのではないかな？という疑問と、しかも長時間動かしっぱなしになる事で変な不具合が発生しないか？という不安がありました。

そこで、ChatGPTを試してみようと思い、質問の所に要件を書くと、ブラウザで読み込んだ時間から、実行する時間との差分を求めて、その差分の時間後に実行をするというプログラムが提案されて、「ああ、こんな作り方もあるんだ」という気づきというか、考え方の違いを教えてもらえました。

まず、ChatGPTに質問した内容は以下になります。

次の表のそれぞれの行の月日と時間に、第1引数の列の値と第2引数の値を関数exfncに渡して実行するJavaScript

月日　　　　時間　　第1引数　　第2引数
11月21日　　12:50　　strt　　　　1
11月21日　　13:50　　strt　　　　2
11月21日　　13:50　　strt　　　　3
11月21日　　13:50　　strt　　　　4
11月21日　　14:40　　strt　　　　5
11月21日　　14:40　　strt　　　　6
11月21日　　15:30　　strt　　　　7
11月21日　　15:30　　strt　　　　8
11月21日　　16:30　　strt　　　　9
11月21日　　17:50　　strt　　　　10
11月21日　　16:10　　strt　　　　11
11月21日　　17:00　　strt　　　　12
11月21日　　17:50　　strt　　　　13
11月21日　　15:10　　strt　　　　14
11月21日　　16:30　　strt　　　　15
11月21日　　17:50　　strt　　　　16
11月21日　　15:10　　strt　　　　17
11月21日　　16:30　　strt　　　　18
11月21日　　17:50　　strt　　　　19
11月21日　　13:50　　strt　　　　20
11月21日　　13:50　　strt　　　　21
11月21日　　16:50　　strt　　　　22
11月21日　　14:30　　strt　　　　23
11月21日　　15:50　　strt　　　　24
11月21日　　17:10　　strt　　　　25
11月21日　　14:40　　end　　　　2
11月21日　　14:40　　end　　　　3
11月21日　　14:40　　end　　　　4
11月21日　　15:30　　end　　　　5
11月21日　　15:30　　end　　　　6
11月21日　　16:20　　end　　　　7
11月21日　　16:20　　end　　　　8
11月21日　　17:20　　end　　　　9
11月21日　　18:40　　end　　　　10
11月21日　　17:50　　end　　　　12
11月21日　　16:00　　end　　　　14
11月21日　　17:20　　end　　　　15
11月21日　　18:40　　end　　　　16
11月21日　　16:00　　end　　　　17
11月21日　　17:20　　end　　　　18
11月21日　　18:40　　end　　　　19

<script>
function exfnc(arg1, arg2) {
console.log(“exfnc 実行:”, arg1, arg2, “時刻:”, new Date().toLocaleString());
// 実際の処理をここに書く
}

// ▼スケジュールデータ
const schedule = [
[“11/21”, “12:50”, “strt”, 1],
[“11/21”, “13:50”, “strt”, 2],
[“11/21”, “13:50”, “strt”, 3],
[“11/21”, “13:50”, “strt”, 4],
[“11/21”, “14:40”, “strt”, 5],
[“11/21”, “14:40”, “strt”, 6],
[“11/21”, “15:30”, “strt”, 7],
[“11/21”, “15:30”, “strt”, 8],
[“11/21”, “16:30”, “strt”, 9],
[“11/21”, “17:50”, “strt”, 10],
[“11/21”, “16:10”, “strt”, 11],
[“11/21”, “17:00”, “strt”, 12],
[“11/21”, “17:50”, “strt”, 13],
[“11/21”, “15:10”, “strt”, 14],
[“11/21”, “16:30”, “strt”, 15],
[“11/21”, “17:50”, “strt”, 16],
[“11/21”, “15:10”, “strt”, 17],
[“11/21”, “16:30”, “strt”, 18],
[“11/21”, “17:50”, “strt”, 19],
[“11/21”, “13:50”, “strt”, 20],
[“11/21”, “13:50”, “strt”, 21],
[“11/21”, “16:50”, “strt”, 22],
[“11/21”, “14:30”, “strt”, 23],
[“11/21”, “15:50”, “strt”, 24],
[“11/21”, “17:10”, “strt”, 25],
[“11/21”, “14:40”, “end”, 2],
[“11/21”, “14:40”, “end”, 3],
[“11/21”, “14:40”, “end”, 4],
[“11/21”, “15:30”, “end”, 5],
[“11/21”, “15:30”, “end”, 6],
[“11/21”, “16:20”, “end”, 7],
[“11/21”, “16:20”, “end”, 8],
[“11/21”, “17:20”, “end”, 9],
[“11/21”, “18:40”, “end”, 10],
[“11/21”, “17:50”, “end”, 12],
[“11/21”, “16:00”, “end”, 14],
[“11/21”, “17:20”, “end”, 15],
[“11/21”, “18:40”, “end”, 16],
[“11/21”, “16:00”, “end”, 17],
[“11/21”, “17:20”, “end”, 18],
[“11/21”, “18:40”, “end”, 19]
];

// ▼スケジューリング実行
schedule.forEach(([md, time, arg1, arg2]) => {
const year = 2025; // 固定年
const [month, day] = md.split(“/”).map(Number);
const [hour, minute] = time.split(“:”).map(Number);

const target = new Date(year, month – 1, day, hour, minute, 0);
const delay = target.getTime() – Date.now();

if (delay > 0) {
console.log(`予約: ${target.toLocaleString()} → exfnc(“${arg1}”, ${arg2})`);
setTimeout(() => exfnc(arg1, arg2), delay);
} else {
console.log(`（過去）${target.toLocaleString()} はスキップ`);
}
});
</script>

実際のプログラムでは、exfncという関数内にて、Ajaxで実行するPHPプログラムに対して、引数であるarg1とarg2を渡すという事を行いました。

上記の提案されたプログラムから気づいた事は以下の点になります。

・setTimeoutを使って複数の時間に実行できるプログラムがいっぺんに作成する事が出来る。
・配列を使う事で、複数の時間のスケジューリングを行う事が出来る。
・しかもそれぞれに渡す引数を変えて実行する事が出来る
・セットした時間と現在の時間を比較して、過去の時間にあたるかどうかも判別する事で、必要なものしか実行しないという事も出来る

今までの経験からプログラムを作っていたら、この作り方には行きつかなかったのではないかと思います。
ChatGPTを使う事による自分の考え方を広げられる事に気づかされました。