【Electron入門】JavaScriptでWindowsとMacのデスクトップアプリ開発

今回はElectronというJavaScriptのフレームワークをご紹介します。

Electonを使えばWindowsとMacOSの両方で動くローカル（デスクトップ）アプリを同一のコードで作成することが出来ます。マイクロソフトやGitHubなどの有名企業も採用しており、年々注目度が上がってきている技術です。

JavaScriptなどのWEB系技術を習得している方が、デスクトップアプリを作りたい場合おすすめです。

デスクトップアプリを作るなら、windowsとmacの両方で動くクロスプラットフォームなアプリを作れるelectronというフレームワークがおすすめ。

言語はjavascirpt、画面はhtmlとcssで作れるので、フロントエンドエンジニアは特にとっつきやすいかと。

node.jsも使えるので結構汎用性も高いです。

— キョウスケ＠WEBエンジニア (@kyosuke_prog) February 12, 2020

Electron（エレクトロン）とは？

Electronは、HTML/CSS/JavaScript（Node.js）を使ってクロスプラットフォームなデスクトップアプリを作ることが可能なフレームワークです。

github社が開発したものですが、誰でも無料で使うことができます。

Electronの仕組み

Chromium（クロミウム）

ElectronにはChromium（クロミウム）という、GoogleChromeのベースになったウェブブラウザが導入されています。

ChromiumはJavaScriptの最新版であるES2015を90％以上サポートしているので、Electronでは最新のJavaScriptコードを使うことが出来ます。

※　IEなどの一部のブラウザでは、まだES2015に対応していない部分が多く、ブラウザによって挙動が変わったり動かないといったことが発生します。この心配がないというはElectronの嬉しい特徴の１つですね。

メインプロセスとレンダラープロセス

Electronは大きく分けて、メインプロセス（Main Process）とレンダラープロセス（Renderer Process）というものに分かれており、起動すると最初にメインプロセが起動し、そこから複数のレンダラープロセスが起動されるという仕組みになっています。

・メインプロセスはアプリ全体の司令塔のような役割で、ウィンドウ（レンダラープロセス）を表示したり、アプリを終了したりします。

・レンダラープロセスはメインプロセスから起動された別々のウィンドウで動き、それぞれのレンダラープロセス（ウィンドウ）は独立したプロセスで実行されます。

 
また、メインプロセスとレンダラープロセスの間ではデータを共有することが出来ないため、IPC通信（プロセス間通信）という仕組みを使ってデータをやりとりします。

ElectronAPI

Electronには専用のAPIが複数あり、頻繁に使用して制作することになります。

ElectronのAPIには、Mainプロセスのみで動くもの、Rendererプロセスのみで動くもの、両方で動くものがあります。

参考：Electron Documentation / API

Electronのメリット

JavaScriptでデスクトップアプリが作れる。

WEB系の技術であるHTML/CSS/JavaScriptで制作できるので、デスクトップ用に新しいプログラミング言語を学ぶ必要がありません。

これらの言語さえすでに学んでいればすぐに開発を始められる、というのは大きなメリットだと言えるでしょう。

同一コードでWindowsとMacOSで動くアプリが出来る。

普通、Windowsで動くアプリを制作する時とMacOSで動くアプリを制作する時は、別々のプログラミング言語を使用する必要があります。

そのため、全く同じアプリを作りたいのにコードを別々の言語で書かなければならいという手間が発生します。

しかしElectronを使えば、一度コードを書けば複数のOSで動くアプリが出来るので大きくコスト削減できます。

JavaScriptの豊富なライブラリが使用可能

C#やJAVAなどに比べて、JavaScriptのライブラリは豊富に存在します。これらすべてのライブラリがElectronで使用することができるため、効率よく開発を行うことができます。

特に、アニメーション系のライブラリを使用できるのは非常に便利です。

デザインを自由にカスタマイズすることが可能

C#やJavaなどの言語では、ボタンやフォームなどのコントロール系のデザインを限られた範囲でしか変更することが出来ません。

