JavaScript

Electron入門 開発環境の構築と最初のプログラム作成

読了時間: 約437
Electron - HelloWorld

最近気になっているHTML5関連の技術。
特に、「Electron」にずっと関心があったのですが…。
今まで手を付けていませんでした。

今日は、何となくElectronの事が特に気になりましたので…。
せっかくの機会なので、Electron入門をしてみようと思い立ちました。

そこで、私はElectron開発のための環境を揃えて、最初のプログラムを作成するところまでをやってみました。
実際やってみると、そこまで難しいということはありませんでしたよ。
大体30分くらいで動作するところまでいけましたね。

今回の記事は、Electronの開発環境の構築方法と、最初のプログラムを書いて動作させる方法をまとめます。

Electronとは?

Electronというのは、GitHub社が開発したオープンソースのソフトウェアフレームワークです。
主な特徴としては、「Windows/Mac/Linuxのクロスプラットフォームに対応したデスクトップアプリを開発できる」「HTML/CSS/JavaScriptといったウェブアプリケーションの技術を使って開発する」といった点です。
Electronを使って作成されたソフトウェアとしては、AtomやVisual Studio Codeなどがあります。

開発環境

私のパソコンの開発環境は以下のとおりです。

PC: MacOS High Sierra 10.13.6
エディタ: Visual Studio Code 1.26.1
パッケージマネージャー: Homebrew

Node.jsのインストール

Electronで開発するためには、「Node Package Manager(npm)」が必要となります。
そこで、まずは「Node.js」をインストールします。

brew install node

最初のElectronアプリケーション作成

最初に、適当なフォルダを作成します。
ここでは、例として「hello」フォルダを作って、そこにファイルを作成していくとします。

mkdir hello
cd hello
npm init -y
npm i -D electron

これらを実行すると、フォルダ内に「package.json」が作成されます。
これを少しだけ編集して以下のようにします。
authorは、あなたの名前に変更してください。

【package.json】

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Shingo Suzuki",
  "license": "ISC",
  "devDependencies": {
    "electron": "^2.0.7"
  }
}

ここから、プログラムを作成していきます。
まずはメインとなる「main.js」から確認します。

【main.js】

const {app, BrowserWindow} = require('electron');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({width: 400, height: 300});
    mainWindow.loadFile('index.html');
    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if(process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if(mainWindow === null) {
        createWindow();
    }
});

アプリケーションの準備ができた時(ready)にウィンドウを作成します。
そして、「index.html」を読み込んでその内容を表示します。
ウィンドウが全て閉じられた時(window-all-closed)は、Mac以外の時は終了します。
アプリケーションがアクティブ化された時(activate)には、ウィンドウがnullの時には再構築します。

【index.html】

<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
    <p>Node: <script>document.write(process.versions.node);</script></p>
    <p>Chrome: <script>document.write(process.versions.chrome);</script></p>
    <p>Electron: <script>document.write(process.versions.electron);</script></p>
  </body>
</html>

index.htmlの内容は非常に単純です。
Node、Chrome、Electronのバージョンをそれぞれ表示しているだけです。

プログラムは、npxコマンドでelectronを指定して実行します。

npx electron .

実行結果

上記プログラムを実行すると、以下のような画面が表示されます。
確かに、それぞれのバージョンが表示されているのが分かりますね。

Electron - HelloWorld

まとめ

今回の記事では、Electronの開発環境の構築方法と、最初のプログラムを作成するところまでを確認してみました。
いかがでしょうか?
実際やってみると、それほど難しくはなさそうですよね。

これで、Electron入門ができました。
今後は少しずつ学習を進めていって、最終的には何か実用的なアプリケーションを作成してみたいです。
今のところは良いアイデアが思いつきませんけども…。

もしHTML/CSS/JavaScriptといったウェブの技術を使って、デスクトップアプリケーションを作成したいのなら…。
このElectronは、非常におすすめですよ!
ぜひあなたも入門してみてはいかがでしょうか?

書いた人: 鈴木俊吾(すずしん)
フリーランスのライター・ブロガー・プログラマ。
私の詳しいプロフィールについては、プロフィールページを参照してください。
Twitter: @suzushin7

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です