ReactでElectronアプリを作る
記事IT・テクノロジー
ReactでElectronアプリを作る
前回は、Web 開発でよく利用される Vue のフレームワークを使って、Electron のアプリケーションを作成する方法を解説しました。 この記事では、Vue と並んで Web 開発でよく利用される「React」を使って Electron アプリを作る方法を解説します。
React で Electron のアプリを作る場合は面倒です！
Vue の場合は拡張機能（プラグイン）をインストールして利用することでとても簡単に Electron のアプリを作成する事ができました。
React の場合、Vue の拡張機能に相当する物が今のところありません。従って、Electron アプリに必要な設定を自分で行う必要があります。面倒と言っても慣れてしまえば簡単なので、React の方が慣れているという方はやり方を覚えてください。
いずれにせよ、React のアプリが必要です。最初に Vue の場合と同様に React アプリのテンプレートのプロジェクトを作成します。
$ npx create-react-app [アプリの名前]
でテンプレートのアプリのプロジェクトを作成します。
基本の Electron の設定を行います
基本の Electron の設定は、React のプロジェクトフォルダに移動して行います。
electron のパッケージのインストール
Electron のアプリを作るのに必要なパッケージをインストールします。これは、Vue の場合と同じです。
$ npm install --save-dev electron
electron-builder のインストール
Electron の配布パッケージを作るために、「electron-builder」をインストールします。
$ npm install --save-dev electron-builder
package.json の変更
シンプルに Electron のアプリを作る場合と同様に、「package.json」に追記します。
{
....
"author":{
"name":"XXXX",
"email":"xxxx＠xxx.com"
},
"homepage":".",
"main": "src/main.js",
"build": {
"extends":null,
"files": [
"build/**/*",
"src/*.js"
],
"directories": {
"output":"dist"
}
}
.....
"scripts":{
"start":"react-scripts start",
"build":"react-scripts build",
"electron-serve":"react-scripts build && electron .",
"electron-build":"react-scripts build && electron-builder"
}
}
次に Electron のメインのソースコード（エントリーポイント）を追加します。
エントリーポイント（main.ts）の例です。前回の Vue の background.js を参考に書き換えています。
"use strict";
import { app, protocol, BrowserWindow } from "electron";
const path = require("path");
async function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile(path.join(__dirname, "../build/index.html"));
}
// Quit when all windows are closed.
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
app.on("ready", async () => {
createWindow();
});
以上です。面倒と言っても一旦やり方を覚えてしまえば簡単です！
起動は、以下のスクリプトを実行するだけです。
$ npm run electron-serve
配布パッケージの生成は、以下のスクリプトを実行すると、開発 PC のプラットフォーム用の配布パッケージを生成してくれます。
$ npm run electron-build
開発 PC 以外のプラットフォームの配布パッケージの作り方に関しては、以前の記事を参照してください。
(*)MacOS 用の配布パッケージの生成には Mac を使う必要があります。
まとめ
React を使って Electron のアプリを作る場合、Vue のような拡張パッケージ（プラグイン）がないので、Electron 関連の設定を自分で行う必要があります。 設定は、やり方さえわかれば簡単にできるので、面倒なのは最初だけだと思います。
Vue の方が手軽に利用できるのは事実ですが、大きな違いはありませんので、開発するアプリに合わせて使いやすいフレームワークを必要に応じて選ぶのが良いと思います。
いずれせよ、Web 開発の延長で簡単に Windows/Mac/Linux のデスクトップアプリを開発できるのは大きな魅力です。
