Web技術でデスクトップアプリを開発できる「Electron」(前編) - インストールから簡単なアプリ作成まで

最近、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が役に立つことでしょう。）