デイトラWeb制作-Day19-　アニメーションいろいろ

今回はちょっと課題感があり、楽しそうです。
アコーディオンとか、ハンバーガーメニューを作ります。
作成していて、覚えておいた方がよさそうなことをメモしておきます。

buttonタグについて

JavaScript、jQueryのクリックイベントに使用するタグは、
「button type="button"」として作成するのが良い。

理由：キーボード操作でカーソルをあてることができるから。

タブキーでカーソル移動できる。

要注意：buttonタグには、必ずtype属性を指定すること！！！

type属性を指定しない場合、デフォルトで type="submit"　となる。

submit: このボタンはフォームのデータをサーバーへ送信します。

MDNより

つまり、意図せず、データが送信されてしまう！
submitでないボタンには、必ず「type="button"」を指定しましょう。

class名は、スタイリング用とJavaScript操作用に分けるとよい

別にしておくと管理しやすい。
JavaScript操作用は「id="js-〇〇"」とか、「class="js-〇〇"」としておくとわかりやすい。

next()メソッドについて

次の兄弟要素を選択するメソッド。
同じ階層にある要素を取得できるが、対象要素の次に配置されている要素だけを取得する
※アコーディオンだと絶対使うね.

topにスクロールする時はマルチセレクタ指定で。

マルチセレクタ指定で html と body　を両方指定する。
理由：ブラウザにより、スクロール対象がhtmlタグのものと、bodyタグになるものがあるので、どっちも指定しておいた方がよい。

//.animate( アニメーションの目的地 , アニメーションにかける時間）
 $("html, body").animate({scrollTop: 0}, 500);

ハンバーガーメニュー表示時に画面スクロールしないようにするには？

やり方は、bodyに overflow: hidden; を指定する。
今回はis-fixedクラスのつけ外しで制御。

body.is-fixed {
  overflow: hidden;
}

formが送信された場合、ページのリロードを無効化する処理を記述

form送信があった場合、ページがリロードされるのでそれを無効化する処理を記述。おまじない的に書く。

$("#js-form").on("submit", function (e) {
  e.preventDefault();

  return false; //なくてもよい
});

最近のブラウザでは、ほとんどの場合 e.preventDefault(); が正しく機能する。なので return false; はなくても問題ない。

text書き換えと、alert表示のタイミング

nameInput.next(".error-message").text("");
alert(`${nameInputValue}さん、こんにちは`);

先にエラーメッセージを非表示にしてから、alertを出したいのですが、アラートを消した後にテキストが変わる。どうしてかな。

copilotに聞いたら、下記の回答。

nameInput.next(".error-message").text("");の行が非同期処理でない限り、通常はこの行が先に実行され、その後にalertが実行されるはずです。しかし、ブラウザのレンダリングのタイミングによっては、DOMの更新が遅れることがあります。

以下のように、setTimeoutを使って少し待機してからalertを表示することで、確実にerror-messageの内容が更新されてからalertが表示されるようにできます。

copilotの回答より

nameInput.next(".error-message").text("");
setTimeout(() => {
  alert(`${nameInputValue}さん、こんにちは`);
}, 0);

提案の通り、setTimeoutを使ってみたが、順番は変わらなかった。しかし、遅らす時間を 0 →　1にしたらできました。0.1でもOK！
たった0.0001秒指定でも、とにかく少しでも遅らせないとダメみたい。微妙なのですね。

あとがき

上のタイミングの件、copilotに教えてあげた。

私：0秒だとだめみたい。0.1ミリ秒なら大丈夫でした。ありがとう。

copilot：了解しました。setTimeoutのタイミングを調整することで、問題が解決したようで良かったです。何か他にお手伝いできることがあれば教えてください。

copilot

ちゃんと会話ができるようになってきた。うれしい。
これからも協力してもらおうと思います。