この書き方見たことない！？ WEB制作者は覚えておこう。ECMAScript2015の書き方

#JavaScript

記事をシェア：

コピー

はじめまして、後藤と申します。

普段は株式会社ユニエルという会社でdeveloperとして働いているのですが、何かのご縁でブログを書かせていただくことになりました。

WEB制作の仕事をしていると、外部のデザイナーやバックエンドエンジニアの方々と一緒にお仕事させていただくことがあるのですが、「この書き方ってJavaScriptですか？」と言った質問を受けたことが何度かあります。

今回は「日常的に使っているわけじゃないけど、たまにJavaScript使います」という方が、「なにこの書き方しらない」とならないために、徐々に標準仕様となっていくECMAScriptの概要と、従来のJavaScriptで見てきたけど、今後見る機会が増えそうな変更箇所についてご説明したいと思います。

ECMAScript2015(ES6)とは

「ECMAScript」

初めて聞いたという方は「JavaScriptとは違うのか」と思われる方もいるかもしれません。

ECMAScriptはEcmaInternationalによって標準化されているJavaScriptの標準仕様のことです。

JavaScriptが作られた当初、複数の企業が独自にJavaScriptやJScriptなどを作りはじめていたので、その中間に入って標準化をしてくれたのがECMAScriptという歴史があるようです。

ES6という呼ばれ方をすることもあるのですが、1年に1度更新していくため、ECMAScript2015(以降ES2015)という呼び方が標準になりました。

対応ブラウザ

各ブラウザ対応状況は下記となっています。
http://kangax.github.io/compat-table/es6/

IEは対応していないのですが、Edgeの登場によりほぼ全てのブラウザで使用できるようになっていますね。

機能によって対応状況は変わりますが、ES2015で書かれたコードを今までの書き方に変換してくれるbabelというTrranspilerを使用するか、polyfillsを利用することでES2015に対応していないブラウザでも使えるようになります。

コンパイラの利用方法については下記URLの記事を参考にしてみてください。

Babelで始める！モダンJavaScript開発
https://html5experts.jp/kyo_ago/16979/

それでは違いを見ていきましょう。

変数、定数宣言の違い

従来のJavaScriptでは「var」を用いた宣言をしてきたのですが、ES2015では「var」ではなく「let」を使用します。
「let」は再宣言ができない宣言方法になります。

【従来】


var hoge = 'varによる宣言';
var hoge = '再宣言ができる';

console.log(hoge); //再宣言ができる

hoge = '再代入もできる';

console.log(hoge) //再代入もできる

【EcmaScript2015】


let hoge = 'ECMAScript2015によるletによる宣言';
let hoge = '再宣言ができない';

console.log(hoge); //再宣言ができない

hoge = '再代入';

console.log(hoge); //再代入はできる

定数についてもvarを使用して命名規則で定数かどうかを区別していましたが、
ECMAScript2015では定数用の「const」が用意されています。

【従来】


var HOGE_TEISU = 6;
var HOGE_TEISU = 40;

console.log(HOGE_TEISU); //40 再宣言ができる

HOGE_TEISU = 270;

console.log(HOGE_TEISU) //270 再代入もできる

【ECMAScript2015】


const HOGE_TEISU = 10;
const HOGE_TEISU = 15;

console.log(HOGE_TEISU); //10 再宣言ができない

HOGE_TEISU = 200;

console.log(HOGE_TEISU) //10 再代入もできない

arrow function

thisの参照はイベントによって変更されていたため、「.bind」や「.call」を使用するか親のスコープにthisの参照渡し用の変数を使用していたのですが、「このthisは何が入っているのかわからない……」という状況がたびたびありました。
ES2015ではthisの参照が変わらないarrow functionが追加されています。

【従来】


var self = this;
var element = document.getElementById('js-element');

element.addEventListener('click', function(event) {
    console.log(this); //thisはクリックした要素を取得
    console.log(self); //selfは親のスコープを参照
});

【ECMAScript2015】


let element = document.getElementById('js-element');

element.addEventListener('click', (event) => {
    console.log(this);                 //thisは親のスコープを参照
    console.log(event.currentTarget);　//clickした要素の取得する場合はeventから取得
});

class構文

prototypeを用いてクラスのような使い方をしていましたが、ES2015ではclass構文も追加されました。

【従来】


function ClassName(test){
    this.hoge = test;
}

ClassName.prototype = {
    check: function(){
        console.log(this.hoge); //10
    }
}

var className = new ClassName(10);
className.check();

【ECMAScript2015】


class ClassName{
    constructor(test){
        this.hoge = test;
    }
    check(){
        console.log(this.hoge); //10
    }
}

let className = new ClassName(10);
className.check();