Vue×TypeScriptでリバーシの作成とAWS Amplifyでの公開

Vue2とTypeScriptを使用してオセロを作成し、Amplifyで公開してみました

AWS Amplifyは、フロントエンドのデベロッパーが AWS でフルスタックアプリケーションをすばやく簡単に構築できるようにする専用のツールとサービスのセットです。Amplify では、ウェブアプリケーション用のJavaScript、React、Angular、Vue、Next.js、モバイルアプリケーション用の Android、iOS、React Native、Ionic、Flutter などの一般的な言語、フレームワーク、およびプラットフォームがサポートされています。

概要

Vue CLIからvue create reversiでプロジェクトを作成。

構成はこんな感じです。

Main.vueが最初の画面で、ゲーム開始を押すとVGameコンポーネントンに移ります。

<button>
  <router-link to="game">ゲーム開始</router-link>
</button>

VGameコンポーネントではBoardコンポーネントを呼び出しています。コンポーネントの親子関係はVGame > Board > Row > Cell　になります。

VGameコンポーネントでは黒と白どちらのターンなのかを管理し、子コンポーネントに渡しています。Cellでその値を受け取り、そのターンの色の石を置くことができます。石を置いたらターンを変え、それをemitしてVGameに返します。

石はすべてのマス(cell)に透明な石がすでに置いてあるイメージで、クリックして石を置くとblackまたはwhiteのcssのクラスが適用されます。

modelフォルダにはboard, row, cellのクラスを用意し、cellが入る配列をboardコンポーネントで用意します。cellクラスはx,yを座標として持ちこれを石を置いたときの判定に利用してます。

export class Board {
  public rows: Row[]
  
  constructor() {
//Rowクラスの入った配列を用意
this.rows = [...Array(8).keys()].map(i => new Row(i))
//ゲーム開始時に置かれた4つの石
    this.rows[3].cells[3].state = CellState.White
    this.rows[3].cells[4].state = CellState.Black
    this.rows[4].cells[3].state = CellState.Black
    this.rows[4].cells[4].state = CellState.White
  }
}

export class Row {
  public cells: Cell[]
//cellのy座標になる
  public rowNumber: number
  
  constructor(rowNumber: number) {
    this.rowNumber = rowNumber
//Rowクラスの配列の中にCellクラスが8つ入っている
    this.cells = [...Array(8).keys()].map(i => new Cell(i, rowNumber))
  }
}

export class Cell {
  public x: number
  public y: number
  public state: CellState = CellState.None

  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }
//もっと続く・・・

石を置けるかどうかの判定はcellクラスで行っており、石を置ける場合は、ひっくり返すことのできる石の座標を配列に入れ、置けない場合はfalseを返します。これをCell.vueのmethodsで石が置けるか確認し、置ける場合は配列に入った座標の石を今のターンの色の変えるように処理しています。

  public checkRightStone(row: Cell[], color: CellState, checkedCell: string[]): boolean | string[] {
    //右端に置いた場合
    if (this.x === 7) {
      return checkedCell
    }
    const rightCell = row[this.x + 1]
    //右隣に石がない
    if (rightCell.state === 'None') {
      return false
    }
    //右隣が同じ色
    if (color === rightCell.state ) {
      checkedCell.push(`${rightCell.x}${rightCell.y}`)
      return checkedCell
    }
    //1つ右隣が自分と違う色かつ石が置いてある
    if (color !== rightCell.state) {
      checkedCell.push(`${rightCell.x}${rightCell.y}`)
      //さらにもう一つ右隣を調査
      if (!rightCell.checkRightStone(row, color, checkedCell)) {
        return false
      }
      rightCell.checkRightStone(row, color, checkedCell)
      return checkedCell
    }
    return false
  }

判定して置ける場合はVue.cellコンポーネントのmethodsにある関数ででクラスを追加してます。

Vue.cell

<template>
  <div :class="cellxy" class="cellSize" @click="putStone()">
    <div class="cell"></div>
    <div class="stone"></div>
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import { Board, Cell, CellState } from "@/model/reversi"

