はじめに
こんにちは。Reactの学習を始めて3ヶ月強のものです。これまで学習の一環としていくつかミニアプリを作成してきました。
今回はReact Routerを用いたルーティング等が含まれた名刺作成アプリを作成しました。
作成した名刺アプリの挙動は以下のようになります。
使用技術
今回のアプリ制作では以下の技術を新たに取り入れました。
- React Routerを用いたルーティング、パラメータを基準にルーティングする機能
- Supabaseのデータベース上で複数テーブルにまたがったデータのやり取り
- dangerouslySetInnerHTMLを用いてReact上でHTMLを表示させる方法
- サニタイズを用いたXSS対策
- GitHub Actions上でのクーロン機能の実装
その他具体的に使用したライブラリ等は以下になります。
- 【フォーム】React Hook Form
- 【テスト】Jest, React Teesting Library
- 【データベース】Supabase
- 【言語】TypeScript, JavaScript
- 【CI/CD】 GitHub Actions
- 【UIコンポーネント】 Chakra UI
大変だったこと
今回のアプリでは大きく分けて2つの部分で苦労しました。
①DB上の複数テーブルとの紐付け
初期画面のような入力された値とDB上の値が一致しているかの照合や、テーブル上の特定の値を参照して別のテーブルの値を取得するといった実装があり、その部分に苦労しました。
ロジック自体は照合用の関数+別の取得用の関数で実行できるものであり既存の知識の範疇だったものの、その発想に辿り着くまでに時間と労力を要しました。
②テスト作成とデータの型の照合
Jestを用いたテストの経験そのものは前回のアプリ作成を通して行っていたのですが、今回はSupabaseとの連携上、「実際にテーブルに登録されているデータの型」を意識してテストを記述しなくてはいけない点が苦労しました。
一方で、前回と今回のアプリ作成で連続してテストコード作成に苦労した分、どうすればエラーになるのか・どうすればスムーズにテストを書けるのかのノウハウは蓄積できた気がします。
詳しくは次の部分で記載しようと思います。
気づいたこと
①一度使った知識を一定期間空けてもう一度学習することでより頭に入りやすくなった
今回も含めて複数回アプリ制作を行ってきた中で実感したことがあります。
それは、一度詰まったものをもう一度別の場面で使うことで理解度が深まるというものでした。
実際にテストコードの書き方、フォームのバリデーション等は以前のアプリでも実装しましたが時間を空けてもう一度実装することでノウハウの理解度が以前よりも格段に上がりました。
上記の方法は分散学習と呼ばれ、科学的に効果が実証されている勉強法です。
※参考文献
今後も何かを習得したり技術を使いこなしたいときは、一度の勉強だけでなく定期的に時間を空けて復習する習慣を転用させたいと思いました。
②一見難しそうなロジックも「既存の知識の組み合わせ」「ロジックの分解」で解決できることが多い
今回実装したSupabaseのデータ紐付け部分がまさにそうでした。
一見複雑に感じられたり糸口が掴めなさそうなロジックであっても、細かく分解してみると今まで学んだ技術の組み合わせで構成されている部分が多く存在していました。
実際に複数テーブルの紐付けという難しそうな実装も「今までやってきたSupabaseの登録や照合を組み合わせたもの」と気づいてから実装の方法が掴めるようになりました。
今回を通して「ロジックが想像できない実装が出てきた際には一度問題を整理・細分化して既存概念に落とし込む」ことを今後も意識していきたいと思います。
最後に
アプリ制作を重ねるにつれ、最初は全くわからなかった実装やライブラリを少しずつ使いこなせるようになり成長を実感しています。
この調子で更に様々な実装を積み重ねていきたいです。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