はじめまして。ともぼーです！
私は組み込みエンジニア4年目で、Web開発経験に関しては仕事で少しHTML/CSS, JavaScriptを使用して画面を作った程度です。
プログラミングの基礎は割と出来ている状態で今はReactを勉強しています！
デジタル名刺アプリを作りました。
Github, Qiita, Xのアカウントと個人の情報を登録できる名刺アプリです。
新規で名刺を登録でき、登録した名刺を見ることが出来ます。
■ChakraUIの仕様を理解すること
今回はChakraUI v3を使用して作成しました。前回の学習アプリではv2を使用していたので分からないことがあれば公式ドキュメントに網羅されていました。ただ、今回のv3は色々仕様が変わっている箇所があり、公式ドキュメントだけでは仕様が不明なコンポーネントが多く、使い方を理解するのに苦労しました。
※多くの変更は公式の Migration to v3 に記載されていました
「こんな使い方いけるのかな？」といったように、試しで色々使ってみることで理解を深めていきました✨
また、npx @chakra-ui/cli snippet add で CLIをインストールするとエラーが多く出たので、その時はインストールしたChakraUIのソースコードを追いかけることで、なぜエラーが起きているのかの原因を探しました。
ネットで検索しても出てこないエラーについては、ソースコードを見ることが大事だと学びました！
■Jest(Testing-Library)でのテスト実装
前回の学習アプリも同様にTesting-Libarayを使用していましたが、今回はテストパターンも前回より多く、ユーザーイベントを使用して分かりやすい・無駄のないテスト設計を心掛けました。
beforeEach を使用して各テストで同じような処理を事前に実施するように実装した際には、state の更新を考慮できていなかったことに気づき、act関数の仕組みや、beforeEach と test の実行タイミングなどを改めて理解することで、テストを修正することができました。
一部曖昧に理解するのではなく、使い方を全て理解した上で関数を使用することが重要だと学びました🙌
↑ここについては、焦らず積み上げていくことを意識したいと思います！
今までは、一旦殴り書きで全て書き終わってからリファクタリングでコンポーネント分割をしていましたが、今回の開発では事前にコンポーネント化すべき箇所を実施してから再利用する形を取れるようになっていました。
最小単位は atoms フォルダに、atoms単位を組み合わせたUIコンポーネントは別のフォルダにと、まだ少し理解が浅いですが構成も考えられるようになってきました。
学習アプリで実施したfirebaseのデプロイやサーバーの立て方、supbaseへのAPI作成など同じような手順を踏むことでしっかりと知識として定着してきた実感があります。
一回だけでなく、何回も繰り返すことが大事ですねっ！！
昔から試行錯誤で1つ1つ思いついたことを試していく癖があり、なんでバグが起きたか？の原因をよく考えずに色々な記事を見て試しては失敗してを繰り返していました。
今回は、なぜ動かないのかを一旦考えてから自分なりに推測した理由で記事を探したり、AIに聞くなどをしました。
これが本当にうまくハマり、最初から答えに辿り着くなど原因を見つけるスピードが上がったと感じています。
その際、過去に開発した方の記事に本当に助けられました。「うわ、こんなエラー見たことないぞ..」となった時も、エラー文を検索すると1番上に解決策の記事が出てあっさりと次に進むことができました笑
これがなかったら1ヶ月はかかっていたかもしれません…
自分もエラーの記事はなるべく投稿するようにしているのですが、助けてもらう側に立ってようやく意義のある事なんだと実感できています。先人の方々のおかげでスムーズに開発を進めることができ、気持ちよく個人開発が出来ているということは素晴らしい事だと今回しみじみと感じました！！
そのおかげでこの名刺アプリに関しては2週間と少しで完成させることが出来ました！
最近は、できることが増えてきて嬉しいです。
このまま頑張り続けたいと思います！！
ただ！焦らずちゃんと理解してから進むことを意識したいと思います。
本当に、焦る癖があるので…（笑）
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼
Views: 0
