Add: useClient の導入

components/countdown.jsx

@@ -2,6 +2,8 @@
 
 // next
 import React from "react";
+// hooks
+import useClient from "@/hooks/client";
 // styles
 import styles from "./countdown.module.scss";
 
@@ -10,24 +12,22 @@ export const FES_START = FES_FIRST_DAY + 9 * 3600000; // 09:00
 export const FES_END = FES_FIRST_DAY + 86400000 + 18 * 3600000; // 18:00
 
 const Remaining = () => {
-  const [now, setNow] = React.useState();
+  const isClient = useClient();
+  const [now, setNow] = React.useState(Date.now());
   React.useEffect(() => {
-    setInterval(() => setNow(Date.now()), 1000);
-  }, []);
+    if (isClient) setInterval(() => setNow(Date.now()), 1000);
+  }, [isClient]);
 
-  if (now === undefined) {
-    setTimeout(() => setNow(Date.now()), 0);
-    return <></>;
-  } else
-    return (
-      <>
-        あと
-        <span className={styles.number}>
-          {1 + Math.floor((FES_FIRST_DAY - now) / 86400000)}
-        </span>
-        日！
-      </>
-    );
+  if (!isClient) return <></>;
+  return (
+    <>
+      あと
+      <span className={styles.number}>
+        {1 + Math.floor((FES_FIRST_DAY - now) / 86400000)}
+      </span>
+      日！
+    </>
+  );
 };
 
 const Countdown = () => {

components/layout/header.jsx

@@ -1,22 +1,14 @@
 // SPDX-License-Identifier: MIT
 
-// react
-import React from "react";
+// hooks
 import { useMediaQuery } from "react-responsive";
+import useClient from "@/hooks/client";
 // components
 import Link from "@/components/base/link";
 import Menu from "./menu";
 // styles
 import styles from "./header.module.scss";
 
-const useClient = () => {
-  const [isClient, setIsClient] = React.useState(false);
-  React.useEffect(() => {
-    if (typeof window !== "undefined") setIsClient(true);
-  }, []);
-  return isClient;
-};
-
 const Header = ({ setScrollable }) => {
   const isClient = useClient();
   const isNarrow = useMediaQuery({ query: "(max-width: 600px)" });

hooks/client.js

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: MIT
+
+// react
+import React from "react";
+
+/**
+ * ブラウザでのレンダリング時かを判定するフック
+ * window が定義されているかどうかで調べます。
+ * @return {boolean} レンダリング時かどうか
+ */
+const useClient = () => {
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window !== "undefined") setIsClient(true);
+  }, []);
+  return isClient;
+};
+
+export default useClient;

jest.config.js

@@ -15,6 +15,7 @@ const customJestConfig = {
     "^@/package": "<rootDir>/package",
     "^@/next-seo.config": "<rootDir>/next-seo.config",
     // Handle module aliases (this will be automatically configured for you soon)
+    "^@/hooks/(.*)$": "<rootDir>/hooks/$1",
     "^@/components/(.*)$": "<rootDir>/components/$1",
     "^@/pages/(.*)$": "<rootDir>/pages/$1",
   },

jsconfig.json

@@ -4,6 +4,7 @@
     "paths": {
       "@/package": ["package"],
       "@/next-seo.config": ["next-seo.config"],
+      "@/hooks/*": ["hooks/*"],
       "@/components/*": ["components/*"],
       "@/pages/*": ["pages/*"]
     }