ども、カロージです。
2015年以降毎年改定されているJSのECMA規格について2022年公開予定の機能についてです。
「finished-proposals.md」ファイルで、Expected Publication Yearが2022年になっている機能を取り上げました。
ES2022に予定されている機能
1. Class Fields
1-1. Private instance methods and accessors
以下の様な感じで、アクセサ(getterやsetter)やメソッドに「#」をつけるとプライベートになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class Counter extends HTMLElement { #xValue = 0; get #x() { return #xValue; } set #x(value) { this.#xValue = value; window.requestAnimationFrame(this.#render.bind(this)); } #clicked() { this.#x++; } } |
1-2. Class Public Instance Fields & Private Instance Fields
プロパティに可視性(パブリック、プライベート)を追加できるようになります。
プロパティに「#」をつけるとプライベートになります。
1-3. Static class fields and private static methods
「static」が使えるようになります。静的なプロパティやメソッドが使えます。
1 2 3 4 |
class CustomDate { // ... static epoch = new CustomDate(0); } |
2. RegExp Match Indices
レギュラーエクスプレッションによる正規表現で、マッチした位置情報が追加される。
ただし、/dのオプションが必要とのこと。
1 |
const re1 = /a+(?<Z>z)?/d; |
3. Top-level await
async / awaitの定義がメソッドの他に、モジュールでも使用可能とのこと。
モジュールの概念が仕様上どうなってるのか気になる。そしてdenoみたい。
1 |
const strings = await import(`/i18n/${navigator.language}`); |
4. Ergonomic brand checks for Private Fields
「プライベートフィールドの人間工学的ブランドチェック」うーん。字面だけだとヨクわからない。。
Try/Catch/Exceptionを使用しなくとも、「in」を使用することでプライベートフィールドの有無が分かりようになる。とのこと
1 2 3 4 5 6 7 8 9 10 11 |
class C { #brand; #method() {} get #getter() {} static isC(obj) { return #brand in obj && #method in obj && #getter in obj; } } |
5. .at()
Array、String、TypedArrayに、指定位置の値が取得出来るメソッドです。
ただ、Polyfill見た感じ、負の値の扱いが微妙な感じがします。。
1 2 3 4 5 6 7 8 9 10 |
function at(n) { // ToInteger() abstract op n = Math.trunc(n) || 0; // Allow negative indexing from the end if (n < 0) n += this.length; // OOB access is guaranteed to return undefined if (n < 0 || n >= this.length) return undefined; // Otherwise, this is just normal property access return this[n]; } |
6. Accessible Object.prototype.hasOwnProperty
うーん。よくわからなかった。分かり次第、掲載します。
7. Class Static Block
静的ブロックなるものが使用可能になるとのこと。
何かしらの計算値など、初期値として評価結果を静的に保持したい場合、静的ブロックを定義することで使用可能になります。
クラスが読み込まれたタイミングで評価される。とのこと
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// "friend" access (same module) let A, B; { let friendA; A = class A { #x; static { friendA = { getX(obj) { return obj.#x }, setX(obj, value) { obj.#x = value } }; } }; B = class B { constructor(a) { const x = friendA.getX(a); // ok friendA.setX(a, x); // ok } }; } |
8. Error Cause
エラーが連鎖したときに、.causeで遡れる様になるとのこと。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<span class="pl-k">async</span> <span class="pl-k">function</span> <span class="pl-en">doJob</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">const</span> <span class="pl-s1">rawResource</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-en">fetch</span><span class="pl-kos">(</span><span class="pl-s">'//domain/resource-a'</span><span class="pl-kos">)</span> <span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-s1">err</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">'Download raw resource failed'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">cause</span>: <span class="pl-s1">err</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">jobResult</span> <span class="pl-c1">=</span> <span class="pl-en">doComputationalHeavyJob</span><span class="pl-kos">(</span><span class="pl-s1">rawResource</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">await</span> <span class="pl-en">fetch</span><span class="pl-kos">(</span><span class="pl-s">'//domain/upload'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">method</span>: <span class="pl-s">'POST'</span><span class="pl-kos">,</span> <span class="pl-c1">body</span>: <span class="pl-s1">jobResult</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-s1">err</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">'Upload job result failed'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">cause</span>: <span class="pl-s1">err</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-k">try</span> <span class="pl-kos">{</span> <span class="pl-k">await</span> <span class="pl-en">doJob</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'Caused by'</span><span class="pl-kos">,</span> <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">cause</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-c">// Error: Upload job result failed</span> <span class="pl-c">// Caused by TypeError: Failed to fetch</span> |
まとめ
あれ?今まで無かったの?的な機能も多々ありますが、どれも有用な感じです。
個人的には言語になり切れていない言語(ニュアンスが難しいですが)自由度があって中間的なところが好きでしたが
可視性が追加になったり、スタティックが追加になったりと、すっかりオブジェクト指向な言語になった感があります。
機会があれば今年(2021年)追加となった機能も記事にしてみたいと思います。
でわ