【新技術の取り込みに挑戦】学習記録アプリをリニューアルしました

Posted at 2025-04-27

はじめに

以前作成した学習記録アプリを、リニューアルすることに挑戦しました。
初めてJavaScriptからTypeScriptに変更したり、ChakraUIやreact-hook-formの導入を行ったりした過程で、学んだこと・気づいたことをまとめてみました。

リニューアル前との違いは以下になります。

CI/CDに入門した際、公式ドキュメントを読むことは大切だということを実感していました。

今回、登録フォームのバリデーションを作る際に、react-hook-formを導入し、改めて公式ドキュメントを参照することの大切さを学びました。

その時の奮闘は↓にまとめています。

以下の手順を繰り返し行ったことで、自分のプロダクトに取り込むという感覚が掴めたと感じています。

公式ドキュメントは開発者のために手順を明記してくれていること実感しました。

最初は、英語で書かれている、見慣れないコードやワードが多くて難しそうと感じましたが、まずはクイックスタートだけでも行ってみると、意外と難しくないかもという感覚を得られたことにも気づきました。

わからないことをそのままにしないことを意識して開発を進めました。

そこで感じたのは、時間をかけて(＝自分が納得いくまで、説明ができる状態まで)理解したことに対しては、
スムーズに思い出せる、手が動かせるようになることです。

TypeScriptに入門した際、講義動画で何気なくPartialという用語が出てきました。
その時にドキュメントを読んで使い方を理解→実際にソースを書いてみる→自分のプロダクトに取り込むまでを行い、学んだことを記事にしました。

その時の記事は↓になります。

その結果、Partialはここで使おう、使いどころはここだなとわかるようになりました。

JestのMockについて学んだ際は、どのように使うのか、Mockとは何かを自分なりに理解、まとめて言語化したことにより理解が進んだと感じています。

テストコードを作る際に、疑問点はAIや有識者に聞く→どのように解決するかを理解→自分で再現できるまで落とし込むことを実践しました。
具体的には、Qiitaに記事を書く、何も見ない状態で再現してみる、Copilotの自動補完を使わず書いてみるなどを行ってみました。

その結果、テストの方針を考えた後、実現したいことをすらすら書けるようになりました。

また、テストが通らなかった場合は、ここが原因で、ここを改善すれば解消するかもという検討がつくようになりました。
エラーの解消までの時間が格段に短くなったと感じています。

一度しっかり理解すれば、その後は短い時間で解決できることが自分の中で大きな学びとなりました。

現状はこれ以上理解できない、わからないことは一旦そのままにしておくことも肝心だと思いますが、自分の中で説明できるまで概念を理解することも大切だということを実感しました。

ドキュメントを見つつ、CSSフレームワークの導入や、フォームバリデーションの導入ができるようになりました。
3か月前の私が見たら卒倒しそうです。
0→1で自分の作りたいものを作れることを目指して、今後も学習を進めていきます。

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