Electronを使用した「Hello World」の実装方法


  1. 必要なソフトウェアのインストール: Electronを使用するには、まずNode.jsとnpm(Node Package Manager)をインストールする必要があります。インストールが完了したら、以下のコマンドを実行してElectronをグローバルにインストールします。

    npm install -g electron
  2. プロジェクトのセットアップ: 任意のディレクトリで新しいプロジェクトフォルダを作成し、そのディレクトリに移動します。次に、以下のコマンドを使用してElectronプロジェクトをセットアップします。

    npm init -y
    npm install electron --save-dev
  3. メインファイルの作成: プロジェクトフォルダ内にmain.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);
  4. レンダラーファイルの作成: プロジェクトフォルダ内にindex.htmlという名前のファイルを作成し、以下のコードを追加します。

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
    </head>
    <body>
     <h1>Hello World!</h1>
    </body>
    </html>
  5. アプリケーションの実行: コマンドラインでプロジェクトフォルダに移動し、以下のコマンドを実行します。

    electron .

    これにより、Electronアプリケーションが起動し、「Hello World!」が表示されます。

以上が、Electronを使用して「Hello World」を実装する手順とコード例です。この基本的な例をベースに、Electronの機能をさらに活用して、より複雑なデスクトップアプリケーションを開発することができます。