VueとElectronでアプリを作ってみた
正確には、 Vue CLI 3 & TypeScriptで起こしたプロジェクトにvue add electron-builderしてElement UIはめこんでアプリを作った、になります。
きっかけ
常駐先でちょっとしたツールを作る必要が出てきた。 ユーザーは非IT系の人々なのでGUIはあったほうがよい。 単体アプリで、インストーラーで簡単に導入できるのが望ましい。 さっさと作って次のステップへ進まないといけないので、僕が慣れてる技術で開発できることが望ましい。
→ それElectronでできるよ
Electron触り心地
総合的にはいい感じです。
ElectronはUI側(Chromium)とバックグラウンドプロセス側(Node.js)で構成されています。UI側はSPA書くのと変わりません。
Webではサーバーへのリクエストを行うところが、Electronだとバックグラウンドプロセスとのメッセージングに置き換わる感じです。バックグラウンドプロセス側はNode.jsアプリ書くのと変わりません。UIからのメッセージイベントを受け取って処理を走らせます。
JSに慣れていればサクッと形が作れて、各種プラットフォーム用のインストーラまで生成できて、アップデート検知までできる、というのが素晴らしい。
もちろんデバッグ中はホットリロードでガシガシコード書き換えながら試せる。
…ですが、Electronそのものというかwebpackやnpm由来のモジュールなど、周辺の問題でハマることが多々ある感じでした。
はまったところ
electron-vueは古い。vue add electron-builderを使うべき
Vue+Electronのメジャーな構築方法が新旧2種類あり、古いほうは2年くらいメンテ放置されている！
最初、electron-vueボイラープレートを使う方法が見つかったのでこれに従ってやってたんですね。
Vue CLI + electron-vue でプロジェクト立ち上げ - Qiita
ところが、使えるはずのAPIがNot Foundとか言われたりして何かおかしい。調べてみたらelectron-vueは既にメンテされてなくて色々と古くなっており、Electronはv2(現在最新はv6)だし内蔵Node.jsはv8(現在最新はv12, 安定版でもv10)。
その後ドンピシャな解説が見つかり、無事最新のElectronで構築できました。
そのままだと正常にバンドルできないモジュールがちらほら
npmから入れたモジュールのいくつかが、ビルド時に怒られるという事象が発生しました。
だいたいモジュールのrequire/import絡みで。
webpackの各種loaderがやってる仕事とか、CommonJSのrequire/exportとES6以降のimport/exportの互換性とかちゃんと理解してなくて根本解決はできなかったのですが…試行錯誤ののち、対象モジュールに直接パッチを当てることでなんとかなった。
その場しのぎのパッチは気持ち悪いですが、じっくりやってる時間はありません。
デバッグ時は問題ないのにビルド後はバグるモジュール
node-fetchというわりとメジャーなモジュールなのですが、バグる。
幸いタイムリーにissue情報を見つけたので、リリース版ではなくGitHub上の開発ブランチを直接引っ張ってくることで解決。
https://github.com/yumetodo/vscode-google-photos-uploader/issues/11
それからjson-mergerというモジュールはビルドはできるものの、アプリ起動時の読み込みでコケる。
これはモジュール側のパッケージングに問題がある感じだったので、別ので代替。
ビルドしてしまうと元ソースを追えなくなるので、 どこでコケてるのか切り分けるのに時間が掛かり疲弊しました。
総評
Electron自体はいい感じ。 だけどベースになってるJSのエコシステムにつらみがある。
