2. Nuxt以前にES6入門 #Node.js

immutableを目指そう

メリット

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

結果的に

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

immutableなjs

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

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

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


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

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

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

constで宣言したら解決?

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

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

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

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

他の方法でimmutableを目指す

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

map

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

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

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


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

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

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

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

Object.assign

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

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

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

気をつけるパターン

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

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

付録

分割代入(ぶんかつだいにゅう)　Destructuring assignmentを使う

なんでかというとこちらの方が見やすくない?


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

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


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

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

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


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

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


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

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

2. Nuxt以前にES6入門