export default Vue.extend({
  props: ["cell", "turn", "reversirow", "reversiboard"],
  data() {
    return {
      reversicell: this.cell as Cell,
      stoneState: this.cell.state as string,
      cellxy: `cell${this.cell.x}${this.cell.y}`,
      playerTurn: this.turn as string,
      row: this.reversirow.cells,
      boardRows: this.reversiboard as Board,
      willBeChangedSideStone: [] as string[],
      willBeChangedUpDownStone: [] as string[],
      willBeChangedSharpeStone: [] as string[]
    }
  },
  mounted() {
    this.addColorClass(`.${this.cellxy}`)
  },
  methods: {
    addColorClass(point: string) {
      this.removeClass(point)
      const cellBox = document.querySelector(point)! as HTMLDivElement
      if (this.stoneState === CellState.None) return
      cellBox.querySelector(".stone")!.classList.add(this.stoneState)
    },
    removeClass(point: string) {
      //石を挟んで色を変えるときクラスを一度削除する
      const cellBox = document.querySelector(point)! as HTMLElement
      if (
        cellBox
          .querySelector(".stone")!
          .classList.contains(CellState.Black || CellState.White)
      ) {
        cellBox
          .querySelector(".stone")!
          .classList.remove(
            CellState.Black || CellState.White || CellState.None
          )
      }
      return
    },
    putStone() {
      if (this.stoneState === CellState.None) {
        this.stoneState = this.turn
        if (this.checkAllWay()) {
          this.playerTurn = this.turn
          this.reversicell.state = this.turn

          this.addColorClass(`.${this.cellxy}`)
          this.changeSideStones()
          this.changeUpDownStones()
          this.changeSharpeStones()
          this.playerTurn === CellState.White
            ? (this.playerTurn = CellState.Black)
            : (this.playerTurn = CellState.White)
          this.$emit("putStone", this.playerTurn)
        }
      }
    },
    checkAllWay() {
      const result1 = this.checkCanPutRight()
      const result2 = this.checkCanPutLeft()
      const result3 = this.checkCanPutUpper()
      const result4 = this.checkCanPutBottom()
      const result5 = this.checkCanPutRightUpper()
      const result6 = this.checkCanPutLeftUpper()
      const result7 = this.checkCanPutRightBottom()
      const result8 = this.checkCanPutLeftBottom()
      if (
        result1 ||
        result2 ||
        result3 ||
        result4 ||
        result5 ||
        result6 ||
        result7 ||
        result8
      ) {
        return true
      } else return false
    },
    changeSideStones() {
      if (this.willBeChangedSideStone.length < 2) return
      for (const xy of this.willBeChangedSideStone) {
        const x = Number(xy.split("")[0])
        const y = Number(xy.split("")[1])
        this.row[x].state = this.turn
        this.addColorClass(`.cell${x}${y}`)
      }
      return
    },
    changeUpDownStones() {
      if (this.willBeChangedUpDownStone.length < 2) return
      for (const xy of this.willBeChangedUpDownStone) {
        const x = Number(xy.split("")[0])
        const y = Number(xy.split("")[1])
        this.boardRows.rows[y].cells[x].state = this.turn
        this.addColorClass(`.cell${x}${y}`)
      }
      return
    },
    changeSharpeStones() {
      if (this.willBeChangedSharpeStone.length < 2) return
      for (const xy of this.willBeChangedSharpeStone) {
        const x = Number(xy.split("")[0])
        const y = Number(xy.split("")[1])
        this.boardRows.rows[y].cells[x].state = this.turn
        this.addColorClass(`.cell${x}${y}`)
      }
      return
    },
    checkCanPutRight() {
      const checkCells: string[] = []
      const checked = this.cell.checkRightStone(this.row, this.turn, checkCells)
      //falseまたは配列の要素が一つの時は石がおけない
      //要素が一つということは、置こうとしている石と同じ色の石が1つ右にある
      if (!checked || checked.length <= 1) return false
      else {
        this.willBeChangedSideStone.push(...checked)
        return true
      }
    },
    checkCanPutLeft() {
      const checkCells: string[] = []
      const checked = this.cell.checkLeftStone(this.row, this.turn, checkCells)

      if (!checked || checked.length <= 1) return false
      else {
        this.willBeChangedSideStone.push(...checked)
        return true
      }
    },
    checkCanPutUpper() {
      const checkCells: string[] = []
      const checked = this.cell.checkUpperStone(
        this.boardRows,
        this.turn,
        checkCells
      )
      if (!checked || checked.length <= 1) return false
      else {
        this.willBeChangedUpDownStone.push(...checked)
        return true
      }
    },
    checkCanPutBottom() {
      const checkCells: string[] = []
      const checked = this.cell.checkBottomStone(
        this.boardRows,
        this.turn,
        checkCells
      )
      if (!checked || checked.length <= 1) return false
      else {
        this.willBeChangedUpDownStone.push(...checked)
        return true
      }
    },
    checkCanPutRightUpper() {
      const checkCells: string[] = []
      const checked = this.cell.checkRightUpperStone(
        this.boardRows,
        this.turn,
        checkCells
      )
      if (!checked || checked.length <= 1) return false
      else {
        this.willBeChangedSharpeStone.push(...checked)
        return true
      }
    },
    checkCanPutLeftUpper() {
      const checkCells: string[] = []
      const checked = this.cell.checkLeftUpperStone(
        this.boardRows,
        this.turn,
        checkCells
      )
      if (!checked || checked.length <= 1) return false
      else {
        this.willBeChangedSharpeStone.push(...checked)
        return true
      }
    },
    checkCanPutRightBottom() {
      const checkCells: string[] = []
      const checked = this.cell.checkRightBottomStone(
        this.boardRows,
        this.turn,
        checkCells
      )
      if (!checked || checked.length <= 1) return false
      else {
        this.willBeChangedSharpeStone.push(...checked)
        return true
      }
    },
    checkCanPutLeftBottom() {
      const checkCells: string[] = []
      const checked = this.cell.checkLeftBottomStone(
        this.boardRows,
        this.turn,
        checkCells
      )
      if (!checked || checked.length <= 1) return false
      else {
        this.willBeChangedSharpeStone.push(...checked)
        return true
      }
    }
  }
})
</script>

