スクロールを間引くように変更

develop/package-lock.json

@@ -18,7 +18,6 @@
         "imagemin-mozjpeg": "^9.0.0",
         "imagemin-pngquant": "^9.0.2",
         "imagemin-svgo": "^10.0.0",
-        "lodash": "^4.17.21",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.3.11",
         "postcss-cli": "^9.1.0",
@@ -34,8 +33,7 @@
         "webpack-cli": "^4.9.1"
       },
       "devDependencies": {
-        "gsap": "^3.8.0",
-        "jquery": "^3.6.0"
+        "gsap": "^3.8.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
@@ -5303,12 +5301,6 @@
         "node": ">= 10.13.0"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "dev": true
-    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -13529,12 +13521,6 @@
         "supports-color": "^8.0.0"
       }
     },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "dev": true
-    },
     "js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",

develop/package.json

@@ -45,6 +45,7 @@
     "pug-cli": "github:pugjs/pug-cli#master",
     "rimraf": "^3.0.2",
     "sass": "^1.43.5",
+    "throttle-debounce": "^5.0.0",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.2",
     "webpack": "^5.64.1",

develop/src/assets/js/home.js

+import { throttle } from "throttle-debounce";
 class Home {
   constructor() {
     this.modal();
@@ -23,7 +24,7 @@ class Home {
     }
 
     // モーダルを非表示にする
-    closebutton.addEventListener("click", function () {
+    closebutton.addEventListener("click", () => {
       body.classList.remove("open");
       modalBack.classList.remove("open");
       for (let i = 0; i < modal.length; i++) {
@@ -34,22 +35,25 @@ class Home {
     function menuClick() {
       body.classList.remove("open");
       modalBack.classList.remove("open");
-      const hogeElements = document.querySelectorAll(".modal");
+      const mpdalElements = document.querySelectorAll(".modal");
 
-      hogeElements.forEach((item) => {
+      mpdalElements.forEach((item) => {
         item.classList.remove("open");
       });
     }
 
     const closeTrigger = document.querySelectorAll(".closeButton");
     closeTrigger.forEach((item) => {
-      item.addEventListener("click", menuClick, false);
+      item.addEventListener("click", menuClick);
     });
   }
 
   // フェードイン
   fadeIn() {
-    function scroll_effect() {
+    window.addEventListener(
+      "scroll",
+      throttle(300, () => {
+        window.addEventListener("scroll", () => {
           var element = document.getElementsByClassName("scrollUp");
           if (!element) return;
 
@@ -63,8 +67,9 @@ class Home {
               element[i].classList.add("is-show");
             }
           }
-    }
-    window.addEventListener("scroll", scroll_effect);
+        });
+      })
+    );
   }
 }