だいぶ古いネタで恐縮ですが、今日は Electron のお話をします。 かれこれ 3 年ぶりくらいの Electron。
Web+DB Press Vol.94の特集を読みながらElectron初挑戦。
— たーせる (@tercel_s) August 24, 2016
題材は「Twitterクライアント」。まだ写経するだけで精一杯だけどおもしろい。Node.js勉強したくなってくる。 pic.twitter.com/F9sZzE0Nof
Electron とは
Electron は、Web の技術と単一のコードベースで Windows, macOS, Linux 向けのデスクトップアプリケーションを開発できるフレームワークです。
Electron の良いところとしては、HTML5 と JavaScript を知っている人ならば割と気軽に手を出せること*1、そこそこ見栄えのよいアプリが比較的容易に作れることなどが挙げられます。
何と言っても、豊富な視覚化ライブラリの恩恵を享けられる点は嬉しいです。
しかし残念なことに日本語圏ではあまり人気がないのか、Wikipedia にはロクなことが書かれておらず*2、日本語で読める技術書も数えるほどしか出回っていません（Qiita とかではたくさん言及されているのですが……）。
さらに、モバイル向けのアプリ開発ができないこと、セキュリティ面で課題があること、Electron 製のアプリは実行時に RAM を多く消費すること、一般的なデスクトップアプリケーション用のフレームワークと比較するとアーキテクチャの機能配置が冗長であること*3など、ちょっとネガティブなポイントもあったりします。
ひところは Electron でアプリを作ろうとすると、まず環境構築とプロジェクトの作成が初学者最大の障壁でした。 また、Electron 単体ではフロントエンド周りが貧弱になるので、何らかのライブラリと組み合わせる必要があり、その選択も開発者にとって悩みのタネでした。
ですが、いま現在は Electron と Angular がセットになった angular-electron というボイラープレートが公開されており、随分ととっつきやすくなった感があります。
そんなわけで、今日は良くも悪くもクセのある Electron を、Angular と一緒に使ってみましょう。
ハンズオン
angular-electron の導入から初歩的な使い方までを、4本の短い動画にまとめました。
だいたい 1 本あたり 3～4 分程度で、解説というよりは Electron の雰囲気をお伝えすることを目的としておりますので、途中で実況が雑になることがございます。気にせず適当に受け流してください。
第1話 Hello, World篇
何はともあれ環境構築です。 Node.js さえ導入すれば、GitHub からリポジトリをクローンして、npm コマンドを一発叩けばあっという間にアプリの雛形ができます。
第3話 メニュー構築篇
ここで初めて HTML5 の知識だけでなく、Electron の API を利用することになります。 動画の最後では、カスタマイズしたアプリケーションメニューが表示されるようになります。
第4話 ファイル読み込み篇
Electron では、ファイルの読み書きなど OS に作用する低レベル API を利用できます。
動画中では（尺の関係で）詳しくは触れませんでしたが、ファイルの読み込みはメインプロセス、表示はレンダラープロセスという2つの異なるプロセスで処理を行い、お互いの情報はプロセス間通信でやり取りするように実装しています。
まとめ
こんな感じで、駆け足で Electron に触ってみました。 Firebase との連携や、CDK を用いた動きのある画面構成の話などもしたかったのですが、そろそろ実況形式では伝えきれなくなってきたので、それはまたの機会に。
ではでは。
おまけ
もう「僕はC#erだからJavaScriptは書けなくてもいい」とか言っていられなくなってきた(´･ω･`)
— たーせる (@tercel_s) August 27, 2016
きっとWebエンジニアとかバリバリのJavaScript使いがElectronとかReact Nativeとか手に入れたら、余裕でこっちの仕事を奪いにくるよ。たぶん。