しかし、ElectronはHTMLとCSSで自由に画面をデザインすることが出来ます。

JavaScriptを用いたスライドなどのアニメーションも実装出来るので、視覚的に優れたアプリを制作することが出来ます。

WEB版に比べてブラウザの違いを考慮する必要がない。

WEB系の技術は、一部ブラウザによって挙動が異なる場合があります。（特にIEだけ挙動が異なることが多い）

しかし、ElectronではChroniumというブラウザのみを使用するため、GoogleChromeで動くコードを書けば問題ありません。

また、JavaScriptはES5というバージョンとES6（ES2015）というバージョンがあり、これもブラウザによって使えるコードが異なるのですが、Chroniumは新しいバージョンであるES6の書き方ほぼ全てに対応しているため、最新の技術を心配することなく自由にに使うことが出来ます。

Electronのデメリット

実行速度が遅い

JavaScriptはインタプリタ言語という言語で、コンパイルを必要としません。

開発コストが減るというメリットはありますが、その反面コンパイラ言語に比べて実行速度が遅いというデメリットがあります。

そのため、大規模なアプリを開発すると動作が重くなってしまう可能性があります。

パッケージ（アプリ）の基本容量が大きい

Electronは、制作したコード群をユーザーに使用してもらうためのパッケージング（アプリ化）を行った際に、Chromiumというブラウザを丸々同梱します。

そのため、パッケージング後のアプリ容量は最低でも100MB以上になります。

ごく限られた機能だけを持つ小さなアプリを制作し、容量を抑えたい場合には不向きになります。

ソースが外部から見えてしまう

コンパイルを行わないためソースが外部から見えてしまいます。

ただ、Webpackという技術を使えば、システムの要となるjsファイルを複雑に難読化することが出来ます。（復元ソフトを使用しても解読するのに苦労するレベル。）

そのため、おおよそ問題になることはありませんが、それでも地道に解読することが不可能とは言えないので、不特定多数に公開するタイプのアプリには不向きですね。

ネイティブアプリに比べてメモリの消費が大きい

これはほとんど気になるほどの差は感じないのですが、C#やJAVAなどのネイティブアプリに比べるとメモリの消費は大きくなってしまいます。

よっぽど性能の低いパソコンにも対応しないといけない場合を除いて、問題はないと言えるでしょう。

Electronの使い道と実用例

WindowsやMacOSのデスクトップ上で動く、タイマーやスケジュール管理ソフト、タスク管理システム、Excelのデータ抽出ソフト、WEBサイトの更新管理ツールなど様々なアプリを制作することが出来ます。

実用例

Atom - GitHubが開発したテキストエディタ。プログラミングを行うのに便利な機能が多く、エンジニアに支持されている。

Slack - スチュワート・バターフィールドによって開発されたチームコミュニケーションツール。ビジネスにおけるチャットとして使われている。

Visual Studio Code - マイクロソフトにより開発されたテキストエディタ。軽量かつ多機能でエンジニアに支持されている。

これらの有名なアプリはすべてElectronで制作されています。

まとめ

・Electronは、Chromiumというブラウザ、メインプロセスとレンダラープロセス、ElectronAPIによって構成されている。

・HTML/CSS/JavaScript/Node.jsで自由度の高いデスクトップアプリを制作出来る。

・同一コードでWindows/MacOS/LinuxなどのOSで動くデスクトップアプリが制作出来る。

・ネイティブアプリに比べると実行速度が遅く、アプリの容量が大きくなってしまう。

・ソースが外部から見えてしまうため、セキュリティに配慮する必要がある。

・github社やマイクロソフトなど有名企業も導入しており信頼性がある。

初心者の方へ

すでにJavaScriptをある程度学んでいるなら、デスクトップアプリを制作する時はElectronを使うと良いでしょう。

新しくプログラミング言語を学ぶよりも圧倒的に簡単に、早く制作することができますからね。