electronの勉強法と簡単な構造解説

最近受けた仕事で必要に駆られ、electronで開発しています。
electronとは簡単にいうと、javascript+html/cssでネイティブアプリが作れる仕組みで、chronium(webkit)+node.jsをランタイムとしてまとめたもの、になります。
なので、クロスプラットフォーム(win/mac/linux)を実現しつつ、node.jsがchroniumのサンドボックスを破る橋渡しとなってOSの機能を使うこともできます。

VSCodeのコードリーディング

採用例としては、AtomやVisualstudio Codeなんかが有名ですね。
Visual Studio Codeのソースを読んでみようと思ったんですが、typescriptか。てか流石に量が多い!

https://github.com/Microsoft/vscode

どこから手を付けて読んだものかと思ったんですが(特に目的なく読もうとするとこういう時困る)、wikiに全体の概要が書かれている良いページが有りました。
うん、もともとディレクトリの名前の付け方が良いのでどこに何があるかはわかりやすいと思いますが、やはり自然言語で説明があると理解のしやすさが違いますね。
ドキュメントの大切さが分かる場面です。

https://github.com/Microsoft/vscode/wiki/Code-Organization

私もドキュメントの整備をもっと頑張っていこうと思います。

electronの仕組みと活かし方

さて、electronにてゴニョゴニョと遊びだしたのはいいとして、これ、2つのスレッドが走っています。
chroniumの構造と同じなんですが、メインプロセスとレンダラプロセスで、ふつうのブラウザのjavascriptはレンダラプロセスで動作し、かつシングルスレッドです。
setTimeoutとかでの非同期実行は、ただの時間差によるイベント駆動なので、実際のところ処理はブロックされています。
そしてブラウザ自体の動作を処理するメインプロセスとはプロセスが分離されているので、これによってサンドボックスが構成されているわけです。

しかしelectronではこのメインプロセスに対するバイパスが用意されているので、ipcMainとipcRendererという、二つのプロセス間通信(inter process communication)を使えば、そしてnode.jsのアドオンをc++などでネイティブに書けば可能性は無限大。
ダイナミックライブラリを呼び出せる「node-ffi」などは面白いアプローチだと思います。
とりあえずクロスプラットフォームのメリットを捨てれば、重い処理だけネイティブで書いて、jsから呼び出すという選択肢が取れるのが面白いですね。

C#などはそのように、RADツールでサクサク画面をつくって、ネイティブコードのライブラリを呼び出すような使われ方をしてきましたが、同等のことができそうです。
HTML/CSSなので、C#より凝った画面が作りやすそうなのはグッドポイントですね。

最後に

と、言うわけで最近electronにハマっているもとやんでした。
とりあえずなにか作りたいので、ゲームとか考えてます! electron使えそうな仕事を探そう。

スポンサーリンク
Sponsored Link
Sponsored Link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする