hooksに置き換え

tic-tac-toe-app/src/components/board/Board.tsx

@@ -1,10 +1,10 @@
-import { SquareValue } from "../square/Square";
+import { Mark } from "../square/Square";
 import { BoardRaw } from "./BoardRaw";
 
 type BoardProps = {
   rawSize: number;
   columnSize: number;
-  squares: SquareValue[];
+  squares: Mark[];
   onClick: (i: number) => void;
 };
 

tic-tac-toe-app/src/components/board/BoardRaw.tsx

@@ -1,9 +1,9 @@
-import { Square, SquareValue } from "../square/Square";
+import { Square, Mark } from "../square/Square";
 
 type BoardRawProps = {
   rawIndex: number;
   columnSize: number;
-  squares: SquareValue[];
+  squares: Mark[];
   onClick: (i: number) => void;
 };
 
@@ -13,11 +13,11 @@ export const BoardRaw = (props: BoardRawProps) => {
 
   return (
     <div className="board-row">
-      {props.squares.slice(start, end).map((value, index) => {
+      {props.squares.slice(start, end).map((mark, index) => {
         return (
           <Square
             key={index}
-            value={value}
+            mark={mark}
             onClick={() => props.onClick(start + index)}
           />
         );

tic-tac-toe-app/src/components/game/Game.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useReducer } from "react";
 import { Board } from "../board/Board";
-import { SquareValue } from "../square/Square";
+import { Mark } from "../square/Square";
 import { GameInfo } from "./GameInfo";
 import { GameState, gameReducer } from "../../reducers/gameReducer";
 
 export type GameHistory = {
-  squares: SquareValue[];
+  squares: Mark[];
 };
 
 const initialHistory: GameHistory[] = [
@@ -26,7 +26,7 @@ export const Game = () => {
   const columnSize = 3;
 
   const handleClick = useCallback((squareIndex: number) => {
-    dispatch({ type: "add_value", squareIndex: squareIndex });
+    dispatch({ type: "add_mark", squareIndex: squareIndex });
   }, []);
 
   const jumpTo = useCallback((step: number) => {

tic-tac-toe-app/src/components/square/Square.tsx

@@ -1,13 +1,13 @@
-export type SquareValue = "X" | "O" | null;
+export type Mark = "X" | "O" | null;
 type SquareProps = {
-  value: SquareValue;
+  mark: Mark;
   onClick: () => void;
 };
 
 export const Square = (props: SquareProps) => {
   return (
     <button className="square" onClick={props.onClick}>
-      {props.value}
+      {props.mark}
     </button>
   );
 };

tic-tac-toe-app/src/reducers/gameReducer.ts

@@ -8,11 +8,11 @@ export type GameState = {
   xIsNext: boolean;
 };
 export type GameAction =
-  | AddValueAction 
+  | AddmarkAction 
   | JumpHistoryAction
 
-type AddValueAction = {
-  type: "add_value"; 
+type AddmarkAction = {
+  type: "add_mark"; 
   squareIndex: number; 
 }
 
@@ -26,7 +26,7 @@ export const gameReducer: React.Reducer<GameState, GameAction> = (
   action: GameAction
 ) => {
   switch (action.type) {
-    case "add_value": {
+    case "add_mark": {
       const updatedHistory = state.history.slice(0, state.stepNumber + 1);
       const current = updatedHistory[state.stepNumber];
       const squares = current.squares.slice();

tic-tac-toe-app/src/usecases/CalculateWinner.ts

@@ -1,6 +1,6 @@
-import { SquareValue } from "../components/square/Square";
+import { Mark } from "../components/square/Square";
 
-export const calculateWinner = (squares: Array<SquareValue>) => {
+export const calculateWinner = (squares: Array<Mark>) => {
   const lines = [
     [0, 1, 2],
     [3, 4, 5],