✨ Refactor: Apply React best practices to Games

app/games/slide-puzzle/components/GameBoard.tsx

@@ -8,7 +8,8 @@ export default function GameBoard() {
 	const router = useRouter();
 	const [board, setBoard] = useState<number[]>([]);
 	const [moves, setMoves] = useState(0);
-	const [isComplete, setIsComplete] = useState(false);
+	const isComplete =
+		board.length > 0 && board.every((value, index) => value === index);
 	const [startTime, setStartTime] = useState<number | null>(null);
 	const [difficulty, setDifficulty] = useState<"easy" | "hard">("easy");
 
@@ -65,7 +66,6 @@ export default function GameBoard() {
 		const initialBoard = Array.from({ length: size }, (_, i) => i);
 		setBoard(shuffleBoard(initialBoard));
 		setMoves(0);
-		setIsComplete(false);
 		setStartTime(Date.now());
 	}, [shuffleBoard, difficulty]);
 
@@ -89,23 +89,22 @@ export default function GameBoard() {
 			];
 			setBoard(newBoard);
 			setMoves((prev) => prev + 1);
-
-			// 状態更新後に完成チェックを実行
-			const isCompleted = newBoard.every((value, idx) => value === idx);
-			if (isCompleted) {
-				const finalTime = Date.now() - (startTime ?? 0);
-				setIsComplete(true);
-				setTimeout(() => {
-					router.push(
-						`/games/slide-puzzle/complete?time=${finalTime}&moves=${
-							moves + 1
-						}&difficulty=${difficulty}`,
-					);
-				}, 500);
-			}
 		}
 	};
 
+	// 完成時の処理
+	useEffect(() => {
+		if (isComplete) {
+			const finalTime = Date.now() - (startTime ?? 0);
+			const timer = setTimeout(() => {
+				router.push(
+					`/games/slide-puzzle/complete?time=${finalTime}&moves=${moves}&difficulty=${difficulty}`,
+				);
+			}, 500);
+			return () => clearTimeout(timer);
+		}
+	}, [isComplete, startTime, moves, difficulty, router]);
+
 	// シャッフルボタンのクリックハンドラ
 	const handleShuffle = () => {
 		initializeBoard();

app/guess-number/GuessNumber.tsx

@@ -10,7 +10,8 @@ const numbers = [
 ];
 
 export const GuessNumber = () => {
-	const [time, setTime] = useState(0);
+	const timeRef = useRef(0);
+	const timeDisplayRef = useRef<HTMLDivElement>(null);
 	const timer = useRef<number | null>(null);
 	const [isStarted, setIsStarted] = useState(false);
 	const [correctNumber, setCorrectNumber] = useState<number>();
@@ -36,29 +37,40 @@ export const GuessNumber = () => {
 					結果をXで共有する
 				</a>
 			</div>
-			<div className={styles.Timer}>{time.toFixed(1)}s</div>
+			<div className={styles.Timer} ref={timeDisplayRef}>
+				0.0s
+			</div>
 			<button
 				className={styles.StartButton}
 				type="button"
 				onClick={() => {
 					if (isStarted) {
 						setIsStarted(false);
-						setTime(0);
+						timeRef.current = 0;
+						if (timeDisplayRef.current) {
+							timeDisplayRef.current.textContent = "0.0s";
+						}
 						setSerif("もう一回あそぶ？❤");
 						if (timer.current !== null) {
 							window.clearInterval(timer.current);
 						}
 					} else {
 						setIsStarted(true);
-						setTime(0);
+						timeRef.current = 0;
+						if (timeDisplayRef.current) {
+							timeDisplayRef.current.textContent = "0.0s";
+						}
 						setCount(0);
 						setCorrectNumber(
 							numbers[Math.floor(Math.random() * numbers.length)],
 						);
 						updateResetKey();
 						setSerif("数字をえらんで❤");
 						timer.current = window.setInterval(() => {
-							setTime((prev) => (prev * 10 + 1) / 10);
+							timeRef.current = (timeRef.current * 10 + 1) / 10;
+							if (timeDisplayRef.current) {
+								timeDisplayRef.current.textContent = `${timeRef.current.toFixed(1)}s`;
+							}
 						}, 100);
 					}
 				}}
@@ -97,13 +109,13 @@ export const GuessNumber = () => {
 											window.clearInterval(timer.current);
 										}
 										setIsStarted(false);
-										if (time < 5) {
+										if (timeRef.current < 5) {
 											setSerif("すっご～い❤");
 											play("すっごーい");
-										} else if (time < 8) {
+										} else if (timeRef.current < 8) {
 											setSerif("がんばれ❤がんばれ❤");
 											play("がんばれがんばれ");
-										} else if (time < 20) {
+										} else if (timeRef.current < 20) {
 											setSerif("ざぁこ❤");
 											play("ざあこ");
 										} else {