ES2022の新機能

2022/6/27(月)に開催された「Node学園 39時限目 オンライン Node.js の原罪と現在」における、私の発表資料です。

https://nodejs.connpass.com/event/250782/

Transcript

1. Node学園 39時限目 ES2022の新機能 Author: Masaki Suzuki @makky12
2. 自己紹介 • 名前：鈴木 正樹 (Masaki Suzuki) • 在住：愛知県半田市 • 職業：フリーランスエンジニア • 得意分野：サーバーレスアプリのバックエンド(アーキ構築/設計/開発など) • 技術： • AWS/Serverless Framework/Terraform/AWS CDK/サーバーレス全般 • Node.js/TypeScript/Jest/Next.js/Haxe/GCP/Azure • 各種イベント・SNS・ブログでのクラウド普及活動(個人的に) • SNS： http://makky12.hatenablog.com/ https://github.com/smt7174 @makky12 (SUZUKI Masaki＠クラウドエンジニア) 名古屋市 豊橋市 Node学園 39時限目
3. 本日紹介する新機能 • クラス関連の新機能 • 基本機能 • プライベート要素の有無判定(Ergonomic brand checks for private fields) • クラス以外の新機能 • Top-level await • .at() method on the built-in indexables • Error.cause property • RegExp Match Indices • Object.hasOwn Node学園 39時限目
4. 参考資料・サイト • 【参考情報】 • node.green • 【ブログ】 • JavaScriptの次の仕様ES2022の新機能まとめ • 【JavaScript】ES2022の新機能 • 【JavaScript】ES2022で正式採用される機能について 本日の発表資料は、以下の場所で公開してます • https://speakerdeck.com/smt7174/es2022no Node学園 39時限目
5. Node学園 39時限目 クラス関連の新機能
6. クラス関連 • クラス関連の新機能として、下記に正式対応した関数 • クラスフィールドの作成 • 静的(static)な要素の作成 • 静的メソッド/静的フィールドどちらも作成可能 • privateな要素の作成 • これもprivateメソッド/privateフィールドどちらも作成可能 • チームでのルール決めでの対応が不要に • クラスの基本的な部分が、やっと普通に使えるようになった感じ • protectedなど、未対応な部分もあるが… Node学園 39時限目
7. クラス関連（ソースコード） Node学園 39時限目 class A { // クラスフィールド x = 1; // publicなクラスフィールド static sx = 2; // staticをつけると静的(static)フィールドに #y = 3; // #をつけるとprivateなクラスフィールドに static #sy = 4; // privateな静的フィールドも作成可能 constructor() {} // クラスメソッド publicFunc() {} static staticPublicFunc() {} // staticをつけると静的(static) メソッドに #privateFunc() {} // #をつけると静的(static) メソッドに static #staticPrivateFunc() {} // privateな静的(static) メソッド }
8. クラス関連２ • privateな要素の存在有無を「in」でチェックできる • クラスレベルで判定する • 該当クラスのprivateな要素を持っているか判定 • 主な使用用途は、インスタンスの等価チェック？ • a instanceof b みたいな使用方法 • 今のところ、良い使用用途がいまいち不明… • 今回クラスフィールド対応が追加されたのもあるので Node学園 39時限目 // ソースコード class A { #x = 1; constructor(x = null) { if (x) #x = x; } static isA(obj) { return #x in obj; } } class B { #x = 1; constructor() {} } console.log(A.isA(new A())); // true console.log(A.isA(new B())); // false console.log(A.isA(new A(2))); // true(値そのものは問わない)
9. Node学園 39時限目 クラス以外の新機能
10. Top-level await • 最上位ソースのみ、直接awaitすることができる • async, Promise.then()などが不要に • モジュールファイルのみ対応(*.mjsなど) • あくまで「最上位ソース」のみが対象 • 関数内などでは、今まで通りasyncが必要 • asyncが完全に不要になったわけではない Node学園 39時限目 // ソースコード //これはNG(関数など最上位ソース以外は、asyncが必要) function badSampleAsync() { return await SampleFuncAsync(); } //これはOK const result = await badSampleAsync(); console.log(result);
11. .at() method on the built-in indexables • 変数.at(index)で、変数[index]の要素にアクセスできる • 文字列、または配列が対象 • indexに負数を指定することで、末尾からの要素を指定できる。(-1が末尾要素) • String.substr(index)と同じ • 末尾要素を指定するのが簡単になった • array[array.length - 1] みたいな指定が不要になった Node学園 39時限目 // ソースコード const str = ‘abcdefg’; const array = [‘hoge’, ‘fuga’, ‘piyo’]; // これは今までもできた console.log(str.at(0)); // a console.log(array.at(1)); // fuga // 負数の指定は.at()からできるようになった console.log(str.at(-3)); // e console.log(array.at(-1)); // piyo
12. Error.cause property • Errorクラスに発生源をたどるプロパティ「cause」が追加された • 「cause」プロパティ自体はオプショナル • 親子関係(=依存関係)があるコードで、エラーの発生源をたどるのに便利 • 「error.cause」プロパティで、発生源のエラー(Error)を参照できる • 子孫要素が多くなると、複数のcauseをたどる必要がある • 「error.cause.cause.cause…」のような感じ • 発生源のエラーを見つける専用の関数などを用意した方が良いかも • そもそも、そこまで依存関係が多いこと自体が問題かもしれないが… Node学園 39時限目
13. Error.cause property（ソースコード） Node学園 39時限目 function parent() { try { child(); } catch (e) { // ここのeはchild()からthrowされたもの。 console.log(`e is ${e.message}`); console.log(e.cause.message); } } function child() { try { grandChild(); } catch (e) { // ここのeはgrandChild()からthrowされたもの。 // 発生源にe(=grandChild Error)を指定 throw new Error("child Error", {cause: e}); } } function grandChild() { // ここがエラー発生源 throw new Error("grandChild Error",); } parent(); // 結果はこうなる e is child Error // console.log(`e is ${e.message}`)の結果 grandChild Error // console.log(e.cause.message)の結果
14. RegExp Match Indices • 正規表現パターンマッチングで一致文字の開始＆終了位置を取得できる • 「d」フラグを付けることで可能 • 「indices」プロパティ(配列)のindex:0に配列形式で格納される • indices:[[開始位置, 終了位置]] のような感じ • 終了位置は、一致文字列の最終文字のindex+1が入る。(String.slice()の引数と同じ) • キャプチャグループがある場合、indices[1] 以降に同様の形式で格納される Node学園 39時限目 // ソースコード // キャプチャグループなし const result = /cd/d.exec(‘abcdefabcdefg’); console.log(result.indices); // [ [2, 4], groups: undefined ] // キャプチャグループあり const result = /cd(ef)/d.exec(‘abcdefabcdefg’); console.log(result.indices); // [ [2, 6], [4, 6], groups: undefined ]
15. Object.hasOwn • Object.hasOwn(obj, key)でオブジェクトが該当キーを持っているかを確認できる。 • 挙動自体はObject.hasOwnProperty(obj, key)と同じ • Object.prototype.hasOwnProperty.call(obj, key)のショートハンド • 上記指定だと長いので、そのためかと思われる • Object.hasOwnProperty()によるプロトタイプ汚染問題の対応もある Node学園 39時限目 // ソースコード const obj ={ x: 10, y: 20, }; console.log(Object.hasOwn(obj, ‘x’)); // true console.log(Object.hasOwn(obj, ‘z’)); // false
16. まとめ(個人的な感想) • クラスに関しては「やっと普通に使えるようになった」感じ • 特にクラスフィールド、private要素あたり • private要素に関しては、チームでのルール決めがこれで不要になった • (_から始めるのはprivateな扱い…など) • クラス以外に関しては「大きな変更はないが、地味な部分で便利になった」印象 • 去年の発表(「Node.js16の新機能」)と全く同じだな… • でも個人的に、top-level-awaitやxxx.at(index)はありがたいという感想 Node学園 39時限目
17. 以上です ご清聴ありがとうございました Node学園 39時限目