[React] Immutabilityの重要性

Reactのチュートリアルを流し見していて、面白い概念があったのでここにまとめておきます。

Immutability(イミュータビリティ)とは

Cambridge Dictionaryによると、

the state of not changing, or being unable to be changed:

一方でmutabilityの意味は、

the ability to change or the fact of being likely to change:

mutabilityにPrefixの"im"が加わることで逆の意味になっています。

和訳するとしたらmutabilityは変位性、immutabilityは不変性といった感じかな。

Reactにおいて

おそらくプログラミング全般に置いてImmutabilityは共通の概念だとは思いました。
特にReactのチュートリアルでは以下のように説明されています。

一般的に、変化するデータに対しては2種類のアプローチがあります。1番目のアプローチはデータの値を直接いじってデータをミューテート（mutate; 書き換え）することです。2番目のアプローチは、望む変更を加えた新しいデータのコピーで古いデータを置き換えることです。

この2番目のアプローチがImmutabilityという概念を反映した実装になります。

// １番目のアプローチ
var person = {age: 18, name: 'Taro'};
person.age = 22;
//anotherPerson は {age: 22, name: 'Taro'} に変化

// 2番目のアプローチ
var person = {age: 18, name: 'Taro'};

var anotherPerson = Object.assign({}, person, {age: 22});
// person に変化はなし, 一方で anotherPerson は {age: 22, name: 'Taro'}

Immutabilityの利点

データーの再利用が可能に

過去に定義した変数の直接的の書き換えを避けるので、以前に設定したデータをそのまま再利用する事ができます。

変更の真偽が分かる

オブジェクトの中身を直接的に書き換えた場合、その変数が変更されたか否かの判断が難しいです。
一方、Immutabilityを反映したオブジェクトは参照しているオブジェクトと比べるだけで判断が可能です。

Reactの再レンダータイミングの決定

これは、React でPureComponentを構築しやすくなるということです。データに変更があったかどうかが簡単に分かるため、コンポーネントをいつ再レンダーすべきなのか決定しやすくなります。

React の PureComponent とは

デフォルトの shouldComponentUpdate を変更した Component。
簡易的に Update するかしないかを判断するための仕組み。

SOTD (Summary of the Day)

ビジネスの講義でもImmutabilityという単語は使っていましたが、その時には”いかに競合の企業に製品やサービスを模倣されにくいか”という指標として使われていました。分野が変わるだけで使用する単語のコンテキストが全然変わってくるものですね。

あと全く知らない言語でもこんなにスムーズに開発の擬似体験ができるのいいですね。チュートリアルってすごい。