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/

Makky12

June 27, 2022
Tweet

More Decks by Makky12

Other Decks in Programming

Transcript

  1. Node学園 39時限目
    ES2022の新機能
    Author: Masaki Suzuki
    @makky12

    View Slide

  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時限目

    View Slide

  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時限目

    View Slide

  4. 参考資料・サイト
    • 【参考情報】
    • node.green
    • 【ブログ】
    • JavaScriptの次の仕様ES2022の新機能まとめ
    • 【JavaScript】ES2022の新機能
    • 【JavaScript】ES2022で正式採用される機能について
    本日の発表資料は、以下の場所で公開してます
    • https://speakerdeck.com/smt7174/es2022no
    Node学園 39時限目

    View Slide

  5. Node学園 39時限目
    クラス関連の新機能

    View Slide

  6. クラス関連
    • クラス関連の新機能として、下記に正式対応した関数
    • クラスフィールドの作成
    • 静的(static)な要素の作成
    • 静的メソッド/静的フィールドどちらも作成可能
    • privateな要素の作成
    • これもprivateメソッド/privateフィールドどちらも作成可能
    • チームでのルール決めでの対応が不要に
    • クラスの基本的な部分が、やっと普通に使えるようになった感じ
    • protectedなど、未対応な部分もあるが…
    Node学園 39時限目

    View Slide

  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) メソッド
    }

    View Slide

  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(値そのものは問わない)

    View Slide

  9. Node学園 39時限目
    クラス以外の新機能

    View Slide

  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);

    View Slide

  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

    View Slide

  12. Error.cause property
    • Errorクラスに発生源をたどるプロパティ「cause」が追加された
    • 「cause」プロパティ自体はオプショナル
    • 親子関係(=依存関係)があるコードで、エラーの発生源をたどるのに便利
    • 「error.cause」プロパティで、発生源のエラー(Error)を参照できる
    • 子孫要素が多くなると、複数のcauseをたどる必要がある
    • 「error.cause.cause.cause…」のような感じ
    • 発生源のエラーを見つける専用の関数などを用意した方が良いかも
    • そもそも、そこまで依存関係が多いこと自体が問題かもしれないが…
    Node学園 39時限目

    View Slide

  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)の結果

    View Slide

  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 ]

    View Slide

  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

    View Slide

  16. まとめ(個人的な感想)
    • クラスに関しては「やっと普通に使えるようになった」感じ
    • 特にクラスフィールド、private要素あたり
    • private要素に関しては、チームでのルール決めがこれで不要になった
    • (_から始めるのはprivateな扱い…など)
    • クラス以外に関しては「大きな変更はないが、地味な部分で便利になった」印象
    • 去年の発表(「Node.js16の新機能」)と全く同じだな…
    • でも個人的に、top-level-awaitやxxx.at(index)はありがたいという感想
    Node学園 39時限目

    View Slide

  17. 以上です
    ご清聴ありがとうございました
    Node学園 39時限目

    View Slide