最近、PCで使うデスクトップアプリの多くがElectronというフレームワークを利用して開発されていることにお気づきでしょうか。クロスプラットフォーム対応の高機能テキストエディタの「Atom」や、ビジネス向けのチャットアプリの「Slack」、また、Microsoftのプログラミング開発エディタ「Visual Studio Code」もElectronを利用して開発されています。

ElectronのWebサイト

また、大小問わず多くのアプリが、Electronにより開発されています。なぜなら、Electronを使うと、HTML/CSS/JavaScriptといったWebの技術を利用して、手軽に、クロスプラットフォームのデスクトップアプリを開発することができるからです。昨今Webの技術であるHTML/CSS/JavaScriptは、多くの人が習得している技術であり、また、解説サイトや資料が多くあるので、習得しやすいものです。つまり、「Electron」は、Webの技術を使って、手軽にデスクトップアプリを開発できるフレームワークなのです。

本稿では、Electronのインストールから簡単なアプリ開発までを紹介します。HTMLでWebサイトを作ったことがあり、JavaScriptが少し分かるという方に向けて使い方を説明しますので、ぜひ挑戦してみてください。

Electronの仕組みは？

そもそも、Electronは、GitHubによりAtomを開発するために開発されたフレームワークです。Atomエディタの完成度を見るなら、Electronの可能性を感じることができるでしょう。

高機能テキストエディタ「Atom」はElectronで作られている

そして、Webの技術でデスクトップアプリが作れるという、その仕組みですが、Electronは、オープンソースのWebブラウザのプロジェクトChromiumと、JavaScriptの実行エンジンのNode.jsをベースに開発されています。つまり、WebブラウザとJavaScriptエンジンを搭載しているので、Webの技術でアプリを開発することができるのです。

Electronのインストール - まずはNode.jsから

さて、さっそく、Electronをインストールしていきましょう。

とは言え、Electronをインストールするには、JavaScriptの実行エンジンである「Node.js」が必要です。そこで、最初に、Node.jsをインストールしましょう。

Webブラウザで、以下のURLにアクセスして、Node.jsのインストーラーをダウンロードしましょう。なお、Node.jsは、Windows/macOS/Linuxで利用できます。

Node.js [URL] https://nodejs.org/ja/

Node.jsのWebサイト

Node.jsは頻繁に開発が行われており、上記のWebサイトより、常に最新版のNode.jsをダウンロードすることができます。上記ページの下側にある「ダウンロード」から「最新版 v＊.＊.＊」(＊の部分はバージョン番号)のボタンを押して、インストーラーをダウンロードしてください。（ご利用のOSごとに異なるファイルがダウンロードされます。）

そして、ダウンロードしたインストーラーをダブルクリックすると、インストーラーが起動するので、その指示に従って、[Next]ボタンを数回クリックして、インストールを行いましょう。（以下は、Windows10のインストーラーの画面ですが、手順的には、macOSでもほとんど同じです。）

Node.jsのインストーラーを起動したところ

途中で以下のようなカスタムセットアップ(Custom Setup)のダイアログが表示されますが、ここでは、デフォルトのままで大丈夫ですので、[Next]ボタンを押してインストールを進めましょう。(特に、Add to PATHが有効になっていることを確認してください。）

Node.jsのインストーラーのカスタムセットアップ画面

コマンドラインからElectronをインストールしよう

Node.jsをインストールすると、コマンドラインから様々なライブラリやツールをインストールすることができる、npmと呼ばれるパッケージマネージャーが使えるようになります。Electronもこのnpmを利用してインストールします。（現在、Electronだけでなく、多くのツールやライブラリが、npmを介してインストールできるようになっているので、Electron以外の用途でも、npmが役に立つことでしょう。）

コマンドラインを起動しよう

それでは、Electronをインストールしてみましょう。そのために、コマンドライン（ターミナル）の画面を起動して作業を行います。コマンドラインの操作は、初めての際には、ちょっとドキドキしますが、慣れてしまうと快適です。

【Windowsの場合】

Windowsでは、PowerShellを起動しましょう。PowerShellを起動するには、[Win]+[R]キーを押して、ファイル名を指定して実行のダイアログに「powershell」と入力するか、Windows 10のCortanaの検索ボックスに「PowerShell」と入力します。

WindowsでPowerShellを起動したところ

【macOSの場合】

macOSでは、画面右上のSpotlightから「ターミナル.app」を検索して起動しましょう。

macOSでターミナル.appを起動したところ

Electronのインストールについて

それでは、コマンドラインから、Electronをインストールしましょう。コマンドライン上で、以下のコマンドを入力したら[Enter]キーを押して実行しましょう。

 npm install -g electron

すると、自動的にElectronの最新版のダウンロードが始まります。しばらくするとインストールが完了します。（コマンドラインで入力可能な状態になったら、処理が完了したことが分かります。）

最後に、Electronが正しくインストールされたかどうかを確認してみましょう。以下のコマンドを実行してみてください。

 electron

正しくインストールされていれば、以下のような画面が表示されます。インストール作業は以上です。

Electronがインストールされていると実行される画面

まとめ

以上、今回は、Electronについて、そして、Electronのインストールの方法について紹介しました。次回後編ではElectronを使って、簡単なアプリを開発してみましょう。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2005年IPAスーパークリエイター認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。