こんにちわ。

ElectronでMain <=> Renderer間IPCの引数に、ドラッグドロップで拾ったファイルパスを使いたくて色々試してたら、スッキリ爽快な書き方を発見したので備忘録。

使用例

HTML

<div id="dnd">ここにファイルをドロップ</div>

こんな感じのHTMLにファイルをどんどん投げ込んでいきます。
ファイル操作は比較的重いので極力メインプロセスで処理させたいものです。

Renderer

const ipcRenderer = require("electron").ipcRenderer;

// ドロップされたファイルのパスだけIPC送信
document.getElementById("dnd").addEventListener("drop", (event)=>{
    ipcRenderer.send("ch1", ...Array.from(event.dataTransfer.files).map(file=>file.path));
}

ドロップされたファイルオブジェクトが格納されているevent.dataTransfer.filesはArrayLikeなので、Array.from()で叩き直してArrayにします。
叩き直した後、Array.map()で各ファイルオブジェクトの.pathプロパティだけ拾った、新しいArrayを生成します。
生成されたArrayは、スプレッド構文...によって引数へ展開されます。

Main

const fs = require("fs");
const const ipcMain = require("electron").ipcMain;

ipcMain.on("ch1", (event, ...paths)=>{
    for(const path of paths){
        fs.readFileSync(path);
    }
});

IPCコールバックの第2引数以降は可変長(ドロップされた分だけ引数が増える)の為、スプレッド構文...で纏めて格納します。
格納された引数はArrayなので、for-of等で反復処理が可能です。

まとめ

Array <=> argsをたった...記述だけで相互に変換してくれるスプレッド構文めちゃ便利！