<style scoped>
.cellSize {
  height: 60px;
}
.cell {
  background-color: rgb(46, 141, 46);
  border: solid 2px #000;
  width: 60px;
  height: 60px;
}
.stone {
  position: relative;
  top: -60px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  content: "";
  margin: 4px auto;
  z-index: 1;
}
.white {
  background-color: #fff;
}
.black {
  background-color: #000;
}
</style>

Row.vue

<template>
  <div id="row">
    <Cell
      v-for="cell in reversirow.cells"
      :key="`${cell.x}-${cell.y}`"
      :cell="cell"
      :turn="turn"
      :reversirow="reversirow"
      :reversiboard="reversiboard"
      @putStone="takeTurn($event)"
    />
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import Cell from "@/components/reversi/Cell.vue"

export default Vue.extend({
  props: ["row", "turn", "reversiboard"],
  data() {
    return {
      reversirow: this.row
    }
  },
  components: {
    Cell
  },
  methods: {
    takeTurn(playerTurn: "black" | "white") {
      this.$emit("putStone", playerTurn)
    }
  }
})
</script>

<style scoped>
#row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>

Board.vue

<template>
  <div id="board">
    <Row
      v-for="row in reversiboard.rows"
      :key="row.rowNumber"
      :row="row"
      :turn="turn"
      :reversiboard="reversiboard"
      @putStone="switchTurn($event)"
    />
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import Row from "@/components/reversi/Row.vue"

export default Vue.extend({
  props: ["board", "turn"],
  data() {
    return {
      reversiboard: this.board
    }
  },
  components: {
    Row
  },
  methods: {
    switchTurn(playerTurn: "black" | "white") {
      this.$emit("putStone", playerTurn)
    }
  }
})
</script>

<style scoped>
#board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto;
}
</style>

VGame.vue

<template>
  <div class="game">
    <h3>{{ whosTurn(turn) }}のターン</h3>
    <Board :board="board" :turn="turn" @putStone="whosTurn($event)" />
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import Board from "@/components/reversi/Board.vue"
import { Board as BoardModel } from "@/model/reversi"

export default Vue.extend({
  data() {
    return {
      board: new BoardModel(),
      turn: "black"
    }
  },
  components: {
    Board
  },
  methods: {
    whosTurn(playerTurn: "black" | "white") {
      this.turn = playerTurn
      return playerTurn === "black" ? "黒" : "白"
    }
  }
})
</script>

<style scoped>
.game {
  margin: 0 auto;
}
</style>

model/reversi.ts

export class Board {
  public rows: Row[];

  constructor() {
    this.rows = [...Array(8).keys()].map((i) => new Row(i));
    this.rows[3].cells[3].state = CellState.White;
    this.rows[3].cells[4].state = CellState.Black;
    this.rows[4].cells[3].state = CellState.Black;
    this.rows[4].cells[4].state = CellState.White;
  }
}

export class Row {
  public cells: Cell[];
  public rowNumber: number;

  constructor(rowNumber: number) {
    this.rowNumber = rowNumber;
    this.cells = [...Array(8).keys()].map((i) => new Cell(i, rowNumber));
  }
}

