はじめに
以前制作しました学習記録アプリを改良してみました。
制作して感じたことなどをまとめてみました。
↓前回の記事はこちらです
https://qiita.com/masafumi1073/items/b3bf7997c252bde7482b
制作したアプリ
前回と機能的な面では大きな違いはありません。
今回は以下の3つを新規で追加しています。
- Supabaseを使用した学習記録のデータの管理
- Github ActionsによるCICDの追加
- Jestとreact-testing-libraryを使用したテストの実装
工夫した点
前回はスタイリングを行わず、機能面の実装だけにとどめていたので、今回はスタイリングを行いました。また、styled-componentsを初めて使ってみました。普段はTailwind CSSを使用していますが、クラスが多くなりごちゃごちゃするのが好きではないため、styled-componentsを試してみました。
大変だったところ
全てです...
冗談ではなく、実際すべての作業が初めてだったため、かなり苦戦しました。特にテストコードの実装に苦労しました。
- どのようなコードを書けばテストが行えるのか？
- テストの要件を満たすにはどのようなことをテストすれば良いのか?
上記のようなことが全く分からず絶望しかけてました。
今回はとにかく公式のドキュメントを読みまくりました。エラーを解決したいのならQiitaの記事やChatGPTに聞くのも良いと思います。ただ、今回の場合はそもそも何をすればよいのかわかっていないので公式のドキュメントを読み込みました。教材で扱うレベルのことであるならば絶対載っていると思ったからです。結果としてしっかりとテストコードを実装することができたの正解だったと思いました。
良かったこと
テストの実装でつまづいたことは前述の通りです。その過程で私は公式ドキュメントを読みましたが、そこで良かったことは公式ドキュメントを読む力がついたことです。
ドキュメントは英語が多くてどうしても読むのが苦手でした。ただ一番正確なことが書いてあるのは、公式ドキュメントなので読めるようになって良かったです。
最後に
Reactでアプリを作り始めてから1ヶ月が経過しました。今まで全く触れたことがなかったことを、たった1ヶ月でできるようになっていて本当に驚いています。
正直、今回はテストのところで5回ぐらい心が折れました。ただ、その日分からなくても、次の日にやると意外とできたりするのです。
そんなこんなで改良版の学習記録アプリが完成しました。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします👇