🔗Vue.js+TypeScript+Electronでプロセス間通信を行うIPCモジュール設定

Vue.jsで組んでいたアプリケーションをElectronでパッケージングする時には

vue add electron-builder

で簡単に設定できるのですが、あくまでElectronでビルドするためだけなので
Electronのメインプロセスとレンダラープロセス間のIPC通信、情報の受け渡しを行う機能は提供されていません。メインプロセスで動かしてる進捗表示とかするのにめっちゃ不便。

メインプロセス => レンダープロセス
に受け渡す場合を例にすると
electronのメインプロセス側であれば

const win = new BrowserWindow();
win.webContents.send("title", "message");

vue側のレンダラープロセス側は

import { Component, Vue } from 'vue-property-decorator';
import electron from 'electron';
@Component
export default class App extends Vue {
  public title: string = 'Loading...';
  public mounted() {
    electron.ipcRenderer.on('title', (event: any, message: string) => {
      this.title = 'Downloading: ' + message;
    });
  }
}

で受け取ることができます。あとはvue側でお好きに。

Vue.js + TypeScript + Electron で作成したアプリはこちら
radikoタイムフリーのダウンロードアプリ「inco」を公開しました

追記

electron-vue であればelectronのオブジェクトを実行できる `this.$electron` が割り当てられているので実行が簡単ですが、Vue.jsで組んでいたアプリを途中から移行することが出来ないのと、Electronのバージョンが2系デフォルト(2019/3/21現在、electron-builderは3系)だったので使うのをやめてしまいました。独特な使用方法が多そうで覚える気がなかったのが主な原因ですが…

この記事を書いていて見つけましたが vue-electronなんてあったんですね。 `this.$electron` が使えるのは便利そうです。でもTypeScript環境だと.d.tsが無い & @typesも現状無い & 型見られないなら別に使う必要も無さそうですね。