[JavaScript] Electronとは：デスクトップソフト作成環境の基本的な使い方

2017 年 8 月 13 日

概要

• ブラウザの技術をベースにした、オープンソースのGUI開発ライブラリ
• ウェブページをつくるようにデスクトップ向けソフトウェアを開発できる
• Node.jsとChromiumの技術を活用
• Node.jsのnpmをパッケージマネージャとして使う
• ECMAScript 2015に対応

公式サイト

環境の構築：インストール

Node.jsのインストール

何はともあれ、Node.jsベース。

公式サイト

Electronのインストール

npmから。

npm install electron -g

package.jsonファイルの作成

ビルド用のファイル。

「main」プロパティで、エントリーポイントとなるJavaScriptファイル（最初に実行されるファイル）をかならず指定する。

バージョンとアプリ名も書いたほうがいいらしい。

{
	"main" : "myMain.js",
	"name" : "My App",
	"version" : "1.0.0"
}

index.htmlの作成

これに関しては、ウェブページと同じ。基本的にHTML5で、好きなように書けばいい。

基本のスクリプトを記述

package.jsonのmainで指定したファイルに、最初のコードを書く。

// electronモジュールの読み込み
const electron = require('electron');

const path = require('path');
const url = require('url');

// Electronの初期化が完了した際のイベントハンドラ
electron.app.on('ready', function(){
	// 最初のウィンドウの作成
	let mainWindow = new electron.BrowserWindow({width: 1024, height: 768});

	// HTMLファイルの読み込み
	mainWindow.loadURL(url.format({
		protocol: 'file:',
		slashes: true
		// path.join()	環境に合ったパスを作成してくれる
		// __dirname	現在実行中のスクリプトファイルを格納するディレクトリのパス
		pathname: path.join(__dirname, 'index.html'),
	}));
	
	// メインウィンドウを閉じたときの処理
	mainWindow.on('closed', function() {
    	mainWindow = null;
    });
  });
});

// すべてのウィンドウが閉じられたときの処理
electron.app.on('window-all-closed', function() {
	app.quit();
});

あとは適宜APIを使い、HTMLやスクリプトを付け加えていけばいい。

おわりに

基本的にはこれだけ。過去にAdobe AIRやPhoneGapを使ったことがある人なら、ほぼ同じ感覚でやれる。

決定的に異なるのは、Node.jsの膨大なAPIを使えること。