【もりけん塾 @JS課題24】会員登録ページの作成利用規約をチェック編

2022/02/04

管理人

こんにちは、さえと申します👩‍💻
現在フロントエンドエンジニアになるために日々勉強をしています
このブログはその勉強の記録とアウトプットのために運営をしています✨

現在、もりけん塾で
マークアップエンジニアの方がフロントエンドエンジニアになる為の課題に取り組んでいます。
今回は課題24の実装で学んだことをブログへまとめます

課題24

会員登録画面の実装

仕様

バリデーションはここではなし
ユーザー名、メールアドレス、パスワードの入力欄と利用規約に関するチェックボックスがある。
送信ボタンがあるが振るまいの実装はしないで良い
利用規約のテキストを押すと、モーダルが立ち上がり、ダミーの利用規約がテキストとして読める。スクロールが一番下に行ったらチェックボックスはcheckedになる。もし開いてもスクロールが下まで行っていなければcheckedはfalseのまま
checkedがtrueの場合送信ボタンを押下すると別ページのregister-done.htmlに飛ぶ
register-done.htmlは画面は適当で、遷移できていることが分かれば良い。CSSも書かないでも良い

制作物

https://codesandbox.io/s/lesson24-moufq

IntersectionObserver

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

モーダル内が最後までスクロールされたかを判断するために、IntersectionObserverを使用しました

const scrollInModalContent = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      checkBox.checked = true;
      checkBox.disabled = false;
      scrollInModalContent.disconnect();
    }
  },
  { root: modalContent }
);
scrollInModalContent.observe(modalContent.lastElementChild);

ターゲットをmodalContent.lastElementChildとし、モーダル内の最後の要素を指定しました。
ルートには、modalContent(モーダルの利用規約の部分)を指定しました。

entry.isIntersectingは交差が発生したかを真偽値で返し、
trueであれば checkboxのcheckedをtrueにし、disabledをfalseに切り替えます。

disconnect()はターゲットの監視を終了するメソッドです。
今回は一度交差が発生し、callbackが実行されたあとはもう必要ないと考え、このメソッドを使用しました

IntersectionObserverはもりけん塾に入塾当初に教えて頂き、ブログにも復習としてまとめました

https://itosae.com/intersection-0bserver/

見返すと、この当時理解できていなかったことが今はわかる様になっていることがいくつかありました

即時関数は必要

モーダルの開閉部分を以下の様に即時関数を使用して実装していました

(function () {
  const overLay = document.getElementById("js-overlay");
  const closeButton = document.getElementById("js-modal-close");
  const rules = document.getElementById("js-rules");
  const body = document.querySelector("body");
const closeModal = () => {
  body.classList.remove("modal-open");
};

  const closeModal = () => {
    body.classList.remove("modal-open");
  };
const openModal = () => {
  body.classList.add("modal-open");
};

  const openModal = () => {
    body.classList.add("modal-open");
  };

  rules.addEventListener("click", openModal);
  closeButton.addEventListener("click", closeModal);
  overLay.addEventListener("click", closeModal);
})();

即時関数を使用した理由はグローバル定義の数を減らすためと、他から参照する予定がないためです。

これに対してもりけん先生からのレビューで、
windowオブジェクトを実際に調べてみてくださいとコメントを頂きました

windowオブジェクトやconstについて調べると、

const で定義した変数は windowオブジェクトのプロパティにはないことがわかりました
その為、即時関数を使用した理由として述べた “グローバル定義の数を減らすためです” はおかしいことに気がつきました。
また、即時関数はvarの様にブロックスコープを持たない時によく使用されることもわかりました
今回は即時関数であることのメリットはあまり感じられないと判断し、修正をしました

レビューがなければ誤った知識でいるところでした。
もりけん先生ありがとうございます
こういった基本的な知識は誤った知識でいると、後々自分を苦しめることになるとおもいます。
なんども復習したり、もう少し深く調べたりして知識を深くしていきたいです

もりけん塾でJavaScriptを学習をしています！
もりけん先生のTwitter：https://twitter.com/terrace_tech

https://kenjimorita.jp/

【もりけん塾 @JS課題24】会員登録ページの作成 利用規約をチェック編

課題24

制作物

IntersectionObserver

即時関数は必要

【もりけん塾 @JS課題24】会員登録ページの作成利用規約をチェック編