React公式チュートリアルの三目並べに追加機能を実装してみた #3（トグルボタンを追加しろ！編）

Last updated at 2023-10-29Posted at 2023-10-18

はじめに

はい、ということでReact公式チュートリアル追加機能実装第三弾やっていきたいと思います。

今回実装する機能はこちら↓
「Add a toggle button that lets you sort the moves in either ascending or descending order.」（日本語訳：動きを昇順または降順に並べ替えることができるトグルボタンを追加する。）です！

、、、、どういう機能だ？？

今のところ機能はこのようになっています。
このボード履歴のボタンの順序を並べ替えられるようになればいい、、のでしょうか？

はい、この記事ではそういうことにしておきましょう。（正しいニュアンスわかる人いたら教えてください(꒪ཀ꒪)）

それでは早速実装に移っていきます！

実装

実装の方針としては、useStateで順序が正になっているか逆になっているか状態を管理してあげます。
正の場合は正の順でボタンを並べる、逆だったら逆の順で並べるようにボタンを描画してあげて、そのステートを切り替えるボタンも実装してあげましょう。

App.js

export default function Game() {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const [isAscending, setIsAscending] = useState(true);  //←追加
  const xIsNext = currentMove % 2 === 0;
  const currentSquares = history[currentMove];

  function handlePlay(nextSquares) {
    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
    setHistory(nextHistory);
    setCurrentMove(nextHistory.length - 1);
  }

  function jumpTo(nextMove) {
    setCurrentMove(nextMove);
  }

  const moves = history.map((squares, move) => {
    const description = move > 0 ? 'Go to move #' + move : 'Go to game start';
    const buttonClass = move === currentMove ? 'game-info-btn current-move' : 'game-info-btn';
    return (
      <li className="game-info-item" key={move}>
        <button className={buttonClass} onClick={() => jumpTo(move)}>
          {description}
        </button>
      </li>
    );
  });

  function toggleSortOrder() {
    setIsAscending(!isAscending);  //←状態を切り替え
  }

  const sortedMoves = isAscending ? moves : moves.slice().reverse();  //←正の順で並べるか、逆の順で並べるか

  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <button className="toggle-button"  onClick={toggleSortOrder}>Toggle Sort Order</button>  //←追加
        <ol className="game-info-list">{sortedMoves}</ol>
      </div>
    </div>
  );
}

そしてデザインも少し整えてあげましょう。

App.css

.toggle-button {
  background-color: #8affc1;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  display: inline-block;
}

.toggle-button:hover {
  background-color: #45ff9c;
}

はい、これで動くようになったかhttp://localhost:3000/で確認してみましょう！

完璧ですね！

ただ、状態を切り替えている処理の箇所は別の書き方でも実装できるのでそちらも紹介しておこうかなと思います。

App.js

function toggleSortOrder() {
    // setIsAscending(!IsAscending); ←さっきの書き方
    setIsAscending(prevIsAscending => !prevIsAscending);// ←新しい書き方
  }

はい、こちらです。
、、、、prevIsAscendingなんてどこにも出てこないじゃん！！と思いますよね。（僕も思います）
ですがどうやらReactの機能で「関数型のstate更新」というものがあるらしいです。
こちらのprevIsAscendingは前のIsAscendingとして扱うことができるとのことです。
つまり、「"前"のステートを表す変数」的なニュアンス、、、
ここら辺の説明に関してはこちらの記事で詳しく説明されていたのでこちらをご参照くださいm(_ _)m

ちょっと話が脱線してしまいましたが、追加機能第三弾も無事実装できたということで今回はこれにて終了です！

次の記事↓

React公式チュートリアルの三目並べに追加機能を実装してみた #4（勝利のマスを強調しろ！編）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

React公式チュートリアルの三目並べに追加機能を実装してみた #3（トグルボタンを追加しろ！編）

はじめに

実装

次の記事↓

他の関連記事↓