export class Cell {
  public x: number;
  public y: number;
  public state: CellState = CellState.None;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }

  public checkRightStone(
    row: Cell[],
    color: CellState,
    checkedCell: string[]
  ): boolean | string[] {
    //右端に置いた場合
    if (this.x === 7) {
      return checkedCell;
    }
    const rightCell = row[this.x + 1];
    //右隣に石がない
    if (rightCell.state === CellState.None) {
      return false;
    }
    //右隣が同じ色
    if (color === rightCell.state) {
      checkedCell.push(`${rightCell.x}${rightCell.y}`);
      return checkedCell;
    }
    //1つ右隣が自分と違う色かつ石が置いてある
    if (color !== rightCell.state) {
      checkedCell.push(`${rightCell.x}${rightCell.y}`);
      //さらにもう一つ右隣を調査
      if (!rightCell.checkRightStone(row, color, checkedCell)) {
        return false;
      }
      rightCell.checkRightStone(row, color, checkedCell);
      return checkedCell;
    }
    return false;
  }
  public checkLeftStone(
    row: Cell[],
    color: CellState,
    checkedCell: string[]
  ): boolean | string[] {
    if (this.x === 0) {
      return checkedCell;
    }
    const leftCell = row[this.x - 1];
    if (leftCell.state === CellState.None) {
      return false;
    }
    if (color === leftCell.state) {
      checkedCell.push(`${leftCell.x}${leftCell.y}`);
      return checkedCell;
    }
    if (color !== leftCell.state) {
      checkedCell.push(`${leftCell.x}${leftCell.y}`);
      if (!leftCell.checkLeftStone(row, color, checkedCell)) {
        return false;
      }
      leftCell.checkLeftStone(row, color, checkedCell);
      return checkedCell;
    }
    return false;
  }
  public checkUpperStone(row: Board, color: CellState, checkedCell: string[]): boolean | string[] {
    if (this.y === 0) {
      return checkedCell;
    }
    const upperCell = row.rows[this.y - 1].cells[this.x];
    if (upperCell.state === CellState.None) {
      return false;
    }
    if (color === upperCell.state) {
      checkedCell.push(`${upperCell.x}${upperCell.y}`);
      return checkedCell;
    }
    if (color !== upperCell.state) {
      checkedCell.push(`${upperCell.x}${upperCell.y}`);
      if (!upperCell.checkUpperStone(row, color, checkedCell)) {
        return false;
      }
      upperCell.checkUpperStone(row, color, checkedCell);
      return checkedCell;
    }
    return false;
  }
  public checkBottomStone(row: Board, color: CellState, checkedCell: string[]): boolean | string[] {
    if (this.y === 7) {
      return checkedCell;
    }
    const upperCell = row.rows[this.y + 1].cells[this.x];
    if (upperCell.state === CellState.None) {
      return false;
    }
    if (color === upperCell.state) {
      checkedCell.push(`${upperCell.x}${upperCell.y}`);
      return checkedCell;
    }
    if (color !== upperCell.state) {
      checkedCell.push(`${upperCell.x}${upperCell.y}`);
      if (!upperCell.checkBottomStone(row, color, checkedCell)) {
        return false;
      }
      upperCell.checkBottomStone(row, color, checkedCell);
      return checkedCell;
    }
    return false;
  }
  public checkRightUpperStone(
    row: Board,
    color: CellState,
    checkedCell: string[]
  ): boolean | string[] {
    if (this.y === 0 || this.x === 7) {
      return checkedCell;
    }
    const RightUpperCell = row.rows[this.y - 1].cells[this.x + 1];
    if (RightUpperCell.state === CellState.None) {
      return false;
    }
    if (color === RightUpperCell.state) {
      checkedCell.push(`${RightUpperCell.x}${RightUpperCell.y}`);
      return checkedCell;
    }
    if (color !== RightUpperCell.state) {
      checkedCell.push(`${RightUpperCell.x}${RightUpperCell.y}`);
      if (!RightUpperCell.checkRightUpperStone(row, color, checkedCell)) {
        return false;
      }
      RightUpperCell.checkRightUpperStone(row, color, checkedCell);
      return checkedCell;
    }
    return false;
  }
  public checkLeftUpperStone(
    row: Board,
    color: CellState,
    checkedCell: string[]
  ): boolean | string[] {
    if (this.y === 0 || this.x === 0) {
      return checkedCell;
    }
    const leftUpperCell = row.rows[this.y - 1].cells[this.x - 1];
    if (leftUpperCell.state === CellState.None) {
      return false;
    }
    if (color === leftUpperCell.state) {
      checkedCell.push(`${leftUpperCell.x}${leftUpperCell.y}`);
      return checkedCell;
    }
    if (color !== leftUpperCell.state) {
      checkedCell.push(`${leftUpperCell.x}${leftUpperCell.y}`);
      if (!leftUpperCell.checkLeftUpperStone(row, color, checkedCell)) {
        return false;
      }
      leftUpperCell.checkLeftUpperStone(row, color, checkedCell);
      return checkedCell;
    }
    return false;
  }
  public checkRightBottomStone(
    row: Board,
    color: CellState,
    checkedCell: string[]
  ): boolean | string[] {
    if (this.y === 7 || this.x === 7) {
      return checkedCell;
    }
    const RightBottomCell = row.rows[this.y + 1].cells[this.x + 1];
    if (RightBottomCell.state === CellState.None) {
      return false;
    }
    if (color === RightBottomCell.state) {
      checkedCell.push(`${RightBottomCell.x}${RightBottomCell.y}`);
      return checkedCell;
    }
    if (color !== RightBottomCell.state) {
      checkedCell.push(`${RightBottomCell.x}${RightBottomCell.y}`);
      if (!RightBottomCell.checkRightBottomStone(row, color, checkedCell)) {
        return false;
      }
      RightBottomCell.checkRightBottomStone(row, color, checkedCell);
      return checkedCell;
    }
    return false;
  }
  public checkLeftBottomStone(
    row: Board,
    color: CellState,
    checkedCell: string[]
  ): boolean | string[] {
    if (this.y === 7 || this.x === 0) {
      return checkedCell;
    }
    const LeftBottomCell = row.rows[this.y + 1].cells[this.x - 1];
    if (LeftBottomCell.state === CellState.None) {
      return false;
    }
    if (color === LeftBottomCell.state) {
      checkedCell.push(`${LeftBottomCell.x}${LeftBottomCell.y}`);
      return checkedCell;
    }
    if (color !== LeftBottomCell.state) {
      checkedCell.push(`${LeftBottomCell.x}${LeftBottomCell.y}`);
      if (!LeftBottomCell.checkLeftBottomStone(row, color, checkedCell)) {
        return false;
      }
      LeftBottomCell.checkLeftBottomStone(row, color, checkedCell);
      return checkedCell;
    }
    return false;
  }
}

