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

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

作ったサービス

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

作った理由

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

環境構築

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

WSL2

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

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

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

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

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

$ 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用の拡張機能をインストールすることで接続できました。
(ドキュメントではRemote Developmentをインストールしており、WSLも含まれています。)

asdf

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

# 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は以下のサイトでざっくりと入門しました。

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

開発時のプロジェクト作成にも「Reactでいいねボタンを作ろう」に登場したcreate-react-appを使用しました。

React

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

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

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

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

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

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

設計

まずはざっくり画面設計をしてみました。
以下のようにざっくりとした画面のイメージ図を作成しコンポーネントの入れ子構造を視覚化しました。

開発

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

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

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

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

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

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

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

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

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

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

デプロイ

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

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

Reactを使ってみての感想

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

おわり

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

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

今回は以上です。