Electronの基本

2024/01/05 This article was written by mgk

近年、デスクトップアプリケーションの開発がよりアクセス可能になり、それを可能にする技術の中で注目を集めているのが「Electron」です。

Electronは、Web技術（HTML、CSS、JavaScript）を使用して、クロスプラットフォームのデスクトップアプリケーションを構築するためのフレームワークです。

本記事では、初心者向けにElectronの基本的な概念と使い方について解説します。



フロントエンドエンジニアロードマップ一覧はこちら



Electronとは？

Electronは、GitHubによって開発されたオープンソースのフレームワークで、Web技術を用いてデスクトップアプリケーションを構築するためのプラットフォームです。

HTML、CSS、JavaScriptを使ってアプリケーションを開発できるため、Web開発者にとっては馴染みやすく、クロスプラットフォームの実行ファイル（Windows、macOS、Linux）を生成することができます。


Electronの特徴

1. Web技術の利用:

Electronでは、主にWeb技術を使用してアプリケーションを開発します。

これにより、既存のWeb開発スキルを活かしてデスクトップアプリケーションを作成できます。


2. クロスプラットフォーム対応:

Electronで開発したアプリケーションは、Windows、macOS、Linuxなど、さまざまなオペレーティングシステムで動作します。

一度の開発で複数のプラットフォームに対応できるのが大きな利点です。


3. ネイティブ機能のアクセス:

Electronアプリケーションは、Node.jsのモジュールを使用してネイティブ機能にアクセスできます。

これにより、ファイルシステム、システム通知、ネットワークなど、デスクトップアプリケーションに必要な機能を利用できます。


4. ホットリロード:

Electronでは、アプリケーションのコードを変更した際に即座に再読み込みするホットリロード機能が提供されています。

開発者は素早く変更をプレビューできます。


Electronの基本的な使い方

Electronを使用する基本的な手順は以下の通りです。


1. Node.jsとnpmのインストール:

ElectronはNode.jsとnpmを使用しています。

まず、これらをインストールします。

Node.jsのダウンロード


2. Electronプロジェクトの初期化:

次に、Electronプロジェクトを初期化します。

プロジェクトのディレクトリに移動し、以下のコマンドを実行します。

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


3. メインとレンダラープロセスの作成:

Electronアプリケーションは主に2つのプロセスから構成されます。

メインプロセス（main.js）とレンダラープロセス（index.htmlとrenderer.js）です。

main.jsはメインウィンドウを作成し、index.htmlはその中で表示されるコンテンツを定義します。

// 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>
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
  </body>
</html>


4. アプリケーションの実行:

以下のコマンドでElectronアプリケーションを実行します。

electron main.js

これにより、ウィンドウが表示され、Hello Electron!と表示されるはずです。


5. ビルドとパッケージング:

アプリケーションをビルドし、パッケージングすることで実行可能なファイルを生成できます。

詳細は公式ドキュメントを参照してください。


Electronの利点と注意点

利点:

  1. クロスプラットフォーム開発:
  2. 一度の開発でWindows、macOS、Linuxに対応できます。
  3. Web技術の利用:
  4. HTML、CSS、JavaScriptなどのWeb技術を使用して開発できます。
  5. ネイティブ機能のアクセス:
  6. Node.jsモジュールを使用してネイティブ機能にアクセスできます。
  7. コミュニティとプラグインの豊富さ:
  8. 大規模なコミュニティと多くのサードパーティプラグインが利用可能です。


注意点:

  1. アプリケーションのサイズ:
  2. Electronアプリケーションは比較的大きなサイズになることがあります。
  3. リソースの使用:
  4. Web技術を使用するため、ネイティブアプリケーションに比べてリソースを多く消費することがあります。
  5. 学習コスト:
  6. Electron開発にはWeb技術が使用されるため、デスクトップアプリケーションの特有の知識も必要です。


まとめ

Electronはクロスプラットフォームデスクトップアプリケーションの開発を手軽に行える魅力的なフレームワークです。

この記事では初心者向けに、Electronの基本的な特徴と使い方について解説しました。

Web技術を用いてデスクトップアプリケーションを開発したい場合は、Electronが強力な選択肢となるでしょう。



フロントエンドエンジニアロードマップ一覧はこちら



一覧へ戻る