More than 5 years have passed since last update.

もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~

Last updated at 2016-02-23Posted at 2015-12-04

JavaScriptにおける、ECMAScript6についてのまとめの前編です。またこの記事では、実践で使える情報のみまとめています。網羅的にすべてをまとめている情報ではありません。

基本構文の続き、アロー関数やPromiseはこちらの記事で。
ECMAScript6のアロー関数とPromiseまとめ - JavaScript

技術情報のみつぶやくアカウント作成しました。ECMAScript6などの最新情報も追っていきます。
Twitter: [@takeharumikami]
(https://twitter.com/takeharumikami)

RSSはこちら
Feedly: [Feedlyをフォロー]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)
RSS: http://qiita.com/takeharu/feed

letによるブロックスコープ

JavaScriptの他言語との違いで、悩めるポイントとしてスコープの範囲があります。ECMAscript6から、let命令により関数スコープではなく、ブロックスコープが実現できます。

Before

if (true) {
  var num = 1;
}

console.log(num); // 1

After

if (true) {
  let num = 1;
}

console.log(num); // エラー

constによる定数の宣言

今まで慣習で大文字で定数を表現していましたが、ECMAScript6からはconst命令が使用できます。

const NUM = 1;
NUM = 2; // エラー

しかし、配列(オブジェクト)やオブジェクトは気をつける必要があります。プロパティは変更可能となります。

// 直接変更は不可
const NUM_LIST = [1, 2, 3];
NUM_LIST = [5, 5, 5]; // エラー

// プロパティの変更は可能
const NUM_LIST = [1, 2, 3];
NUM_LIST[0] = 5;

console.log(NUM_LIST); // [5, 2, 3]

テンプレート文字列

テンプレート文字列とは、「`」バッククォートでくくった文字列になります。

「\n」を使用しなくても改行可能

テンプレート文字列のひとつ目の特徴として、'\n'ではなく、そのまま改行に対応しています。

Before


// 普通の文字列は「'」シングルクォート
var str = 'あ\nい\nう';

console.log(str);
/**
 * あ
 * い
 * う
 */

After


// テンプレート文字列は「`」バッククォート
var str = `あ
い
う`;

console.log(str);
/**
 * あ
 * い
 * う
 */

変数の文字列への埋め込み

２つ目の特徴として、文字列のなかにそのまま変数を埋め込んで表現することが可能です。

Before

var name = 'ハル';
var age = 21;

var str = '私の名前は' + name + 'です。' + age + '歳です';

console.log(str); // 私の名前はハルです。21歳です

After

var name = 'ハル';
var age = 21;

var str = `私の名前は${name}です。${age}歳です`;

console.log(str); // 私の名前はハルです。21歳です

タグ付きテンプレート

テンプレート文字列を関数の引数に渡すことで、テンプレート文字列による関数の出力が可能になります。関数への引数の渡し方は、通常の括弧の()ではなく、バッククォートの` ```` `となります。

function tag(a, b, c, d) {

  // 一つ目の引数に通常の文字列が分割して代入されている
  console.log(a); // ['あ', 'い', '']

  // 二つ目以降の引数に順々に変数の値が代入されている
  console.log(b); // 1
  console.log(c); // 2
  console.log(d); // undefined
}

// 関数への渡し方は、通常のtag()ではない。
tag`あ${1}い${2}`;

分割代入

分割代入とは？

分割代入により、一度に複数の変数に、複数の値を代入できます。

Before

var name = 'ハル';
var age  = 21;

console.log(name, age) // ハル 21

After

var [name, age] = ['ハル', 21];

console.log(name, age) // ハル 21

分割代入による、値の入れ替え

今までは一度、tmpなどの一時変数を作成し、値の入れ替えを行うのが主流でした。しかし、分割代入により、一時変数が不必要となり、簡潔な記述で実現可能となりました。

Before

var num1 = 10;
var num2 = 20;

console.log(num1, num2) // 10 20

