VueでElectronのアプリを作る

VueでElectronのアプリを作る

Electron のフレームワークを使うと、複数のプラットフォーム（Windows/Mac/Linux）で動作するデスクトップアプリを開発できるのは、既に紹介してきた通りです。 今日は、Electron のフレームワークと Web 開発でよく利用される Vue を組み合わせて利用する例を紹介します。Vue を取り込むとさらに簡単にデスクトップアプリを作る事ができます。

Vue を使うと便利な理由

Vue を使うと簡単に Electron アプリが作れるのには理由があります。 これは、Vue でよく利用する「VUE CLI」が拡張機能で Electron のアプリ作成に必要な処理をやってくれる機能をサポートしているからです。

この拡張機能（プラグイン）は簡単に追加できます。 その前に、最初に Vue のプロジェクトを作成します。VUE UI(vue ui)を利用しても良いですし、コマンドライン（CLI）を利用しても良いので Vue のプロジェクトを作成してください。 コマンドラインの場合は以下のコマンドを実行します。

$ vue create [プロジェクト名]

UI でもコマンドラインでも必要な情報を入力してまずは、Vue のプロジェクトを作成します。 これで、Vue のプロジェクトのテンプレートが作成されます。 まずは、このテンプレートのプロジェクトをそのまま Elecron のアプリにしてみます。

ここで拡張機能（プラグイン）をインストールします。

$ vue add electron-builder

実はこれだけで、Electron アプリの開発に必要な設定を自動的に行ってくれます。 「package.json」を開くとお分かりかと思いますが、必要なスクリプトなども追加されています。

{

  "name": "electron-app-vue",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "electron:build": "vue-cli-service electron:build",

    "electron:serve": "vue-cli-service electron:serve",

    "postinstall": "electron-builder install-app-deps",

    "postuninstall": "electron-builder install-app-deps"

  },

  "main": "background.js",

  "dependencies": {

    "core-js": "^3.6.5",

    "vue": "^2.6.11",

    "vue-class-component": "^7.2.3",

    "vue-property-decorator": "^9.1.2",

    "vue-router": "^3.2.0",

    "vuex": "^3.4.0"

  },

  "devDependencies": {

    "＠types/electron-devtools-installer": "^2.2.0",

    "＠typescript-eslint/eslint-plugin": "^2.33.0",

    "＠typescript-eslint/parser": "^2.33.0",

    "＠vue/cli-plugin-babel": "~4.5.0",

    "＠vue/cli-plugin-eslint": "~4.5.0",

    "＠vue/cli-plugin-router": "~4.5.0",

    "＠vue/cli-plugin-typescript": "~4.5.0",

    "＠vue/cli-plugin-vuex": "~4.5.0",

    "＠vue/cli-service": "~4.5.0",

    "＠vue/eslint-config-prettier": "^6.0.0",

    "＠vue/eslint-config-typescript": "^5.0.2",

    "electron": "^11.0.0",

    "electron-devtools-installer": "^3.1.0",

    "eslint": "^6.7.2",

    "eslint-plugin-prettier": "^3.1.3",

    "eslint-plugin-vue": "^6.2.2",

    "prettier": "^1.19.1",

    "typescript": "~3.9.3",

    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",

    "vue-template-compiler": "^2.6.11"

  },

  "eslintConfig": {

    "root": true,

    "env": {

      "node": true

    },

    "extends": [

      "plugin:vue/essential",

      "eslint:recommended",

      "＠vue/typescript/recommended",

      "＠vue/prettier",

      "＠vue/prettier/＠typescript-eslint"

    ],

    "parserOptions": {

      "ecmaVersion": 2020

    },

    "rules": {}

  },

  "browserslist": ["> 1%", "last 2 versions", "not dead"]

}

これで、Vue のテンプレートのプロジェクトの Electron アプリ版を以下のコマンドで実行できます。

$ npm run electron:serve

これは、テストモードなので開発ツールも表示されるようになっています。 配布用のパッケージを作成したい場合は、以下のコマンドで開発で使用しているプラットフォーム向けの配布用パッケージが作成されます。配布用のパッケージでは、開発ツールは非表示になっています。ほとんど何もしないでアプリが作れます！

$ npm run electron:build

開発で利用しているプラットフォーム以外の配布用パッケージを作成するためには、前回の記事を参考にスクリプトを追加すれば作成できます。 （＊）Mac 向けの配布パッケージの作成には Mac が必要です。

いかがですか？簡単だと思いませんか？！

拡張機能（プラグイン）がやってくれることは？

このプラグインをインストールすると、上にも書いた通りに必要な設定を自動でやってくれます。基本的に以下の２点です。

＊　package.json の設定

＊　Electron アプリのための Javascript(Typescript)のファイルの追加

pakcage.json の設定

上で既に説明していますので簡単にまとめると

＊　script の追加

＊　build の設定

＊　Electron のエントリーポイントの追加

＊　Electron の環境設定

です。自分で「package.json」を変更する必要はなく、拡張機能を入れると自動でやってくれます。

Electron アプリのための Javascript(Typescript)のファイルの追加

これは、上で書いているエントリーポイントのソースコードを自動生成してくれます。background.js(background.ts)を作ってくれます。このファイルは、Electron アプリのメインのウインドウの作成をやってくれます。

まとめ

今回は、シンプルに Vue のテンプレートプロジェクトをそのまま Electron アプリにしただけです。 実際にやってみた方はお分かりかと思いますが、とても簡単です。 ほぼ、自動で Web アプリが Electron のアプリに早変わりです！

この方法の最大の魅力は Vue をベースに Web アプリを作ってあれば、細かいことを気にしなければ、そのままデスクトップアプリにへんしんさせる事が可能という事です。 実際は、Web アプリのリンクをクリックすると新しい Window が開いたりする部分は、デスクトップアプリとしては若干不自然な動きになる部分もありますが、ほぼそのままデスクトップアプリにできるのは魅力です。

あとは、デスクトップのアプリらしく簡単な手直しをすれば立派なデスクトップアプリに簡単に変更できます。

Vue で Web 開発ができれば、デスクトップアプリも簡単にできる！

これが今回のお話でした。