Electronとは

• GitHubが開発したデスクトップアプリを作るためのフレームワーク。
• HTML,CSS,JSを使ってデスクトップアプリを作ることができるので、フロントエンド開発経験者はある程度容易に開発ができる。
• Electronで作られた代表的な製品はVSCodeやSlackなどご存知のサービス。

仕組み

• ChromiumとNodeが内部的に使用されており、OSの提供する機能についてはNodeでコントロールする仕組み。
• アプリ内には「メインプロセス」と「レンダラープロセス」の二つのプロセスが存在し、「メインプロセス」はOSとのやりとりなどを司るNodeによって動作する部分。「レンダラプロセス」は従来のwebアプリと同じ。
• 例えば、アプリ上のユーザーイベントによってローカルのファイルを開きたい場合、「レンダラープロセス」から「メインプロセス」に通信(IPC)を行い、「メインプロセス」によってOSに指示が飛ぶことでファイルが開かれる。
• 相互通信を行うためのメソッドはelectronが提供している。

セキュリティ的な問題

• アプリ上からOS上の全機能にアクセスできてしまうとセキュリティ上良くないので、Electronでは「preloadスクリプト」ファイルに事前に使用するOS上の機能を記述しておくことで、アプリから使用可能なOS上の機能を制限することができる。

アプリの作成

https://github.com/sprout2000/create-electron-webpack#readme
ターミナルで以下のコマンドを実行

npm create electron-webpack アプリ名 -- --template react-ts --manager npm

• electron-webpackをインストール
• --template react-tsでreactとtypescriptを使ったプロジェクトテンプレートを作成
• --manager npm で作成するアプリのパッケージマネージャをnpmに指定
  起動

npm run dev

ホットリロード対応（electronmonが一緒に入っている）

おすすめboilerplate

electron-react-boilerplate