モダンJavaScriptに触れてみよう

こんにちは、開発のきくちです。

フロントエンドに React/Vue.js を採用する機会が多くなってますが、まだまだ jQuery が現役のところも多いと思います。
今回は過去に JavaScript を触った経験がある方を対象に ES2015（ECMAScript 2015、ES6）以降で変わった点をいくつかまとめてみました。

const let ES2015

従来は変数宣言に var を使用してきましたが、const、let が追加されました。これにより変数宣言で var を使用する機会はほとんどなくなりました。const は上書き不可、 let は上書き可能な変数宣言となります。

let a = 1;
const b = 2;

a = 3; // OK
b = 4; // NG

残余引数（レストパラメータ） ES2015

引数の数を固定ではなく、任意の数だけ渡すことが出来ます。使用する場合はドット3つを変数の前に付けます。可変長引数として紹介されている場合もありますが、JavaScript にはもともと arguments という可変長引数を扱うオブジェクトがあるので、区別するために残余引数として紹介します。

const func = function(a, b, c, ...etc) {
  console.log(etc);
}

func(1, 2, 3);       // []
func(1, 2, 3, 4);    // [ 4 ]
func(1, 2, 3, 4, 5); // [ 4, 5 ]

アロー関数式 ES2015

関数を定義するのに function を使用せずに関数を簡潔に定義できます。

// 従来の関数定義
const func1 = function(a, b) {
  return a + b;
}

// アロー関数式を用いた関数定義
const func2 = (a, b) => {
  return a + b;
}

// 処理内容が1行の場合、{} や return を省略できます
const func3 = (a, b) => a + b;

// 引数が1つの場合、() は省略できます
const func4 = a => a + a;

// 引数がない場合、() は省略できません
const func5 = () => console.log('call func5()');

console.log(func1(1, 2)); // 3
console.log(func2(1, 2)); // 3
console.log(func3(1, 2)); // 3
console.log(func4(1));    // 2
func5();                  // call func5()

テンプレートリテラル（テンプレート文字列） ES2015

文字列と変数を結合するのに + を使用してきましたが、読みづらさや書きにくさがありました。テンプレートリテラルを使用すると文字列の中に変数や関数を埋め込むことが出来ます。使用する場合は `（バッククォート）で文字列を囲みます。

const a = 2;
const sum = (a, b) => a + b;
console.log(`a=${a}`);          // a=2
console.log(`a+3=${sum(a,3)}`); // a+3=5

分割代入 ES2015

分割代入は変数宣言に{}（中括弧）を使用することで、オブジェクトから値を取り出すことが出来ます。

const profile = {
  name: '山田',
  age: 24,
  height: 178,
  weight: 68
};

// 分割代入を使わないで変数に代入
const age = profile.age;
console.log(age); // 24

// 分割代入を使用して変数に代入
const {name} = profile;
console.log(name); // 山田

// 順番は任意で大丈夫です
const {weight, height} = profile;
console.log(weight); // 68

// 別名の変数を使用したい場合は :(コロン）の後に変数を付ける
const {age: nenrei, height: shinchou} = profile;
console.log(`${nenrei},${shinchou}`); // 24,178

デフォルト引数 ES2015

引数の値を省略した場合、デフォルトで代入される値を指定することが出来ます。

const func = (a, b=10) => {
  console.log(`a=${a},b=${b}`);
}

func();    // a=undefined,b=10
func(2);   // a=2,b=10
func(1,2); // a=1,b=2

スプレッド構文 ES2015

スプレッド構文を使用すると配列を展開できます。展開した値を関数に渡したり、新しい配列を作成したり出来ます。スプレッド構文を使用するには変数の前にドットを3つ付けます。

const sum = (a, b) => a + b;
const list01 = [1, 2, 3];
const list02 = [4, 5];
const list03 = [...list01, ...list02];

console.log(sum(list02[0], list02[1])); // 9
console.log(sum(...list02));            // 9
console.log(list03);                    // [ 1, 2, 3, 4, 5 ]

// スプレッド構文で展開した値から配列を作成すれば元の配列に影響はしません
const list04 = list01;
const list05 = [...list02];
list04[0] = 0;
list05[0] = 0;
console.log(list01); // [ 0, 2, 3 ]
console.log(list02); // [ 4, 5 ]

Null 合体演算子 ES2020

Null 合体演算子は null か undefined の時に右の値を、それ以外の場合は左の値を返します。0や空文字の場合は左の値を返します。

const a = null;
const b = undefined;
const c = 0;
const d = "";
const valA = a ?? "-";
const valB = b ?? "-";
const valC = c ?? "-";
const valD = d ?? "-";
console.log(valA); // -
console.log(valB); // -
console.log(valC); // 0
console.log(valD); // (空文字)