Electron チュートリアル

Electron（旧称 Atom Shell）は、GitHub が開発したオープンソースのクロスプラットフォームなデスクトップアプリケーション開発フレームワークです。

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

Electron を使うと、Webページを書くようにデスクトップアプリを作成できます。例えば、Windows の .exe、macOS の .app、Linux の実行ファイルなどです。

Electron = Chromium（ブラウザエンジン） + Node.js（バックエンド能力） + デスクトップアプリのシェル。

Electron を学ぶのに必要な基礎知識？

Electron を学ぶ前に、これだけ押さえておけば十分です：

  • 少しわかるJavaScript。
  • 使えるNode.jsとnpmスクリプトを実行する。
  • 少し理解しているHTMLとセレクタ（例えば#id、.class）；
  • ターミナルを使えるコマンドを実行する。

中核概念

想像してみてください。普段ブラウザでWebサイトにアクセスすると、HTMLで構築されたページ、CSSで美化されたスタイル、JavaScriptで実装されたインタラクション機能が表示されます。Electron は、ブラウザをパッケージ化して、ユーザーが手動でブラウザを開かなくても独立して実行できるようにするものです。

技術構成：

  • Chromium：ページレンダリングエンジンを提供し、アプリケーションのインターフェースが正常に表示されることを保証します。
  • Node.js：システムレベルのAPIを提供し、ファイルシステムやネットワークなどの低レベル機能にアクセスできるようにします。
  • Native APIs：メニュー、ダイアログなどのOSのネイティブ機能を呼び出すことを可能にします。

なぜ Electron を選ぶのか？

開発メリット

1. 技術スタックが統一

  • 馴染みのあるWeb技術で開発できる
  • フロントエンド開発者はすぐに使い始められる
  • 豊富なWebエコシステムリソースを利用できる

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

  • 一度開発すれば、複数プラットフォームで動作
  • Windows、macOS、Linux をサポート
  • インターフェースと機能が異なるOSでも一貫している

3. 開発効率が高い

  • ホットリロード機能で、変更内容をリアルタイムにプレビュー
  • デバッグツールが充実しており、Chrome DevTools を使用可能
  • コミュニティが活発で、問題を迅速に解決できる

例

メモ帳アプリを作りたいとしましょう。

Electron では、次のものだけが必要です：

npm install electron

main.js を作成します：

例

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });
  win.loadFile('index.html'); // ここがあなたのWebページのUIです
});

そして index.html は普通のWebページです：

例

<h1>私のデスクトップメモ帳</h1>
<textarea></textarea>

実行：

npx electron .

これで私たちのWebページがデスクトップアプリに変身しました！

参考リソース

その他の拡張