ReactとモダンJavaScriptの基礎を学んだので、アウトプットとして簡易な学習記録アプリの制作を行いました。
制作開始から完成まで
最初はAIコードエディタを使用して制作を始めたのですが、なんでもかんでもAIがやってくれるので これでは勉強にならない！ と気付いてVSCodeに戻って一からやり直しました。
が、まず何から書き始めればいいのかわからず、インプット教材として使用したUdemy動画や、そのさいに書いたコードを見直しながら書き始めました。
ハマったところもありましたが、何とか形になるものが出来上がりました。
しかし、理屈がよくわからないままコードを継ぎ接ぎした感がどうしても否めず、コードを見直しながら理解の弱い点についてはUdemyを見返して復習しました。
気付き・学び
気付きというかほぼ反省ですが……
- 初学者はAI頼み、ダメゼッタイ。使用するにしても検索の補助程度にすべし。
- 「どんな動作・機能を実現したいのか？」を分解して考えないと一からコードは書けない。
- インプットはかなり意識しないと右から左に抜けてしまう。
- アウトプットも復習の面を意識しないとただの写経に終わる。
苦労した点
- 当初はState周りがなかなか理解できず、データの受け渡しが全くイメージできなかった。
- そのせいか、時間を積算するために使用した
parseIntを入れる場所がわからない、というようなことが起きた。 - 2つあるフォームのいずれかが未入力の場合、エラーメッセージが表示されるようにしたが、一度表示されたメッセージを消す方法がわからず、かなり時間を費やした。詳細は下記記事。
成長を感じた点
- Stateの理解がかなり進んだ。元々Javaを学習していた頃からデータの扱い方は苦手だったのだが、今回の制作を通じてプログラミングにおけるデータの扱い方についてようやくわかってきた。
- 実際に手を動かし、復習を重ねることで「なんとなくわかった」から脱することができた。
- 自分で試行錯誤して一つのものを作ったことで、自信につながった。
おわりに
正確な時間は計っていないのですが、トータルで8時間くらいはかかったのではないでしょうか。
制作中はずっとうんうん唸っていましたが、振り返るとなんだかんだで楽しかったです。
なにより、独学でJavaScriptやReactを勉強して挫折したときに全く理解できなかったことがわかるようになったことは嬉しいですね。
再レンダリングなどまだ理解ができていない部分がまだまだあるので、これからも学習を続けていきたいと思います！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