【14日目】React+TypeScript+Electronでタイマーアプリ作る【ぱちお Advent Calendar 2020】
おはおはの民!
ぱちお Advent Calendar 2020 の14日目の記事です。
13日目は、ぱちお(@patioglass)さんの
【13日目】色々なぱちお【ぱちお Advent Calendar 2020】 - ぱちおのいろいろ。
でした。
最近アドカレ日付変わってからじゃない??寝るまでが今日だよ、中学校で習わなかった?
React+TypeScript+Electronでタイマーアプリ作る
備忘録記事です。
そしてリリースしたかったんですが、Macのビルドできなかったので、また正式にリリースできたら告知しま~~~~す・・・(まだリリースしてません)
作ったもの(Shintyoku-Keeper-Kun)
時間を設定して、カウントダウンを進捗バーと連動させるアプリです。
こんな感じで放送画面を作れます
こんなアプリ
え?こんなの普通にありそうじゃんってなったんですけど「Progress Bar TImer」とかなんかそれっぽいワードで検索したはいいんですが、それっぽいものが見つからなかったので、練習がてら作ってみました。
ぱちおスキル:ReactでちょっとWebアプリ作ったことあるくらい
です。
なので、スタンドアロンで動くアプリを作ってみたいな~と思いかつ、TypeScript入門してみてぇ~~~ということでそんな感じです。
Electronの読み先をReactの出力先にする
Electronはhtmlとjsで良い感じに.exeとかができるイメージだったので、たぶん
こういうことができるんだろうなぁと。いうことでまずelectronをminimunで動かしてみる
公式チュートリアルとりあえず写経
index.htmlをrootに置いて終わり、本当に動くんか?
npm start
う、うごいた・・・・・簡単すぎる・・・
とりあえずElectronは割とスッとできそうなので、次TypeScript
ReactをTypeScriptで書く
まず何入れたらいいのさ、って感じなので魔法のcreate-react-appなしでやりたい
qiita.comありがとうインターネット…🙏
↑の記事がめちゃくちゃ丁寧なので私からいうことがほぼない。
とりあえず.jsx->.tsxに変わるということだけわかってる
tsはあと型がつけられる(なにその雑な知識)
Reactでやるんだからつまり
- useStateでの定義がどうなるか?
- 普通に関数の引数とかどう定義するか?
- propsに渡す時どう定義するか?
をとりあえず把握できればhello worldかな
useStateでの定義
普通に関数の引数とか
propsに渡す時
children?: React.ReactNode;
timerPattern: string;
addSettingTime: (num: number, setting: boolean) => void
}
const { timerPattern, addSettingTime} = props;
....
}
完全に理解した
ディレクトリ構造
├ dist
│ ├ electron.js├ src
│ ├ img/(icoとかアイコン画像)
│ ├ js/react│ ├ components/
│ ├ config.ts
│ ├ index.ts()
│ └ scss
├ index.html
├ package.json
├ tsconfig.json
├ webpack.config.json
正直微妙な気はするが、まぁいいやということで
webpack.config.jsonでは
https://github.com/patioglass/simpleProgressBar/blob/main/webpack.config.ts
entry: './src/js/react/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/assets'
},
...
devServer: {
contentBase: path.join(__dirname, 'dist'),
host: 'localhost',
historyApiFallback: true,
},
};
webpack-dev-server --mode developmen
でdist内のindex.htmlを参照して、reactのみでlocalhostが立つようにする。
webpack --mode production
でdist内にbundle.jsができる
これをelectron.jsが読み込むrootのindex.htmlが読むようになっている
開発中はlocalhost、動作確認終わったらelectron化する
setIntervalで詰まった
useEffect内でsetInterval⇒中でuseStateで定義した変数を参照すると、set後の値が参照できないんすねという初知り
まぁuseEffect内で使えないというだけなので、関数を切り出して
simpleProgressBar/MainContainer.tsx at main · patioglass/simpleProgressBar · GitHub
intervalId = setInterval(() => {
// addSettingTIme内でuseStateのsetを実施する
addSettingTime(-1);....
}
ってやればよかった
追記:2020/12/16(ごめん嘘だった)
これの問題でした、なので記事に習って
https://github.com/patioglass/Shintyoku-Keeper-Kun/commit/a4d8c510b3c00b89f7abef7c9e5eb5148f3ee6a1
な修正をしました
あ~~~~~~~1日でできると思ったので記事遅れたのが悔しい!!!!!!!!!!!!!!!!!!以上!!!!!!!!!!!!!リリースしたらまた言うね!!!!!!!!!!!!