update: 依存関係更新 20260611

package.json

@@ -3,22 +3,24 @@
   "version" : "0.1.0",
   "private" : true,
   "dependencies" : {
-    "@testing-library/dom" : "^10.4.0",
-    "@testing-library/jest-dom" : "^6.6.3",
-    "@testing-library/react" : "^16.3.0",
+    "@testing-library/dom" : "^10.4.1",
+    "@testing-library/jest-dom" : "^6.9.1",
+    "@testing-library/react" : "^16.3.2",
     "@testing-library/user-event" : "^14.6.1",
-    "axios" : "^1.12.2",
-    "bootstrap" : "^5.3.6",
+    "@tsparticles/engine" : "^4.1.3",
+    "@tsparticles/react" : "^4.1.3",
+    "@tsparticles/slim" : "^4.1.3",
+    "axios" : "^1.17.0",
+    "bootstrap" : "^5.3.8",
     "react" : "^18.3.1",
     "react-bootstrap" : "^2.10.10",
     "react-dom" : "^18.3.1",
     "react-fast-marquee" : "^1.6.5",
-    "react-icons" : "^5.5.0",
-    "react-parallax-tilt" : "^1.7.295",
-    "react-router-dom" : "^7.12.0",
-    "react-tsparticles" : "^1.42.2",
+    "react-icons" : "^5.6.0",
+    "react-parallax-tilt" : "^1.7.331",
+    "react-router-dom" : "^7.17.0",
     "typewriter-effect" : "^2.22.0",
-    "web-vitals" : "^4.2.4"
+    "web-vitals" : "^5.3.0"
   },
   "scripts" : {
     "start" : "vite",
@@ -46,8 +48,8 @@
     ]
   },
   "devDependencies" : {
-    "@vitejs/plugin-react" : "^4.4.1",
-    "vite" : "6.4.0",
+    "@vitejs/plugin-react" : "^4.7.0",
+    "vite" : "6.4.3",
     "vite-plugin-html" : "^3.2.2"
   }
 }

src/components/Particle.jsx

@@ -1,67 +1,62 @@
-import React from "react";
-import Particles from "react-tsparticles";
+import React, { useMemo } from "react";
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+
+// init コールバックは ParticlesProvider のライフサイクル全体で
+// 安定した参照である必要があるため、モジュールスコープで定義する。
+const initParticles = async (engine) => {
+  await loadSlim(engine);
+};
 
 function Particle() {
-  return (
-    <Particles
-      id="tsparticles"
-      params={{
-        particles: {
-          number: { value: 40, density: { enable: true, value_area: 800 } },
-          color: { value: "#0c0513" },
-          shape: {
-            type: "circle",
-            stroke: { width: 0, color: "#0c0513" },
-            polygon: { nb_sides: 5 },
-            image: { src: "img/github.svg", width: 100, height: 100 },
-          },
-          opacity: {
-            value: 0.2,
-            random: false,
-            anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false },
-          },
-          size: {
-            value: 3,
-            random: true,
-            anim: { enable: false, speed: 40, size_min: 0.1, sync: false },
-          },
-          line_linked: {
-            enable: true,
-            distance: 150,
-            color: "#0c0513",
-            opacity: 0.4,
-            width: 1,
-          },
-          move: {
-            enable: true,
-            speed: 3,
-            direction: "none",
-            random: false,
-            straight: false,
-            out_mode: "out",
-            bounce: false,
-            attract: { enable: false, rotateX: 600, rotateY: 1200 },
-          },
+  const options = useMemo(
+    () => ({
+      particles: {
+        number: { value: 160, density: { enable: true } },
+        color: { value: "#0c0513" },
+        shape: { type: "circle" },
+        opacity: { value: 0.2 },
+        size: { value: { min: 1, max: 3 } },
+        links: {
+          enable: true,
+          distance: 150,
+          color: "#0c0513",
+          opacity: 0.4,
+          width: 1,
+        },
+        move: {
+          enable: true,
+          speed: 3,
+          direction: "none",
+          random: false,
+          straight: false,
+          outModes: { default: "out" },
+        },
+      },
+      interactivity: {
+        detectsOn: "canvas",
+        events: {
+          onHover: { enable: true, mode: "repulse" },
+          onClick: { enable: true, mode: "push" },
+          resize: { enable: true },
         },
-        interactivity: {
-          detect_on: "canvas",
-          events: {
-            onhover: { enable: true, mode: "repulse" },
-            onclick: { enable: true, mode: "push" },
-            resize: true,
-          },
-          modes: {
-            grab: { distance: 400, line_linked: { opacity: 1 } },
-            bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
-            repulse: { distance: 200, duration: 0.4 },
-            push: { particles_nb: 4 },
-            remove: { particles_nb: 2 },
-          },
+        modes: {
+          grab: { distance: 400, links: { opacity: 1 } },
+          bubble: { distance: 400, size: 40, duration: 2, opacity: 8 },
+          repulse: { distance: 200, duration: 0.4 },
+          push: { quantity: 4 },
+          remove: { quantity: 2 },
         },
-        retina_detect: true,
-      }
-      }
-    />
+      },
+      detectRetina: true,
+    }),
+    []
+  );
+
+  return (
+    <ParticlesProvider init={initParticles}>
+      <Particles id="tsparticles" options={options} />
+    </ParticlesProvider>
   );
 }