2. Nuxt以前にES6入門


immutableを目指そう

### メリット
・ほとんど全てがobjectとしてデータのやり取りを行うjavascriptで、影響範囲を小さくする

### 結果的に
bugを起こすことが少なくなる。
新規参入者が実装しやすくなるなど

---

## immutableなjs
そもそもimmutableってなんのこと?

immutableは「不変」「変わらない」
mutableは「可変」「変わる」

---

既存のデータに対して破壊的な変更を加えない

```js

const somethingChange = function(b) {
 ...
} // 破壊的なメソッド
let a = {...};
console.log(a); // (1)
somethingChange(a);
console.log(a); // (2)
```

(1)と(2)の出力が異なる。

影響範囲を小さくしてプログラミングするのは、基本だよねってところに関わると思います。

---

### constで宣言したら解決?

結論をいうとそんなことはない。

---

```js
const title = "ES6入門";
title = "ES9入門"; // TypeError: Assignment to constant variable.
```

```js
const qiita = {
 title: "ES6入門",
 body: "immutableなjs"
};
qiita.title = "ES9入門"; // 今回は成功

```
constにはObject型を指定できるが、制限するのは再代入不可というところのみ。

---

## 他の方法でimmutableを目指す

1. 配列を操作する時は新しい配列を返却する
filter, map, reduce

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

---

map

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

```js
var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

```
---

reduce
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

```js
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

```

---

おまけの便利なやつ
some

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some

```js
var array = [1, 2, 3, 4, 5];

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true

```

--- 

おまけの便利なやつ
every 

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every

```js

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

```

---

2. オブジェクトを操作する時はObject.assign({}, source)で新しいオブジェクトを返却する。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign

```js
const target = { a: 1, b: 2 };

const returnedTarget = Object.assign({}, target);

console.log(returnedTarget);
// expected output: Object { a: 1, b: 2 }
```

気をつけるパターン

```js
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

```


---

## そういう変更不可と操作したら新しいものを返すという概念を持っているのが

immutable.js

https://github.com/immutable-js/immutable-js/

ただvueとは相性が悪いのご注意ください。

https://forum.vuejs.org/t/immutable-js-with-vue/6366

---

付録
## 分割代入(ぶんかつだいにゅう)　Destructuring assignmentを使う
なんでかというとこちらの方が見やすくない?


---

```js

let obj = {
  foo: "foovalue",
  bar: {
    nestedbar: 'nestedbarvalue'
  }
};

const bar = obj.bar
// barを使って処理を続ける
```

```js

let obj = {
  foo: "foovalue",
  bar: {
    nestedbar: 'nestedbarvalue'
  }
};

const { bar } = obj;
// barを使って処理を続ける
```

---

ちなみに従来のjsと同様でObject型の場合は、参照が渡されます。


```js

let obj = {
  foo: "foovalue",
  bar: {
    nestedbar: 'nestedbarvalue'
  }
};

let bar = obj.bar
bar.nestedbar = 1
console.log(obj);
/*
{
  foo: "foovalue",
  bar: {
    nestedbar: 1
  }
};
*/
```

```js

let obj = {
  foo: "foovalue",
  bar: {
    nestedbar: 'nestedbarvalue'
  }
};

let { bar } = obj;
bar.nestedbar = 1
console.log(obj);
/*
{
  foo: "foovalue",
  bar: {
    nestedbar: 1
  }
};
*/
```