【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~

immutableJS_Map.js

//mapを作成

var map1 = Immutable.Map({
 a: 1,
 b:2,
 c: 3
});]

//新しい配列やMapを返すところ。不変なオブジェクトを返す


//get() aの値を取得
map1.get('a'); //1
var map2 = map1.set('b', 50);
map2.get('b'); //50


//equals
map1.equals(map2) //false
var map3 = map1.set('b', 50);
map3.equals(map2); //true
map1.equals(map3) //false


//clone
var map1 = Immutable.Map({
 a: 1,
 b: 2,
 c: 3
});
var clone = map1; map1.equals(clone) //true


//List 生成
var list1 = Immutable.List.of(1, 2);
typeof list1 //"object"
var qwerty = Immutable.List(['q','w','e','t','y']); //中身確認
qwerty.toArray() //["q", "w", "e", "t", "y"]


//push 追加
var list2 = list1.push(3, 4, 5);
list2.size; //5


//unshift 先頭に追加
var list3 = list2.unshift(0);
list3.size //6


//concat 連結
var list4 = list1.concat(list2, list3);
list4.size //13


//インデックス取得
list4.get(0); //1


//map処理
var alpha = Immutable.Map({a: 1, b:2, c: 3});
alpha.map((v, k)=> k.toUpperCase()).join(); //"A,B,C


//普通にObjectも扱える
var map1 = Immutable.Map({a: 1, b: 2, c: 3, b: 4});
var map2 = Immutable.Map({c: 10, a: 20, t: 30});
var obj = {d: 100, o: 200, g: 300};
var map3 = map1.merge(map2, obj);
// Map { a: 20, b: 2, c: 10, d: 100, t: 30, o: 200, g: 300 }


//map3とかでconsole.log()するとげーーってなる。中身知りたかったらtoObjectを使う
map3.toObject() [object Object] {
 a: 20,
 b: 4,
 c: 10,
 d: 100,
 g: 300,
 o: 200,
 t: 30
}


//※　map3.toJSON()でもOK JSON.stringifyは直接シリアル化されたJSON文字列を作成するために、
//不変のデータ構造で使用することができる


//Seq
var myObject = {a:1, b:2, c:3};
Immutable.Seq(myObject).map(x => x * x).toObject();
//[object Object] { a: 1, b: 4, c: 9 }


//objectのkeyはいつでも文字列
var obj = {1: "one"};
Object.keys(obj); //["1"]
obj["1"] //"one"
obj<a href="http://kenjimorita.jp/wp-content/uploads/2016/04/828fc7fa56f77717b82dccf54df737cf.png">1</a> //"one" //ってことはこれも。。 obj[Object.keys(obj)]; //"one"
 

//プロパティへのアクセスはstring
var obj = {1: "one"};
var map = Immutable.fromJS(obj);
map.get("1")//"one"
map.get(1) //undefined

//ObjectとArray
var deep = Immutable.Map({a: 1, b: 2, c: Immutable.List.of(3, 4, 5)});
deep.toObject(); // { a: 1, b: 2, c: List [ 3, 4, 5 ] }
deep.toArray() // [ 1, 2, List [ 3, 4, 5 ] ]
deep.toJS() //安心する。。[object Object] { a: 1, b: 2, c: [3, 4, 5] }
JSON.stringify(deep) //"{"a":1,"b":2,"c":[3,4,5]}"


//ネストされたストラクチャー

//fromJS
var nested = Immutable.fromJS({a: {b: {c: [3, 4, 5]}}});
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ] }
} }

//mergeDeep

var nested2 = nested.mergeDeep({a:{b:{d:6}}});
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 6 } } }


//getIn
//aの中のbの中のdを取得している
nested2.getIn(['a', 'b', 'd']);
// 6
var nested3 = nested2.updateIn(['a', 'b', 'd'], value => value + 1);
//aの中のbの中のdに1を足している。。粛々とすぎる。。
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }
var nested4 = nested3.updateIn(['a', 'b', 'c'], list => list.push(6));
//aの中のbの中のcのリストに7をpushしている。。粛々とすぎる。。(2回目)
Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }