デイトラWeb制作 -Day21~22-　課題③まで

なんだか急に子育て放棄されたみたいな、、自分で何とかがんばれという課題になりました(笑)　
始めに作ったケーキ屋さんのwebページに、アコーディオンやスクロールトップボタンなどを追加します。

難易度急に高くなったように感じます。でもいろいろ検索しながら、なんとかできた。やったー！
でも合ってるのか、少し不安です。特にJavaScript（jQuery)は、一応動いたのですが、初級はコードレビューがないので、AIにレビューしてもらいました。

変数を使おう

コードの可読性:
コメントが適切に記載されており、コードの意図がわかりやすいです。
ただし、同じ要素を複数回選択しているため、変数に格納して再利用することで、コードの可読性とパフォーマンスを向上させることができます。
パフォーマンスの向上:
jQueryのセレクタを複数回使用しているため、変数に格納して再利用することで、DOM操作の回数を減らすことができます。

何度も使うのでなければ変数にしなくていいかと思ったけど、2回だけでもした方がよさそうです。

変数名に$をつける（？）

必須ではないけど変数名に$をつけた方がいいともいわれました。（const $menuModal =…）
確かにつけたほうが、jQueryオブジェクトということが分かりやすいと思う。検索したら、$をつけるのを推奨している記事もありました。
今の教材ではつけてないしどうしようかな。わかりやすいから使うかもしれない。

デリゲーション

イベントのデリゲーション:
今回のコードでは必要ありませんが、動的に追加される要素に対してもイベントをバインドする場合は、イベントデリゲーションを使用することを検討してください。

デリゲーション？（なんか知らないこと言ってきた。）

イベントのデリゲーションとは、親要素にイベントリスナーを設定し、その親要素内で発生するイベントをキャプチャして処理する方法です。これにより、動的に追加された子要素にもイベントを適用することができます。

やはりパフォーマンスの向上に影響することみたいです。
日本語だと、「移譲」だそうです。イベント委譲。
英語だと、「Event Delegation」。

動的に追加されたコンテンツに対する処理ができる。。これって先日しらべたclick()とon("click")の違いみたいな話。何となくしかまだ理解できないのですが、記憶しておきます。

// 親要素にイベントリスナーを設定
  $(document).on("click", ".js-menuImg", function () {　　…

これ何気に格言

【重要】仕事において「自作 = 正義」ではない

デイトラ

「調べれば簡単に実装できるコードを、数時間〜数日かけて自作する行為は無駄」
その通りですね。わたしやりがちです。だからなかなか進まなかったり。
いっぱいカンニングしよう！（でも安易なコピペはダメ、理解してね。）

あとがき

まだDay22は途中です。
明日からまた電波のない所に行くので、ちょっとお休みします。
次の課題。Notionにコードストックをつくる。