Reactで将棋アプリを作りました

React.jsの練習にブラウザで動く将棋を作りました（ソースコード）。このページで遊べます。現状ではただ将棋ができるだけなので面白くはないと思います。追記：通信機能を実装しました（反転将棋）。

TypesScript (JavaScript) をほとんど書いたことがない人がどうやって作ったかという記事です。TypeScript初心者なので以下の内容は間違いを含んでいる可能性があります。

はじめに

情報系にしては実装力があまりない僕ですが、競技プログラミングを始めて2年近くになるしそろそろアプリを何か作りたいなあと思っていました。web系の言語はほとんど書いたことがなかったのですが、おそらく作りながら学ぶのが一番効率がいいだろうと考えました。

学部生のときは将棋が趣味だったので、ブラウザで動く将棋を作ることにしました。オセロなどの他のボードゲームと比べるとルールがそこそこ複雑で、自分には丁度いい難易度だろうというのも考慮しています。

チュートリアルやドキュメントがしっかり書かれていてとっつきやすかったのでフレームワークはReactを選びました。チュートリアルはJavaScriptですが、最近はTypesScriptの方が使われがちという話を友人から聞いたのでTypesScriptで書くことにしました。個人的に型がある言語の方が好きというのも理由の一つです。

プロジェクト作成

以下で紹介するのは一例です。他にも方法はあると思います。

まずNode.jsとnpmをインストールします。

次にReactのプロジェクトを作るためのモジュールをインストールします。僕はグローバルにインストールしましたが、多分これはあまりよくないです。

$ npm install -g create-react-app

すると以下のコマンドでTypeScriptのプロジェクトを作ることができます。

$ npx create-react-app react-shogi --template typescript

プロジェクトのフォルダに移動したら、

$ npm start

でアプリを起動できます。

ちなみに僕は間違えてJavaScriptのプロジェクトを作って1敗しました。
完成したときのためにGitHubのレポジトリにpushしておきます。

チュートリアル

Reactのチュートリアルは3目並べの実装なので、盤面を作ります。そこでこの盤面を改造して将棋盤を作ることにしました。

public/index.html, src/index.cs, src/index.tsxをReactのチュートリアルのものに置き換えます。チュートリアルはJavaScriptで書かれているので、index.tsxはエラーが出ると思います。

適切に書き直すと3目並べ（○×ゲーム）が表示されます。
直し方はReact公式チュートリアルをTypeScriptでやるを参考にしました。

将棋盤

今盤面はですが、将棋の盤面はです。ということで盤面を大きくします。チュートリアルではべた書きしていますが、となるとさすがに面倒なので、JSX.Elementの配列を使って作りました。2次元配列の作り方がよくわからなかったのですが、調べると記事が見つかりました。

Reactでの二重ループ

このままだとエラーが出ますが、Squareにkeyを追加すると消えて実行できるはずです。cssファイルをいじって色を変えるとそれっぽいものができました。

駒と持ち駒

将棋盤の次は駒です。都合のいいことに将棋盤は一つの長方形ではなく、個の長方形からできています。そこで一つの長方形を駒とみなすことにしました（というよりこれができると思ったからチュートリアルを使った）。○×ではなく駒の文字を表示するだけで初期局面ができました。後手の駒はcssのrotateを使って回転させています。

将棋には持ち駒もあります。対局の際には持ち駒を盤面に移動する操作をすることになるので、持ち駒も盤面の一つの長方形と同様に作りました。持ち駒と盤面の駒は同じ機能を持っていて、色や大きさを変えています。

ルールの実装

駒の動きや、詰み判定、二歩などを実装しました。TypeScriptの書き方に慣れてきたころでしたが、将棋のルールが複雑でかなり大変でした。まだバグが残っているかもしれません。

GitHub Pages

実装が終わってさあ公開だ！となるわけですが、ここで便利なのがGitHub Pagesです。

まずgh-pagesをインストールします。

$ npm install gh-pages --save-dev

package.jsonに以下を追加します。

{
  ...,
  "homepage": "https://izumo27.github.io/react-shogi",
  "scripts": {
    ...,
    "deploy": "npm run build && gh-pages -d build"
  },
  ...,
}

あとはデプロイするだけです。

$ npm run deploy

しかし、エラーが出てしまいました。よくわかっていませんが、create-react-appをグローバルにインストールしたのが関係しているのかもしれません。node_modules/を入れ直したらデプロイできました。

$ rm -rf node_modules
$ npm install
$ npm run deploy

おわりに

制作期間は1か月くらいでしたが、他のこともしていたので実際には10日くらいでしょうか。段々書き慣れてきたので、今なら数日でできる気がします（ほんまか？）。現状だとただ将棋ができるだけなので、何か機能を加えようと考えています。

実装していて思ったのは、将棋のルールが結構複雑ということです。自分で指していたときはそんなに複雑だと感じたことがないのですが、駒の利きや詰み判定の実装は実に面倒いい練習になりました。