ゼロからはじめるJavaScript(6) v10が公開 - ElectronでJS製デスクトップアプリを作ろう

JavaScriptなどWebの技術を利用して、デスクトップアプリを開発できるElectronをご存じでしょうか。Electronを使うと手軽にWindowsやmacOS、Linuxで動くデスクトップアプリを作ることができます。つい先日、9月1日にElectronのバージョン10.1.1が公開されました。本稿では最新バージョン10を使って簡単にアプリを作ってみましょう。

Electronとは？代表アプリは？

『Electron』とは、HTML/CSS/JavaScriptといったWebの技術を利用して、デスクトップアプリを作ることができるフレームワークです。Windows/macOS/Linux上で動くデスクトップアプリを開発できます。

ElectronのWebサイト

Electronを使って作られた代表的なアプリには、GitHubが開発しているテキストエディタの「Atom」や、マイクロソフトが開発している「Visual Studio Code」など、本格的なアプリがあります。

ATOMエディタはElectronで作られている

Visual Studio CodeもElectronで作られている

なお、8月末に公開されたv10.0.0では、ブラウザのChromium 85.0.4183.84、JavaScriptエンジンのNode v12.16.3、V8 v8.5に対応した機能が搭載されました。そして、最新版のv10.1.1ではmacOSのダイアログフィルタの問題や、ネットワーク許可エラーの問題、Windowsで最大化した際の問題などの不具合が修正されています。

Electronのインストール

Electronをインストールするには、Node.jsが必要となります。まずは、Node.jsのWebサイトからNode.jsをインストールしましょう。

・Node.js ダウンロード
[URL] https://nodejs.org/ja/download/

そして、Node.jsをインストールしたら、コマンドラインを起動します。

【Windowsの場合】

WindowsならPowerShellを起動しましょう。PowerShellを起動するには、Windowsメニューから『Windows PowerShell』をから起動します。

【macOSの場合】

macOSならターミナル.appを起動しましょう。ターミナル.appを起動するには、Finderの「アプリケーション」を開き、「ユーティリティ」というディレクトリにターミナル.appがあります。

そして、プログラムを作成しようと思っているフォルダに移動します。そして、以下のコマンドを入力します。なお、「cd 」と入力して、フォルダをPowerShellにドラッグすると手軽にパスを入力できます。

cd (フォルダのパス)

そして、以下のコマンドを実行します。Electronフレームワークはサイズが大きいので、インターネットが遅い環境だと、インストールにしばらく時間がかかります。

npm init -y
npm install electron

Windowsで実行すると、以下のような画面になります。

Windowsでnpmコマンドを実行してElectronをインストールしているところ

Electronの一番簡単なプログラム

Electronで一番簡単なプログラムを作ってみましょう。最初に、npm initで自動生成されたpackage.jsonを開いて編集してみましょう。このファイルを以下のように書き換えます。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "electron index.js"
  },
  "keywords": [],
  "dependencies": {
    "electron": "^10.1.1"
  }
}

続いて『index.js』というJavaScriptのプログラムを作成します。このプログラムは、以下のように記述します。これがメインプログラムとなります。

// 必要なライブラリを取り込む --- (*1)
const {app, BrowserWindow} = require('electron')
let mainWindow = null // メインウィンドウ
// ウィンドウを作成する関数を定義 --- (*2)
function createWindow() {
  mainWindow = new BrowserWindow({
    webPreference: {
      nodeIntegration: true,
    },
    width: 800,   // ウィンドウの幅 --- (*3)
    height: 600,  // ウィンドウの高さ
  })
  // メインウィンドウのHTMLを指定 --- (*4)
  mainWindow.loadFile('index.html')
  // ウィンドウを閉じた時の処理
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}
// アプリのイベントを設定 --- (*5)
app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

このメインプログラムは、Electronでウィンドウを作成して表示する、最も簡単なプログラムです。(＊1)ではElectronを使うためのライブラリを取り込みます。そして、(＊2)ではウィンドウを作成する関数createWindowを定義します。ここでポイントとなるのが、(＊3)の部分で作成するウィンドウの幅(width)と高さ(height)を指定している部分と、(＊4)でウィンドウ内に表示するHTMLファイルを読み込んでいます。そして、(＊5)ではアプリ内で起きるイベントを指定します。

そして、ウィンドウ内に表示するHTML「index.html」を以下のように用意しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Electron最初のアプリ</title>
  </head>
  <body>
    <h1>こんにちは</h1>
    <p>最初のアプリ</p>
  </body>
</html>

以上、Node.jsのプロジェクトの設定を記述する「package.json」、メインプログラムの「index.js」、ウィンドウ内に表示するHTML「index.html」と、三つのファイルを用意します。

そして、コマンドラインから以下のコマンドを実行すると、Electronのアプリが表示されます。

npm start

Windowsだと以下のように表示されます。

WindowsでElectronアプリを実行したところ

macOSだと以下のように表示されます。

macOSでElectronアプリを実行したところ

全く同じプログラムですが、WindowsとmacOSで全く同じように実行することができました。

まとめ

以上、今回は、Electronのインストールと簡単なプログラムの作り方を紹介しました。HTMLやJavaScriptなどWebの技術を利用して、デスクトップアプリを開発できるのはとても気分の良いものです。また、ここで紹介したように、全く同じコードでWindows/macOS/Linuxのそれぞれのアプリが開発できるのも便利です。本稿がElectronをはじめるきっかけになれば幸いです。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユーススーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。