Javascriptで簡単に作れるデスクトップアプリを作る　〜　Electron

記事

IT・テクノロジー

2021/02/01 16:23

Javascriptで簡単に作れるデスクトップアプリを作る〜Electron

Javascript（Typescript）を使って Web 開発が出来るスキルを身につけると、デスクトップアプリも簡単に作れるようになります。この記事では、複数のプラットフォーム（Windows/Mac/Linux）のアプリを簡単に開発できる、Electron フレームワークについて解説しています。

Electron とは？

既にご存知の方も多いかと思いますが、Electron はプログラミングで良く使われているエディタの VSCODE や Atom の開発に使われている他、Slack などの開発にも使われています。これらのアプリが、Mac/Windows/Linux をサポートできるのも Electron の恩恵を受けているからです。

しかも、Web 開発の知識があれば、新たに別のプログラミング言語を学習しなくても、デスクトップのアプリの開発もできてしまうというのが最大の魅力です。

Electron アプリは、React や Vue などの Web 開発のフレームワークと組み合わせて利用できるので、Web アプリをほぼそのままデスクトップアプリとして変換する事も簡単にできますが、この記事ではまずは、Electron の概念を理解するために、簡単にできる「Hello World!」を表示するだけの Electron アプリの作り方を紹介します。

Electron アプリの簡単な作り方

今回は、「Hello World!」を表示させるだけのシンプルなアプリを作成する流れを紹介します。まずは、何が必要かを理解するのには十分なサンプルです。主な流れは

＊　プロジェクトフォルダの作成と準備

＊　表示の基本となる HTML ファイルの作成

＊　アプリのメイン（エントリポイント）の作成

＊　Electron 実行のためのスクリプトの設定

＊　テスト実行

という流れです。やること自体はとてもシンプルで簡単です。是非やってみてください。 PC に Node.js/npm がインストールされていれば簡単にできます。

プロジェクトフォルダの作成と準備

最初に、Electron アプリのプロジェクトフォルダを作成して開発のための準備をします。

$ mkdir sample-project

$ cd sample-project

$ npm init -y

を実行します。その後で、Electron の基本パッケージをインストールします。この記事では、品質の高いソフトウエアの開発のために Typescript を利用する前提なので、Typescript のパッケージもインストールしておきます。cd

$ npm install --save-dev electron typescript

続いて Typescript の初期設定を行います。

$ npx tsc --init

これで、「tsconfig.json」が作成されます。基本的に標準設定で良いのですが、何点か追加しておきます。以下が「tsconfig.json」の例です

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"outDir": "build",

"strict": true,

"esModuleInterop": true,

"skipLibCheck": true,

"forceConsistentCasingInFileNames": true

"include": ["src/**/*"]

}

表示の基本になる HTML ファイルの作成

Electron のアプリは、Web 開発のように HTML で記述したファイルを下に GUI のデザインができます。今回は、簡単なサンプルなので、シンプルに「Hello World!」を表示するだけの物にしてあります。

<!DOCTYPE html>

<html>

<head>

<title>Electronアプリのサンプル</title>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

アプリのソースファイルのフォルダ

プロジェクトフォルダの下に、Electron アプリのソースコードを保存するフォルダを作って、アプリのメインのファイル（エントリーポイント）を作成します。

import { app, BrowserWindow } from "electron";

function createWindow() {

const mainWindow = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true,

});

mainWindow.loadFile(`index.html`);

}

app.whenReady().then(createWindow);

Electron アプリのためのスクリプト設定

Electron アプリのためのスクリプトを設定します。プロジェクトフォルダの「package.json」に追記します。また、Electron アプリのエントリーポイントを「main」のタグで指定します。「tsconfig.json」でコンパイル後のファイルを「build」フォルダに出力するように指定しているので、「"main":"build/index.js"」のように指定します。

…

　"main": "build/index.js",

"scripts": {

"start": "npm run build && electron .",

"build": "tsc"

...

Electron アプリの実行

以上で、基本的な Electron アプリの実装は完了です。まずは、テスト環境での実行をします。

$ npm start

を実行すると、Web ブラウザではなく、デスクトップアプリのウインドウが立ち上がります。アプリのメニューバーは標準設定の物が表示されます。これは、カスタマイズ可能です。詳細に関しては次回以降に解説します。

開発ツールを表示させる

開発時には、Web 開発のようにデバッグ情報が取得できると開発の効率が上がります。「index.ts」でメインのウインドウを作成する際に、「mainWindow.webContents.openDevTools()」を加えておくと Chrome で利用している開発ツールと同じ表示がウインドウに追加されて、デバッグ情報の取得ができます。