メインコンテンツへスキップ

前提条件

Electronは、JavaScript、HTML、CSSを使用してデスクトップアプリケーションを構築するためのフレームワークです。ChromiumNode.jsを単一のバイナリファイルに埋め込むことで、Electronを使用すると、単一の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はGit上に構築された共同開発プラットフォームです。どちらもElectronアプリケーションの構築に厳密に必要というわけではありませんが、チュートリアルの後半で自動更新を設定するためにGitHubリリースを使用します。そのため、以下が必要です。

Gitの使用方法に慣れていない場合は、GitHubのGitガイドを読むことをお勧めします。コマンドラインよりも視覚的なインターフェースを使用したい場合は、GitHub Desktopアプリを使用することもできます。

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

GitHub DesktopによるGitのインストール

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

Node.jsとnpm

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

ヒント

プラットフォーム用のプリビルドインストーラーを使用してNode.jsをインストールしてください。そうでない場合、さまざまな開発ツールとの互換性の問題が発生する可能性があります。macOSを使用している場合は、ディレクトリのアクセス許可の問題を回避するために、Homebrewまたはnvmなどのパッケージマネージャーを使用することをお勧めします。

Node.jsが正しくインストールされたことを確認するには、nodeコマンドとnpmコマンドを実行するときに-vフラグを使用します。これにより、インストールされているバージョンが出力されます。

$ 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を参照することもできます。