🦁
ElectronでTextEditorを作るぜ
イケてるタスクとメモ管理ツールが欲しいぜ
普段のタスクやメモにTextEditorでMarkdownで管理している。
しかし、すぐにテキストファイルが散らかってしまい過去のメモやこの１週間のタスクとかがカオスになる。
そこで自分で、タスク管理を作ろうかと思った。
その前段階として、TextEditorを作ってみる。
TextEditorと言っても、単にAceEditor使って表示編集するだけだけど。
アーキテクチャ
一応、マルチプラットフォームがよいので、Electronを使ってみることにする。
UI回りは、Reactにする。昔Reactをちょっと使ったことがあったけど忘れてしまった。
- electron
- react
- react hook
- typescript
- react-ace
- material-ui
パクリ元
- Electron, TypeScript, React, Material-UI で簡単なメモ帳アプリを作る
- React+RecoilでHTML,CSS,JavaScriptのプレイグラウンドを作ってみる
- React + Material-UIで管理画面を作成してみた
テンプレートについて
Reactプロジェクトの場合、テンプレートとして、Create React Appを使うことが多いと思う。
ElectronとReactの場合、electron-react-boilerplate
かelectron-forgeがメジャーのようだ。
しかし、どちらも生成されるwebpack.configが気に入らなかったので、結局、Electron, TypeScript, React, Material-UI で簡単なメモ帳アプリを作るを参考に自前でpackage.jsonを作った。
ディレクトリ構成も大体このサンプルと同じ用にしてある。
ソースコード
- src/renderer の下にReactを使ったUIが置いてある。Reactはレンダープロセスだけで動く。
- src/main.ts のメインプロセスで、ファイルIOの処理を行う。
- UIのindex.htmlは、最初からdist/index.htmlに置いてある。
- dist/main.jsがメインプロセス用のjsで、webpack.config.jsの
「target: electron-main」で生成される - dint/index.jsがレンダープロセス用のjsで、webpack.config.jsの
「target: electron-renderer」で生成される
Discussion