ECMAScript 2017 (ES8) まとめ

今回は「ECMAScript2017 (ES8)」についてまとめます。

Object

Object.values() / Object.entries()

オブジェクトに存在するキーを取り出す Object.keys() に対応するメソッドとして、値を取り出す Object.values() と キーバリューペアを取り出す Object.entries() の2メソッドが追加されました。 引数に与えらられたオブジェクトが所有するキーを取り出す場合は Object.keys() 、値を取り出す場合は Object.values() 、キーバリューペア配列を取り出す場合は Object.entries() を利用することになります。

構文

Object.values(obj)

オブジェクトを引数に取り、指定されたオブジェクトに存在する値を配列として取得します。

Object.entries(obj)

オブジェクトを引数に取り、指定されたオブジェクトに存在するキーと値の組み合わせを [キー, 値] の形で配列として取得します。

サンプルコード

var obj = { a: 1, b: 2, c: 3 };

// キー一覧を取得
console.log(Object.keys(obj));      // -> ["a", "b", "c"]

// 値一覧を取得
console.log(Object.values(obj));    // -> [1, 2, 3]

// キーバリューペア配列を取得
console.log(Object.entries(obj));   // -> [["a", 1], ["b", 2], ["c", 3]]

Object.getOwnPropertyDescriptors()

そもそもオブジェクトのプロパティは「データ記述子」と「アクセサ記述子」の2種類が存在します。 各プロパティはどちらの記述子として定義されているか「Property Descripotor」に保持しています。 その設定内容はそれぞれ以下の通りです。

データ記述子

• value
• writable
• enumerable
• configurable

アクセサ記述子

• set
• get

上述の「Property Descriptor」は ES5 で追加された Object.defineProperty() で設定でき、Object.getPropertyDescriptor() で確認できます。 ECMAScript2017 (ES8) で追加された Object.getOwnPropertyDescriptors() はこの「Property Descriptor」をまとめて取得できるメソッドです。

構文

Object.getOwnPropertyDescriptors(obj)

オブジェクトを引数に取り、そのオブジェクトに存在する一連のプロパティのプロパティディスクリプタを取得します。

サンプルコード

var obj = { a: 1, b: 2 };

console.log(Object.getOwnPropertyDescriptors(obj));
// {
//   "a": {
//     "value": 1,
//     "writable": true,
//     "enumerable": true,
//     "configurable": true
//   },
//   "b": {
//     "value": 2,
//     "writable": true,
//     "enumerable": true,
//     "configurable": true
//   }
// }

String

String.prototype.padStart() / String.prototype.padEnd()

ESMAScript2017 (ES8) から文字列に対するパディングが標準メソッドとして追加されました。 固定文字列長になるよう指定文字で空白を埋めてくれるメソッドです。

構文

str.padStart( length [, chars] )

str で指定された文字列が右寄せで length の長さになるよう chars で余った左側を埋めます。

str.padEnd( length [, chars] )

str で指定された文字列が左寄せで length の長さになるよう chars で余った右側を埋めます。

サンプルコード

"abc".padStart(10);         // "       abc"
"abc".padStart(6,"123465"); // "123abc"
"abc".padStart(8, "0");     // "00000abc"
"abc".padStart(1);          // "abc"

"abc".padEnd(10);           // "abc       "
"abc".padEnd(6,"123465");   // "abc123"
"abc".padEnd(8, "0");       // "abc00000"
"abc".padEnd(1);            // "abc"

Function

引数末尾のカンマ

Git や svn などのソースコード管理を利用しているとき、関数の定義や利用においてパラメータを末尾に1つ追加すると、1つ手前のパラメータのログにカンマだけ追加した意味のないログが残ってしまうことがあります。 ECMAScript2017 (ES8) ではそんな意味のないログを残さなくて済むよう、関数の末尾の引数に対してカンマを残せる仕様に変わりました。

サンプルコード

// 関数定義
var some = function (
               param1,
               param2,
               param3,  // <- カンマが残せる
           ) { ... };

// 関数利用
some(
  arg1,
  arg2,
  arg3,  // <- カンマが残せる
);

async / await キーワード

Promise を使った非同期処理に対して新しいシンタックス（構文）が記述できるようになりました。 async function と await 式 です。

async function は await 式 を含むことができます。 また、この async function 自体は Promise でラップされており、関数の戻り値は Promise.resolve が呼び出されたものと同じになります。 つまり、関数の実行結果に対して Promise.then() や Promise.catch() が利用できます（以下のサンプルコード参照）。

async function に含められる await 式 は「Promise を戻り値とする関数」を実行する式です。 async function 中で await 式 が呼び出されると、その await 式 ( Promise の実行 ) が完了するまで以降の処理を待ちます。

サンプルコード

var remoteProcess1 = function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("callbacked.");
    }, 3000);
  });
};

var serializeProcess1 = async function () {
  var data;
  try {
    data = await remoteProcess1();
    console.log(data);  // "callbacked."
    return "complete!";
  } catch (err) {
    console.log(err);
  }
};

serializeProcess1().then((data) => {
  console.log(data);    // "complete!"
});

SharedArrayBuffer と Atomics

Worker などの非同期処理を実行する際、同じ場所のデータを読み書きしたいケースがあると思います。 そんな時に使えるのが SharedArrayBuffer と呼ばれるデータです。 そしてこの SharedArrayBuffer を操作するためのユーテリティ群が Atomics です。

SahredArrayBuffer として利用可能な TypedArray は以下の通りです。

• Int8Array
• Uint8Array
• Int16Array
• Uint16Array
• Int32Array
• Uint32Array

簡単なサンプルコードを以下に記載します…が、脆弱性の問題があるようで、2018年10月時点で共有メモリ機能（SharedArrayBuffer および Atomics）は Chrome 以外で使えないようです。 Chrome で使えたからと言って脆弱性がある限りはあまり使わない方が良いとは思いますが…お試しするには Chrome になります。

var sab = new SharedArrayBuffer(1024);
var ta = new Uint8Array(sab);

Atomics.store(ta, 0, 5);            // [5]
Atomics.add(ta, 0, 8);              // [13] <- 5 + 8
Atomics.sub(ta, 0, 1);              // [12] <- 13 - 1
var val = Atomics.load(ta, 0);      // val  <- 12
console.log(val);                   // 12

対応状況

2018年10月現在、Babel や Closure コンパイラ で async/await など一部機能が使えない状況です。 共有メモリ（SharedArrayBuffer および Atomics）が Chrome 以外の主要ブラウザで使えないのを除いて、その他の機能はブラウザでもランタイムでも基本的に使えます。

コンパイラ		ブラウザ					ランタイム
Babel 7	Closure 2018.09	IE 11	Edge 18	Firefox 62	Chrome 69	Safari 12	Node.js 8
△	△	×	△	△	○	△	△

今回は「ECMAScript2017 (ES8)」についてまとめました。 参考になったでしょうか？ 本記事がお役に立っていると嬉しいです！！

参考記事

• MDN - JavaScript 言語情報
• GitHub - tc39 / proposals / finished-proposals.md
• ECMAScript compatibility table - 2016 plus
• GitHub - tc39/proposal-object-values-entries
• GitHub - tc39/proposal-string-pad-start-end
• GitHub - tc39/proposal-object-getownpropertydescriptors
• GitHub - tc39/proposal-trailing-function-commas
• GitHub - tc39/ecmascript-asyncawait
• GitHub - tc39/ecmascript_sharedmem
• MDN - async function
• MDN - SharedArrayBuffer

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter