【14日目】React+TypeScript+Electronでタイマーアプリ作る【ぱちお Advent Calendar 2020】

おはおはの民！
ぱちお Advent Calendar 2020　の14日目の記事です。
13日目は、ぱちお(@patioglass)さんの　

【13日目】色々なぱちお【ぱちお Advent Calendar 2020】 - ぱちおのいろいろ。

でした。

adventar.org

最近アドカレ日付変わってからじゃない？？寝るまでが今日だよ、中学校で習わなかった？

React+TypeScript+Electronでタイマーアプリ作る

github.com

備忘録記事です。

そしてリリースしたかったんですが、Macのビルドできなかったので、また正式にリリースできたら告知しま～～～～す・・・（まだリリースしてません）

作ったもの（Shintyoku-Keeper-Kun）

作ったもの（Shintyoku-Keeper-Kun）

f:id:patioglass:20201215012636p:plain

時間を設定して、カウントダウンを進捗バーと連動させるアプリです。
こんな感じで放送画面を作れます

f:id:patioglass:20201215043738j:plain

こんなアプリ

f:id:patioglass:20201215044318j:plain

え？こんなの普通にありそうじゃんってなったんですけど「Progress Bar TImer」とかなんかそれっぽいワードで検索したはいいんですが、それっぽいものが見つからなかったので、練習がてら作ってみました。

ぱちおスキル：ReactでちょっとWebアプリ作ったことあるくらい

です。

なので、スタンドアロンで動くアプリを作ってみたいな～と思いかつ、TypeScript入門してみてぇ～～～ということでそんな感じです。

Electronの読み先をReactの出力先にする

Electronはhtmlとjsで良い感じに.exeとかができるイメージだったので、たぶん

f:id:patioglass:20201215014327j:plain

こういうことができるんだろうなぁと。いうことでまずelectronをminimunで動かしてみる

www.electronjs.org

公式チュートリアルとりあえず写経
index.htmlをrootに置いて終わり、本当に動くんか？

npm start

f:id:patioglass:20201215015131j:plain

う、うごいた・・・・・簡単すぎる・・・
とりあえずElectronは割とスッとできそうなので、次TypeScript

ReactをTypeScriptで書く

まず何入れたらいいのさ、って感じなので魔法のcreate-react-appなしでやりたい

qiita.comありがとうインターネット…🙏
↑の記事がめちゃくちゃ丁寧なので私からいうことがほぼない。

とりあえず.jsx->.tsxに変わるということだけわかってる
tsはあと型がつけられる（なにその雑な知識）
Reactでやるんだからつまり

- useStateでの定義がどうなるか？
- 普通に関数の引数とかどう定義するか？
- propsに渡す時どう定義するか？

をとりあえず把握できればhello worldかな

katsu07.netlify.app

useStateでの定義

const [ settingTime, setSettingTime ] = useState<number>(0);

普通に関数の引数とか

addSettingTime = (second: number, setting: boolean = false)

propsに渡す時

type Props = {
     children?: React.ReactNode;
     timerPattern: string;
     addSettingTime: (num: number, setting: boolean) => void
 }

export default function Setting(props: Props) {
     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

const config: Configuration = {
     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,
     },
 };