はじめに
JISOUに入会してからReactとJavaScriptを使った初めてのミニアプリ制作として、ToDoアプリを作成しました！
こちらが作成したToDoアプリのサンプルとなります。
機能としては、基本的なToDoアプリに加えて
- 学習内容と学習時間を入力するとリアルタイムで文字が反映される
- 学習記録を登録するたびに合計時間が合計されていく
- 項目が何も入っていない時は「入力されていない項目です」という文字列が出力される
といった形です。
学んだこと
オブジェクト付き配列からデータを取得する方法
今回の課題では今まで習った内容に加えて、「オブジェクトが含まれた配列から特定のプロパティの値を取得し、その値を合計する」といった実装が加わりました。
その際に配列からオブジェクトの値を取り出す点がかなり苦労しました。
私が試した方法としては、一度map構文を使って特定の値の配列を変数化しておき、その変数に計算の処理をするという方法でした。
// studyContentとstudyTimeはそれぞれデータ取得用の変数
const newData = { title: studyContent, time: studyTime };
const newRecords = [...records, newData];
const newTime = newRecords.map((record) => {
return record.time;
});
const newSum = newTime.reduce((current, next) => {
return current + next;
});
このように処理を分けて実装することで思った通りの挙動を実現できました。
予期せぬエラーが出てきても一度落ち着いて原因を切り分けてみること
今回の実装を通して、いくつかConsole上で初見のエラーが出てきたことがありました。
そういった状況の中でも、まずはエラーコードを読んでみておおまかな原因を推測したり、発生したエラーコードを検索してみて原因を調べてみることでエラーを解消して進めることができました。
上記のような対処スキルはReactに限らず必要になってきそうと感じました。
思ったこと・気付き
自分の手で一つずつ機能を追加できることが楽しい
今回の課題の中ではToDoリスト本体に加えて上記のような追加機能をいくつか実装してきました。
その中で最も感じたこととして、想定通りの仕様を実現できた瞬間はとても嬉しかったこと、その過程でエラーと格闘しながら試行錯誤する過程も楽しさを感じたという点でした。
これは全てのことに共通すると思うのですが、勉強する過程では嫌々やるよりも楽しんでやった方がモチベーション維持に繋がり最終的な成果も出やすくなります。
そういった意味でReact開発を「楽しい」と思えたことは一番の収穫でした。
レクチャーを「聞くだけ」では頭に定着しきっていなかった
このアプリを作成する前にインプットとして動画教材を視聴していました。今回作成したアプリでも動画教材で教わった内容と共通する部分がいくつか出てきます。
ですが、動画を視聴し終わった瞬間は完全に理解したと思っていても、いざコードを書こうとすると「あれ...？どう書けばいいんだっけ...？」と迷う箇所がいくつも発生しました。
この経験を通して、学んだことはインプットの満足感で終わらせることなく何かしらアウトプットの機会を設けることで定着度合いが深まることを改めて認識できました。
さいごに
今回の課題を通してReactでモノを作ることの達成感と楽しさを味わえました。
まだ第一歩を踏み出しただけではあるものの、二歩目を踏み出したいというモチベーションを保ったまま学習を進めていきたいと思います。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