React+TypeScript で オセロ pic.twitter.com/CyV4xuXQIq
— rim (@rim_ever) January 7, 2021
ReactとTypeScriptを使ってオセロを作ってみました。
作った経緯とか
知り合いの会社ではオセロのアルゴリズムを作るのを新人研修にしているという話を聞いたことがあります。
研修材料としては、どうなんだろう？ということで、まずベースのオセロを作ってみることにしました。
Why React?
Reactのチュートリアルでは三目並べを作ります。
あー、これベースにオセロできるじゃん。と。
それだけです。
ただ、先を考えた時、Webブラウザで観戦できるといいなということでWebで作っておきたかったというのはあります。
Complicated!
オセロゲームを作るなんて、プログラミングの初心者の本でもあるだろうにと思ってました。
しかし、意外と難しいですね。これ。
例えば、駒が置ける場所は相手の駒をひっくり返せる位置でなければならないというルールがあります。
この判定、どうする？と。
私もプロですから、馬鹿正直に８方向調べる同じようなロジックを書くわけにはいかないですし。
複雑になってきて、
JavaScriptでは無理だ！ TypeScriptにしよう！
と思い立ちました。
TypeScript is better than JavaScript?
とはいえ、TypeScriptにしたらしたでReact ComponentにPropsとStateを指定して管理するため、覚えることが増えます。
全く別物の印象を受けましたね。
Model部分とReact Componentではどう扱うかもわからず混乱してました。
参考になりそうなサンプルコードを漁ったのですが、とりあえず、ModelとReact.Componentは別クラスすればいいかなと決まってからは、スムーズに進みました。
Result
結果的には2日で所用時間は5時間くらいといったところですかね。
社内のもくもく会の時間も使って作業してました。
まだ、大きな夢はあるので、気が向いたら進めようと思います。
