このアプリ作成までにやったこと
・React学習歴は合計2週間ぐらい（以前同じ講座を途中まで進めたことがある）
・Udemyの初心者向けReact講座1本を11日かけてインプット
・上記講座内のハンズオンで作成するTODOアプリを動画を見ずに自力で作成
作ったもの
実装機能
- 入力内容のリアルタイム表示
- 登録した内容の一覧表示
- 未入力項目がある場合のエラー表示
- 累計学習時間の表示
スタイルなしのシンプルな学習記録アプリを作成。
Reactのstate機能やJavaScriptの基礎的な記法を使用。
以前から成長したところ
誰かに質問したり類似アプリのチュートリアルを確認したりせず、完全に自力で作成できた。
工夫したところ
論理演算子を使用したエラー表示方法
エラー表示機能を簡潔に記述したかったため、論理演算子を使用した条件分岐を実装した。
{error && <p>{error}</p>}
つまづいたところ
reduceメソッドの使い方
累計学習時間の表示機能を実装する際にreduceメソッドを使用したが、引数のコールバック関数のそれぞれの引数がどのタイミングでどんな値を持っているのかいまいち掴めずに困った。
感想
- アウトプットめちゃ大事！！！インプットした内容が整理されるので、学習内容が定着しやすい気がします。
- React学習を始めて1週間ぐらいでこのアプリを自力で作成したのですが、React基礎を学んだ直後なのですらすらと実装でき「自分でもアプリが作れるんだ！」とかなりワクワクしました！
- 自分でReactを扱っている感覚を味わいながら成長している実感が得られて、学習を進める上でのモチベーションになってくるので、アプリの規模は気にせずとにかく手を動かして何かを作ってみるのがとても大切だと思いました。
- 今回つまづいたredeceメソッドのように、アプリ制作をしながら不足している技術や知識をインプットしていくのが効率の良い勉強方法だと思いました。
- Reactは素のJavaScriptと比較して、めちゃめちゃ楽に記述できるのとコードがシンプルになって読みやすいところがめちゃめちゃいいなーーとReactにハマりそうな予感がしています。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