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

  • 775
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

maxresdefault.jpg

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

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

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

RSSはこちら
Feedly: Feedlyをフォロー
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);
/**
 * あ
 * い
 * う
 */

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

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

  • 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

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

外部アカウント

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

RSSはこちら
Feedly: Feedlyをフォロー
RSS: http://qiita.com/takeharu/feed

おすすめの記事

JavaScriptでは関数型言語の一部の機能?実践的なJavaScriptの関数型とは。
JavaScriptで関数型プログラミングの入門

関数型プログラミングを強力に後押しするライブラリ、Underscore.jsとlodashとは。
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)

良質なスタイルガイドを真似したいなら、GoogleやjQueryを参考に。
Javascriptのスタイルガイドまとめ(おすすめ4選)

※ 画像の引用: https://www.youtube.com/watch?v=BnwFYJDes1c