Electronのメインプロセスで非同期処理なallメソッドでデータを取得してレンダラープロセスに返す方法

Question

前提

(問題自体に不備があったので質問の意図自体を変更します)

Electron (node.js)初挑戦です。sqlite3を使いたいと思い、npmを使ってインストールしました。
サンプルとしてそのsqlite3を使ってデータベースからselectをした結果を取得しようとしています。

実現したいこと

• 前提にある問題(非同期であるため処理が前後していて、値がおかしいこと)の解決

　→ どのようにして安全にデータをmain.jsからrenderer.jsを渡すか

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

main.js内のipcMain.handleメソッド内でsqlite3を使う処理をして、renderer.jsでinvokeして起動します。
ただ、(sqliteからselectするために使う)sqlite3.Database#allメソッド等は非同期らしく、allメソッドの次の処理と前後が逆になることがあり、renderer.jsに戻り値として返されるデータが常に空か{}のような中身のないデータになっています。

「Electron node.js sqlite3」と調べてもよくて、Electronの古いバージョンでのサンプル(renderer.jsに直接requireするとか)か、単にdb.all("select * from users", (error, rows) =>{ console.log( rows ); });のように、「ラムダ式の中でそのまま出力するだけ」となっています。
データを取り出すだけならいいのですが、非同期処理なので値が入ったり入らなかったりするのでそこで頭を悩ませています。

該当のソースコード

// main.js
// アプリケーション作成用のモジュールを読み込み
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");

const sqlite3 = require( "sqlite3" );
const db = new sqlite3.Database('test.db');

// メインウィンドウ
let mainWindow;

const createWindow = () => {
    // メインウィンドウを作成します
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
        }
    });

    // メインウィンドウに表示するURLを指定します
    // （今回はmain.jsと同じディレクトリのindex.html）
    mainWindow.loadFile("index.html");

    // デベロッパーツールの起動
    mainWindow.webContents.openDevTools();

    // メインウィンドウが閉じられたときの処理
    mainWindow.on("closed", () => {
        mainWindow = null;
        // ここで閉じておく
        db.close();
    });

    ipcMain.handle( "create_table", (_evnet, _arg) => {
        db.serialize( function(){
            // テーブル作成
            db.run( "create table users (name text, email text, age int)" );
        });
    return true;
    });

    ipcMain.handle( "insert_record", (_evnet, _arg) => {
        db.serialize( function(){
            // INSERT INTO テーブル名 VALUES (値1, 値2,...);
            db.run( "insert into users values ('太郎', '****', 19)" );
        });
    return true;
    });

    ipcMain.handle( "insert_recordEx", (_evnet, _arg) => {
        db.serialize( function(){
            var stmt = db.prepare("insert into users('name', 'email', 'age') values(?, ?, ?)");
            stmt.run( '次郎", '****', 20 );
            stmt.finalize();
        });
        return true;
    });

    ipcMain.handle( "select_record", (_evnet, _arg) => {
        db.serialize( function(){
            /*
            // 一個ずつ取り出す場合
            db.each("SELECT * FROM users", (err, row) => {
                console.log( row.name );
            });
            */

            /*
            // 一括で取り出す場合
            db.all("select * from users", (error, rows) =>{
                rows.forEach(row => console.log(row.name));
            });
            */

            /*
            db.all("select * from users", (error, rows) =>{
                console.log( rows );
            });
            */

            /*
            // 最初にヒットしたものを取り出す
            db.get("select * from users", (error, row) =>{
                console.log( row );
            });
            */

             // HERE!
            let txt = ""; // ①
            db.all("select * from users", (error, rows) =>{
                rows.forEach(row => { txt += "hello"; }); // ②
            });
            console.log( "select = " + txt ); // ③
        });
        return false;
    });
};

