はじめに
- Reactを使って画面作成をしてみたいと思うようになり、サイトを調べてチュートリアル を試しにやってみました。
- ここにかかれていることをサイト内にあるスターターコード を使って試したものになります。
- ○×ゲームを作ることが題材となっています。
- スターターコードにチュートリアルの内容に従いコードを書いていくことで動きを確認することはできました。
- ここまで2回にわたってチュートリアルに関して理解したことを纏めてきました。
- 最終回として、
- イミュータブルとミューテートについての理解
今回理解したこと
イミュータブルとミューテート
チュートリアルの中で、.slice() を使い、square配列をのコピーを作ることを勧められ実装していますが、なぜ、この.slice()を行うことがそもそもイミュータビリティ（不変性）となるのかが理解できなかったため、ここでも図式化してイメージを固めたいと思います。
実装では、最初にBoardコンポートの中でhandleClick()メソッドの中で定義しています。
handleClick(i){
const squares = this.state.squares.slice();
squares[i] = 'X';
this.setState({squares: squares});
}
このメソッドは、SquareコンポーネントのonClickイベントが発生すると対象のコンポーネントにおいて、発動します。この時のを動きをイメージにすると以下のような図となり、slice()でコピーされた配列を操作して、最後にstateの内容全体を書き換えるといった動きをしています。
私の理解としては、『この何の値かをセットする部分的な動きについては、直接的にstateの中身を書き換えるのではなく、コピーした要素の書き換えを行うことで、state自体の不変性（イミュータビリティ）が保たれている。』となりました。
ここまでくると、ゲームの勝敗を付けるところまでの実装ができ、ゲームとしてはいったんの完成を迎える。
チュートリアルでは、この先、ゲームの手番をHistoryとして記録し、そのHistoryのところに状態（state）を戻せるということを学べるようになっている。
その内容に焦点を絞り纏めておく。
まずは、Historyとして記録できるようにするため、Board → GameにStateのリフトアップした上でsqauresの状態をhistory配列の中に持たせることで実現している。この実現にあたって次のようなイメージに変更している。
この変更により、onClickイベントで情報は次のように変化していくことがイメージでき、なぜイミュータブルに実装しておくのが良いかということの理解ができた。
まとめ
チュートリアル を忠実にまねてまずは動くことを確認し、感嘆するところから始めて、何度も何度もチュートリアルを試した。その中で、stateやPropsで扱う変数を例えばsquaresとして置き換えながら使っていることで理解できなかったため、変数名を変えたりしながら、それに伴い起きる変化をキャッチアップしながら、全3回の投稿を使ってReactのさわりを理解できた気がしている。
まだまだ、実装を経験したわけではないので、学ぶことは多いと思うので、その都度、理解したこと纏めていけたらなと思っています。
一先ず、以下の3点について、学べたかな？
-
Propsとstate -
stateのリフトアップ - イミュータブルとミューテート