はじめに
React学習の一つとしてデジタル名刺アプリを作成しました。
前回作成した学習記録アプリよりもレベルアップしたことは、React Routerを用いて複数ページを作成していることと、バッチ処理を用いてデータ管理を行なっていることです。
作成したアプリ
概要
学習した時間や学習した内容を簡単に記録できるアプリ
使用言語・ライブラリ
Typescript, React
DB
Supabase
テスト
Jest
React-testing-library
その他
Firebase
Github
React Router
実装機能
Homeページ
こちらから名刺登録ページと登録された名刺を検索するページへ遷移できます。
新規登録ページ
新しく名刺を作成することができます。
名刺検索ページ
名刺を作成するときに登録したidで登録済みの名刺を検索できます。
検索された名刺
検索結果の名刺が画面に表示されます。
大変だったこと
こちらのエラー記事にも書いたのですが、バッチファイルを作成してテーブルの削除を一括で行う設定をする時が大変でした。
というのも、エラーがどうして発生しているかはわかっていても、どこをどう直せば問題が解決するか調べてもあまり情報が出てきませんでした。
AIを使ったりしても解決できないときは、何が原因になっていてエラー解決にどういう選択肢があるのかを一度冷静になって整理をしてから進めることが大切だと実感しました。
今回の開発で得た気づき
今回は初めてReact Routerを実装して複数ページを作成しました。React Routerについてはインプット教材で学んだ時にとても難しく感じましたが、実際に今の最新版であるv6を使ってみると意外とシンプルに実装ができたので難しいイメージが変わりました。
また、少し前まではエラーが出てすぐに解決できないと落ち込んで数時間放置してしまったりしていましたが、今はエラーが出ても数時間は何度も色々な方向性で解決策を考えてトライできるようになってきました。筋トレと同じような感じでエラー解決筋的なものが強化されてきたのかもしれません。
おわりに
今回開発を進めていて思ったのは、前まで難しいと感じて時間がかかっていた工程がサクサク進めることができるようになっていることでした。苦手だったテストやデプロイも何度もやっていくうちに慣れるし、こうしたらいいのでは？と自分で考えらえるようになってきました。
JISOUの提供してくれる工程通りに開発を進めるのはこのアプリが最後です。次回からは自分で全て考えてアプリ作成をしていくので、別の新しい壁にぶつかると思いますが、今までのアウトプット経験を活かして一つ一つ解決をしていきたいと思います。
次のアプリを作成したら記事にする予定です。最後まで読んでいただきありがとうございました！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