フロント初心者がReact + Redux でオセロを作ってみた話

普段はRuby をメインで使っているのですが、今年に入ってから少しReact + Redux を触っていました。 と言っても、GW に入るまではReact とRedux の公式Tutorial を写経していたくらいですが、、、

で、GW に入ってから一念発起しまして、完成したのがこの「オセロ」アプリです。 GW 最初の4日間はUdamy のReact + Redux コースをひたすら進めていたので、 実質の実装期間は1.5日です。

取り敢えず、形になりましたので忘れないうちにまとめていこうと思います。

目的

• React + Redux の初心者を脱する。
  • Tutorial をただ写経するレベルを卒業する。
  • React + Redux の一連のflow を理解する。
• ECMAScript6 等、新しいJS をキャッチアップする。

と、ここら辺のことを意識して、今回は実装をしました。 本当はAPI 使ってCRUD アプリを作ろうかと思っていたのですが、 色々な葛藤がありまして蓋を開けたら「オセロ」が完成していました。。。

使った技術・ライブラリー等

• React
  • redux - state 管理をしてくれる人
  • classnames - 複数のclassNames をよしなにまとめてくれるいい奴
  • react-alert - いい感じのalert を表示してくれるいい奴
  • etc...
• Heroku - 10分ほどでdeploy できるいい奴

versions

$ npm ls react redux classnames react-alert
@0.1.0 /path/to//react/othello
├── classnames@2.2.6
├── react@16.8.6
├── react-alert@5.4.0
└── redux@4.0.1

階層構造

src 以下はこんな感じに仕上がりました。 階層構造に関してはUdamy で写経したアプリの構造を参考にして分けてみました。 CSS は、CSS Module なるものが存在するようなので、見よう見まねで導入してみました。

$ tree othello/src
othello/src
├── actions
│   ├── index.js
│   └── types.js
├── components
│   ├── App.js
│   ├── Board.js
│   ├── Grid.js
│   ├── Header.js
│   └── Label.js
├── index.js
├── reducers
│   ├── boardReducer.js
│   ├── index.js
│   └── playerReducer.js
└── styles
    ├── board.module.css
    ├── grid.module.css
    └── header.module.css

4 directories, 15 files

成果物

DEMO

• 仕様
  • 新規で石を付与することが出来る。
  • 同色の石に挟まれた石が裏返る。
  • ルール上、石を付与することが出来ないマスをクリックすると、アラートを表示する。
  • Reset ボタンを押下すると、初期状態に戻ることが出来る。

URL

Heroku に上げてありますので、お時間ある方は遊んでみてください。

URL: https://aqueous-mesa-26312.herokuapp.com/

実装内容

オセロ盤の状態とプレーヤー（白 or 黒）の状態をstate として管理しました。 Components はオセロ盤のstate （二次元配列）board[10][10] をmap し、Grid マス目を表すComponent を表示し描画しました。

詳細は下記ご覧ください。（ コード、グチャグチャです、、、m(_ _)m）

github.com

ちなみに、今回の実装の目的は、主にReact + Redux を理解することでした。 その為、オセロ自体のアルゴリズムは下記のサイトを参考に実装しました。 参考というか、コピペです。

大変助かりました、ありがとうございます m(_ _)m

www.cc.kyoto-su.ac.jp

ハマったところ

React + Redux の設計の問題

Udamy で作成したサンプルアプリの見よう見まねで設計してみたのですが、結局正解がわからず。。。 行ったり来たりしてしまいました。 設計に関しては経験が物を言うみたいなのもありそうですが、これくらいの規模のアプリならすんなりと設計できるようにしたいものです。。。

mutable vs. immutable

「state の中身変わってるのにrendering されないやん。」と思ったら、これが原因でした。 勝手にハマって、半日を溶かしました。。。 こちらのブログわかりやすかったです。

blog.logrocket.com

hooks はclass component 内では使えない

対象箇所を別のcomponent に切り出し、そこだけfunction component としました。 いまいち、class component とfunction component のメリット・デメリットがわかりません。 まだまだですね。。。ちゃんと復習します！

まとめ

初めて写経を脱っしReact + Redux でアプリを作成したことで、少しだけ自信がついた気がします。 React のシンタックス、Redux の流れに関しては、まだまだマスターしたとは程遠いものの、理解を深めることが出来ました。 アプリを作成する中で新たなLibrary を発見できたのも、良かったかなぁと。 総じて、当初の目的は達成することが出来たかな、と思います。

React + Redux の初心者を脱する。

「中級者」になれたのかと言われれば、まだまだなれてはおりませんが、、、m(_ _)m

少しだけ前進したと言うことで、お許しください。。。

参考

• オセロゲーム - アルゴリズム
• React+Reduxでライフゲームを作ってみた - Qiita - 設計