//  初期化が完了した時の処理
app.whenReady().then(() => {
    createWindow();

    // アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時）
    app.on("activate", () => {
        // メインウィンドウが消えている場合は再度メインウィンドウを作成する
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

// 全てのウィンドウが閉じたときの処理
app.on("window-all-closed", () => {
    // macOSのとき以外はアプリケーションを終了させます
    if (process.platform !== "darwin") {
        app.quit();
    }
});

// renderer.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld(
    'electronAPI', {
    setTitle: (title) => ipcRenderer.send('set-title', title),
    createTable : () => {
        ipcRenderer.invoke( "create_table", "ok" ).then( (result) => {
            console.log( result );
        });
    },
    insertRecord : () => {
        ipcRenderer.invoke( "insert_record", "ok" ).then( (result) => {
            console.log( result );
        });
    },
    insertRecordEx : () => {
        ipcRenderer.invoke( "insert_recordEx", "ok" ).then( (result) => {
            console.log( result );
        });
    },
    selectRecord : () => {
        ipcRenderer.invoke( "select_record", "ok" ).then( (result) => {
            console.log( result );
        });
    }
})

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <title>Hello from Electron renderer!</title>
</head>
<body>

    <form>
        <button type="button" id="createTableButton">create table</button>
        <button type="button" id="insertRecordButton1">insert record 1</button>
        <button type="button" id="insertRecordButton2">insert record 2</button>
        <button type="button" id="selectRecordButton">select</button>
    </form>

    <script src="./lib1.js"></script>
</body>
</html>

// lib1.js

document.getElementById("createTableButton").addEventListener('click', () => {
    window.electronAPI.createTable();
});

document.getElementById("insertRecordButton1").addEventListener('click', () => {
    window.electronAPI.insertRecord();
});

document.getElementById("insertRecordButton2").addEventListener('click', () => {
    window.electronAPI.insertRecordEx();
});

document.getElementById("selectRecordButton").addEventListener('click', () => {
    window.electronAPI.selectRecord();
});

試したこと

[やったこと1]
(最初はラムダ式の外にあるlet txtに入っていないのかと思い、質問して)txtの値を確認した

db.all("select * from users", (error, rows) =>{
      console.log( "all" );
       rows.forEach(row => { txt += "hello"; });
      console.log( txt );
});
console.log( "out: " + txt );

[結果1]
renderer.js内のselectRecordメソッドでのconsole.log( result );ではfalseが表示され、コンソールには

out: 
all
hellohello

と空になっていた。(それとラムダ式の関数が後から動いているらしい。つまり順番が違う。)

[やったこと2]
やったこと1のラムダ式を通常の関数にして渡す。

[結果2]
結果1と変わらず。

[やったこと3]
やったこと1のラムダ式の引数に _txtを追加。

db.all("select * from users", (error, rows, _txt) =>{
      console.log( "all" );
       rows.forEach(row => { _txt += "hello"; });
});

[結果3]
結果1,2と同じ。

[やったこと4]
ラムダ式内のtxtからするとipcMain.handle内のtxtは別の変数(グローバル変数のような感じ)と解釈されたのだと思い、main.jsの先頭に"use strict";を付けてみた。

[結果4]
変わらず。

[やったこと5]
公式ドキュメントからall系の一括読み込みメソッドを調べた。

[結果5]
探した範囲では存在しなかった。(コールバック関数を受け取って非同期的に行うものしかなかった。)

[やったこと6]
(非同期処理であり、コールバック関数としてラムダ式が渡されていることから)通常の関数として切り出して、renderer.js側でコールバック関数として定義し、ipcRenderer.invokeの引数として渡して処理させる。

// renderer.jsから抜粋

function callback( err, rows ){
    console.log( rows ); // 本来はここで何らかの処理をする
}

...

    selectRecord : () => {
        ipcRenderer.invoke( "select_record", callback ).then( (result) => {
            console.log( result );
        });
    }

// main.jsから抜粋
    ipcMain.handle( "select_record", (_evnet, f) => {
        db.serialize( function(){
            let txt = "";
            db.all("select * from users", (error, rows) =>{
                f( error, rows );
            });
            //console.log( "select = " + txt );
        });
        return false;
    });

[結果6]
VM4 sandbox_bundle:29 Uncaught (in promise) Error: An object could not be cloned.というエラーメッセージがディベロッパーツール上に表示される。
→ 調べるとメインプロセスとレンダラープロセスは分断されているために起こるエラー。ただし仕様上のものなので対処できないらしい？

[やったこと7]
念のためdb.serializeに渡している無名関数の引数としてfを指定した。

[結果7]
結果6と同様。

後思いつく方法としては『メインプロセスでDB操作を行いながら、直接DOM操作も行う』という方法ですが、できればメインプロセスはウィンドウの処理をして、DOM操作を行うのはレンダラープロセスに任せたいのです。

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

言語: JavaScript
node.js : node v16.17.0
Electron: Electron v21.1.1

Comments

[Zuishin]

キャプチャはできているので、質問が内容と合っていません。
app.whenReady で作成したデータを contextBridge.exposeInMainWorld で使用する方法を聞くべきでしょう。

[Zuishin]

> 恐らくコールバック関数としてのラムダ式が呼ばれる時期が違うため

いえ、txt はローカル変数で、コンソール以外どこにも出力されていないため、他の場所で使用することはできません。
return txt; で返した場合も、それは sqlite.Database.serialize に渡されたコールバック関数の戻り値でしかありません。
そのコールバック関数の戻り値がどう扱われるのかは調べていないのでわかりません。

他の場所で使いたいのであれば、何らかの方法で渡さなければならないでしょうから、前のコメントの繰り返しになりますが、とりあえずラムダ式からは離れて、その渡す方法を聞くべきでしょう。

[BeatStar]

通知が来ていなかったので気づきませんでした…。
一応やっと答えにたどり着きました。(自己解決にする予定ですが)
コールバック関数でのreturnは私もそうだと解釈していましたが…。

Answer 1

コールバック関数として渡すことは質問にあることと同じですが方法が間違っていたようです。

1. メインプロセス、レンダラープロセスの両方からアクセスできるようにコールバック関数をlib2.jsのような新しいjsファイルに記述する。その関数名をmodule.exportsにセットする。
2. (1)で用意したコールバック関数を使うjsファイル(特にメインプロセス)にconst callbackSelect = require( "./lib2" );のようにしてrequireする。
3. 実際にコールバック関数として渡す。

// lib2.js内

// 定義して
const callbackSelect = (err, row) =>{
    console.log( row );
}

// module.exportsにセット
module.exports = callbackSelect;

// main.js内
...
const path = require("path");
const callbackSelect = require( "./lib2" ); // ここで関数を取り出す
...

const createWindow = () => {
     ...
     ipcMain.handle( "select_record", (_evnet, _arg) => {
         db.serialize( function(){
             db.each("select * from users", callbackSelect ); // コールバック関数として渡す
         }
     }
}

これでeachメソッドでもallメソッドでも取り出せました。

Answer 2

console.log を以下のように移動すると結果は変わってくると思いますがどうでしょう？

             // HERE!
            let txt = "";
            db.all("select * from users", (error, rows) =>{
                rows.forEach(row => { txt += "hello"; });
+               console.log( "select = " + txt );
            });
-           console.log( "select = " + txt );

Comments

[BeatStar]

回答ありがとうございます。
本質問に書き忘れていましたが、やりたいことはlet txtの値を最終的に呼び出し側に相当するrenderer.jsに返したいのです。
(説明下手ですみません)