はじめに
学習記録アプリをアップデートしました
前回は色々な技術に触れた感動を記事にしましたが
今回はそこからさらに新しい技術を学んだ記録です。
🔽前回記事
今回のアップデート
- TypeScript を導入して型を学ぶ
- Jest の Mock を活用してテストの効率化
- Chakra UI を採用してデザインの改善
- React Hook Form を導入してフォームを管理
を行いました。それぞれの変更点と学びを紹介していきます。
TypeScript 導入
なぜ TypeScript を導入したのか？
これまで JavaScript で開発していましたが、
- 型の恩恵を受けたい
- コードの保守性を向上させたい
- エディタの補完機能を活かしたい
という理由で TypeScript を導入しました。
実際に使ってみた感想
- 型が難しい！ でもハマるとサジェストがすごく便利
- エラーが非同期で表示される ので、JavaScript よりわかりやすい
- 初心者向きかも？ 型の学習コストはあるけど、長期的に見るとメリット大
Jest と TypeScript 導入
導入で起きたトラブルと解決策
まずJestを導入した際にTypeScriptとの組み合わせでエラーが発生しました。
調べたところ、 Jest で TypeScript を使うには Babel の設定が必要でした。
解決策：Babel を導入
以下のコマンドで @babel/preset-typescript をインストールすることで解決しました。
また、テストファイルの拡張子は .tsx であることに注意する。
npm install --save-dev @babel/preset-typescript
参考にした記事:
- Jest 公式ドキュメント
-
Qiita 記事
テストファイルの拡張子「.tsx」 と 「.ts」に注意する。それぞれ設定が異なる。
Jest の Mock 導入
なぜ Mock を導入したのか？
以前は Supabase に直接アクセスしてテストしていましたが、
- テストの実行が遅くなる
- 外部サービスの影響を受ける
という問題がありました。そこで Jest の Mock を使い、API の動作を模擬することで、軽量で安定したテストができるようになりました。
でも Supabase の関数はテストしなくていいの？
前回は直接supabaseにアクセスするテストでしたが、
今回はmockを使いsupabaseの関数をテストしないことを疑問に思ったので
ChatGPT に質問しました。
- Jest はユニットテスト向き → 関数単位の動作確認
- E2E テスト（エンドツーエンドテスト） → 実際の API 通信を含めたテスト
という使い分けがあるらしいです。まだまだ学ぶことが多そう！
Chakra UI 導入
なぜ Chakra UI を導入したのか？
以前は CSS や JavaScript でスタイルを管理していましたが、
- コンポーネントベースで開発できる
- デザインが統一しやすい
- 簡単にレスポンシブ対応が可能
という理由で Chakra UI を採用しました。
実際に使ってみた感想
- ボタンやモーダルが簡単に実装できた！
- ただし、細かい微調整の学習コストはありそう…
Chakra UI の表示速度は？
cssとjavascriptでモーダルを実装していた過去があるので、
簡単にできるのはいいけど、
chakraUI導入によるパフォーマンスをchatGPTに聞いてみました。
- Emotion（CSS-in-JS）を使っているため、初回レンダリングは若干遅い傾向がある
- ただし、開発効率の向上を考えると許容範囲
やっぱり使わない手はなさそう。
あとチーム開発での可読性や効率も良さそうだなと思いました。
React Hook Form 導入
なぜ React Hook Form を導入したのか？
以前は useState でフォームの状態を管理していましたが、
- バリデーションを簡単に実装できる
- useState を使わなくてもフォームの状態を管理できる
という理由で React Hook Form を導入しました。
実際に使ってみた感想
- バリデーションが簡単に実装できた！
- フォームの状態管理が楽になった（useState で管理する必要がなくなった）
導入で起きたトラブルと解決策
useState を使わなくなることにより
フォームの状態をどのように管理するか分かりませんでした
解決するまでの内容を記事にまとめました
まとめ
今回のアップデートで学んだこと
- TypeScript はエディタ補完が便利で初心者にもおすすめ！
- Jest の Mock でテストが軽くなった
- Jest + TypeScript の設定には Babel が必要
- Chakra UI で開発スピードが向上。細かいカスタマイズを要学習
- React Hook Form でフォーム管理が楽になった！
前回の記事と同様に、今回の学びが誰かの参考になれば嬉しいです！
今回のアプリの GitHub
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