Electronで外部コマンドを実行する方法

はじめに

Electronを使用すると、デスクトップアプリケーションであってもWeb技術を駆使して開発を進めることができます。今回は、Electronで外部のシステムコマンドを実行し、その結果をアプリケーション内で扱う方法について説明します。

フロントエンドの実装

Electronのフロントエンドでは、ユーザーの操作に応じてバックエンドに処理を依頼し、結果を受け取るためのイベントハンドラを設定します。以下のコードでは、ボタンのクリックイベントをトリガーとして外部コマンドの実行をバックエンドに依頼しています。

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

// 外部コマンドの処理結果を表示
window.ipc.on('result', (result: any) => {
  console.log(result)
})

このコードでは、window.ipc.sendメソッドを使用して、sample-execというイベントをバックエンドに送信しています。結果は、resultイベントを通じて受け取り、コンソールに表示しています。

バックエンドの実装

バックエンド側では、フロントエンドからのイベントを受け取り、Node.jsのexec関数を使用して外部コマンドを実行します。実行結果はフロントエンドに送り返されます。

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

ipcMain.on('sample-exec', async (event, arg) => {
  exec("ls", (err, stdout, stderr) => {    
    event.reply("result", {
      stdOut: stdout
    })
  })
})

この例では、lsコマンドを実行しています。exec関数はコールバックを通じて実行結果の標準出力を返します。その後、この出力をフロントエンドに送信しています。

まとめ

この記事では、Electronを使用して外部コマンドを実行し、その出力をアプリケーションで利用する方法を紹介しました。このテクニックを利用することで、Electronアプリケーションの機能を拡張し、さらに多様な操作を実現することが可能です。