メインコンテンツへ飛ぶ

必要な環境

Electron は、JavaScript、HTML、CSS によるデスクトップアプリケーションを構築するフレームワークです。 Electron は ChromiumNode.js を単一のバイナリファイルに組み込むことにより、単一の JavaScript コードベースから Windows、macOS、Linux で動くクロスプラットフォームアプリを作成できます。

このチュートリアルでは、Electron を使用してデスクトップアプリケーションを開発し、エンドユーザーに頒布するまでの流れを説明します。

前提

Electron はウェブアプリケーションのネイティブラッパーレイヤーであり、Node.js 環境で動作します。 したがって、このチュートリアルは一般的な Node 及びフロントエンドのウェブ開発の基本に精通していることを前提としています。 続ける前に背景を読んでおきたい方は、以下の資料を推奨します。

必須ツール

コードエディタ

コードを書くには、テキストエディタが必要です。 Visual Studio Code の使用を推奨しますが、お好みのエディタをご利用ください。

コマンドライン

チュートリアル全体を通して、何度かコマンドラインインターフェース (CLI) を利用します。 そういった場合のコマンドは、以下のシステムのデフォルトターミナルに入力するものです。

  • Windows: コマンドプロンプトまたは PowerShell
  • macOS: ターミナル
  • Linux: ディストリビューションごとに異なる (例: GNOME Terminal, Konsole)

また、ほとんどのコードエディターにはターミナルが内蔵されており、そちらも利用できます。

Git と GitHub

Git はソースコードのバージョン管理システムとして一般的に使用されており、GitHub はそれをもって構築された共同開発プラットフォームです。 どちらも Electron アプリケーションを構築する上で厳密には不要ですが、チュートリアルの後半では GitHub の Release を利用して自動更新を設定します。 そのため、以下をご準備くだだい。

Git の仕組みに慣れていない方は、GitHub の Git ガイド を読むことを推奨します。 コマンドラインよりもビジュアルなインターフェースをお望みであれば、GitHub Desktop アプリも利用できます。

チュートリアルを始める前にローカルの Git リポジトリを作成して GitHub に公開し、各ステップの後にコードをコミットすることを推奨します。

Git のインストールと GitHub Desktop

GitHub Desktop は、まだ Git がインストールされていない場合、最新バージョンの Git をシステムにインストールします。

Node.js と npm

Electron アプリの開発を始めるには、Node.js ランタイムとそれに付属する npm パッケージマネージャをシステムにインストールする必要があります。 最新の長期サポート (LTS) 版を使用することを推奨します。

tip

お使いのプラットフォーム向けのビルド済みインストーラを使用して、Node.js をインストールするようにしてください。 さもなくば、他の開発ツールと互換性の問題が発生することがあります。 macOS をご使用の方は、ディレクトリのパーミッションの問題を避けるために Homebrewnvm などのパッケージマネージャの利用を推奨します。

Node.js が正常にインストールされたことを確認するには、-v フラグを使用して nodenpm コマンドを実行しましょう。 これらはインストールされているバージョンを出力するはずです。

$ node -v
v16.14.2
$ npm -v
8.7.0
caution

Electron のプロジェクトの土台となる Node.js はローカルにインストールする必要がありますが、Electron そのものは コードの実行にシステムの Node.js インストールを利用しません。 代わりに、独自の Node.js ランタイムにバンドルされます。 つまり、エンドユーザーがアプリを実行するための前提条件として自ら Node.js をインストールする必要はありません。

アプリ内で実行されている Node.js のバージョンを確認するには、メインプロセスまたはプリロードスクリプトにてグローバルの process.versions 変数にアクセスすることで可能です。 electron/releases リポジトリにあるバージョン一覧からも参照できます。