初めてのアプリのビルド
これは Electron チュートリアルの 2 章 です。
学習目標
このチュートリアルでは、Electron プロジェクトのセットアップと、最小限のスターターアプリケーションの作成方法を学びます。 この章の終わりには、ターミナルから開発モードで動作する Electron アプリを実行できるようになるでしょう。
プロジェクトのセットアップ
Windows マシンをご利用の方は、Windows Subsystem for Linux (WSL) を使用してアプリケーションを実行しようとすると問題が発生します。このチュートリアルに従う際にはご利用をお控えください。
npm プロジェクトの初期化
Electron アプリは npm を利用して組み上げられ、package.json ファイルをエントリポイントとします。 まずフォルダを作成し、その中で npm init
を実行して npm パッケージを初期化します。
- npm
- Yarn
mkdir my-electron-app && cd my-electron-app
npm init
mkdir my-electron-app && cd my-electron-app
yarn init
このコマンドは、package.json のいくつかのフィールドに対する設定を確認します。 このチュートリアルの目的上、以下のルールに従ってください。
- エントリポイント は
main.js
にしてください (後でそのファイルを作成します)。 - author、license、description は何にでもできますが、後の パッケージ化 において必要となります。
次に、Electron をアプリのdevDependencies にインストールします。これは、本番環境では必要ない外部の開発専用パッケージの依存関係のリストです。
これは本番環境のコードで Electron API を実行していることから、直感に反していると思われるかもしれません。 しかし、パッケージ化されたアプリには Electron のバイナリがバンドルされるため、本番環境時の依存関係として指定しないでください。
- npm
- Yarn
npm install electron --save-dev
yarn add electron --dev
パッケージを初期化して Electron をインストールすると、package.json ファイルは以下のようになるでしょう。 さらに Electron の実行形式などが含まれた node_modules
フォルダに加えて、インストールする正確な依存関係のバージョンを指定する package-lock.json
ロックファイルも生成されるはずです。
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}
Electron を直接インストールできない場合は、発展的なインストール でダウンロードミラー、プロキシ、トラブルシューティングの手順について説明しています。
.gitignore の追加
.gitignore
ファイルでは、Git での追跡を避けるファイルやディレクトリを指定します。 GitHub の Node.js gitignore テンプレート をコピーしてプロジェクトのルートフォルダに配置しておけば、プロジェクトの node_modules
フォルダのコミットを回避できます。
Electron アプリの実行
Electron のプロセスモデル のドキュメントを一読いただければ、Electron の複数のプロセスがどのように連携して動作するかがよりよく理解できるでしょう。
どのような Electron アプリケーションのエントリポイントも、package.json で定義した main
スクリプトになります。 このスクリプトは メインプロセス を制御します。メインプロセスは Node.js 環境で動作し、アプリのライフサイクル制御、ネイティブインターフェースの表示、特権操作、レンダラープロセス (後述) の管理を担います。
最初の Electron アプリを作成する前に、まず小さなスクリプトを使用して、メインプロセスのエントリポイントが正しく設定されていることを確認します。 プロジェクトのルートフォルダに main.js
というファイルを作成し、以下の 1 行を記述します。
console.log('Hello from Electron 👋')
Electron のメインプロセスは Node.js ランタイムなので、任意の Node.js コードを electron
コマンド (これは REPL としても利用可能) で実行できます。 このスクリプトを実行するには、package.json のscripts
フィールド内に start
コマンドとして electron .
を追加します。 このコマンドは、Electron の実行形式に対して、カレントディレクトリにある main スクリプトを探して開発モードで実行するように指示します。
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}
- npm
- Yarn
npm run start
yarn run start
ターミナルには Hello from Electron 👋
と出力されるはずです。 おめでとうございます、これにより Electron で初めてコードを 1 行実行しました! 次に、HTML でユーザーインターフェースを作成し、それをネイティブウインドウへ読み込む方法を学びます。
ウェブページを BrowserWindow で読み込む
Electron では、各ウインドウにウェブページが表示され、これはローカルの HTML ファイルまたはリモートのウェブアドレスから読み込むことができます。 このサンプルでは、ローカルファイルを読み込んでみましょう。 まず、プロジェクトのルートフォルダに index.html
ファイルを作成し、以下の基本的なウェブページを作成することから始めます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
<p>👋</p>
</body>
</html>
これでウェブページを Electron の BrowserWindow に読み込ませることができました。 main.js
ファイルの内容を以下のコードに置き換えてください。 ハイライトしたブロックをそれぞれ別々に解説します。
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
モジュールのインポート
const { app, BrowserWindow } = require('electron')
1 行目では、CommonJS のモジュール構文で 2 つの Electron モジュールをインポートしています。
- app、アプリケーションのイベントライフサイクルを制御します。
- BrowserWindow、アプリのウインドウを作成し管理します。
モジュールの大文字小文字規約
app モジュールと BrowserWindow モジュールの大文字小文字の規則の違いにお気づきでしょうか。 ここでは Electron は典型的な JavaScript の慣習に従っています。PascalCase のモジュールはインスタンス化可能なクラスコンストラクタ (例: BrowserWindow、Tray、Notification) であるのに対し、camelCase のモジュールはインスタンス化できません (例: app、ipcRenderer、webContents)。
型付きの import エイリアス
For better type checking when writing TypeScript code, you can choose to import main process modules from electron/main
.
const { app, BrowserWindow } = require('electron/main')
詳細は プロセスモデルのドキュメント をご参照ください。
Electron 28 から、Electron での ECMAScript Modules (例えば import
によるモジュールの読み込み) がサポートされています。 Electron での ESM の状態についてさらなる情報は、私たちの ESM のガイド にあります。