まめ - たんたんめん

備忘録　C# / WPF 多め

JavaScript Electron導入

JavaScript

Electron とは

www.electronjs.org

マルチプラットフォームの実行Framework
- mac , windows
java script , html 5でアプリケーションが作成できる

開発に必要なもの

Node.js
VisualStudio Code ( あると便利 )
- 余談ですが VSCodeは Electron製です。

VSCodeを使ったHello World

エクスプローラーから空のフォルダを作成
VSCodeで作成したフォルダを開く
ターミナルを表示
Node.jsの環境構築ターミナルで下記コマンドを実行
npm init -y
※Node.jsをインストールしたばかりで動作しない場合はPCを再起動してみてください。
成功すると package.jsonが作成されます。
electron のインストール
ターミナルから下記コマンドを実行
npm install -d electron
成功するとnode_modules と package-lock.jsonが作成される。
srcディレクトリを作成し、下記ファイルを配置

index.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    </head>

    <body>
        <h1>こんにちは！Electron</h1>
    </body>
</html>

main.js

// Electronのモジュールを読み込み
var {app, BrowserWindow} = require('electron');

function createWindow() {
  // メインウィンドウを作成
  var mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    },
    width: 400, height: 300,
  });

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

//  ウィンドウ表示
app.on('ready', createWindow);

package.json

{
    "main": "main.js"
}

実行
ターミナルからnpx electron ./srcを実行

Electronでウィンドウを表示することができました。