こんにちはsemiguraです。最近暖かくなってきたので嬉しいです。

Electron アプリを作ってみたいなと思い、ひとまず公式のチュートリアルを触って Hello, World! アプリを作成してみたのでそのやり方を備忘録として残しておきます。

TL;DR

yarn init && yarn add --dev electron でインストール
main.js にアプリの起動時と終了時の設定を記述する
preload.js にブラウザ上で動作する js を記述し、 main.js で読み込む
index.html に Electron アプリのウィンドウに表示されるページを記述する

環境

Electron 17.1.0

本題

パッケージインストール

mkdir my-electron-app && cd my-electron-app

yarn init && yarn add --dev electron

package.json の内容は以下になります。

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^17.1.0"
  }
}

その後、以下をルートディレクトリに作成します。

アプリの設定を記述する main.js
ブラウザ上で動作する js を記述し、 main.js で読み込む preload.js
Electron アプリのウィンドウに表示されるページを記述する index.html

main.js にアプリの起動時の設定を記述する

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

const createWindow = () => {
  // ブラウザウィンドウを作成する
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // preload.js を読み込む
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // mainWindow で index.html を読み込む
  mainWindow.loadFile('index.html')
}

index.html に Electron アプリのウィンドウに表示されるページを記述する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

id が指定されている要素には preload.js で動的に文章を流し込みます。

preload.js にブラウザ上で動作する js を記述する

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

通常の Web ページと同様、 DOMContentLoaded でDOMが全て読み込まれた後に、 id が指定されている要素に chrome, node, electron の各バージョンが読み込まれます。

main.js にアプリの終了時の設定を記述する

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // macOS の場合
    // Dock アイコンのクリック時に他に開いているウインドウがない場合、アプリのウインドウを再作成する
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// macOS 以外の場合
// 全ウインドウが閉じられたときに終了する
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

yarn start で起動すると index.html に記述されたページがそのまま表示されます。

アプリ起動時のキャプチャ

また、ウィンドウが正常に閉じるのを確認できます。

参考ドキュメント

クイックスタート | Electron

semigraphy

個人の意見です

Electron のクイックスタートで Hello, World! アプリを作成する