JavaScriptでデスクトップアプリを作れる「Electron.js」

Electron.js
とある機会に「Electron.js」でツール開発した事例を知りました。
「Electron.js」とは、Web技術でアプリを作れる仕掛けのひとつで、JavaScriptによりデスクトップアプリを作れるフレームワークです。
www.electronjs.org

「Visual Studio Code」や「Slack」もこれで作られたそうです。
Node.jsで動きますので、Node.jsが得意な人には相性がいいです。

「Electron.js」の公式サイトに「Hello World」のウィンドウを表示するサンプルプログラムがあります。
シンプルなので、理解も改造もしやすそうです。
早速、動かしたので、どんな内容なのかを説明します。

0. 前提ソフトのインストール
- 1-1. Ｇit for Windowsのインストール
- 1-2. Node.jsのインストール
1. サンプルプロジェクトのクローン
2. クローンしたものを確認する
3 補足
- 別のサンプル（今は動かない）
- ライセンス
まとめ

なお、本記事では次の読者を想定しています

ある程度の経験がある初心者の方
Windows利用者

0. 前提ソフトのインストール

GitとNode.jsが入っていない場合は、インストールしてください。
この2つは広い範囲で開発に使えます。

1-1. Ｇit for Windowsのインストール

Gitは、ソースコードなどのリソースを管理するための分散型のバージョン管理システムです(意味がわからなくても大丈夫です)。
今回は、GitHubで公開されているサンプルをダウンロードするために使います。
Windows版である「Git for Windows」を公式サイトからダウンロードしてインストールしてください。
gitforwindows.org

1-2. Node.jsのインストール

Node.jsは、スケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です(意味がわからなくても大丈夫です)。
今回は「Electron.js」の動作環境となります。
公式サイトからダウンロードしてインストールしてください。
nodejs.org

特にこだわりがなければ「推奨版」でOKです。
※推奨版は、LTS (Long Term Support) と記されたほうです。

1. サンプルプロジェクトのクローン

公式サイトの案内に従って、次の3つのコマンドを順番に実行してください。

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start

1つ目はgit cloneコマンドです。
サンプルプロジェクトをクローン(ダウンロード)します。
2つ目は、1つ目で作成されたフォルダへの移動です。
3つ目は前提ライブラリのインストールとアプリの起動です。

アプリが起動すると、下記のようなウィンドウが表示されます。
Electron.js

2. クローンしたものを確認する

git cloneコマンドでクローンしたフォルダの中身は次のとおりです。

ポイントとなるファイルは次の5つです。

1. package.json
2. main.js
3. index.html
4. preload.js
5. renderer.js

順に中身を見ていきます。

2-1. package.json

package.jsonの中身は次のとおりです。

npm installコマンドでインストールするものなどの設定です。
ポイントを見ていきます。

npmでインストールする対象は、Electronのみとなっています。
※ちなみにElectronが必要とするライブラリなど関連するものはpackage rock.jsonに記載があり、自動的に入りますが割愛します。
npm startコマンドの内容を定義しています。
具体的にはelectron .としています。
この定義により、コマンドラインでnpm startを実行すると、electron .が実行され、Electronが起動します。
エントリポイント（起動時に実行するプログラム）をmain.jsとしています。