TypeScriptとReactで計算トレーニングWebアプリを作ってみた。

久しぶりに個人開発をしてみました。
開発時(2022年10月頃)の事を思い出しながらざっくりメモしたいと思います。
TypeScritp、Reactを始めようと思っている人の参考になればと思います。

# 作ったサービス
四則演算を気軽にトレーニングできるサービス。
4択なので大体で回答できるのが特徴。

https://calculation-training.web.app/

# 作った理由
・TypeScriptとReactのお勉強。
・計算する機会が減り暗算力が落ちているので、気楽に計算トレーニングできたらなぁと思った。
・眠れない時とかの暇つぶしに最適な黒いの画面。
・就活のアピールになれば良いな(今のところ大してアピールになっていない模様)。

# 環境構築
WSL2とVSCodeを使用しました。
Node.jsのインストールにはasdfを使用しました。

## WSL2
WSL2やVSCodeについては公式のドキュメントやその他の記事を参考にしました。
(他にもいろいろ見た気がするけどメモが残っていなかった・・。)

https://learn.microsoft.com/ja-jp/windows/wsl/install

WSL2は`wsl --install`を管理者として実行して何度か再起動することでインストールしました。

WSL2はマイクロソフトストアからでもインストール出来るようです。

https://apps.microsoft.com/store/detail/windows-subsystem-for-linux/9P9TQF7MRM4R

https://apps.microsoft.com/store/detail/ubuntu/9PDXGNCFSCZV

「Windowsの機能の有効化または無効化」で以下を有効する必要があります。
・Linux 用 Windows サブシステム
・仮想マシンプラットフォーム
・Windows ハイパーバイザー プラットフォーム

起動後はアップデートなどを実行しました。

```bash
$ sudo apt update && sudo apt upgrade
$ sudo apt install build-essential zip pkg-config libssl-dev language-pack-ja manpages-ja manpages-ja-dev -y
$ sudo update-locale LANG=ja_JP.UTF-8
```

## VSCode
VSCodeからの接続については[WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)用の拡張機能をインストールすることで接続できました。
(ドキュメントでは[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)をインストールしており、WSLも含まれています。)

https://learn.microsoft.com/en-us/windows/wsl/setup/environment

https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-vscode

## asdf

Node.jsのインストールはasdfを使用しました。
(TypeScritpは`npm install -g typescript`でインストールしています。)

https://asdf-vm.com/guide/getting-started.html

```bash
# asdfのインストール（バージョンについては要確認）
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.11.3
$ echo '. $HOME/.asdf/asdf.sh' >> ~/.bashrc
$ echo '. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc
$ source ~/.bashrc

# Node.jsインストール
$ asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
$ asdf list all nodejs
$ asdf install nodejs latest
$ asdf list nodejs
$ asdf global nodejs latest

$ node -v
```


# キャッチアップ
まずは、TypeScriptとReactのお勉強からスタートしました。

## TypeScript
TypeScriptは以下のサイトでざっくりと入門しました。

https://typescriptbook.jp/

