最近覚えたスプレッド構文の便利な使い方: Electron-IPC
こんにちわ。
ElectronでMain <=> Renderer間IPCの引数に、ドラッグドロップで拾ったファイルパスを使いたくて色々試してたら、スッキリ爽快な書き方を発見したので備忘録。
使用例
HTML
<div id="dnd">ここにファイルをドロップ</div>
<div id="dnd">ここにファイルをドロップ</div>
こんな感じのHTMLにファイルをどんどん投げ込んでいきます。
ファイル操作は比較的重いので極力メインプロセスで処理させたいものです。
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は、スプレッド構文...によって引数へ展開されます。
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をたった...記述だけで相互に変換してくれるスプレッド構文めちゃ便利！
Author And Source
この問題について(最近覚えたスプレッド構文の便利な使い方: Electron-IPC), 我々は、より多くの情報をここで見つけました https://qiita.com/dojyorin/items/2dde9e5512cdec555f30著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .