electronでHello Worldしてみる

今回はelectronを使ってWindowsアプリケーションを作ってみます。

そもそもelectronって？
1.electronのインストール
2.プログラムの作成
3.実行

そもそもelectronって？

electron（エレクトロン）は、JavaScript・HTML・CSS を使ってデスクトップアプリを作成できるフレームワークです。
Windows・Mac・Linux などクロスプラットフォームで動作するアプリを作れるのが特徴です。

それでは実際にアプリケーションを作っていきます。
※nodejsがインストールされている前提で進めます。

1.electronのインストール

任意のディレクトリで下記コマンドを実行し、electronをインストールします。

npm init -y
npm install --save-dev electron

package.json、package-lock.json、node_modulesディレクトリがあればインストール完了です。

2.プログラムの作成

package.jsonと同じ階層に下記ファイルを作成します。

index.js
index.html

ファイルの中身です。

index.js

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

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron App</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

package.jsonに下記を追加します。

～～  
  },
  "scripts": {
    "start": "electron ."
  }
～～

3.実行

下記コマンドでプログラムを実行します。

npm start

下記のような画面が表示されれば完了です。

今回は以上です。