はじめに
Electron でデスクトップアプリを開発するとき、UIフレームワークやビルドツールの選択に迷うことがあります。
特に最近では、React × Tailwind CSS × TypeScript の組み合わせが人気ですが、ゼロから環境構築するのは地味に時間がかかります。（私の場合、カオスな長旅に出発するので）
そこで今回は、{ Electron × React × Tailwind CSS } in TypeScript の構成で開発を始められるおすすめスターターテンプレートを紹介します。
「とりあえず動く環境」が欲しい方や、すぐに開発をスタートしたい方に役立ちます。
※ カオスな長旅が嫌な人にも役立ちます
GitHub repository 紹介
GitHub上では、優しい方々が開発用のテンプレートを公開してくださっています。
今回の記事では、それらの内4つを紹介させていただきます↓
1. electron-react-ts-vite-tailwind-boilerplate
⭐️ : 9
特徴
- Vite を使った高速ビルド
- React と Tailwind CSS を初期設定済み
- 軽量でシンプルな構成なので、学習用や小規模プロジェクトに最適
2. rostislavjadavan/electron-react-typescript-tailwind-starter
⭐️ : 42
特徴
- Electron Forge ベースで導入が容易
- ホットリロード対応
- 設定ファイルがシンプルで理解しやすく、拡張しやすい
3. guasam/electron-react-app
⭐️ : 621
特徴
- Vite + React + TypeScript + TailwindCSS に加え、shadcn UI を組み込み済み
- ダークモード切替、カスタムウィンドウバーなどモダンなUI機能
- Electron Builder によるクロスプラットフォームビルド対応
4. Molizanee/electron-react-tailwind
⭐️ : 7
特徴
- Vitest によるテスト環境付き
- BiomeJS によるコード整形とリンティング
- 初期から開発フローが整っており、中規模以上の開発にも対応可能
5. saucesteals/electron-typescript-react-tailwind-redux
⭐️ : 45
特徴
- Redux を含んだ状態管理込みのテンプレート
- Electron Forge ベースで安定感がある
- 大規模アプリや状態管理が複雑なアプリに適している
まとめ
-
軽量・シンプルに始めたい
→electron-react-ts-vite-tailwind-boilerplate -
Forgeベースで安心して始めたい
→rostislavjadavan/electron-react-typescript-tailwind-starter -
UI機能豊富で本格派
→guasam/electron-react-app -
開発フローやテストも整えたい
→Molizanee/electron-react-tailwind -
Redux前提で作りたい
→saucesteals/electron-typescript-react-tailwind-redux
個人的な話ですが、私は guasam/electron-react-app が大好きです。
テンプレートについては以上です！
最後まで読んでくださり、ありがとうございました！！！
この記事が、Electronアプリ開発のスタートダッシュに役立てば幸いです！
他人のリポジトリをもとに開発をする際には、事前にセキュリティチェックをすることを推奨します。
参考：https://qiita.com/Kazu-K0032/items/fd6745ac4919ce08c027
※ 金抜き取られたみたいな怖い記事を読んだ記憶があるのですが、見つけられませんでした。