Safari 10.0 から ECMAScript 6 (ES 6) が使えるようになりました

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ES 6 がサポートされました。

iOS 10 / macOS Sierra に搭載される Safari 10 から ES 6 (ECMAScript 6) が完全にサポートされました。 早速見てみましょう。

ソースはこちらです。 Arrow function / Classes / String interpolation を使っています。iOS 9でもサポートされないのはArrow functionですので、iOS 9 では僕の年齢は表示されません。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var write = (message) => {
  document.write(message);
}
(function () {
    "use strict";
    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        getName() {
            return this.name;
        }

        getAge() {
            return this.age;
        }

        incrementAge(){
          this.age += 1;
        }
    }

    var person = new Person('Takeshi', 39);
    person.incrementAge();
    write(`${person.getName()}は来年${person.getAge()}才!?<br>`);
    write(window.navigator.userAgent);
}());

</script>
</body>
</html>
</script>
</body>
</html>

結果

iOS 10 Safari では表示される

サポートされたので es6_ios10_a

iOS 9 Safari では表示されない

Arrow functionが解釈できないのでしょう es6_ios9_a

Android 5.1 Chrome では表示される

優秀な子です es6_android5_1_a

まとめ

素の ES 6 が動く環境が普及するのはモバイル環境では iOS 10 の普及とAndorid の標準ブラウザ搭載機の撲滅がキーになりそうです。そんなに遠くない未来、あと数年で ES 6 の世界になるんでしょうね。