Electronデスクトップアプリのレンダラープロセス設計において、求められるスキルセットはWebアプリ案件とそれほど違うところはない。 静的コンテンツで済むのであれば、HTML&CSSとわずかなJavaScript(jQuery)があればよい。コンテンツ更新が頻発するのなら、SPAを考慮したい。ReactやVue.js、Angularなどが候補になるだろう。 SSRフレームワークで知られるNext.jsやNuxt.jsを得意とするなら、十分に活用できるはずだ。ただしレンダラープロセスのウインドウ生成には、起点となるHTMLファイルを定義する都合があるため静的HTMLにエクスポートする必要がある。 そもそもdevelopment時点ではHTMLファイルがない。pagesフォルダ配下のjsファイルがルーティングと関連付くかたちでページ生成されるためである。ごく単純なSPA構築ライブラリと相違するポイントであって、Electronとともに使うときには、非常に難解な要素といえる。 それでもElectron+Next.jsが候補されているなら、もっとも効率のよい始め方がある。Next.jsを基に開発が進められる「Nextron」を使ってみてはどうだろう。 Nextronとは Nextronは、デスクトップアプリジェネレーターである。利用者は、Electron+Next.js環境が整った状態で開発を開始することができて、CLIでプロジェクト初期化や開発、ビルドの設定がされているため手間が省ける。 さらにNextronには、さまざまなケースを想定したexampleが用意されていて、要件を満たしてくれる。プロジェクト要件に近いexampleから初期化できるわけだ。大変有り難い仕様になっている。 特徴 使い方 Nextronをインストール Nextronを-gオプションでインストールする。これによりnextronコマンドを使用できるようになる。 nextronインストールの無事を確認してみよう。 プロジェクトを初期化 Nextron環境を初期化しよう。下記プロジェクト名は任意で構わない。 Nextronを–globalにインストールしない場合の初期化方法も用意されている。 依存関係をインストール Nextron環境に依存関係するパッケージモジュールをインストールしよう。 果たして、node_modulesフォルダが生成されていることだろう。 開発モードを実行 不測のことがなければ、ウインドウが立ち上がる。開発モードでは簡易Webサーバーが起動している。「http://localhost:8888/home」にアクセスすれば、ブラウザでも確認できるはずだ。 ビルドを実行 「dist」フォルダが生成される。フォルダ配下にインストーラーや実行ファイルがあることを確認しよう。 まとめ Electron+Next.js 要件が求められるプロジェクトならば、Nextronはよい選択ではないだろうか。環境構築が初めてならなおさらだ。自身で依存関係パッケージモジュールをかき集めるには、とても骨が折れる。 それならNextron環境で、プロジェクトにマッチするexampleを活用するのが賢明と思える。exampleの記述には、Electronたらしめるipc通信に関することがhelpersにまとめられている。Web制作者にとって馴染みないipc通信をサポートするメソッドが使えるのは大変有り難い次第だ。 これほどの作り込まれたNextronは、デスクトップアプリジェネレーターといって申し分ない。ぜひ検討してみてほしい。