electron-vue の electron のバージョンが古いとお悩みのあなたへ

前置き

electron の上で Vue.js 製のアプリケーションを動かしたいとき、ググると大抵 electron-vue を使った方法がヒットします。しかし2019年5月現在、electron-vue で使われる electron のバージョンは 2.0.4 (最新は 5.0.1 )とだいぶ古く、Node.js はバージョン 8 台(現在の最新は 12.2.0 )、Chromium もバージョン 61 台(最新の electron では 73.0.3683.121 )とかなり前のものを使わなければなりません。この頃ですとブラウザの新しく便利な API が使えなかったり Node.js では fs.promises がなかったり何かと不便です。そもそも electron-vue は Vue CLI 2 系の時代の産物ですので、そろそろ新しいものを使いたくなります。

そこで vue-cli-plugin-electron-builder を利用した方法を紹介します。この方法は軽く調べてもまだ日本語の情報が少なかったので、記事を書く意味があるのではないかと思いかなり久々に Qiita の記事を書いています。この方法を初めて知ったのは Youtube の Electron with Vue.js という動画でした。投稿者の Andre Madarang 氏に感謝申し上げます。

ではこの vue-cli-plugin-electron-builder を利用した Vue.js + electron のアプリケーションを作る手順を紹介いたします。

手順

手順とは言っても順番さえわかれば簡単です。

手順1

$ vue create vue-electron-sample
$ cd vue-electron-sample

まずはいつもどおり Vue CLI でプロジェクトを作成します。ここでの設定はお好みでどうぞ。終わったら cd するなり VSCode を立ち上げて統合ターミナル使うなりしてプロジェクトのディレクトリに入ってください。

手順2

$ npm run serve

この手順は省略可能ですが一応。これで localhost:8080 にアクセスするといつものあの画面が見れるはずです。きちんとプロジェクトが作成できたことが確認できたら開発サーバーを終了して次へ進みましょう。

手順3

$ vue add electron-builder

ここで electron が登場します。electron-builder とは書いていますがこれは完成したアプリケーションをビルドする electron-builder ではなく、vue-cli-plugin-electron-builder を指しています。vue add はプラグインを追加するコマンドで、入力された名前の前に vue-cli-plugin- をつけて npm からインストールします。

ここで electron のバージョンを聞かれます。古いバージョンも選べますがここでの目的は最新の electron を使うことなので 5.0.0 を選択しました。すると以下のファイルが追加/更新されたと表示されます。

src/background.js
.gitignore
package-lock.json
package.json

src/background.js が今までなかったファイルですね。electron を触ったことのある人ならこのファイルを覗くと何の役割をしているかわかるでしょう。electron のメインプロセスです。

手順4

$ npm run electron:serve

これは今までの npm run serve の代わりとなります。文字通り electron で起動してくれます。しっかり変更のあったファイルを検知してホットリロードしてくれます。

あとはここから好きなアプリケーションを開発しましょう！

手順5 (アプリケーションが完成したら)

$ npm run electron:build

アプリケーションを electron-builder を用いてビルドしてくれます。処理が終わると dist-electron/ 内にインストーラーができます。あとはこのインストーラーを配布しましょう！