三目並べはシンプルですが、フロントエンド ラウンドで最もよく質問されます。なぜ ？

新卒の頃、特にフロントエンドの役割で、面接でよく聞かれる質問として三目並べに遭遇しました。これは、受験者のフロントエンド開発スキル、論理的思考、データ構造とアルゴリズムを使用した問題解決能力を効果的にテストする多用途の問題です。

理解を確実にするために、私は三目並べを自分で実行することにしました。単純なゲームのように見えるかもしれませんが、堅牢なソリューションを作成するには、いくつかの要素を慎重に検討する必要があります。

私のコードを喜んで共有し、私のアプローチを説明したいと思います。成長には知識の共有が不可欠であり、解決策について話し合うことが貴重な洞察と改善につながる可能性があると私は信じています。

App.jsx

import "./App.css"
import TicTacToe from "./components/TicTacToe"
const App = () => {
  return (
    <div >
        <TicTacToe />
    </div>
  )
}
export default App

三目並べ.jsx

import useTicTacToe from "../hooks/useTicTacToe"

const TicTacToe = () => {

    const {board, handleClick, getStatusMessage, resetGame} = useTicTacToe();

    return (
        <div className="main">
            <div className="heading">
                <h1>
                    {
                    getStatusMessage()
                    }
                </h1>
                <button onClick={resetGame}>Reset Game</button>
            </div>
            <div className="board">
                {
                    board.map((player, i) => {
                        return <button key={i} onClick={() => handleClick(i)} disabled = {player !== null}>{player}</button>
                    })
                }
            </div>
        </div>
    )
}

export default TicTacToe

カスタム React フック

import { useState } from "react";
const intialGame = () => Array(9).fill(null);

const useTicTacToe = () => {
    const [board, setBoard] = useState(intialGame())
    const [isXNext, setIsXNext] = useState(true);
    const winning_patterns = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,4,8],
        [2,4,6],
        [0,3,6],
        [1,4,7],
        [2,5,8],

    ];
    const calculateWinner = (currentBoard) => {
        for(let i = 0 ; i < winning_patterns.length ; i++) {
            const [a, b, c] = winning_patterns[i];
            if(currentBoard[a] && currentBoard[a] === currentBoard[b] && currentBoard[a] === currentBoard[c]) {
                return currentBoard[a];
            }
        }
        return null;
    }
    const resetGame = () => {
        setBoard(intialGame());
    }
    const getStatusMessage = () => {
        const winner = calculateWinner(board);
        if(winner) return `Player ${winner} Won ?`
        if(!board.includes(null)) return `It's a Draw`
        return `Player ${isXNext === true ? "X" : "O"} Turn`
    }
    const handleClick = (index) => {
        const winner = calculateWinner(board);
        if(winner) return null;
        const newBoard = [...board];
        newBoard[index] = isXNext ? "X" : "O";
        setBoard(newBoard);
        setIsXNext(!isXNext);
    }

    return {board, calculateWinner, resetGame, getStatusMessage, handleClick}
}

export default useTicTacToe;

スタイリング

.board {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.board button {
  font-size: 35px;
}

以上が三目並べはシンプルですが、フロントエンド ラウンドで最もよく質問されます。なぜ ？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。