UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

JavaScript | レガシーなJavaScriptを書いていた人がES6っぽく書くためのポイント

今までJavaScriptのES5で書いていた人が、ES6っぽく書くためのネタ記事です。 Node.jsで書くときは基本的にES6の記法で書くのが一般的で、今までブラウザでも動くJavaScriptしか書いたことがないよ!

という人のためのまとめ記事です。本気で解説するものではないので注意してください。

  • “use strict"を使用する
  • let, constを使用する

  • アロー関数形式の関数宣言を利用する
  • 関数の初期値を設定する
  • テンプレートリテラルを利用する


strict modeを使用する

コードの先頭、または関数(スコープ)内に記述することで、以後のコードは全てstrict modeとして扱われる。従来は許容されてきたルーズなコードを実行しようとするとエラーが発生する。

strict modeを利用するには

"use strict";

let, constを利用する

従来のJavaScriptの変数は全てvarで宣言していた。しかし、これはスコープを限定できないなど、問題の多い方法である。 したがって、スコープを厳密に限定できるlet, constを利用してJavaScriptを宣言しよう。

var name = "Taro";  // これは避ける

let name = "Taro"; // これを使うべき
const myName = "World"; // これは定数として扱われる。

アロー関数形式の関数宣言を利用する

ES6で新しく導入された関数宣言の形で、関数型言語に似た記法で関数を定義することができる。

const square = (x)=> {return x * x;
  
}

square(2); // 4

従来のfunction () {}を利用した関数宣言とは挙動が異なり、役割も違うので注意してください。

関数の初期値を設定する

ES5以前では関数の初期値を引数として設定できず。非常に冗長な書き方をしなければいけなかった。

function add(x, y) {if(x === undefined) 
        x = 1;
  
    if(y === undefined)
        y = 2;
    return x + y;
}

ES6では関数の引数の初期値を設定することができる。 もし、引数が足りなければ、それをデフォルト値として利用することができる。

function add (x = 1, y = 2) {return x + y;
  
}

add(); // 3
add(2); // 4
add(2, 3); // 5

テンプレートリテラルを利用する

ES5以前では文字列の結合を+演算子を利用して実現していました。

var pen = "pen";
var apple = "apple"

pen + "pineapple" + apple + pen; // "penpineappleapplepen"

しかし、ES6ではテンプレートリテラルを利用して、以下のように簡潔に表現することが可能です。

`${pen}pineapple${apple + pen}` // "penpineappleapplepen"