JavaScript
TypeScript
ECMAScript
babel
es2019

JavaScriptの次の仕様ES2019でほぼ確実に追加される新機能まとめ

本日(2019/01/30)にJavaScriptの仕様ECMAScript(以下、ES)の提案がいくつか更新され、ステージ4となりました。現状の最新仕様はES2018ですが、次の仕様はES2019となります。例年どおりに行けば、6月頃に正式仕様となるでしょう。

筆者は書籍「JavaScriptコードレシピ集」を出版しました。その中ではES2018までの機能をカバーしていますが、次バージョンES2019の新機能を解説する日本語ドキュメントも提供したいと思いました。

本記事ではES2019の新機能を解説しています。記事末尾では、個人的に追加を期待していたけれどまだステージ3の機能についても紹介しています。


ES2019で追加される新機能


配列のフラット化 - flat(), flatMap()

配列をフラット化するためのメソッド。フラット化とは、多階層の配列を一階層にすることです。

flat()メソッドの挙動は次のとおりです。


flat()メソッド

[[1, 2], 3, 4].flat();

// 結果:[1, 2, 3, 4]

flatMap()メソッドは、フラット化しつつ配列をマッピングします。


flatMap()メソッド

["牛", "豚", "マグロ"].flatMap(food => [food, `${food}丼`]);

// 結果:["牛", "牛丼", "豚", "豚丼", "マグロ", "マグロ丼"]

公式ドキュメント


キー・値のペアからオブジェクトを生成 - Object.fromEntries()

キー・値のペアからオブジェクトを生成するスタティックメソッド。挙動は次のとおりです。


Objec.fromEntries()

Object.fromEntries([["id", 16], ["name", "鈴木"]]);

// 結果:{id: 16, name: "鈴木"}

Mapオブジェクトでもキー・値のペアを渡して初期化できましたが、それと似た挙動です。


Mapの初期化の参考

new Map([[1, "高橋"], [2, "後藤"]]);

// 結果: {1 => "高橋", 2 => "後藤"}

公式ドキュメント


文字列の先頭または末尾の空白を除去 - trimStart(), trimEnd()

文字列の先頭または末尾の空白を除去するメソッドです。

trimStart()メソッドは、文字列の先頭の空白を除去します。


trimStart()メソッド

"  寿司ざんまい   ".trimStart();

// 結果:"寿司ざんまい   "

trimEnd()メソッドは、文字列の末尾の空白を除去します。


trimEnd()メソッド

"  寿司ざんまい   ".trimEnd();

// 結果:" 寿司ざんまい"

なお、文字列の両端を取り除くtrim()メソッドはES2015で追加済みです。


trim()メソッド(ES2015で追加済)

"  寿司ざんまい   ".trim();

// 結果:"寿司ざんまい"

公式ドキュメント


Symbolの説明を返す - description

Symbolの説明(description)を返すプロパティーです。説明とは、デバッグ用にSymbolを区別するためのものです。


Symbolのdescription

Symbol("矢部").description;

// 結果:"矢部"

公式ドキュメント


try catchcatchブロックで引数指定箇所を省略可能に

try catchcatchブロックでは、引数指定の(error)部分を記載しないとシンタックスエラーになっていました。


従来のtry-catch

try {

throw new Error("🙅");
} catch(error) { // (error)の指定は必須
console.warn("エラーをキャッチしました")
}

try catchcatchブロックで、引数指定の箇所の(error)を記載しなくても良くなりました。


ES2019のtry-catch

try {

throw new Error("🙅");
} catch { // (error)の記載はしなくても良い
console.warn("エラーをキャッチしました")
}

公式ドキュメント


関数をtoString()で文字列に変換した際の仕様が改訂

関数を文字列化した場合、従来はこのような挙動でした。


従来

function /* こんにちは */ myFunction  () {}

myFunction.toString();
// 結果:"function myFunction() {}"
// コメントや文字列が削除される


ES2019からは以下の挙動が正式な仕様となります。


ES2019

function /* こんにちは */ myFunction  () {}

myFunction.toString();
// 結果:"function /* こんにちは */ myFunction () {}"
// コメントや文字列が保持される


公式ドキュメント


行区切り文字や段落切り文字をエスケープなしに扱えるように - ECMA-262構文をJSONのスーパーセットに拡張

JSONの元々の仕様として、行区切り文字(U+2028、Line Separator)や段落区切り文字(U+2029、Paragraph Separator)をエスケープなしに扱えます。


JSONでは元々エラーなし

JSON.parse('"\u2029"');  // エラーなし


\u番号はユニコード文字を示す

一方で、JavaScriptで行区切り文字や段落区切り文字を扱う場合には、エスケープをしないとシンタックスエラーになっていました。


従来のJavaScriptのコードではシンタックスエラー

const PS = eval("'\u2029'"); // エラー


ES2019からは、シンタックスエラーにならないのが仕様となり、JSONの挙動と同じになります。


ES2019ではシンタックスエラーにならないのが仕様

const PS = eval("'\u2029'"); // エラーなし


公式ドキュメント

※ 2019/01/31 @mandel59 さんのコメントを受け、説明を改善しました


JSON.stringify()の取り扱い改善

文字列の�(U+D834: INVALID CHARACTER、参考リンク)などをエスケープし、JSON.stringify()でJSON文字列に変換するケースを考えます。


このJavaScriptコードで解説します

JSON.stringify('\uD834')


従来は次のようになっていました。次に示すのは、Google Chrome 71での実行結果です。

▼ Google Chrome 71でのコンソール表示結果

ES2019では、エスケープされたまま出力されるのが仕様となります。次に示すのは、Google Chrome 74での実行結果です。

▼ Google Chrome 74でのコンソール表示結果

公式ドキュメント


Google Chrome 73よりES2019の新機能はすべて使える

Google Chrome 73より、ES2019の新機能はすべて使えるとのことです。

Google Chrome 74(Canary)のコンソールで、今回紹介したES2019用のコードを実行した際のキャプチャーです。すべて仕様通りに動作していることがわかります。

▼ Google Chrome 74(Canary)の動作結果

image.png


ES2019への追加を期待していたが、まだステージ3の機能

次の機能がES2019への追加されることを個人的に期待していましたが、現時点ではまだステージ3です。早く正式仕様になってほしいと思いつつ、議論の進捗を見守っています。


最後に

配列のフラット化とOptional Catch Bindingが正式仕様になることが嬉しく思いました。

本記事で紹介したES2019の仕様は、Chrome 73ですべて対応済みです。その他のブラウザーについては、TypeScript・Babelとポリフィルで対応するとよいでしょう。

策定が終了した仕様の一覧は、次のURLで確認できます。

ICS MEDIAで発信しているJavaScriptの資料もあわせてどうぞ。