ES2017を理解してみる
ECMAScriptについて、とっても詳しく説明されているスライドが以下にあるので是非参照して下さい
ECMAScript(ES)とは
上のスライドとも説明が重複しますが、ECMAScript(えくますくりぷと)とは、JavaScriptの言語仕様で、JavaScriptはECMAScriptの仕様に基づいた実装のひとつとなります。
各々のブラウザはJavaScriptを動かす仕組み(JavaScriptエンジン)を持っていますが、各ベンダが開発したものであり、メソッド別の性能や(バグがあるなどの理由で)挙動が少し異なる場合があります。以下は代表的なブラウザをいくつかとそのJavaScriptエンジン名です。
![]() |
![]() |
![]() |
![]() |
Google Chrome V8 |
Internet Explorer Chakra |
Safari Nitro |
Firefox Spider Monkey |
ES.Nextとは
ES2017で提案されている機能
ではES2017で追加される機能は何でしょうか。現在提案されている機能を紹介します。 各ブラウザの実装状況はブログの投稿から時間が立つに連れすぐに変わってくると思うのでMDNのリンクからブラウザ別の対応状況をご確認ください。Object.values / Object.entries
前から存在しているメソッドであるObject.keysはオブジェクトのプロパティのkey一覧を配列で返します。それに近い機能で、Object.valuesは値の配列を返し、Object.entriesはキーと値が配列になった配列を返します。 Object.keys
1 2 3 |
const hoge = {a:1, b:2}; Object.keys(hoge); // -> ["a", "b"] |
Object.values
1 2 3 |
const hoge = {a:1, b:2}; Object.values(hoge); // -> [1, 2] |
Object.entries
1 2 3 |
const hoge = {a:1, b:2}; Object.entries(hoge); // -> [["a", 1], ["b", 2]] |
ブラウザ | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
サポート | 51.0 | 47 | – | – | – |
最新状況:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
String padding
StringのprototypeにpaddingStartとpaddingEndメソッドの追加が提案されています。
第一引数が文字長、第二引数が埋める文字となっておりデフォルトは空白文字で埋められます。
padStartは前方にパディングを行います。
1 2 3 |
'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo"); // "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" |
対して、padEndは後方にパディングを行います。
1 2 3 |
'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というプロパティが含まれています。
1 2 3 |
var o = { bar: 42 // barプロパティ }; |
1 2 3 4 5 6 7 8 9 |
Object.getOwnPropertyDescriptor(o, "bar"); /* -> { configurable:true, enumerable:true, value:42, writable:true } */ |
ブラウザ | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
サポート | – | 50 | – | – | – |
最新状況:
Trailing commas in function parameter lists and calls
引数を複数行で書いた場合の最後のカンマ(通称ケツカンマ)を許容します。よくある追加/削除時にバージョン管理ツールで変更箇所が2行になるのを1行に抑えられます。
1 2 3 4 5 6 |
const add = ( x, y, ) => { return x + y; } |
引数が増えてもy引数が書かれている行は既にカンマが入っていたので変更が加わりません。
1 2 3 4 5 6 7 |
const add = ( x, y, z, ) => { return x + y + z; } |
Async Functions
非同期処理を同期的に書くことができるようになります。
1 2 3 4 5 |
(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 | – |
最新状況
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
ES2017の実行環境を作ってみる
npm環境を新規作成して、npmでbabel-cliとes2017のプリセットを入れましょう。
1 2 3 |
$ npm init # install the cli and this preset $ npm install --save-dev babel-cli babel-preset-es2017 |
babelのプリセット情報を記載する.babelrcファイルを作成します。
1 2 |
# make a .babelrc (config file) with the preset echo'{ "presets": ["es2017"] }' > .babelrc |
index.jsを作ります
1 2 3 4 5 |
(async () => { console.log('async start'); await new Promise((resolve) => setTimeout(resolve, 1000)); console.log('async end'); // 1秒後に実行される })().catch((error) => console.log(error)); |
実行します。
1 2 |
# run it ./node_modules/.bin/babel-node --user_strict index.js |
startが表示された1秒後にendが表示されたでしょうか。
1 2 |
async start async end |
その他
asyncに関しては時間が作ってもう少し調べて見ようと思います。
参考
http://yoshiko-pg.github.io/slides/20161112-nodefes/
http://efcl.info/2015/10/18/ecmascript-paper/