2. Nuxt以前にES6入門
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
}
};
*/
Author And Source
この問題について(2. Nuxt以前にES6入門), 我々は、より多くの情報をここで見つけました https://qiita.com/y-mattun/items/76a367352d745c855dd8著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .