[OSS紹介#38] Electron：クロスプラットフォームアプリ開発の新たな選択肢を探る

in

この記事について

この記事では、オープンソースソフトウェア（OSS）の一つである「Electron」を紹介します。これまで4回はMCP関連のツールを中心に紹介してきましたが、今回の記事は小休止の位置付けとなります。

Electronは、JavaScript、HTML、CSSを使用してクロスプラットフォームのデスクトップアプリケーションを構築するためのフレームワークであり、Node.jsとChromiumに基づいています。さまざまなアプリケーションで広く利用されているこのツールは、特にVisual Studio Codeなどの人気アプリに組み込まれています。

開発者が直面するアプリケーション開発の効率向上を目的に、Electronを取り上げることで新たな視点を提供し、使いやすく強力なツールを使ったデスクトップアプリ制作の可能性を探ります。Electronの特徴や利点を理解することで、読者はアプリ開発の新たなアプローチを見出す手助けとなり、実際のプロジェクトへの応用を促進することが期待されます。

リンク：https://github.com/electron/electron

本コンテンツは、弊社AI開発ツール「IXV」を用いたOSSツール紹介です。情報の正確性には努めておりますが、内容に誤りが含まれる可能性がございますのでご了承ください。

1. Electronでできること

Electronは、JavaScript、HTML、CSSを使用してクロスプラットフォームのデスクトップアプリケーションを開発できるフレームワークです。Node.jsとChromiumを基盤としており、これにより一つのJavaScriptコードベースでWindows、macOS、Linux向けのアプリを作成できます。著名なアプリケーション、例えばVisual Studio Codeなどでも使用されています。

Electronを利用することで、以下のようなことが可能になります：

  • デスクトップアプリケーションの開発
  • ウェブ技術を用いたUI設計
  • Node.jsの機能を活用したバックエンド処理
  • 多様なプラットフォームでの動作

2. セットアップ手順

Electronを使用するためのセットアップ手順は以下の通りです。

2.1 動作環境

Electronは以下のプラットフォームでサポートされています：

  • macOS: Big Sur以降の64ビットIntelおよびApple Silicon/ARMバイナリ
  • Windows: Windows 10以降のia32（x86）、x64（amd64）、arm64バイナリ
  • Linux: Ubuntu 20.04以降、Fedora 32以降、Debian 10以降

2.2 npmでインストール

Electronのプリビルドバイナリをインストールするには、npmを使用します。通常は開発依存としてアプリにElectronを追加します。

npm install electron --save-dev

他のインストールオプションやトラブルシューティングの詳細については、インストールガイドを参照してください。

3. 簡単な使い方

Electronの使い始めには、Electron Fiddleを利用することをお勧めします。これは小規模なElectronの実験を構築、実行、パッケージ化するためのツールです。また、ElectronのAPIに関するコード例を確認することもできます。

3.1 最初のアプリケーション

次に、最小限の Electron アプリを作成する手順を示します。以下のコマンドでリポジトリをクローンして、アプリを実行します。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

このリポジトリには、Electron アプリを構成するための基本的なファイルが含まれています。具体的には、`package.json`（アプリの主要ファイルと依存関係を指定）、`main.js`（アプリを開始し、ブラウザウィンドウを作成）、`index.html`（表示する Web ページ）などがあります。

以下は、最小限のElectronアプリケーションのサンプルコードです：

main.js

const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

index.html

html<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
</head>
<body>
  <h1>Hello World!</h1>
  <p>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </p>
</body>
</html>

4. 結論

Electronは、ウェブ技術を活用してデスクトップアプリケーションを開発するための強力なツールです。クロスプラットフォームでのサポートが充実しており、Node.jsの機能を利用することで、豊富なアプリケーションが開発可能です。特に、Electron Fiddleを利用することで、学習やプロトタイピングが容易になるため、これからElectronを使ったアプリ開発を始める方にとって非常に有用なフレームワークと言えます。