// 値の入れ替え
var tmp = num1;
num1 = num2;
num2 = tmp;

console.log(num1, num2) // 20 10

After

var num1 = 10;
var num2 = 20;

console.log(num1, num2); // 10 20

// 値の入れ替えは一行
[num1, num2] = [num2, num1];

console.log(num1, num2); // 20 10

関数で複数の値を一度に返す

一度に関数で複数の値を返すことができます。今まではオブジェクトや配列に代入して返していました。

function getFruit() {
  return ['りんご', 'バナナ'];
}

var [fruit1, fruit2] = getFruit();

console.log(fruit1); // りんご
console.log(fruit2); // バナナ

「...」演算子により、複数の値を一つの配列にまとめる

「...」演算子を使用することにより、それ以降の値を一つの配列としてまとめることができます。

var [name, age, ...fruit] = ['ハル', 21, 'りんご', 'みかん'];

console.log(name, age, fruit); // ハル 21 ['りんご', 'みかん']

また、「...」演算子を使用することにより、配列の展開もできます。

var array = [1, 2, 3];

console.log(array);    // [1, 2, 3]
console.log(...array); // 1 2 3

これにより今まで配列で最大値を求める場合は、applyメソッドを使用する必要がありました。しかし、展開することにより、簡潔に記述可能となります。

Before

var array = [1, 5, 3];

var max = Math.max.apply(null, array)

console.log(max); // 5

After

var array = [1, 5, 3];

var max = Math.max(...array);

console.log(max); // 5

ECMAScript6の関数

関数の引数で初期化

関数の呼び出し時に引数の指定をしなかった場合、初期値を代入することができます。

Before

function show(name) {
  // nameがundefinedなら
  if (name === void 0) {
    name = 'ハル';
  }

  console.log(name);
}

show();      // ハル
show('はる'); // はる

After

function show(name = 'ハル') {
  console.log(name);
}

show();      // ハル
show('はる'); // はる

即時関数の脱却。ブロックスコープを用いる。

JavaScriptの鉄板、即時関数からようやく開放されます。最初に覚えることの一つかもしれなかった即時関数です。{}で上記のブロックスコープが実現できます。

Before

(function() {
  var num = 1;
}())

console.log(num); // エラー

After

{
  let num = 1;
}

console.log(num); // エラー

「...」演算子により、複数の引数を一つの配列にまとめる

関数の引数に、「...」演算子を使用することができます。その際、配列としてそれ以降の値が一つにまとめられます。

function showProfile(name, age, ...fruit) {
  console.log(name, age, fruit);
}

showProfile('ハル', 21, 'りんご', 'みかん'); // ハル 21 ['りんご', 'みかん']

これを使用することにより、今までの配列ライクなargumentsオブジェクトを使用する必要がなくなります。argumentsオブジェクトは、関数の引数を参照できるオブジェクトです。

Before

function show() {
  // 配列に変換
  var args = Array.prototype.slice.call(arguments);

  console.log(args);
}

show(1, 2, 3); // [1, 2, 3]

After

function show(...args) {
  console.log(args);
}

show(1, 2, 3); // [1, 2, 3]

アロー関数

アロー関数では、従来の関数より完結に記述できます。

Before

var show = function(text) {
  console.log(text);
};

After

// アロー関数
var show = (text) => {
  console.log(text);
};

// 引数が一つの時には()を省略可能
var show = text => {
  console.log(text);
};

// また一文の場合、{}とreturnの省略も可能。
var show = (text) => text + ' さようなら';

var text = show('こんにちは');
console.log(text); // こんにちは さようなら

後編の記事

他にもアロー関数ではthisを固定できます。また、promiseなどの組み込みオブジェクトなどがあります。
基本構文の続き、アロー関数やPromiseはこちらの記事で。
ECMAScript6のアロー関数とPromiseまとめ - JavaScript

※ この記事では、実践で使える情報をピックアップしています。網羅的にすべてをまとめている情報ではありません。

外部アカウント