# オセロゲーム作ってる話
[#fukuokajs](https://twitter.com/search?q=%23fukuokajs)
SatoshiKawabata
[@kwbtsts](https://twitter.com/kwbtsts)
Nulab inc.
---
## [Geeks Who Drink in Fukuoka -Front End Edition-](https://nulab.connpass.com/event/89743/)
---
## 何を作っているのか？
https://github.com/SatoshiKawabata/othello-game-logic
---
## なぜオセロゲーム？
- 社内でReactを勉強している人のサポートをしてる
- Reactの勉強にオセロゲームを作ってみることに
- 社員に元オセロ九州チャンピオンがいる
---
## オセロAI作ってチャンピオン
## と勝負させたらおもしろそう
---
> "僕レベルにはAIじゃ絶対勝てませんよ"
by チャンピオン
---
## オセロAI作ってチャンピオン
## ~~と勝負させたらおもしろそう~~
## に絶対勝つ😡
---
- その土台としてまずはオセロゲームを作る
- 今日はルールロジックを作った話
- AIにはまだ着手していないのでこれから
---
## 役割分担
あくまでReactの勉強になるように、
ビュー部分とロジック部分に役割分担
View ← State → Logic
---
## ゲームの状態(State)
- 盤面:
- 8✕8の２次元配列
- ゲームの状態:
- `"init", "black", "white", "win-white", "win-black", "draw"`
- プレイヤーの情報:
- 名前、置ける場所
---
```json=
{
// ゲームの局面
// "init": 始まる前
// "white": 白のターン
// "black": 黒のターン
// "win-white": 白の勝ち
// "win-black": 黒の勝ち
// "draw": 引き分け
gameState: "init"
// 盤面の状態
board: [ // 8✕8の２次元配列 (0: 空, 1: 白, -1: 黒)
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 1, -1, 0, 0, 0 ],
[ 0, 0, 0, -1, 1, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ]
],
// プレイヤー情報
white: {
placeableCells: [ // 白が置ける場所
{x: 4, y: 2},
{x: 5, y: 3},
{x: 2, y: 4},
{x: 3, y: 5}
],
name: "white" // プレイヤーの名前
},
black: {
placeableCells: [
{"x": 3, "y": 2},
{"x": 2, "y": 3},
{"x": 5, "y": 4},
{"x": 4, "y": 5}
],
name: "black"
}
}
```
---
## ロジック部分はRedux風
- [Store](https://github.com/SatoshiKawabata/othello-game-logic/blob/master/src/Store.js): stateの保持、変更の通知、actionの受取
- [Reducer](https://github.com/SatoshiKawabata/othello-game-logic/blob/master/src/Reducers.js): stateを変更する関数
- [Action](https://github.com/SatoshiKawabata/othello-game-logic/blob/master/src/ActionCreator.js): stateの変更内容
---
## Reduxって？
https://redux.js.org/
---
## ミニマムなReduxを実装してみた
https://github.com/SatoshiKawabata/sandbox/blob/master/minimum-redux/src/index.js
---
## [Store](https://github.com/SatoshiKawabata/othello-game-logic/blob/master/src/Store.js)
- stateを管理
- UIへstateの変更を通知
---
## [Reducer](https://github.com/SatoshiKawabata/othello-game-logic/blob/master/src/Reducers.js)
- オセロゲームの具体的なロジック
- 石を置いてひっくり返す
- 置ける場所を取得する
---
## [Action](https://github.com/SatoshiKawabata/othello-game-logic/blob/master/src/ActionCreator.js)
- Storeに対するコマンド
- コマンド名
- 引数
---
## TDDっぽく進めてみた
- 関数型なのでTDDしやすい
- stateを変更する関数のテストだけやっていれば良いので楽
- viewのテストって結構大変だけどロジックだけのテストはやりやすい
[Reducerのテストコード](https://github.com/SatoshiKawabata/othello-game-logic/blob/master/src/Reducer.spec.js)
---
## リポジトリにTravis CI導入してみた
[README](https://github.com/SatoshiKawabata/othello-game-logic)にバッジついてます。
[](https://travis-ci.org/SatoshiKawabata/othello-game-logic)
参考: [Travis CI | ド素人のための使い方 (公式ガイドより)](https://qiita.com/YumaInaura/items/8021d38cb202950fb18c)
---
## これから
- [ ] チャンピオンに勝てるオセロのAIを作る
- [ ] 他の人が作ったAIに切り替えられるように
- AIのhttpサーバー立ち上げて、そこにStateを投げて次の手が返ってくるようなイメージ?
- 普通にJSで書いて読み込ませる?
- [ ] 人vsAI、AIvsAIでもできるように
---
ありがとうございました
{"metaMigratedAt":"2023-06-14T16:50:49.828Z","metaMigratedFrom":"Content","title":"オセロゲーム作ってる話","breaks":true,"contributors":"[]"}