Electronは、夢のクロスプラットフォームなデスクトップアプリのフレームワークになりうるのか？

前回、Electron | JavaScript, HTML, CSSを用いてクロスプラットフォームなデスクトップアプリを開発 | なお話。で、理想的と思われる、クロスプラットホームなデスクトップアプリについて、以下を挙げました。これらについて、１つずつ検証していこうと思います。

1. 動作がもっさりしていない。
2. アプリのメモリー使用量が大きくない。
3. ネイティブコールする記述がコードに少なくて済む。
4. アプリの実行にランタイムをインストールする必要がない。
5. 無料で利用可能である。
6. GUIをデザインするエディタがある。
7. IDE（統合開発環境）があり、デバッグやアプリの生成ができる。
8. ネットや書籍の情報が多くある。
9. スマホも対応している。

1. 動作がもっさりしていない。

多分、どこかにベンチマークのデーターがあると思いますが、ここはあえて、自分の体感で話を進めます。結論、「少しもっさりだが許容範囲」です。Visual Studio Code と、Atom を操作した体感速度ですが、ふつーに使っている分には、ネイティブ、例えば、Sublime Text と、さほど違いは感じられないし、ストレスもないです。ただ、デカめの文書ファイルを開いて、上下スクロールをしまくると、あからさまに、Atomがもっさりで、Visual Studio Code は、ちょっともっさり、でした。この違いについては、Microsoftの本気度が少し垣間見れた気がします。

2. アプリのメモリー使用量が大きくない。

macOS でのアプリ毎の、起動直後のメモリ利用状態は、以下の通り。

Atom・・・約100MB
Visual Studio Code・・・約50MB
Sublime Text ・・・約25MB

当たり前だけど、Sublime Text が、圧倒的に少ない。サイズが大きいファイルの編集などでは、メモリの使い方が各アプリで変わると思うので、単純に上記メモリ使用量から線型的に右肩上がりしないだろうけど、まぁ、Atomで、適当なファイルを５〜６開いても、120MBぐらいだったので、結論としては、ネイティブと比べて、メモリ使用量は多いものの、作業に支障きたすほどのメモリ利用量ではないので、「メモリ使用量は許容範囲」と言えるでしょう。

3. ネイティブコールする記述がコードに少なくて済む。

これは、結局のところ、Electronアプリがネイティブとお話をしているランタイムの「Chromium（クロミウム）」と「Node.js（ノードジェイエス）」の機能が、どこまでランタイムで吸収されているか？だと思います。

View部分は、Chromiumが。それ以外は、Node.jsが担当していると思われるが、まぁ、View部分は、巷のHTML5、CSS3で作成されたサイトを見ればわかる様に、本当に多彩な表現ができるので、ほとんどが、Chromiumで吸収されていると思って良いでしょう。問題は、View以外の部分のNode.js。まだよく分かっていないのだけど、そもそも、Javaで言うところのJNI的な、ネイティブコールの口はあるのだろうか？

一応あるみたいですね。

What can I do with this?
Calling win32 native functions come from user32.dll, kernel32.dll, comctl32.dll by Node.js via node-ffi or node-ffi-napi

https://www.npmjs.com/package/win32-api

まぁ、とりあえずあるということで、あまり使用する機会がないことを願いつつ、頭の片隅に置いておこうかと思います。なので結論は、ネイティブコールの方法はあるが、View以外の部分がどの程度ランタイムでOS依存部を吸収しているかは分からない。といったところでしょうか。実際開発をして、この辺りにぶち当たった時に、また改めて調べようかと思います。

4. アプリの実行にランタイムをインストールする必要がない。

結論。インストールの必要なし。ランタイムはアプリ毎に、Chromium、Node.jsを持っているので、そこでネイティブ機能をおおよそ吸収している。

5. 無料で利用可能である。

はい。無料です！ライセンスは、MIT License。

6. GUIをデザインするエディタがある。

GUIは、HTML5＋CSS＋JavaScriptなので、エディタは世の中に山ほどありそうです。なので心配する必要はなさそうですが、一応、今後の自分の開発のために調べてみました。一般的には、UIデザインツール（アプリやWebサービスのユーザーインターフェース(UI)の制作に特化したデザインツール）と呼ぶみたいですね。

2018年版：おすすめの人気UIデザインツール徹底比較  に、以下が紹介されていました。

• Sketch
• Adobe XD
• Figma
• InVision Studio
• Photoshop, Illustrator
• STUDIO

いつも思うんですが、上記の様なデザインに特化したツールと、コードを書きながらビューを確認するエディタとで、使い分けるのがいいのか、UIもエディタでガシガシ書いた方がいいのか、もちろんケースバイケースだとは思うんですけど、どういう使い方がいいんですかね？ ただ、UIデザインツールで作成すると、あとでエディタで編集する時に、ツール独特のソースで書かれてたりすると、編集が難しかったり、それをまたUIデザインツールで読み込むと、期待と違うUIになってたり、なんてことが昔はあったんですが、今はどうなんでしょう？その辺も今後の開発で体験していこうと思います。

