デスクトップアプリまで作れる！「Electron.js」でJavascriptデスクトップアプリ開発

サーバーサイドのJavascript「Node.js」の技術を活用してデスクトップアプリの開発が行えるのが「Electron.js」です。

「Electron.js」を使えるようになるためには、ある程度「Node.js」の知識も必要になってきますので、先に「Node.js」について学ぶ必要があります。

「Node.js」は、大量のリクエストを処理するために「ノンブロッキングI/O」という技術を搭載し、これまでのサーバー技術では少数しか処理できなかったリクエスト処理数を大幅に増やしました。

今回は「Node.js」の話では無いので詳細は割愛しますが、ご興味がある方は「Node.js」について調べてみてください。

とはいえ、公式サイトにインストーラーなども用意されているため、導入は比較的簡単です。

→「Node.js公式サイト」

「Electron.js」のインストールとサンプルアプリ開発

「Electron.js」の公式サイトは、

になります。「Electron.js」のインストールは、「Node.js」をインストール後に、

npm -g install electron-prebuilt

とコマンドを打つと、「Electron.js」をインストールすることができます。

ちなみに、「npm」はNode.jsのパッケージを管理するためのプログラムです。

そして、新たに「Electron.js」用のアプリケーションディレクトリを作ってあげて、そのディレクトリの中に移動し、

npm init -y

とコマンドを打つと、「package.json」が作成されます。

「package.json」は、作成したアプリケーションプロジェクト管理用のファイルです。

この中の「main」にプログラムのエントリポイントとなるJSファイル名を書きます。

↓package.json

{
  "name": "sampleapp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
					

「main.js」に実際の処理を書いていくのですが、今回は公式サイト「Get Started」内の「main.js」をほぼそのまま使わせてもらいました。

↓main.js

'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

var mainWindow = null;

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

app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
					

このコード内の、

mainWindow.loadURL('file://' + __dirname + '/index.html');

部分では、アプリケーションウィンドウ内に表示するhtmlファイルを指定していますので、「index.html」ファイルにインターフェースを記述します。

アプリケーションを起動するコマンドは、プラットフォームによって異なりますので、「Electron Documentation - Quick Start」内を確認してください。

→「Electron Documentation - Quick Start」

以上、ザッと「Electron.js」の利用方法について話してきましたが、思っていたより簡単にデスクトップアプリを作ることができるので、オリジナルのアプリを作っているエンジニアもたくさんいます。

→「Qiita - Electron」

Javascriptを学習すれば、クライアント・サーバー・デスクトップの開発と、かなり広範囲な開発を行うことができますので、まだJavascriptを学習していない方はJavascriptの開発にチャレンジしてみませんか？

「Javascript」学習書籍