Electron で Hello world - しっぽを追いかけて

※ これは 2019/11/29 時点の node.js v13.2.0 Electron v7.1.2 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

Electron の開発環境はできたので、今度は自力で Hello world してみます

例によっておもむろに VS Code で適当なフォルダを開き、ターミナルで下記コマンドを実行

mkdir hello
cd hello
npm init

npm init では下記の質問がありましたが、Enter 連打ですべてデフォルト設定にしました

質問項目	説明	デフォルト値
package name	パッケージ名	{ディレクトリ名}
version	バージョン番号	1.0.0
description	概要	なし
entry point	最初に実行する js ファイル名	index.js
test command	テスト用コマンド	なし
git repository	git 用リポジトリ名	なし
keywords	検索用キーワード	なし
author	作者名	なし
license	ライセンス指定	ISC
Is this OK?	最終確認	yes

これで package.json というプロジェクト設定ファイルができました

次に下記コマンドをターミナルでたたいて Electron の必要環境をインストール

npm install electron

description や repository 指定がないと警告出ましたがとりあえず無視してよさそう

これで Electron アプリのプロジェクト構成はできたっぽいので、最低限必要なファイルを追加します

まずは、hello ディレクトリ直下に下記 index.js を作成

// electron の必要ライブラリをインポート
const {app, BrowserWindow} = require('electron')

// 一時変数用意
let mainWindow = null

app.on('ready', () => {
    
    // メインウィンドウを生成
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true, // 先頭行のライブラリインポートに必要
        },
        width: 800,
        height: 600,
    })

    // ウィンドウが閉じたら後片付けする
    mainWindow.on('closed', () => {
        mainWindow = null
    })
    
    // index.hrml をウィンドウに表示
    mainWindow.loadURL('file://' + __dirname + '/index.html')
})

ごくごく最低限のコード

さらに画面レイアウト用の index.html も下記のように記述して同じく直下に作成します

<!DOCTYPE html>
<html>
    <body>
        <h1>Hello electron!</h1>
    </body>
</html>

ここまで作ったら実行あるのみ！

ターミナルから次のコマンドをたたきます

electron .

ウゴイタアアアアアァァァァ！！