追記：Adobe XDをダウンロードして、チュートリアルを眺めていると、ん？自分が思うUIデザインツールってのと違うなぁ。これって、プレゼンや開発内での共有のために作るモックみたいなもの（おそらくプロトタイプと呼んでいるもの）のようだ。例えば Visual Studio で配置するコンポーネント、TreeVewやListView、Buttonとかを貼り付けて、イベント（例えばButtonのClickとか）が発生した際の処理をコーディングして、みたいな開発方式に当てはまるようなツールが欲しいんだけどなぁ。そんなの無いのかしら？まだまだ HTML + CSS + JavaScript での開発方法がよく分からない。コードをガシガシ書くのが王道なんですかねぇ。それだと結構時間かかると思うのですが。。。この辺りは、もう少し調査が必要だと、ただ今深夜に思ったので書き残しました。

7. IDE（統合開発環境）があり、デバッグやアプリの生成ができる。

まずデバッグ。ElectronのデバッグはVSCodeがやりやすい に紹介されてるように、比較的簡単に環境の用意が出来そうです。

次にアプリ生成。本家サイトで、インストーラーや、パッケージ作成ツールなど（ツールがなくてもできるのかな？）、沢山の公開されているので、組み合わせることで、アプリ生成はできそうです。

ただ、Electronに見合った、これだ！というIDEは今のところ見つけられなかったので、これも今後の開発で色々なツールを使いながら、自分にフィットするものを探していこうかと思います。今のところは、以下のツールを使おうと思っています。

• UIデザインツール・・・Adobe XD
• エディタ、デバッガー、テスト・・・Visual Studio Code
• パッケージング・・・electron-packager
• デバッガー・・・Visual Studio Code、Devtron？

自分としては、EclipseみたいなAll In One環境が、アプリを切り替えなくて済むので楽なのだが、今のところは、Visual Studio Codeをメインに、Viewで Adobe XDを使う、というのがベーターかな？と思うので、それで試してみようと思います。

8. ネットや書籍の情報が多くある。

Amazonで調べると、和書と洋書が１つずつありました。書籍の数としては、圧倒的に少ないですね。

ネット情報ですが、本家サイトの情報が充実しているのはステキなのですが、やはりネット上での情報量は圧倒的に少ないと思います。なぜか？技術の頭打ちが見つかる、他の似た技術に駆逐された、本家の開発スピードが遅くて忘れ去られていった、本家自体がクローズした、などなどあると思いますが、単純に生まれて日が浅い技術の場合、情報が少ないのは仕方ないことです。と、いつ頃生まれたか気になったので調べてみたら、初版は2003年の夏。1.0.0が2016年夏。

うーん。1.0.0からすると、約2年半ほど。新しい部類の技術にはなるんですかねぇ。とにかく、自分もブログなどを通じて、Electronのネット情報を増やすお手伝いができればなぁ。と思います。

9. スマホも対応している。

現時点では、対応していないみたいです。技術的なベクトルとしては、そう難しい感じもしないので、近い将来、スマホ対応するかもしれませんね。ちなみに、Electronのスマホ版的な位置付けの「Cordova」「Ionic」「React Native」「PWA」あたりの開発が盛んになってきている様ですね。

まとめ

1. 動作がもっさりしていない。
   
   • 少しもっさり。
2. アプリのメモリー使用量が大きくない。
   
   • 許容範囲。
3. ネイティブコールする記述がコードに少なくて済む。
   
   • コールの方法はある。コードが少なくて済むかは不明。
4. アプリの実行にランタイムをインストールする必要がない。
   
   • はい。
5. 無料で利用可能である。
   
   • はい。
6. GUIをデザインするエディタがある。
   
   • はい。
7. IDE（統合開発環境）があり、デバッグやアプリの生成ができる。
   
   • はい。 以下のツールの組み合わせがベターか？要検討。
     • UIデザインツール・・・Adobe XD
     • エディタ、デバッガーなど・・・ Visual Studio Code
8. ネットや書籍の情報が多くある。
   • 少ない。
9. スマホも対応している。
   
   • いいえ。Cordova などのスマホアプリ用のエンジンがある。

ということで、総評ですが、Electronは、スマホ未対応や、情報量が少ないことはあるものの、CONVENISOFT提供のWindowsアプリ「Mremon」をクロスプラットフォームなデスクトップアプリに仕立てるには、十分なフレームワークであるという結論に至りました。

次回からは、実際に「Memon」を作成しながら、Electronについて深く掘り下げて行こうと思います。今日はこの辺で。