Electronで長時間実行する外部プロセスの進捗をリアルタイムでハンドリングする方法

はじめに

Electronの強力な機能の一つに、Node.jsの完全なAPIサポートがあります。これにより、child_processモジュールのspawn関数を使用して、長時間実行されるスクリプトやプログラムを非同期で実行し、その出力をリアルタイムで取得することが可能です。この記事では、進捗率を出力するシンプルなシェルスクリプトを例に、リアルタイムに標準出力をハンドリングする方法を紹介します。

サンプルシェルの説明

まず、以下のシェルスクリプトは進捗率を10秒ごとに10%ずつ増やし、最終的に100%に達するまでの進捗を表示します。

#!/bin/bash

# 初期進捗率を0%に設定
progress=0

# 進捗率が100%になるまで繰り返す
while [ $progress -lt 100 ]; do
  # 進捗率を表示
  echo "Progress: $progress%"
  # 10秒待機
  sleep 10
  # 進捗率を10%加算
  progress=$((progress + 10))
done

echo "Progress: 100% Completed!"

バックエンドの実装

Electronのバックエンドでは、以下のようにspawnを使用してシェルスクリプトを起動し、標準出力を非同期で取得します。

const { ipcMain } = require('electron');
const { spawn } = require('child_process');

ipcMain.on('sample_longtime_exec', async (event, arg) => {
  const childProcess = spawn('./sample.sh', [])
  
  childProcess.stdout.on('data', (chunk) => {
    event.reply("result", {
      stdOut: chunk.toString()
    })
  })

})

この実装により、外部プロセスからの出力が得られるたびにフロントエンドに送信されます。

フロントエンドの実装

フロントエンドでは、ユーザーがボタンをクリックするとバックエンドに処理を依頼し、進捗情報をリアルタイムで受け取ります。

document.getElementById("btn").addEventListener("click", (e) => {
  // バックエンド側の処理を呼び出し
  window.ipc.send("sample_longtime_exec", null)
})

// 外部コマンドの標準出力を表示
window.ipc.on('result', (result: {stdOut: string}) => {
  console.log(result)
})

まとめ

この記事では、Electronを使用して長時間実行する外部プロセスの進捗をリアルタイムで取得する方法を解説しました。このアプローチにより、アプリケーションのユーザビリティを高めることができ、ユーザーに対してプロセスの進行状況を透明に示すことが可能です。