必要な環境
これは Electron チュートリアルの 1 章 です。
Electron は、JavaScript、HTML、CSS によるデスクトップアプリケーションを構築するフレームワークです。 Electron は Chromium と Node.js を単一のバイナリファイルに組み込むことにより、単一の JavaScript コードベースから Windows、macOS、Linux で動くクロスプラットフォームアプリを作成できます。
このチュートリアルでは、Electron を使用してデスクトップアプリケーションを開発し、エンドユーザーに頒布するまでの流れを説明します。
目標
このチュートリアルでは、まず最小限の Electron アプリケーションをゼロから作り上げてから、Electron Forge でパッケージ化し、ユーザに頒布する方法までを説明します。
単一コマンドのボイラープレートでプロジェクトを始めたい方は、Electron Forge の create-electron-app コマンドで始めることを推奨します。
前提
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 に公開し、各ステップの後にコードをコミットすることを推奨します。
GitHub Desktop は、まだ Git がインストールされていない場合、最新バージョンの Git をシステムにインストールします。
Node.js と npm
Electron アプリの開発を始めるには、Node.js ランタイムとそれに付属する npm パッケージマネージャをシステムにインストールする必要があります。 最新の長期サポート (LTS) 版を使用することを推奨します。
Node.js が正常にインストールされたことを確認するには、-v フラグを使用して node や npm コマンドを実行しましょう。 これらはインストールされているバージョンを出力するはずです。
$ node -v
v16.14.2
$ npm -v
8.7.0
Electron のプロジェクトの土台となる Node.js はローカルにインストールする必要がありますが、Electron そのものは コードの実行にシステムの Node.js インストールを利用しません。 代わりに、独自の Node.js ランタイムにバンドルされます。 つまり、エンドユーザーがアプリを実行するための前提条件として自ら Node.js をインストールする必要はありません。
アプリ内で実行されている Node.js のバージョンを確認するには、メインプロセスまたはプリロードスクリプトにてグローバルの process.versions 変数にアクセスすることで可能です。 https://releases.electronjs.org/releases.json もご参照ください。