はじめに
以前に作った学習記録アプリをアップデートし、新規機能を追加したりUIコンポーネントを採用したデザインを実装したものを作成しました。
実際の動きとしては以下のようなものです。
何をやったのか
今回のアプリ制作では以下の内容を実装に取り入れました。
- TypeScriptを用いたアプリ内のデータに型定義を導入
- Chakra UIを用いたUIコンポーネントの実装
- React Hook Formを用いたフォーム内のバリデーション
- Jestのモック関数を用いて、実際にデータベースと連携しなくても実行できるテストコードの作成
- Chakra UI内の同じコンポーネント内で処理を変える動作の実装(追加と編集)
いずれも今回のアプリ作成を通して初めて触れるものばかりで当初は何をすればいいか見当がつかず苦戦していました。
ですが、最終的には試行錯誤を通して形になるものを作り上げることができ、自分の中で貴重な経験とノウハウを得ることができました。
大変だったこと/工夫したこと
未体験のツールへの対応方法
今回のアプリの中でReact Hook Form、モック関数など未体験のツールを用いた実装が必要となる箇所がいくつか発生しました。
初見で苦労するところが多く発生する中で、以下の方法を試してみました。
①公式ドキュメント上のサンプルコードを有効活用する
公式ドキュメントにはQuick Startのようなサンプルコードがあります。
どうしても手掛かりが掴めない際には、Quick Startのコードをコピペしてみて一部の値を変えながらどの部分が実際に変わるのかを検証しながら進めました。
その際にわからない部分は公式ドキュメントや各種記事を見て理解を深めるようにしました。
サンプルコードは公式が提供してくれる最高の教材と言ってもいいものでした。実装や理解を進める上で大きな味方になってくれました。
②ChatGPTを有効活用する
公式ドキュメントやWebの記事だけではどうしても理解が追いつかない部分もあります。その際は適宜ChatGPTの力を借りるのも有用でした。
ただしChatGPTを丸写ししただけでは実力がつかないので、『答えではなくヒントを得るための質問にすること』と『どうしても答えを聞く場合は実装理由も細かく聞く+あとで調べる』ことは意識していました。
はじめはAIの力を借りていたとしても次に実装する時は自分の頭で理解している状態を目指すようにしていました。
非同期処理の概念をより実感できた
今回の実装の中では、
- データベース(supabase)との連携
- そのための関数の作成、アプリ上の
useEffectでの非同期対応 - React Testing Library上のテストコード(
waitForなど)
などで非同期処理が絡む実装箇所が複数存在しました。
非同期処理は概念として難しい箇所ですが、様々な形態で登場するたびにその都度調べてみることで、非同期処理全体の理解が以前よりも深まった気がしています。
気づいたこと
動画を見ただけでは理解しきれない。自分で手を動かす試行錯誤を通して理解度が深まる
今回のアプリ制作を行う前に別の教材でTypeScriptの型定義やモック関数についてはハンズオン教材を見ており、ある程度のノウハウはあるつもりで制作に入りました。
しかし実際に手を動かそうとすると何も覚えていない......という事象が頻発。
結局、ハンズオン教材はあくまでインプットでしかなく、実際にその知識を"使う"ことによって初めてノウハウになるということを改めて実感しました。
バットの正しい振り方の本をいくら読んでも野球の試合でヒットが打てるようにならないのと同じ理屈ですね。
新しい技術・仕事中で理解度が足りていない部分などは再度手を動かしたり誰かに説明するようなアウトプットの機会を設けることが重要と感じました。
実装方法を先に書き出してみるとスムーズに進める
プログラムのロジックや実装を進めるための手掛かりとして実装方法をメモなどに書き出して明示化することがかなり有効でした。
この方法を取ることで暗中模索の中で闇雲に手を動かすことが減り、ゴールから逆算するようなロジックを組める確率が上がりました。
最後に
今回のアプリ実装を通してこれまでインプットしてきた知識やノウハウがスキルとなって血肉になってきた感覚があります。
今後はさらに実践的なアプリ制作をする機会が出てくると思うので、今以上に制作フローの中で学びを増やしていきたいです。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