日報#26|JavaScript, classList.toggle()メソッドについて学んだ。

1.本日の作業内容
⬛︎JavaScriptの学習
◼︎1冊で身につくJavaScript入門講座(著者：webクリエイターボックスManaさん)の本の102~109ページを実践しながら読んだ
・classList.toggle()メソッドの使い方を学んだ
・CSSでクラスを用意して(HTMLにはそのクラスは存在しない)、それをJavaScriptで使うという方法を学んだ

◼︎足し算ができる計算機ページを作成してみた
・inputで受け取った文字列を数値に変換するperseFloatについて学んだ
・値を取得するタイミング(コードを書く位置)を間違えるとNaNが表示されることを知った
・正しく入力されていない時のNaNに対してエラー処理を書く方法を学んだ
・constとletを使い分けした

2.直面した問題点
＜問題点＞
・コードは間違っていないはずなのに、結果にNaNが表示される。
・つまりNamberが取得できていない？それとも何かコードにエラーがある？
→何度も確認したけれど、console.logでNumberの取得はできている。計算するコードも間違っていないはず！

＜対応＞
・GitHubcopilotに質問を投げてみた。
・本来であればaddEventListenerでボタンをクリックされた時に入力値を取得して計算するもの。だけれど、clickイベントよりも前に数値を取得するコードを書いていた。
→JavaScriptは上から順番に読まれていくもの。その部分を読んだ時点で数値が入っていない状態だからNaNになる。値は一度しか取得されないため、あとで入力しても反映されない。
・値を取得するコードをaddEventListenerの後に記載することで解決！

3.残っている課題△、進行中の作業⬜︎、明日の予定⬛︎
△HTML, CSS, JavaScriptにまだ慣れていない(実践練習をする)
・HTMLとCSSは主にCodejumpというサイトでwebデザインの練習
・JavaScriptはWebクリエイターManaさんが書かれた
　”1冊で全て身につくJavaScript入門講座”の本を読みながら実装練習

⬜︎CLI家計簿アプリ開発
・機能追加
・コード改善

⬛︎JavaScriptの学習を進める
　(引き続き”1冊で全て身につくJavaScript入門講座”の本を手を動かしながら読み進める)

4.気づき、学び
　基礎的な知識を学ぶことはもちろん大切なことだけれど、同時に実践してみて、ひたすら出会うエラーを解決していくのもとても学びになることに気づいた！とはいえ、そこで基礎的な部分がわかってないと、エラーの意味が理解できないから、やっぱり基礎ってすごく大事。
　inputとoutputのバランスってやっぱりすごく難しい。。でもでも、JavaScriptも若干慣れてきた気がする！この調子で、今週中には一通り基礎を終えたい！