Electronとは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。
最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。
ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChromeブラウザやランタイムへの依存なしで、配布してすぐに実行できるネイティブのバイナリを簡単に提供することが出来ます。しかも、単一のソースコードからMac、Windows、Linux対応まで出来てしまいます。
今回は、そんなElectronの基礎、および他の実行環境との違いを説明したいと思います。
Electronを採用したアプリケーション
Electronは、GitHub社が開発したWeb開発向けエディタ「Atom」の、ネイティブ部分をSDKとして公開したプロジェクトです。
また、採用企業が増えているチャットサービス 「Slack」は、Windows版にElectronを採用しています。また、Markdownエディタの 「Kobito」 のデスクトップアプリとしてElectronの採用実績があります。
SlackやKobitoの他にも、Docker社のDocker GUIや、Microsoft社のVisual Studio Codeなどがユーザー向けに既にElectronを使ったデスクトップアプリを提供しています。他にも、日本で有名ではないですが、以下のプロダクトもElectronを採用しています。
Electronの特徴
GUIの制御はJavaScript、GUIの記述はHTML＋CSSで、Electron特有の書き方などはありません。普段のHTMLアプリケーションを書くのと同じ書き方ができるので、Web開発者にとってなじみやすいです。さらに、JavaScriptの実行環境はNode.jsなので、npmのパッケージを利用することが出来ます。デバッグは、Chrome上での開発で使い慣れているDevTools（デベロッパーツール）を使えます。
メニュー、クリップボード、ファイル、オートアップデート（Macのみ）などのネイティブとの連携も用意されています。
Shellで動くようなバイナリとの連携も出来るため、プログラマーが片手間に作った自動化ツールを、デスクトップアプリに簡単に変換して、プログラマー以外でも自動化の恩恵を得るような社内ツールを作ってみるのもいいでしょう。
普通のウェブアプリケーションでは、一部のブラウザでHTML5の特定の機能が使えない場合がありますが、ElectronはChromiumを内蔵しているため、他のブラウザの制限や制約を気にする事なく、Chromiumだけを対象に思う存分HTML5の機能を使うことが出来ます。
例えば、ECMAScript 6を今すぐ使えるようにするBabelやTraceurでコードを書いたり、WebGLをバリバリ使ったり出来ます。
他のフレームワークとの違い
WindowsとMacとLinux向けのアプリケーションを同じソースコードから作る、いわゆるクロスプラットフォーム実行環境として代表的なものは、いくつかの選択肢があります。
代表的なQt、Adobe AIRをElectronと比べてみましょう。
| 名前 | 対応プラットフォーム | 言語 | ランタイム |
|---|---|---|---|
| Qt | Win、Mac、Linux | C++ | ランタイム不要 |
| Adobe AIR | Win、Mac | ActionScript＋MXML | Adobe AIRが必要 |
| Electron | Win、Mac、Linux | JavaScript＋HTML+CSS | ランタイム不要 |
Qtはランタイムが不要の代わりに、C++で記述します。C++はちょっとしたツールを作る用途には向きません。GUIデザインも独自ツールを使用します。デザイナーにQtのツールを覚えてもらう必要があるため、デザイナーとの分業も難しいです。
この他にも、HTML5で作られたアプリケーションの実行環境として、Chrome Apps、nw.js（旧node-webkit）があります。
Chrome Appsは、Chrome上で動作するため、あらかじめChromeのインストールが必須となります。また、あらかじめ許可されたドメインにしかアクセス出来ず、バックグラウンドタスクでもChromeのフルセットが動作している必要があるためメモリ消費が激しいという欠点があります。一方、Electronでは、最小環境に固めたChromiumを内蔵しているため、ランタイムのいらない独立したアプリとして動作します。また、あらかじめ許可されたドメイン以外にもアクセスすることが出来ます。
nw.jsは、Electronの兄弟のようなプロジェクトです。nw.jsの開発者がElectronにもコミットしており、コミュニケーションも活発なようです。ほとんど相違点は無いですが、nw.jsでは、アプリのビルド時に毎回Chromiumにパッチを当てるためビルドが遅い、エントリーポイントがnw.jsではHTMLになるが、ElectronではJavaScriptがエントリーポイントになるため細かい制御がやりやすいなどの違いがあります。
