# オセロゲーム作ってる話
[#fukuokajs](https://twitter.com/search?q=%23fukuokajs)
SatoshiKawabata
[@kwbtsts](https://twitter.com/kwbtsts)
![](https://pbs.twimg.com/profile_images/1261812855/1_bigger.jpg)
Nulab inc.
---
## [Geeks Who Drink in Fukuoka -Front End Edition-](https://nulab.connpass.com/event/89743/)
![](https://connpass-tokyo.s3.amazonaws.com/thumbs/b7/ef/b7efde4c4e79f1d7d72c473c691c11fc.png)
---
## 何を作っているのか?
![2018-06-14 08 23 25](https://user-images.githubusercontent.com/1194571/41461757-94914f00-70cb-11e8-9db8-7192264870e2.gif)
https://github.com/SatoshiKawabata/othello-game-logic
---
## なぜオセロゲーム?
- 社内でReactを勉強している人のサポートをしてる
- Reactの勉強にオセロゲームを作ってみることに
- 社員に元オセロ九州チャンピオンがいる
---
## オセロAI作ってチャンピオン
## と勝負させたらおもしろそう
---
> "僕レベルにはAIじゃ絶対勝てませんよ"
by チャンピオン
---
## オセロAI作ってチャンピオン
## ~~と勝負させたらおもしろそう~~
## に絶対勝つ😡
---
- その土台としてまずはオセロゲームを作る
- 今日はルールロジックを作った話
- AIにはまだ着手していないのでこれから
---
## 役割分担
あくまでReactの勉強になるように、
ビュー部分とロジック部分に役割分担
View ← State → Logic
---
## ゲームの状態(State)
- 盤面:
- 8✕8の2次元配列
- ゲームの状態:
- `"init", "black", "white", "win-white", "win-black", "draw"`
- プレイヤーの情報:
- 名前、置ける場所
---
```json=
{
// ゲームの局面
// "init": 始まる前
// "white": 白のターン
// "black": 黒のターン
// "win-white": 白の勝ち
// "win-black": 黒の勝ち
// "draw": 引き分け
gameState: "init"
// 盤面の状態
board: [ // 8✕8の2次元配列 (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/
![](https://cdn-images-1.medium.com/max/1600/1*EdiFUfbTNmk_IxFDNqokqg.png)
---
## ミニマムな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)にバッジついてます。
[![Build Status](https://travis-ci.org/SatoshiKawabata/othello-game-logic.svg?branch=master)](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":"[]"}