今回作ったアプリはこんなです
学習内容、時間を登録すると合計時間が算出されるというもの。
登録、編集、削除機能をつけています。
バリデーション機能もあります。
前回との差分
・TypeScriptで型を使ったことで、コードの可読性と保守性を向上
・Jestでモックテストを使った
・Chakra-UIを採用
・モーダルを導入したことで、よりリッチなUIを実現した
前回は型にそれほど注力しませんでしたが、TypeScriptのクラスを使って型にロジックを持つ。ということをしています。
またテストではJestを使ってモックでデータベースに依存しないテストを書きました。
※前回のアプリ作成の記事
(https://qiita.com/shotaqiita/items/832f73f0923b83a0d52b)
3ヶ月前と比べてどう成長したか
Reactの状態管理が怖くなくなった
1ヶ月目、初めてReactでアプリを制作したときは「なぜか値が更新されない！」というエラーに直面しました。しかし、今ではエラーが出た際にその原因を迅速に特定できるようになりました。
親コンポーネントでログを出して問題箇所を特定する方法や、状態を一箇所に集中させることでエラーの原因を絞り込む技術が身につきました。
Chakra-UIが使えるよになった
今までは素のCSSで頑張っていましたが、Chakra-UIでデザインをいい感じに、しかも早く実装できました。
今回のアプリは見た目もすごく気に入っていますし、人気なものがなぜ人気かは触ってみるのが一番分かります。
学習の振り返り
Write Code Every Day
John Resig氏の「Write Code Every Day」が有名ですが、私も毎日コードを書くことのメリットを実感しています。一番のメリットは、前回の作業を思い出す時間が減り、コードを書くことに集中できる点です。
僕の場合、副業やプライベートの予定があり時間が取れない時は10分でもいいからやるようにしています。
10分でも手をつけると結局やりたくなって30分くらいやっていることも多いです。
何かを毎日やることは難しいですが、私はモチベーション管理のために、勉強のコミュニティ「JISOU」で毎日日報を投稿しています。
投稿していないと、「今日はサボったな」と思われてしまうので、サボり防止にもなります。
最後に
3ヶ月間、Reactの学習を続けてきて、たくさんのことを学ぶことができました。
これからはReactの勉強を続けて、実際にユーザーに使ってもらえるアプリ開発を行いたいです。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします:下向き指差し:
https://projisou.jp
参考