Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES2022の新機能

 ES2022の新機能

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

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

A3efba75cfbb0b7d5248eb74d1d29d79?s=128

Makky12

June 27, 2022
Tweet

More Decks by Makky12

Other Decks in Programming

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. クラス関連2 • 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時限目