fix eslint config

Author: u-sho

eslint.config.mjs

@@ -1,20 +1,20 @@
-import { FlatCompat } from '@eslint/eslintrc';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import typescript from 'eslint-config-next/typescript';
+import prettier from 'eslint-config-prettier';
 
-const compat = new FlatCompat({
-  baseDirectory: import.meta.dirname
-});
-
-const eslintConfig = [
-  ...compat.extends('next/core-web-vitals', 'next/typescript', 'prettier'),
-  {
-    ignores: [
-      'node_modules/**',
-      '.next/**',
-      'out/**',
-      'build/**',
-      'next-env.d.ts'
-    ]
-  }
-];
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...typescript,
+  prettier,
+  // eslint-config-nextのデフォルト無視設定をオーバーライドします。
+  globalIgnores([
+    'node_modules/**',
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts'
+  ])
+]);
 
 export default eslintConfig;

package-lock.json

@@ -20,7 +20,8 @@ import {
   useRef,
   useState,
   useImperativeHandle,
-  type MouseEventHandler
+  type MouseEventHandler,
+  useMemo
 } from 'react';
 import { env } from 'process';
 
@@ -53,19 +54,16 @@ export const GameBoard = forwardRef(function GameBoard(
   ref
 ) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [distanceX, setDistanceX] = useState(
-    (canvasWidth - 2 * paddingX) / (size - 1)
+  const distanceX = useMemo(
+    () => (canvasWidth - 2 * paddingX) / (size - 1),
+    [canvasWidth, paddingX, size]
   );
-  const [distanceY, setDistanceY] = useState(
-    (canvasHeight - 2 * paddingY) / (size - 1)
+  const distanceY = useMemo(
+    () => (canvasHeight - 2 * paddingY) / (size - 1),
+    [canvasHeight, paddingY, size]
   );
   const [gameRecord, setGameRecord] = useState<GoData>([]);
 
-  useEffect(() => {
-    setDistanceX((canvasWidth - 2 * paddingX) / (size - 1));
-    setDistanceY((canvasHeight - 2 * paddingY) / (size - 1));
-  }, [canvasHeight, canvasWidth, paddingX, paddingY, size]);
-
   const getCtx = (): CanvasRenderingContext2D => {
     const canvas: HTMLCanvasElement | null = canvasRef.current;
     if (!canvas?.getContext) throw new Error('Something may happen.');