2019久しぶりの投稿です。こちらを更新できずにいるのですが、できればこちらも定期的に更新できれば良いかなと思っております。ここのところ個人の開発でelectronを触るのでそこらへんを書こうと思います。electronはその時以来になります。~今みるとこの記事2017年とかに書いてるんですね。正社員からフリーランスへの転身を経て生活スタイルがだいぶ変わったので、すっごい昔に感じます。当然のごとくReact入れたいね。React入れるとTypeScript入れたいねってなって、create-react-appと少々の設定でTypeScriptを入れてみたりしました。ここまではなんのこともないのですが、だんだんとメインプロセス周りがimport文でかけないことが気になってきます。もろもろをしているとだんだんとコード量も増えてきて辛くなってきます。なるとexport.modulesとか古い書き方で書いてあげないと共通で使えないなどの問題が出てきます。動かすElectron用テンプレートリポジトリみたいなものを作りました。ES6(慣れている人はですが)で気軽にElectronを始めることができます。アプリケーションに対して一つだけ存在するプロセスでElectronを起動した時に最初に起動するのがメインプロセスです。対して、ウィンドウごとに立ち上がるプロセスはレンダラープロセスと呼ばれ、こちらはアプリケーションに対して複数存在するプロセスです。特定のウィンドウに対して操作を行うなど各レンダラープロセスを取り仕切ることができます。メインプロセスのコード例(エントリーポイント)下記は先ほど紹介したリポジトリのエントリーポイントですが、アプリの起動するタイミングでBrowserWindowのインスタンスを生成し(レンダラープロセスを起動)、全てのウィンドウが閉じられたらアプリ自体を終了する。いうような処理を書いています。メニューを変更したり、ウィンドウを閉じたりメインプロセスでしかできない処理はこちらに書くことになります。})レンダラープロセスのコード例(エントリーポイント)一方ElectronのレンダラープロセスはほぼWebサービスのフロント画面と考えてもらえればよく、Web開発のノウハウのほとんどがそのままこちらに転用でき、Reactもレンダラープロセス上で動きます。Appこちらを見てわかるようにwebでReactを動かすのとほとんど変わりなくコードを書いていくことができます。書くも良しということでここではWeb開発のノウハウがそのまま使えます。リクエストを送るという形になります。"pong"})のように、メインプロセスで"asynchronous-message"というリスナーを登録して、任意のタイミングでレンダラープロセスからリクエストを送る形になります。データの同期(通信)を行うというところまで説明できたかと思います。「レンダラーとメインで共通で使う定数とか共有できなくて辛いよね。」というのをわかってほしくてここまで長々とメインプロセスとレンダラープロセスについて説明してきました。いうことで、今回はこの問題を解決するべくメインプロセスもレンダラープロセスもES6(特にimport)でかけるテンプレートを作ってみました。前振りが長くなりましたが、ここからはElectronをどうやってES6化して書くかということにフォーカスして説明していきます。はじめにレンダラープロセスの方はimport文かけるようにしたり、reactのインストール、TypeScriptのインストールとかは本当に簡単です。TypeScriptの環境を構築することができます。肝心のメインプロセスの方は、そういった記事も少なく、自らwebpackの世界に乗り出し設定を行いES6の構文を使えるようにしていかなければなりません。(react-scriptとかレンダラープロセス書く分にはとても便利なのですが、ブラックボックス化されていて設定しんどそうなのでejectしました。)結果完成したのが先ほども載せたこちらのリポジトリです。構成で何かアプリ作りたいのであれば割と始めやすいリポジトリになっているかと思います。JavaScriptのプロジェクトであればだいたい使うであろうlodashやmomentあたりのユーティリティライブラリも入れておきました。(styled-componentも個人的な趣味ですが入れてます)webpackの設定の肝の部分はメインプロセスとレンダラープロセスのjsを別々に吐き出すことです。メインプロセスのコードはsrc/main配下にまとめておいて、レンダラープロセスのコードはsrc/renderer配下にまとめておきます。その状態でwebpackを設定すると下記のような設定になります。]}この設定だとレンダラープロセスのコードはpublic/renderer.js、メインプロセスのコードはpublic/main.jsとして吐き出されます。Electronではこのようにレンダラープロセスとメインプロセスのコードを別々にバンドルすることでES6化することができます。レンダラープロセス側はwebpack-dev-serverで配信する形にすると開発の時も便利です。コードを配信して、開発中にコードを変更したらホットリロードができる構成にしています。start(見てわかるように一旦ビルドしてビルドされたファイルをもとにelectronを起動しています。)としてメインプロセスを立ち上げています。startで再度サーバを立ち上げ直す必要があります。理想をいうとメインプロセス側についてもホットリロードできると良いですが一旦ここまででレポジトリをあげておきます。(ホットリロードしたい方はnodemonなどを使って頂ければ実現できるかと思います)まとめというわけで、メインプロセスもレンダラープロセスもES6のシンタックスかつTypeScriptで開発が行えるように環境を整えた話を書きました。javascriptは割と好きなのですが、こういった環境設定が多少面倒くさいですね。開発をしている時の気持ち良さ(というよりストレスレスであることが大事そう)ってやっぱりコードを書く時のモチベーションとかに影響するのでついついこだわってしまいますね。実装していかないといけないので、なかなか大変ですね。モデルを共有できるとかもなるので、設計考えるのが大変です。(どこかにベストプラクティスがあれば知りたい・・)ただ、JSは今回のように一旦環境を揃えられるとあとは快適にコードを書いていけることが多いので、環境構築めんどくさいという方はこのリポジトリを参考にしたりフォークしたりしながら使って頂ければと思います。version1この記事が役に立ちましたらシェアをお願いします。2019ReactNativeで位置情報を取得する。2019フリーランスを退職します。