export enum CellState {
  White = "white",
  Black = "black",
  None = "None",
}

AWS Amplifyで公開する

amplify cliをインストールして、設定をします。

npm install -g @aws-amplify/cli
amplify -v
7.3.5
amplify configure

次にAmplifyのプロジェクトを立ち上げて初期化します。プロジェクトを初期化するには次のコマンドを実行する。
必要な情報に応えるとamplifyディレクトリとsrc/aws-exports.jsファイルが作成されます。

amplify init

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run build
? Start Command: npm start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS access keys
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
? region:  us-east-1

amplify add hostingでS3での静的ウェブホスティングを有効にします。ホスティングを有効にし、amplify publishを実行して、ビルド＆デプロイが終わるとCloudFrontで公開されます。

amplify add hosting
? Select the plugin module to execute Amazon CloudFront and S3
? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
? hosting bucket name vuetsreversi-20211117151455-hostingbucket

amplify publish
✔ Uploaded files successfully.
Your app is published successfully.
https://xxxxxxxxxx.cloudfront.net

つまずいたところ

・Vueはpropsとemitでデータをうまく渡せず苦戦しました。VGame.vue -> Board.vue ->Row.vue -> Cell.vueの流れでVGameからCellに渡してるので、Vuexを使ってもっとスマートにできたらよかったです。

・computedを使わずにmethodsにばかり処理を記述してしまった。

・Vue CLIはESLint8.0を現時点ではサポートしていないようで、ビルドやamplify publishでエラーが出てしまいました。ESLintのバージョンを“eslint”: “^7.0.0"にダウングレードしたところうまくいきました。
修正はこちら↓のコメントを参考にさせていただきました。

感想

Vue,TypeScriptの勉強よりロジック考えるのが大変でした。(まだバグが結構ありますが、、、)
TypeScriptで勉強になったのはenumを使ったことくらいかもしれません。

あとは、もう少しきれいにコード書けるようになりたいです( ;∀;)

出だしはこちらの動画を参考にしました。動画ではvuetifyを使って作っています。