immutable.jsの軽いお勉強メモ


immutable.jsが依存関係に含まれていたので少々お勉強してみる。

## 参考

はじめてReact.jsでアプリ書いてはまったこと[ES6含む] | KentaKomai Blog
http://komaken.me/blog/2015/11/17/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6react-js%E3%81%A7%E3%82%A2%E3%83%97%E3%83%AA%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%AF%E3%81%BE%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8es6%E5%90%AB%E3%82%80/

Immutable.js
https://facebook.github.io/immutable-js/

## 自分の関連メモ

http://qiita.com/bonk/items/c78ceec846ea0dba3479
http://qiita.com/bonk/items/86d3860eefe937b1338f

## 概要

### 公式のドキュメント

Immutable.js
https://facebook.github.io/immutable-js/docs/#/Iterable/Iterable

### 何が嬉しいか

immutable.js は不変なオブジェクトを提供する
不変なオブジェクトはバグを防ぐかもしれない
React とも組み合わせて使える

http://www.webcyou.com/?p=7274

> オブジェクトをimmutableにする事によって、関数型プログラミングで用いられる、永続データプログラミングを行う事ができます。
これを利用する事によって、関数型プログラミングの強い後押しをしてくれ、参照透過性の高いプログラミングが行えますね。


## 主な機能など

## 使いどころなど

### 値渡し出来る。。

それ以前に、参照渡しになるのを理解していなかった。ひどす。

ネイティブ

```
var map1 = {a: 1, b:2, c: 3};
var clone1 = map1;
var clone2 = map1;
clone2.b = 50;
console.log(map1.b); //50
console.log(clone1.b); //50
console.log(clone2.b); //50
```

immutable.js

```
var Immutable = require("immutable");
var map1 = Immutable.Map({a: 1, b:2, c: 3});
var clone1 = map1;
var clone2 = map1.set('b', 50);
console.log(map1.get('b')); //2
console.log(clone1.get('b')); //2
console.log(clone2.get('b')); //50
```

### 非破壊的な操作

ネイティブは、オブジェクトに対して破壊的な操作になるが、immutable.jsでは非破壊的に操作できる

ネイティブ

```
arr.push(4);
```

```
var newArr = arr.push(4);
```

### jsonオブジェクトとの変換

var obj = immutable.fromJS({a: 1, b: 2});

http://www.webcyou.com/?p=7274

> immutable.jsではfromJSとJavaScriptオブジェクトとの世界を切り分けているのを垣間見れます。

上記の意味がわからない。。

### 遅延評価

> 関数型プログラミングの特徴として、immutableな永続データプログラミング、イベント駆動、宣言型でコードは参照透過。
> ...
> 「必要な時に必要な分処理される」

この関連性が理解できない。関数型プログラミングを理解していないからだろうな。。
なんとなくイメージは沸くのだけれど。頭も沸く。

### いろんな実行結果

http://kenjimorita.jp/immutable-js/

ネストされたストラクチャーのあたりとかわかりやすい。

## 検証環境

ES2015をコンソールで実行したい。
browserify,babelifyだと、、なんかうまくいかない。
ブラウザ拡張もざっとはみつけられない。

テスト用のdirを作って、nodeでインタラクティブシェル。
必要に応じてnpm install hogeしておく。

```
> bash-4.3$ node
> var Immutable = require("immutable");
undefined
> Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40}, function (key, value) {
...   var isIndexed = Immutable.Iterable.isIndexed(value);
...   return isIndexed ? value.toList() : value.toOrderedMap();
... });
OrderedMap { "a": OrderedMap { "b": List [ 10, 20, 30 ] }, "c": 40 }
```

拡張を使わなくても、ブラウザでも実行できるのか。。
npmとか使えるのか？
拡張やbookmarkletでcdn経由で読み込む方法があるみたい。

上記のコードを実行してみたが、うまく結果が出力されないかも。。
よくわからない。。