もともとJavaScriptは触ったことがあったので、端的にまとまっていてざっくり理解するのにちょうど良かったです。
特に「[Reactでいいねボタンを作ろう](https://typescriptbook.jp/tutorials/react-like-button-tutorial)」のページはTypeScriptを使用する時のイメージがしやすくて良かったです。
ただし、開発当時は工事中のページもいくつかあって、別サイトで知識を補強する必要はありそうだなぁと感じました。

開発時のプロジェクト作成にも「[Reactでいいねボタンを作ろう](https://typescriptbook.jp/tutorials/react-like-button-tutorial)」に登場した`create-react-app`を使用しました。

https://create-react-app.dev/docs/getting-started/



## React
Reactは以下のサイトで入門しました。

https://ja.reactjs.org/docs/hello-world.html

公式がかなり良かったです。ただし、クラスコンポーネントで記述されているので読みかえる必要があったのはちょっと大変でした。
またJavaScriptで記述されているのでTypeScriptだと型の都合でエラーになるなどといった事もありました。
入門段階では`any`を多用して開発しました(とりあえず進めるも大事)。

関数コンポーネントについては以下が参考になりました。

https://www.twilio.com/blog/react-choose-functional-components-jp

関数コンポーネントではFC、VFCとかあるらしいですが、使う必要ないみたいなので使っていません。

https://kray.jp/blog/dont-have-to-use-react-fc-and-react-vfc/

追記：以下のサイトを教えてもらいました。
英語ですが、とても良さそうです。

https://react.dev/

日本語訳も出たようです。

https://ja.react.dev/learn

# 設計
まずはざっくり画面設計をしてみました。
以下のようにざっくりとした画面のイメージ図を作成しコンポーネントの入れ子構造を視覚化しました。
![2023-01-25_14h08_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200585/94ac806e-3c63-e5e3-9fb7-1d8b87eecebb.png)

# 開発
開発初期はこのページがかなり参考になりました。

https://ja.reactjs.org/docs/thinking-in-react.html

ざっとReactを入門したものの、どこからどう開発を進めたら良いのかがわからなかったので、このページの説明でだいぶイメージができました。
作る前にとりあえずコンポーネント(部品)をイメージして、中身は空でも良いのでコンポーネント毎にファイル作成して、徐々に中身を作成する流れで開発していきました。

型については一旦は無視して全部`any`で開発しました。
ある程度出来てきたら、`type`を使用して型を設定しました。

以下が英語のサイトですが参考になりました。

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/

ボタンを押した時のイベント処理で型に`any`を使用している段階では問題なかったのですが、想定する型を指定すると`event.target.id`でエラーになるなどちょいちょい大変でした。

https://bobbyhadz.com/blog/typescript-property-value-not-exist-type-eventtarget

https://komari.co.jp/blog/10724/


CSSがなんだかんだで一番苦労した気がします。Bootstrapを使用しました。
とはいえ、慣れればサクサクできた気がします。

https://react-bootstrap.github.io/getting-started/introduction/

https://getbootstrap.jp/docs/5.0/getting-started/introduction/

Bootstrapでは対応できないちょっとしたスタイルの変更は直接記入しました。

https://tech.adseed.co.jp/20210311222337PHi

計算トレーニングの正答数などの結果を保持する機能ではLocalStorageを使用しました。

https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

LocalStorageの使用には注意が必要なようですが、
一応、セキュリティ上は特に問題ないものを保存するので使用することにしました。

https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851

> local storageを使うべきシチュエーションは次しかありません。「秘密情報を一切含まないこと」「一般に入手可能な情報であること」「そこそこの量である（5 MBを超えない）こと」「stringのみの情報であること」「保存するアプリケーションでパフォーマンスを要求されないこと」です。


# デプロイ

デプロイ先にはFirebase Hostingを使用しました。

https://firebase.google.com/docs/hosting/

https://btj0.com/blog/react/firebase-github-ci/

Firebaseの設定をしたことでGitHub Actionsの設定も同時に設定されたのはびっくりしました。
便利になったなぁと思いました。

# Reactを使ってみての感想
TypeScriptやJavaScriptを触ったことのある人にとっては、その延長でコンポーネントを作成して画面を作成していけるので、学びやすいフレームワークだと感じました。

# おわり
個人開発のため、Reactの触りぐらいしか扱えていない可能性が高いですが、とりあえず公開するところまで出来たので大満足です。
未だにテストが書けていないのは心残りではありますが。。
(サバイバルTypeScriptに[Reactコンポーネントのテストを書こう](https://typescriptbook.jp/tutorials/component-test)が追加されたらしいので気が向いた時にでもやってみようかな)

お金にならないサービスなので、お金になるサービスを開発できたらいいなぁ。
何を作ろう・・。

今回は以上です。