マインスイーパーの RESTful な API サーバーをつくる

以前、Vue.js を使ってマインスイーパーを実装しましたという記事を書きました。そちらでは、ビジネスロジックは Vue に依存しないように作っていたので、ふと思い立って今回はそれをサーバーサイドに移植してみました。

本記事では、実装の細かいところは書ききれないので設計のポイントになる部分を説明します。

作ったもの

API サーバ

API サーバに対応したクライアントプログラム

環境

node 14.16.0
express 4.16.4
MySQL 8.0

1. 基本方針

Vue.js で作成したときの Model はそのまま再利用します。前回の記事で書きましたが、ビジネスロジックは Vue.js に依存しない POJO なクラス群で作成しているため、ほとんどそのまま移植しています。

全体の構成は、大雑把に次のような構成。

2. データ設計

基本となるデータ構造は Cell, Game の２つ。
データベース上も２つのテーブルを作成。

Cell

一つのマスを表すデータ。
セルの位置座標 (x, y) と、画面表示に必要な情報を保持。

{
  "x": 0,
  "y": 0,
  "count": 2,      // 周囲のセルの地雷数
  "isMine": false, // 地雷があるか？
  "isOpen": false, // 開かれているか？
  "isFlag": false  // フラグが立てられているか？
}

Game

ゲーム全体を表すデータ。
盤面の広さや地雷数などの設定値、ゲームのステータスや開始・終了時刻などを持ちます。

{
  "id": 999,      // ID
  "width": 9,     // 盤面の横幅
  "height": 9,    // 盤面の高さ
  "numMines": 10, // 地雷数
  "status": "PLAY", // ステータス
  "startTime": "2021-06-27T08:22:34.470Z", // 開始日時
  "endTime": null, // 終了日時
  "cells": [ /* 盤面上すべてのセルが入った配列 */ ]
}

3. URL設計

ボツ案

まずは、はじめに考えたもの。
データ構造をそのままURLにした。

イマイチなところ

• なんか REST っぽくない
• セルを開く、フラグを立てる、フラグを外す、という操作がすべて Cell に対する PATCH で行われている
• ゲーム上あり得ないリクエストをどう扱うのか悩むところが増える

このままでも機能的には実現できるんですが、うまいやり方はないかと試行錯誤して次の形に落ち着きました。

最終的なURL設計

ポイントは「セルを開く」という操作を「『開いたセル』を作る」として扱うように変更したことです。これによって、HTTPメソッドとURLの組み合わせで、何に対するどういう操作なのか、を表現できるようになりました。

4. チート対策

ゲームのAPIサーバーなので一応チート対策として、ゲームが終了するまではどのセルに地雷がセットされているのか、という情報をクライアントに渡さないようにしています。

Express のドキュメントによると res.json() メソッドは内部で JSON.stringify() を使っています¹。また、オブジェクトに toJSON メソッドを実装すると JSON.stringify() の挙動を変更することが可能です²。このことを利用して、ステータスがプレイ中の場合は isMine フラグを表示しない、などの制御を入れています。

const obj = {
  value: 0,
  toJSON () {
    return {
      value: this.value,
      text: this.value % 2 === 0 ? 'even' : 'odd'
    }
  }
}

obj.value = 1
JSON.stringify(obj) // "{\"value\":2,\"text\":\"odd\"}"

obj.value = 2
JSON.stringify(obj) // "{\"value\":2,\"text\":\"even\"}"

さいごに

きっかけは「AWSの勉強をするために簡単な Web アプリケーションを作ってみよう」ということだったんですが、
やってみたら色々学ぶことが多く非常に楽しかったです。

ただやっぱり型が無いのは辛いですね…次は TypeScript に手を出してみようかな…