使用したツール

React
Javascript
VSCode
Vite

作成したアプリの内容

アプリの内容を簡単にご紹介します。
①学習内容と学習時間をユーザーが入力できるようにする。

②そして入力した内容が、入力ボックス下へ表示されるようにします。

③最後に登録ボタンを押すと、学習記録として一覧表示されるようになります。

④ボタンの下には登録した勉強時間の合計を表示させています。

⑤入力ボックスが空の時にはエラーが表示されます。

作成中につまづいた部分

オブジェクトの理解が曖昧

インプットをしているときはすんなり理解できるのですが、いざ手を動かすときに「どうだったっけ？」と思ってしまうのがオブジェクトだとわかりました。
オブジェクトを変数に代入するなどはわかるのですが、実際にその代入された変数から値を取り出して使うという形になると理解が曖昧で使いこなせないのです。

今回はmapやreduce関数で配列の中にあるオブジェクトから中身を取り出して画面表示させています。
ただ、こういう場合に「オブジェクトから意図した値をどう取り出すんだろう」となり色々調べていました。
オブジェクトや配列の部分に関しては、自分なりに調べて一度他の記事にまとめていきたいと思います。

結局公式ドキュメントを最初に見るべきかも

上記のように今回reduce関数を使用しているのですが、初めて使う関数だったのでWebサイトで情報を探していました。
すると、あるサイトに以下のコードが紹介されていました。

配列.reduce(function(累積値, 要素) { })

上記のコードを使ってみて、画面を見ると全然動かない。。。という結果になってしまいました。

その後、公式ドキュメント (公式といえないかもですが)をみてみると、
以下のように紹介されていました。

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

違いはどこかというと初期値の部分です。
前のサイトでは初期値の設定がされておらず、わかるまで少し時間がかかってしまいました。
初期値0を設定して修正をしてみると、すんなりうまくいき解決できました。

他のサイトは公式サイトよりもわかりやすいという利点があるので、今後の流れとしてはまずは公式ドキュメントを参考にして、他のサイトは公式ドキュメントの参考としていきたいと思います。

さいごに

今回アプリを作ってみて、実際にインプットしたことを早速活かせるので「すごく楽しい」と思いながら進めることができました。
今まではインプットした後何もせず放置していたので、いかに自分の理解を確かめる機会を作っていなかったかということが改めてわかりました。

インプットを数日でささっと終わらせてその後すぐにアウトプットをするというのは、どの勉強法にも通じると思うので今後他の勉強にも応用して実践を重ねていきます。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

インプットから即アプリ作成を実施