Electronアドカレの19日目の記事になります。いろんな事情で、3日遅れてすみませんでした。 
「Write once, run anywhere（一度書いて、どこでも実行できる）」は一度Javaのスローガンでした。Universal Javascriptが躍進したおかげで、昨今のJavaScriptは多分もっとこのスローガンが描いた姿に近いです。
その中、特にNode-WebkitやElectron（昔のAtom-shell）のおかけで、デスクトップの開発経験のまったくないWeb開発者にとっても、デスクトップアプリケーションを簡単に作れる世の中になりました。しかもJavaScriptのスタックで。
これから初めてElectronアプリケーションを作る方には、自分が初めてアプリを作った時の気づきをいくつか共有したいと思います。
まずどこから始める？
Electron開発を始めるに一番の近道はまずアプリを作ることです。公式の「Quick Start」からはかなり手軽に始められますが。
日本語のチュートリアルなら、nyanchuさんの「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」がおすすめです。
最初のアプリを立ち上げたら、次はどんどん自分の入れたい機能を盛り込んでいいです。
もしどう実装するかについて迷ったら、ほかのElectronアプリを参考することはおすすめです。そのなかにもAtomはデスクトップアプリとしてはかなり広くいろいろな機能を実装しているので、そのソースコードは特に参考になります。
アーキテクチャに慣れよう
Electronの潜在力を引き出すには、アーキテクチャをよく把握する必要があります。Electronの内部は2つの空間にわけられています。一つはメインプロセス（Node.jsのコードを実行する空間）、もう一つはレンダラープロセス（ブラウザ側のJavaScriptを実行する空間）。
大体の場合は「ipcMain/ipcRenderer」モジュールと「remote」モジュールで、メインプロセスとレンダラープロセスの間で通信すると思いますが、この方法にはすこし副作用があります。
「ipcMain/ipcRenderer」はAPIドキュメント通りにメッセージとイベントを通じて通信する仕組になります。逆に「remote」モジュールは一見同期通信のように見えますが、本当はちょっと違っています。「remote」モジュールは実際裏側では「ipc」と同じようなことをやってますので、「remote」を通じて得たオブジェクトは多く場合、Getter関数の集まりになります。しかも、遅延評価の関数の場合が多いですので、もし「remote」を使って通信する場合、予期しない挙動が起こる可能性があります。十分注意を払わないといけません。
クロスプラットフォーム対応に気をつけよう
メインプロセスを重宝するアプリでしたら、ちゃんと対応OSでテストすることが大事です。特にElectron以外のNode.js側のNPM依頼を持ってる場合、MacOSとLinux環境しかサポートしないケースが多いです。
さらに、OSごとのUIガイドラインやショットカットキーのパターンが違っているので、使いやすいUXを実現するには、やはりOSごとのチューニングが必要になってきます。Electronはクロスプラットフォームのローレベルの面倒をけっこう見てくれますが、UXに関しては自分でブラッシュアップしないといけないところが多いです。
適材適所にパッケージを選ぼう
初めてElectronのアプリを作るとき、〇〇の機能は一体メインプロセスとレンダラープロセスのどっちに置くかは絶対迷うと思います。例えば、ショットカットキーはメインプロセスの「Menu」モジュールで実装できれば、レンダラーで「Mousetrap」とかのライブラリーでも実装できます。
そこには絶対的な正解はありません。例えば、Nativeと全く同じような挙動をしたい、メニューバーにも見せたい場合は、前者が一番あってます。もしElectronアプリとしてだけではなく、Chrome Web Storeにも出したければ、Electronのモジュールから疎結合して、なるべくブラウザ側のライブラリを使うのが正解に近いかもしれません。Slackのアプリのように、両方を混ざるというアプローチも全然アリです。
オープンソースのプロジェクトもまたいい参考資料になれます。例えば、Atomはatom-keymapという別のパッケージを持っていて、そこで各モードやOS別のショットカットキーを一括管理しています。もちろん自分のアプリにも導入できます。
参考資料
- Awesome Electron https://github.com/sindresorhus/awesome-electron
Electron参考資料のまとめといったらこれですねw - Building a desktop application with Electron https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658#.xkfy8j4k0
ステップ・バイ・ステップでElectronアプリを作成手順を紹介する記事、初心者にはオススメ