【最低限知っておきたい】ES2015/ES6の基本構文とブラウザ対応状況 ｜ SiTest (サイテスト) ブログ

こんにちは、SiTest事業部エンジニアの牧です。

昨年の6月にECMAScript2015が制定されましたね。
制定から10ヶ月が経過し、浸透が進んできていると感じています。
今回はES2015の基本構文と主要ブラウザの対応状況をご紹介します。

ECMAScriptとはJavaScriptの標準規格であり、ECMAScript2015とはECMAScriptの第6版になります。
当初はECMAScript6（ES6）と呼ばれていましたが、正式名称はECMAScript2015（ES2015）となりました。
ES2015から更に多くのシンタックスが追加されよりJavaScriptが書きやすくなっています。

let・constによる変数宣言

変数宣言の方法はES5まではvarしかありませんでした。
そのため変数のスコープが曖昧になるためクロージャを使用してスコープの制限をしていました。
ES2015ではブラケット{}によるブロックスコープが実現されました。
ブラケット内にletやconstで変数定義することで、その変数はブラケットのスコープ内でのみ使用することができます。

let foo = [10, 20, 30];
{
  let foo = [100, 200, 300];
  console.log(foo); // [100, 200, 300]
}
console.log(foo); // [10, 20, 30]

letは再宣言が出来ない変数宣言です。
代入は出来ますが、変数を再宣言した場合エラーが発生します。

var person = {name: "John"};
var person = {name: "Jane"}; // var は再宣言ができる

let person = {name: "John"}:
person = {name: "Sam"}; // 代入は問題ない
let person = {name: "jane"}; // エラーが発生する

constはletよりも更に厳しく再宣言も代入も出来ない変数宣言となります。
再宣言もしくは代入をした場合エラーが発生します。

const foo = 100;
foo = 200; // エラーが発生する
const foo = 300; // エラーが発生する

class構文

ES5まではクラスと言うものがありませんでしたが、
prototypeを利用することで擬似的なクラスを実現してきました。

function Person(name) {
  this.name = name;
}
Person.prototype.hello = function(){
  return "I am " + this.name;
}
person = new Person("Jone Doe");
person.hello(); // "I am John Doe"

ES2015ではとうとうclass構文が実装され、クラスの継承もextendsキーワードを使用するだけでとても簡単に書くことが出来るようになりました。

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return this.name + "make a noise";
  }
}
class Cat extends Animal {
  speak(){
    return this.name + "meow";
  }
}
cat = new Cat("tama");
cat.speak(); // "tama meow"

文字列のテンプレートリテラル

ES5では文字列内に変数を入れ込みたい場合+を使用していました。
ES2015からはバッククオート“で文字列を囲むことで${}を使用した変数展開を行うことが出来ます。
テンプレートリテラルは多くのAltJSでは導入されていましたがこれをES2015が取り込むかたちになりました。

var name = "Jane";
console.log("I am " + name); // ES5
console.log(`I am ${name}`); // ES2015

主要ブラウザの対応状況はECMAScript6 compatibility tableで確認することができます。

こちらのサイトではES5やES2015に加え次世代ECMAScriptの追加予定機能や対応状況も記載されています。
見方としては緑色のところが対応できている文法、赤色のところが対応できていない文法となります。
主要ブラウザの対応状況を見てみるとGoogle ChromeやFirefox、Microsoft EdgeはES2015の8割以上の対応が終わっています。
ただしInternetExplorerやSafari、モバイルブラウザなどはまだまだ対応できていません。
そのため、ES2015をそのまま使って開発するというのはまだまだ難しそうです。

ECMAScriptはES2015から年単位のリリースを目指していきます。
まだまだES2015単体だけでの実戦投入は難しそうですがトランスパイルやTypeScriptなどを利用することで、
開発へ導入する敷居がとても低くなります。
今回ご紹介した基本構文以外にも便利な構文が多数ありますので、ぜひ皆様も一度使ってみてはどうでしょうか。