Electron+Vue.jsを使ったデスクトップアプリ開発を始める手順

公開日：2019/06/05 更新日：2019/06/05

はじめに

ElectronはWebアプリケーションの開発に使われるJavascriptやHTML、CSSなどの技術を用いてデスクトップアプリを開発できるフレームワークです。１つのソースでクロスプラットフォーム対応（Windows、Mac OS、Linux）のデスクトップアプリを開発することができます。この記事では、Ubuntu上でElectronとさらにVue.jsを用いたデスクトップアプリ開発をはじめるために必要なツールのインストール手順と、実際にデモアプリを起動させるまでをまとめます。

できるようになること

以下のように、デフォルト状態のアプリを起動するところまでをまとめます。

前提と環境

以下の通りです。

OS : Ubuntu 18.04
Node環境は構築済とする。ここでは、v10.16.0

使用するパッケージ

ElectronでVue.jsを使用する場合の選択肢としてはいくつかありますが、ここではVue CLI 3に対応しているVue CLI Plugin Electron Builderを使用します。公式リポジトリは以下です。

github.com

nklayman/vue-cli-plugin-electron-builder

A Vue Cli 3 plugin for Electron with no required configuration

なお、Vue CLI 3にまだ対応していませんが、おそらく一番使われているボイラープレート（いわゆるテンプレート）として以下のelectron-vueがあります。

github.com

SimulatedGREG/electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

下準備

Vue CLI Plugin Electron Builderは、Vue CLI 3系で作成されたプロジェクトにプラグインとして追加して使用します。したがって、まずVue CLI 3をインストールし、Vue CLI 3を使ってプロジェクトを作成しておく必要があります。以下のコマンドでVue CLI 3をインストールします。

$ npm install -g @vue/cli

後は以下のコマンドでプロジェクトを作成します。以下のように、default(babel, eslint)かManually select featuresの２つの選択肢が表示されます。もしTypeScriptやVuexなどを使用したい場合は、Manually select featuresを選択してその後に表示される選択肢で指定する必要があります。

$ vue create my-app
Vue CLI v3.8.2
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

上記でManually select featuresを選択すると、以下のように選択肢が表示されますので、必要なものにチェックを入れてEnterを押します。

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

また、以下のように上記で指定した内容に応じていくつか追加で質問が表示されるので回答して設定します。

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-s
ass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)N

なお、上記の中でRouterを使うよう指定した場合に出る質問であるUse history mode for router?がありますが、これはNoにしたほうが良いそうです。このプラグインの作成者様の回答によると、ElectronはHistory modeでうまく動作しないそうです。以下に詳細が載っています。

github.com

nklayman/vue-cli-plugin-electron-builder

assets not working

vue create実行時に必要な上記の設定内容等については、以下の記事にもまとめているので必要な方は見てみてください。

www.virment.com

Windows10（WSL使用）でVue.jsアプリを作成するまでの手順

Windows10のWSL（Windows Subsystem Linux）上でVue.jsアプリを構築して立ち上げるところまでの手順をメモします。

最終的に以下のように表示されれば完了です。

$ vue create my-app

(...途中省略...)

📄  Generating README.md...

🎉  Successfully created project my-app.
👉  Get started with the following commands:

 $ cd my-app
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.

my-appというディレクトリが作成されているので、そこに移動してVue CLI Plugin Electron Builderをインストールします。

$ cd my-app
$ vue add electron-builder

上記を実行すると、途中でElectronのバージョンを指定するようメッセージが表示されます。ここではデフォルトの5.0.0を指定して進めます。

my-app

$ vue add electron-builder

(...途中省略...)

✔  Successfully installed plugin: vue-cli-plugin-electron-builder

? Choose Electron Version (Use arrow keys)
  ^3.0.0 
  ^4.0.0 
❯ ^5.0.0

上記選択後、ダウンロードがはじまりますので少々待機します。最終的に以下のように表示されれば完了です。

my-app

$ vue add electron-builder

(...途中省略...)

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
   The following files have been updated / added:

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

   You should review these changes with git diff and commit them.

以上で完了です。

デモアプリを起動する

以下のコマンドで起動します。

my-app

$ npm run electron:serve

(...途中省略...)

 DONE  Compiled successfully in 475ms                                                                   12:22:24 AM

  File                      Size                     Gzipped

  dist_electron/index.js    650.59 KiB               148.65 KiB

  Images and other types of assets omitted.

 INFO  Launching Electron...

以下のようにアプリが表示され、無事にElectron+Vue.jsによるアプリの動作確認ができました。

2019/6/9 追記

なお、もしアプリ起動時にSystem limit for number of file watchers reachedというようなエラーが出る場合は、以下に原因と解決策をまとめたので必要な方は見てみてください。

www.virment.com

LinuxでSystem limit for number of file watchers reachedが出る場合の原因と対策

Electron + Vue.jsによるデスクトップアプリ開発のためにVue CLI Plugin Electron Builderというプラグインを使用していましたが、アプリ起動時にSystem limit for number of file watchers reachedというエラーが表示されました。調べてみると、このエラーは特にVue CLI Plugin Electron Buildeを使った場合に限ったものではなく、Visual Studio CodeやNode.jsを使用している場合など、Linuxを使っている場合にファイル監視が動作するような場合には起こりうるエラーのようです。この記事では、この原因と解決策についてまとめます。

Electronアプリのディレクトリ構成について

作成したmy-appのディレクトリ内に、srcというディレクトリがあり以下の様な構造になっています。以下はTypeScriptを使用している場合ですが、構成がVue.jsアプリと同じであることが分かります。

./my-app/src

$ tree .
.
├── App.vue
├── assets
│   └── logo.png
├── background.ts
├── components
│   └── HelloWorld.vue
├── main.ts
├── router.ts
├── shims-tsx.d.ts
├── shims-vue.d.ts
├── store.ts
└── views
    ├── About.vue
    └── Home.vue

上記のようにVue.jsアプリのディレクトリ構成と同じであるため、Vue.jsアプリの開発を経験済の方にとってはかなり抵抗なく触れると思います。