🛫

史上最強の Electron テンプレート作った?

2022/10/22に公開約5,900字

史上最強の Electron テンプレートをご紹介します。

https://github.com/sprout2000/electron-starter#readme

🚀 ゲットスターテッド!

shell
npm install -g electron-starter

もしくはグローバルインストールしたくない場合はこちら:

shell
npx electron-starter

👍 特長

  • メインプロセス・レンダラープロセスともにホットリロードに対応しています。
  • 余計なことは何もしてません。アプリや周辺ツールを自由にカスタマイズ出来ます。
  • 8 つのフレーバーから選択できます。
JavaScript TypeScript
vanilla vanilla-ts
react react-ts
vue vue-ts
svelte svelte-ts
  • お好きなパッケージマネージャー npm pnpm yarn を選べます。

📗 使い方

electron-starter <project-name> --template <template> [--manager <package manager>]

オプション 説明
--version バージョン番号を表示
--template, -t ライブラリ or フレームワークを指定
--manager, -m パッケージマネージャーを指定
--help ヘルプ画面
  • 引数やオプションの指定なしだとインタラクティブモードにフォールバックします。

shell
Options:
  --version       Show version number                              [boolean]
  --template, -t  vanilla, vanilla-ts, react, react-ts, vue, vue-ts, svelte,
                  svelte-ts                                        [string]
  --manager, -m   npm, pnpm, yarn                                  [string]
  --help          Show help                                        [boolean]

開発モード

shell
% cd {プロジェクト名}
% npm run dev  # or 'pnpm dev'

本番ビルド

shell
% npm run build  # or 'pnpm build'

🔌 Devtools をロードするには? (React, Vue3)

electron-devtools-installer を使ってください。

https://www.npmjs.com/package/electron-devtools-installer

npm install --save-dev electron-devtools-installer

Vue3 の場合の例

src/main.js
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer';

app.whenReady().then(() => {
  installExtension(VUEJS3_DEVTOOLS, {
    loadExtensionOptions: { allowFileAccess: true },
  }).then(() => mainWindow.webContents.openDevTools());
});

すでに Chrome 拡張機能がブラウザにインストール済みの場合

拙作ライブラリの electron-search-devtools も使えるでよ。

https://www.npmjs.com/package/electron-search-devtools

src/main.js
// load `session` and `searchDevtools`
import { app, session } from 'electron';
import { searchDevtools } from 'electron-search-devtools';

app.whenReady().then(() => {
  // 'REACT' or 'VUE3'
  searchDevtools('REACT').then((devtools) => {
    // 'allowFileAccess' is required
    session.defaultSession.loadExtension(devtools, { allowFileAccess: true });
  });
});

📦 配布用にパッケージするには?

electron-builder または electron-packager を使ってください。

electron-builder 用ビルドスクリプトの例

npm install --save-dev electron-builder
builder.js
require('electron-builder').build({
  config: {
    productName: 'Electron App',
    // 出力例: "Electron App-1.0.0-win32.exe"
    artifactName: '${productName}-${version}-${platform}.${ext}',
    // パッケージに含めるファイルの相対パスパターン
    files: ['dist/**/*'],
    // 出力先とメタデータ置き場
    directories: {
      output: 'release',
      buildResources: 'assets',
    },
    win: {
      // アプリアイコン ICO
      icon: 'assets/icon.ico',
    },
    mac: {
      // アプリアイコン ICNS
      icon: 'assets/icon.icns',
      // コードサイニングをスキップさせる場合
      identity: null,
    },
  },
});
shell
node ./builder.js

ICNS ファイルの作り方

拙作アプリの Elephicon も使えるでよ。

https://github.com/sprout2000/elephicon#readme

❓ Why すでにたくさんあるのに

(個人の感想です)

  • すごく美麗なサンプルアプリが付いてきた!

    • 🔜 すみません、"Hello world" だけでいいんです…
  • なぞの高度な技術で至れり尽くせり

    • 🔜 カスタマイズしようと色々いじってたら… あーもうめちゃくちゃだよ
  • eslint, prettier, jest, testing-library などなど満載の親切設定

    • 🔜 自分で選定したいんです… そもそも要らないかも知れないし…

📚 使ったライブラリ

yargs

http://yargs.js.org/

inquirer

https://github.com/SBoudrias/Inquirer.js#readme

参考にしたプロジェクト(感謝)

https://sbfl.net/blog/2020/08/11/create-xxx-app/

🤔 FAQ 予想

  • レンダラープロセスの更新でもアプリをリスタートさせるのはやり過ぎでは?

    • electron-nice-auto-reload のドキュメントを参考にしてカスタマイズしてください。
    • 2022/11/06: 改善しました。
  • yarn create electron-starter とか出来ないの?

    • 作り方が分かりませんでした… 良いドキュメントがあったらお教えください。
  • Yarn v2+ や pnpm は使えないの?

    • そのうちなんとかします…(たぶん)
    • 2022/11/07: pnpm に対応しました。
  • Yarn v2+ は使えないの?

    • yarn はもういいんじゃないですかね…
  • Angular は?

    • Angular で巨大 Electron アプリを作成するような人たちは、こんなテンプレートを必要としないと思うの…

🎉 こちらもよろしくお願いします

https://zenn.dev/sprout2000/books/6f6a0bf2fd301c

https://zenn.dev/sprout2000/books/3691a679478de2

Discussion

ログインするとコメントできます