2024年のElectronとエコシステムの調査
ElectronとReactのボイラープレートで検索するとトップに出てくるリポジトリ。2022年でメンテナンスが止まっている。
Viteのテンプレートを作成するコマンドにはElectronとViteのテンプレートが存在するので、ここからプロジェクトのベースを作るのが良さそう
❯ npm create vite@latest my-electron-vite-app
> npx
> create-vite my-electron-vite-app
✔ Select a framework: › Others
✔ Select a variant: › create-electron-vite ↗
> npx
> create-electron-vite my-electron-vite-app
✔ Project template: › React
Scaffolding project in /Users/kimizuy/Documents/dev/my-electron-vite-app...
Done. Now run:
cd my-electron-vite-app
npm install
npm run dev
electron-viteというプラグインがあり、こちらのテンプレート作成機能でElectron+Vite+Reactのテンプレートを作ると上記のcreate vite
テンプレートと同じ内容だった
❯ npm create electron-vite@latest
> npx
> create-electron-vite
✔ Project name: … my-vite-plugin-electron-app
✔ Project template: › React
Scaffolding project in /Users/kimizuy/Documents/dev/_temp/my-vite-plugin-electron-app...
Done. Now run:
cd my-vite-plugin-electron-app
npm install
npm run dev
Electron内部でデータを永続化する方法をChatGPT 4oに聞いてみた。
以下、箇条書きでまとめたもの:
- ローカルファイルを使用
- ローカルストレージ (Electron's localStorage)
- IndexedDB
- SQLite
- NeDB
他に、JSONファイルでデータを永続化するライブラリもあり、かなりスターを集めている。作成者は個人開発で有名なsindresorhusさん
electron-storeでほとんどの要件はカバーできそうだが、より複雑な要件に対応しきるためにSQLiteを使う。関連の記事やExampleを調べてみる。sqlite3よりパフォーマンスが高いbetter-sqlite3を使ったものを探す
上記で紹介したelectron-viteがサポートするExampleが存在する。参考になりそう
- https://github.com/caoxiemeihao/electron-vite-samples/tree/main/better-sqlite3-main-process
- https://github.com/caoxiemeihao/electron-vite-samples/tree/main/better-sqlite3-renderer-process
2023年に書かれたElectronにbetter-sqlite3を導入する記事
Electron公式が提供するビルドツールelectron-forge
にもテンプレートが存在する。けっこうメンテされていてよさそう
めちゃくちゃモダン構成なテンプレートも発見した。ただ、ワークアラウンドが張り巡らされていて、ちゃんと動いていないかも
先ほどのelectron-forge
のテンプレートをベースにnativeモジュールを動かすサンプル。これを参考にsqlite3などを動かせそう
上記を踏まえて、ボイラープレートを作りました🎉
結局、electron-viteではなくelectron-forgeのテンプレートをベースにしています。