React公式チュートリアルをVueでも書いて比較してみた

<script setup>
  import { ref, computed } from "vue";
  import Board from "./Board.vue";
  import Moves from "./Moves.vue";

  const history = ref([Array(9).fill(null)]);
  const currentMove = ref(0);
  const xIsNext = computed(() => {
    return currentMove.value % 2 === 0;
  });
  const currentSquares = computed(() => {
    return history.value[currentMove.value];
  });

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

  function jumpTo(nextMove) {
    currentMove.value = nextMove;
  }
</script>

<template>
  <div className="game">
    <div className="game-board">
      <Board :xIsNext="xIsNext" :squares="currentSquares" @onPlay="handlePlay" />
    </div>
    <div className="game-info">
      <Moves :history="history" @onMoveClick="jumpTo" />
    </div>
  </div>
</template>

<script setup>
  import { computed } from "vue";
  import Square from "./Square.vue";

  const props = defineProps({
    xIsNext: Boolean,
    squares: Array,
  });

  const emit = defineEmits(["onPlay"]);

  const winner = computed(() => calculateWinner(props.squares));

  const status = computed(() => {
    if (winner.value) {
      return "Winner: " + winner.value;
    } else {
      return "Next player: " + (props.xIsNext ? "X" : "O");
    }
  });

  function calculateWinner(squares) {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  }

  function handleClick(i) {
    if (winner.value || props.squares[i]) {
      return;
    }
    const nextSquares = props.squares.slice();
    if (props.xIsNext) {
      nextSquares[i] = "X";
    } else {
      nextSquares[i] = "O";
    }
    emit("onPlay", nextSquares);
  }
</script>

<template>
  <div class="status">{{ status }}</div>
  <div class="board-row">
    <Square :value="props.squares[0]" @onSquareClick="() => handleClick(0)" />
    <Square :value="props.squares[1]" @onSquareClick="() => handleClick(1)" />
    <Square :value="props.squares[2]" @onSquareClick="() => handleClick(2)" />
  </div>
  <div class="board-row">
    <Square :value="props.squares[3]" @onSquareClick="() => handleClick(3)" />
    <Square :value="props.squares[4]" @onSquareClick="() => handleClick(4)" />
    <Square :value="props.squares[5]" @onSquareClick="() => handleClick(5)" />
  </div>
  <div class="board-row">
    <Square :value="props.squares[6]" @onSquareClick="() => handleClick(6)" />
    <Square :value="props.squares[7]" @onSquareClick="() => handleClick(7)" />
    <Square :value="props.squares[8]" @onSquareClick="() => handleClick(8)" />
  </div>
</template>

<script setup>
  const props = defineProps({
    value: String,
  });

  const emit = defineEmits(["onSquareClick"]);
</script>

<template>
  <button className="square" @click="emit('onSquareClick')">{{ props.value }}</button>
</template>

<script setup>
  import { computed } from "vue";

  const props = defineProps({
    history: Array,
  });

  const emit = defineEmits(["onMoveClick"]);

  const moves = computed(() => {
    return props.history.map((squares, move) => {
      let description;
      if (move > 0) {
        description = "Go to move #" + move;
      } else {
        description = "Go to game start";
      }
      return { description, move };
    });
  });
</script>

<template>
  <ul>
    <li v-for="({ description, move }, index) in moves" :key="index">
      <button @click="emit('onMoveClick', move)">{{ description }}</button>
    </li>
  </ul>
</template>