ES2017を理解してみる

dorako321

8年前

ECMAScriptについて、とっても詳しく説明されているスライドが以下にあるので是非参照して下さい

ECMAScript(ES)とは

上のスライドとも説明が重複しますが、ECMAScript(えくますくりぷと)とは、JavaScriptの言語仕様で、JavaScriptはECMAScriptの仕様に基づいた実装のひとつとなります。

各々のブラウザはJavaScriptを動かす仕組み(JavaScriptエンジン)を持っていますが、各ベンダが開発したものであり、メソッド別の性能や(バグがあるなどの理由で)挙動が少し異なる場合があります。以下は代表的なブラウザをいくつかとそのJavaScriptエンジン名です。


Google Chrome V8	Internet Explorer Chakra	Safari Nitro	Firefox Spider Monkey

ES.Nextとは

ECMAScriptがより便利なものとするために、開発者やブラウザベンダが新しい仕様を提案を出し策定しています。

そして、次期ECMAScriptの事をES.Nextと呼んでいます。

現在(2016年)に提案中のES.NextはES2017と呼ばれており、2017年中には、正式リリースされるようです。

ES2017で提案されている機能

ではES2017で追加される機能は何でしょうか。現在提案されている機能を紹介します。

各ブラウザの実装状況はブログの投稿から時間が立つに連れすぐに変わってくると思うのでMDNのリンクからブラウザ別の対応状況をご確認ください。

Object.values / Object.entries

前から存在しているメソッドであるObject.keysはオブジェクトのプロパティのkey一覧を配列で返します。それに近い機能で、Object.valuesは値の配列を返し、Object.entriesはキーと値が配列になった配列を返します。

Object.keys

const hoge = {a:1, b:2};
Object.keys(hoge);
// -> ["a", "b"]

const hoge = {a:1, b:2};

Object.keys(hoge);

// -> ["a", "b"]

Object.values

const hoge = {a:1, b:2};
Object.values(hoge);
// -> [1, 2]

const hoge = {a:1, b:2};

Object.values(hoge);

// -> [1, 2]

Object.entries

const hoge = {a:1, b:2};
Object.entries(hoge);
// -> [["a", 1], ["b", 2]]

const hoge = {a:1, b:2};

Object.entries(hoge);

// -> [["a", 1], ["b", 2]]

ブラウザ	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
サポート	51.0	47	–	–	–

String padding

StringのprototypeにpaddingStartとpaddingEndメソッドの追加が提案されています。

第一引数が文字長、第二引数が埋める文字となっておりデフォルトは空白文字で埋められます。

padStartは前方にパディングを行います。

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"

'abc'.padStart(10); // " abc"

'abc'.padStart(10, "foo"); // "foofoofabc"

'abc'.padStart(6,"123465"); // "123abc"

対して、padEndは後方にパディングを行います。

'abc'.padEnd(10);         // "abc       "
'abc'.padEnd(10, "foo");  // "abcfoofoof"
'abc'.padEnd(6,"123465"); // "abc123"

'abc'.padEnd(10); // "abc "

'abc'.padEnd(10, "foo"); // "abcfoofoof"

'abc'.padEnd(6,"123465"); // "abc123"

ブラウザ	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
サポート	–	48	–	–	–

Object.getOwnPropertyDescriptors

既にObject.getOwnPropertyDescriptorというメソッドがあるのですが、Object.getOwnPropertyDescriptorsは複数まとめて実行できるメソッドになっています。

Object.getOwnPropertyDescriptor(s)は、Object自身に存在するプロパティのDescriptorを取得します。プロパティとは以下のような物のことですね。例ではoというオブジェクトにbarというプロパティが含まれています。

var o = { 
bar: 42  // barプロパティ
};

var o = {

bar: 42 // barプロパティ

};

Object.getOwnPropertyDescriptor(s)はこのbarプロパティに含まれているDescriptorを取得できるというわけです。ではDescriptorとは何なのでしょうか。Descriptorとは日本語で記述子と言い、構造や内容の要約、ファイル属性などが記された情報のことを指します。

Property Descriptor には以下の三種類が存在し、

DataDescriptor
AccessorDescriptor
GenericDescriptor

以下の6つのfieldに何が登録されているかによってどのProperty Descriptorになるのかが決まります。

Enumerable … for-inでiterateした時にkeyとして列挙できるか
Configurable … Property Descriptorの属性を編集できるか
Writable … Dataの値の書き換えができるか
Value … Dataの値
Get … getterの値
Set … setterの値

先程のbarプロパティをObject.getOwnPropertyDescriptorで確認してみます。

Object.getOwnPropertyDescriptor(o, "bar");

/* -> {
configurable:true,
enumerable:true,
value:42,
writable:true
}
*/

Object.getOwnPropertyDescriptor(o, "bar");

/* -> {

configurable:true,

enumerable:true,

value:42,

writable:true

}

Descriptorを確認できましたね。writableまたはvalueが含まれるのはDataDescriptorとなります。それぞれのfieldによってどのPropertyDescriptorになるかはこちらのサイトをご参考ください。

ブラウザ	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
サポート	–	50	–	–	–

Trailing commas in function parameter lists and calls

引数を複数行で書いた場合の最後のカンマ(通称ケツカンマ)を許容します。よくある追加/削除時にバージョン管理ツールで変更箇所が2行になるのを1行に抑えられます。

const add = (
x,
y,
) => {
 return x + y;
}

const add = (

) => {

return x + y;

}

引数が増えてもy引数が書かれている行は既にカンマが入っていたので変更が加わりません。

const add = (
x,
y,
z,
) => {
 return x + y + z;
}

const add = (

) => {

return x + y + z;

}

Async Functions

非同期処理を同期的に書くことができるようになります。

(async () => {
  console.log('async start');
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log('async end'); // 1秒後に実行される
})().catch((error) => console.log(error));

(async () => {

console.log('async start');

await new Promise((resolve) => setTimeout(resolve, 1000));

console.log('async end'); // 1秒後に実行される

})().catch((error) => console.log(error));

ブラウザ	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
サポート	55	52	–	42	–

ES2017の実行環境を作ってみる

npm環境を新規作成して、npmでbabel-cliとes2017のプリセットを入れましょう。

$ npm init
# install the cli and this preset
$ npm install --save-dev babel-cli babel-preset-es2017

$ npm init

# install the cli and this preset

$ npm install --save-dev babel-cli babel-preset-es2017

babelのプリセット情報を記載する.babelrcファイルを作成します。

# make a .babelrc (config file) with the preset
echo'{ "presets": ["es2017"] }' > .babelrc

1 2	# make a .babelrc (config file) with the preset echo'{ "presets": ["es2017"] }' > .babelrc

index.jsを作ります

(async () => {
  console.log('async start');
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log('async end'); // 1秒後に実行される
})().catch((error) => console.log(error));

(async () => {

console.log('async start');

await new Promise((resolve) => setTimeout(resolve, 1000));

console.log('async end'); // 1秒後に実行される

})().catch((error) => console.log(error));

実行します。

# run it
./node_modules/.bin/babel-node --user_strict index.js

1 2	# run it ./node_modules/.bin/babel-node --user_strict index.js

startが表示された1秒後にendが表示されたでしょうか。

async start
async end

1 2	async start async end

その他

asyncに関しては時間が作ってもう少し調べて見ようと思います。

参考

http://yoshiko-pg.github.io/slides/20161112-nodefes/

http://efcl.info/2015/10/18/ecmascript-paper/