はじめに
Reactの学習を始めて早くも2カ月が経ちました。
React×TypeScriptのインプットを下記の講座で終わらせたので、アウトプットとして学習記録アプリを作成しました！
↓「0からTypeScript学習するぞ！」って方にもおすすめです。
作成したアプリ
使用言語
React、TypeScript
UI
Chakura UI
DB
Supabase
テスト
Jest
React Testing Library
その他使用した技術
React Hook Form
Github
Supabase
アプリ作成の背景
もともとこのアプリはReact×JavaScriptで作成したものです。
TypeScriptの学習を兼ねて、アプリをReact×TypeScriptで最初から作成し直しました。また、Reactの恩恵を受けるべく公式ドキュメントを参考にしながらReact Hook FormやReact Testing Libraryを積極的に取り入れました。
デモ （日付のフォーマット変換については見逃してください。。）
↓ちなみに、JavaScript×Reactでアプリを作成した当時の記事はこちらです。（当時はデザインまで気が回らなかった。。）
作成の流れ
アプリ作成の大まかな流れはこちらです！
今はReactの学習に重点を置いているので、機能実装に一番時間を割きました。
１．環境構築（Vite）
２．CI/CD構築（Github Actions）
３．DBの作成・設定（Supabase）
４．アプリの機能実装
５．テスト作成（Jest）
便利なReactライブラリ
React Hook Form
react-hook-formとは、Reactアプリケーションでフォームを簡単に扱うためのライブラリです。react-hook-formが提供するフックを利用すると、フォーム入力値の状態管理やバリデーション、フォームの送信等が簡単にできるようになります。
実際に使ってみて、未使用時よりもコードの量が減ったのを実感しました。
↓公式ドキュメントのデザインがイケているので、見ていて楽しいです！
↓各フックの使い方なんかを丁寧に書いてくれています。
React Testing Library
そのままですが、Reactアプリケーションのテストを行うためのライブラリです。
特徴としては、ユーザーがアプリケーションを使うときの振る舞いに焦点を当てたテストができることが挙げられます。もう少し具体的に言うと、コンポーネントのレンダリング結果に対して、テストツールを使ってユーザーの操作をシミュレートし、期待される結果が得られるかどうかを確認できます。
↓有料級の丁寧さ＆わかりやすさです（Jestとの違いも教えてくれる）
おわりに
少し話が逸れますが、最近SNSを見ていると、プログラミングスクール生がものすごいクオリティのアプリを作っていたり、同期のSEさんが爆速で成長していたりするわけです。その様子を見て 「みんなすごいな。。私SEとしてやっていけるのかな。。」 なんて思ったりします。
今回のアプリもめちゃくちゃシンプルですが、私は何日もかけて作成しました。
他人と比べるとペースはゆっくりかもしれません。でも、根気強く学習を続けて、発信し続けていきたいと思います。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
気になる方はぜひHPからライン登録お願いします！