```
require('immutable');
var Immutable = immutable;
Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40}, function (key, value) {
  var isIndexed = Immutable.Iterable.isIndexed(value);
  return isIndexed ? value.toList() : value.toOrderedMap();
});


Zt {size: 2, _map: ct, _list: Bt, __ownerID: undefined, __hash: undefined}__hash: undefined__ownerID: undefined_list: Bt__altered: true__hash: undefined__ownerID: undefined_capacity: 2_level: 5_origin: 0_root: null_tail: Ctsize: 2__proto__: n_map: ct__altered: false__hash: undefined__ownerID: undefined_root: ptsize: 2__proto__: rsize: 2__proto__: ct
```

mathisonian/requirify: require() npm modules in the browser console
https://github.com/mathisonian/requirify

requiring npm modules in the browser console
https://gist.github.com/mathisonian/c325dbe02ea4d6880c4e

Requirify - Chrome ウェブストア
https://chrome.google.com/webstore/detail/requirify/gajpkncnknlljkhblhllcnnfjpbcmebm/related

橋本商会 » ES6の勉強をした
http://shokai.org/blog/archives/10229


nodejsのデバッグもいろいろあるみたい。
うーん。。

chromeデベロッパーツールでjavascriptのデバッグをする -node.jsもあるでよ- - tumblr
http://shim0mura.hatenadiary.jp/entry/20111231/1325357395

node.jsをGoogle Chromeでデバッグ - ZeBeVogue別館
http://d.hatena.ne.jp/zebevogue/20131004/1380954252

Chromeデベロッパーツール内にターミナル環境を構築する「Devtools Terminal」 | うえぶまなぶ
http://masatolan.com/internet/chrome-devtools-terminal/




## 課題・注意

react-dnd-treeviewで思ったのが、
jsonに混在してimmutable.listがある場合、使いにくいきがするということ。
でも何か理由がある気もする。。
サーバーサイドからjsonを吐き出す時にimmutable.jsのコードごと吐き出してもいいのか。。
でも、mapにしてもいいんじゃないか。。

調べてみたら、深い階層の比較の際には全部immutable.jsにしておけば、isメソッドで比較できるのが便利らしい。
でも、まるまる不変データになるので色々理解して気を使わないといけないのかな。。
たぶん、そのほうがいいのだろうけど。

react-dnd-treeviewの場合は、子要素のリストは不変にして、
そのプロパティとか外の構造とかは不変じゃなくしているのか。。

Remove dependency to Immutable.js · Issue #3 · teleport/react-dnd-treeview
https://github.com/teleport/react-dnd-treeview/issues/3

ReactとImmutable.jsで関数型を体験してみて思ったこと #scripty06
http://www.slideshare.net/techblogyahoo/reactimmutablejs-scripty06

この辺もきになる

Immutable.js cheatsheet
http://ricostacruz.com/cheatsheets/immutable-js.html

Converting from JS objects · facebook/immutable-js Wiki
https://github.com/facebook/immutable-js/wiki/Converting-from-JS-objects


## 他、思ったことなど

* ES2015に対応しているからその辺も踏まえて理解する姿勢が必要なのかも。
	* このMapって標準のMapとは別の概念でいいのかな。
* javascriptには３段階（？）のアクセス制御があった気がするけど、
	* 内部の実装としてはそれを利用しているのかな。そうであれば、どの段階だろう。


## タスク

書きを読む。
ES2015の機能とだぶるのでは？それでもつかうべき？しらんけど。

React + Redux + TypeScriptとImmutable.js - Qiita
http://qiita.com/uryyyyyyy/items/6143feba20554fe55a82

immutable.js を使ってみる | スマホ神 – JavaScript 受託開発 –
http://smart.ataglance.jp/2015-06-04-try-immutable-js/

Upgrading to Immutable v3 · facebook/immutable-js Wiki
https://github.com/facebook/immutable-js/wiki/Upgrading-to-Immutable-v3

web帳 | Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ！
http://www.webcyou.com/?p=7274

【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~ | 武骨日記
http://kenjimorita.jp/immutable-js/