-
必要なソフトウェアのインストール: Electronを使用するには、まずNode.jsとnpm(Node Package Manager)をインストールする必要があります。インストールが完了したら、以下のコマンドを実行してElectronをグローバルにインストールします。
npm install -g electron
-
プロジェクトのセットアップ: 任意のディレクトリで新しいプロジェクトフォルダを作成し、そのディレクトリに移動します。次に、以下のコマンドを使用してElectronプロジェクトをセットアップします。
npm init -y npm install electron --save-dev
-
メインファイルの作成: プロジェクトフォルダ内に
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);
-
レンダラーファイルの作成: プロジェクトフォルダ内に
index.html
という名前のファイルを作成し、以下のコードを追加します。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html>
-
アプリケーションの実行: コマンドラインでプロジェクトフォルダに移動し、以下のコマンドを実行します。
electron .
これにより、Electronアプリケーションが起動し、「Hello World!」が表示されます。
以上が、Electronを使用して「Hello World」を実装する手順とコード例です。この基本的な例をベースに、Electronの機能をさらに活用して、より複雑なデスクトップアプリケーションを開発することができます。