Next.js + Electron がとても簡単になっていた

Next.js + Electron を使えばめちゃくちゃ簡単にデスクトップアプリを作れるという記事です。

• デスクトップアプリケーションをWeb技術で作成するElectronを、むちゃくちゃ久々にやってみたら、とても簡単になっていた
• React のフレームワークである Next.js もバージョン9.xになってから劇的に良くなり続けていて、どんどん触りやすくなっています

ちなみに Next.js は非公式な日本語翻訳が進んでいるようです。

https://nextjs-ja-translation-docs.vercel.app/

9割くらい翻訳が完了しているようですが、気になる方は、このサイトの「翻訳プロジェクトについて」をご覧ください。

セットアップする

# npmの場合
$ npx create-next-app --example with-electron-typescript hoge
$ cd hoge
$ npm run build
$ npm run start

# yarnの場合
$ yarn create next-app --example with-electron-typescript hoge
$ cd hoge
$ yarn build
$ yarn start

これだけで、Electron + Next.js + TypeScript のセットアップが完了です。

初回だけは npm run build or yarn build が必要ですが、一度ビルドしておけば、あとは npm run start or yarn start だけで構いません。

ここまでの手順で、実際に Electron によるデスクトップアプリが起動しているはずです。

個人的にはディレクトリ構成が気にくわないとか、prettier / eslint とか jest とか追加であれこれインストールしないといけないなーとかありますけど、それでも、たったこれだけで実際に Electron で動くものがセットアップできるのは、もう驚くしかなかったです。

注意点: .gitignore

セットアップで生成される .gitignore は標準的な Next.js のディレクトリ構成に沿ったものであるため with-electron-typescript でセットアップしたディレクトリ構成と噛み合わないため追加が必要です。

main
dist
renderer/.next
renderer/out

これら4つの追加が必要です。

Next.js のパワーを体験してみる

さて、アプリが起動している状態で、ソースコードをいじってみましょう。

いま表示しているページのソースは renderer/pages/index.tsx です。

<h1>Hello Next.js 👋</h1> という文字列を <h1>Hello Zenn 📘</h1> に書き換えてみましょう。

import Link from 'next/link'
import Layout from '../components/Layout'

const IndexPage = () => {
  return (
    <Layout title="Home | Next.js + TypeScript + Electron Example">
      <h1>Hello Zenn 📘</h1>
      <p>
        <Link href="/about">
          <a>About</a>
        </Link>
      </p>
    </Layout>
  )
}

export default IndexPage

保存をすれば即座にアプリケーションの画面が書き換わります。

素晴らしいですね！

アプリケーションをパッケージングしよう

せっかく Electron でアプリを作るのですから、これを配布可能な状態にパッケージングしたいです。大昔の Electron はWebpack職人になってかつビルド職人になってとかなり大変でしたが、いまはコマンドイッパツです。

# npm
npm run dist

# yarn
yarn dist

これだけです。

Macで実行した場合 dist/mac の下に ElectronTypescriptNext-1.0.0-mac.zip などのファイルが生成されています。

このとき、ファイル名やパッケージ名は package.json に書かれた名前とバージョンが参照されます。

{
  "productName": "hoge",
  "version": "0.0.1",
}

package.jsonのproductName と version を書き換えると、ファイル名も、dist/hoge-0.0.1-mac.zip に変更されました。

これらパッケージングは electron-builder によって行われています。

electron-build の Command Line Interface(CLI) にオプションが書かれています。

たとえば npm run dist -- -mwl などとすれば、Mac版だけではなく Mac, Windows, Linux とそれぞれの配布パッケージが作成できます。

# npm の場合
$ npm run dist -- -mwl

# yarn の場合
$ yarn dist -mwl

ただ、Windows版バイナリの作成は Windows10 を入れた仮想マシン（MS Edge イメージでOK）が必要らしいです。

see. https://www.electron.build/configuration/win#how-do-create-virtualbox-windows-10-virtual-machine

ひとまずこの記事では、それら細かい部分については省略します。

ちなみに、npm run で実行する場合 -- を挟まないとオプションが electron-builder に渡らない点に注意してください。

配布可能なビルドをするには、ある程度準備は必要なものの、それでも以前よりは大分楽になったと思います。少なくとも Webpack + ビルドパイプライン職人になる必要はなくなりました。