はじめに
これまで段階的に学習記録アプリを作ってきました。今回は今までに加えてTypescriptとchakraUI、モックを利用したテスト等を導入して大変だった点やここまでの感想を共有できればと思います。
以前の記事達⬇︎
この3週間で学んだこと
今まで作ってきた学習記録アプリで以下のような技術を導入しました。実装だけでなくテスト・デプロイなどアプリ開発に必要な最低限のステップは学習できたかと思います。ちゃんと理解できてるかは別。
- reactの基本
- typescriptの基本
- supabaseでのバックエンド構築
- jestでのテスト
- firebaseでのデプロイ
- github actionsでのCI/CD構築
- react-hook-formの基本
- chakraUIでのスタイリング
完成した学習記録アプリ
今までと大きく違うのはスタイリングにChakraUI、フォームの入力にreact-hook-formを導入している点です。ChakraUIを使うことでモーダルやスピナー等のコンポーネントを利用できるので、簡単にそれっぽいデザインを作れます。またreact-hook-formを使うことで今までuseStateで定義していたinput等の状態管理をせずにフォームを実装できます(バリデーションのエラー表示も楽)。
gifが適当なのはスルーでお願いします
もしこのアプリに機能を加えるとしたら学習記録の検索やページネーション、日付を扱えるようにする、ダークモード対応などでしょうか？(今後本格的なアプリを作る際には導入していきたい)
大変だったこと
基本的な実装はTODOアプリみたいな感じですしこれまで作ってきた学習記録アプリと同じですが、ChakraUIやreact-hook-formは公式ドキュメントがほとんど英語になっているので導入するのが少し大変でした。なのでその辺りは序盤でやったudemyや適宜ネット記事やyoutubeで補完しました。また今回1番時間がかかったのはモックを利用したテスト実装で、google検索やaiに相談してもなかなか手こずりました。ここはメンターの方にも色々教えていただき何とか実装できました。Typescriptは型補完や問題のありそうなとこを警告してくれるのはいいですが慣れるまで少し時間がかかりそうです。(tsconfigの設定周りももう少し知る必要がありそう)
ここまでで得た気づき
アウトプット重視の学習が最速ということを実感
今回の学習記録アプリではreactでの実装だけでなくテストやデプロイ、cicdなどを取り入れました。もしこれらの技術を1つ1つudemy等の教材で学習していくとおそらく3週間では終わらないと思います。最低限のインプットをしたらあとはアウトプットをしながら学んでいくのが最速だということを実感できました。
エラー解決の記事を書くことで将来の自分が助かる
自分は結構環境構築でエラーを出すことが多いのですが、エラー文をググると過去に自分が同じエラーの解決記事を書いていたりすることがあったので、遭遇したエラーの解決記事は他の人だけでなく未来の自分のためにもなるなと思いました。
おわりに
学習記録アプリの作成を通して実装〜デプロイまでの一連の開発を体験できました。まだわからないことだらけですし各技術に対する理解度もそこまでないですが、一通りアプリ開発に必要最低限のステップをこの短期間(3週間くらい)で経験できたので着実に成長できている気がします。今後は世の中に価値を提供できるモノ作りができるように意識して学習していきます。ここまで見てくださりありがとうございました🙇
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします