Electron

特徴

主な用途

• コードエディターと開発者向けツール
• チャットやコラボレーションのデスクトップクライアント
• 社内業務用のデスクトップアプリ
• 既存の Web サービスのデスクトップアプリ化

インストール

1. 1

   Node.js を用意する

   Electron は Node.js と npm でインストールして実行します。Node.js の LTS 版をインストールし、両方のバージョンが表示されることを確認します。

   node -v && npm -v

   コピー
2. 2

   プロジェクトに Electron を追加する

   新しいフォルダーで package.json を作成し、electron を開発用の依存関係としてインストールします。続いて package.json の main フィールドを main.js にし、electron . を実行する start スクリプトを追加します。

   mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron

   コピー
3. 3

   Electron Forge で始める

   パッケージングや公開まで揃ったプロジェクトが欲しい場合は、公式ツール Electron Forge の作成コマンドを使います。生成されたフォルダーで npm start を実行するとアプリが起動します。

   npm init electron-app@latest my-app

   コピー

はじめてのプログラム

最初のウィンドウを開く

main.js はメインプロセスの入口です。アプリの準備ができると 800×600 の BrowserWindow を作成し、同じフォルダーの index.html を読み込みます。macOS ではすべてのウィンドウを閉じてもアプリが残るのが慣例なので、それ以外の OS でのみアプリを終了します。main.js の隣に簡単な index.html を置き、npm start で実行します。

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start

よく使うツール

Electron Forge

プロジェクト作成、開発時の実行、パッケージング、インストーラー作成、公開までを一つの流れにまとめた公式ツールです。

electron-builder

複数プラットフォーム向けのインストーラー作成、コード署名、自動アップデートに対応した広く使われるパッケージングツールです。

Electron Fiddle

小さな Electron のサンプルをすぐに書き、さまざまな Electron のバージョンで実行できる公式の実験ツールです。

Playwright

Electron アプリを起動してウィンドウを操作し、メインプロセスのコードを評価する E2E テストを書けます。

公式ドキュメント・参考資料

• 公式Electron
• 公式Electron Documentation
• 公式Electron Forge
• 学ぶElectron Tutorial
• 学ぶElectron Fiddle
• リファレンスBrowserWindow API
• リファレンスElectron Security Checklist
• コミュニティelectron/electron on GitHub

使用する言語

• TypeScriptTypeScript は JavaScript に静的型を加えた言語で、実行前にエラーを見つけ、大規模なコードベースの保守を容易にします。
• JavaScriptJavaScript は ECMAScript として標準化された動的プログラミング言語で、すべての Web ブラウザーと Node.js などのランタイムで動作します。