ECMAScript仕様の読み方ガイド 〜比較演算子編〜

Meguro.es # 26の発表資料です。
https://meguroes.connpass.com/event/305991/

Transcript

1. ECMAScript 仕様の読み方ガイド 〜比較演算子編〜 syumai Meguro.es # 26 (2024/1/25)
2. 自己紹介 syumai ECMAScript 仕様輪読会 主催 株式会社ベースマキナで管理画面のSaaS を開発中 Go でGraphQL サーバー (gqlgen) や TypeScript でフロント エンドを書いています Software Design 12 月号からCloudflare Workers の連載をして ます Twitter: @__syumai Website: https://syum.ai
4. ベースマキナとは？ DB やAPI の接続設定 & 呼び出し設定をするだけで、簡単にUI 生成が行える管理画面 SaaS API 呼び出しへの権限設定や、レビュー依頼 / 承認機能も簡単に使えます https://about.basemachina.com
5. 本日話すこと ECMAScript の仕様の読み方について 比較演算子の仕様を読みながら、登場順に紹介
6. ECMAScript 仕様書
7. ECMAScript 仕様書 TC39 のサイトから閲覧可能 https://tc39.es/ TC39 -> 標準化団体Ecma International のTechnical Committee 39 Ecma International には他にも沢山のCommittee がある https://ecma-international.org/technical-committees/ サイトを見る限り54 まであるらしい
9. ECMAScript はECMA-262 の仕様 https://ecma-international.org/technical-committees/tc39/?tab=published-standards
10. ECMAScript 仕様書 ECMA-262 は毎年版が更新される 現在の最新はECMAScript 2023 ( 第14 版) Ecma International のサイトから、PDF またはHTML で閲覧可能 https://ecma-international.org/publications-and-standards/standards/ecma-262/ 今回はES2023 のHTML 版を見ます https://262.ecma-international.org/14.0/ 古い仕様のアーカイブもここで読める 版が切られる前の最新のドラフトも閲覧可能 https://tc39.es/ecma262/
11. 比較演算子の仕様を読む
12. ゴール 以下のコードの振る舞いを説明できる 0 < 1 -> true 1 < 0 -> false "a" < "b" -> true "b" < "a" -> false undefined < 1 -> false undefined < -1 -> false null < 1 -> true null < -1 -> false 1 < ({}) -> false ({}) < 1 -> false
13. 文法
14. 13: ECMAScript Language: Expressions 内の Relational Operators に記載
15. 文法 文脈自由文法で表現される Syntax に記載される 斜体文字 は非終端記号 ここでは RelationalExpression など : は非終端記号の定義 ( 文法生成規則とも言う) 左辺の非終端記号を構成するトークン列が : の右辺に示される 右辺のトークン列には、非終端記号および終端記号が並ぶ 左辺の非終端記号が同一となる生成規則が複数並ぶ場合、縦に並べて記載される 繰り返し同じ記載をするのを避けるための省略記法 共通した左辺を持つ複数の生成規則を指して代替 (alternatives) とも言う
16. 文法 等幅フォントの文字は終端記号 ここでは < 終端記号は、非終端記号と異なり、記載された通りにソースコード中に現れる 非終端記号は最終的にこれらの記号に辿り着くため、終端記号と呼ばれる
17. セマンティクス
18. MDN Web Docs 用語集: ウェブ関連用語の定義 > Semantics ( セマンティクス) https://developer.mozilla.org/ja/docs/Glossary/Semantics
19. 13.10.1 Runtime Semantics: Evaluation に記載
20. セマンティクスが気になる文法生成規則にホバーすると出てくるリンクから飛べます
21. 比較演算子 < のセマンティクス 文法生成規則に対応するRuntime Semantics が定義されている 実行時 (runtime) のセマンティクスを示すためのアルゴリズム列 セマンティクスはStatic Semantics によって定義されるケースもある 文脈自由文法だけでは入力列が有効か判断できないようなケースで使う Runtime Semantics の前段のバリデーション的な用法が多い (Early Errors 等)
22. アルゴリズムステップを読む ( < のRuntime Semantics) 1. Let lref be ? Evaluation of RelationalExpression. Let lref be → エイリアス宣言。アルゴリズムステップ中でのみ有効。 ここでは、 ? ... 以下の結果に lref と言うエイリアスを付けている
23. アルゴリズムステップを読む ( < のRuntime Semantics) 1. Let lref be ? Evaluation of RelationalExpression. Evaluation of RelationalExpression. → Evaluation と言う Syntax-Directed Operation の呼び出し Syntax-Directed Operation は、 Operation of Syntax の形式で呼ばれる 実は、今読んでいる箇所が RelationalExpression に対する Evaluation 呼び 出しそのもののアルゴリズムです ※ RelationalExpression には複数の表現があり、それぞれのセマンティク スが定義されている点に注意
24. アルゴリズムステップを読む ( < のRuntime Semantics) 1. Let lref be ? Evaluation of RelationalExpression. ? → ReturnIfAbrupt の省略記法 これが書かれている箇所の右側の処理が失敗した場合、ステップをここで中 断し、失敗した結果を返す
25. アルゴリズムステップを読む ( < のRuntime Semantics) 1. Let lref be ? Evaluation of RelationalExpression. まとめると → RelationalExpression に対して Evaluation を評価し、その結果に lref と言うエイリ アスを割り当てる。 Evaluation の評価に失敗したら、失敗した結果を返して中断する。
26. アルゴリズムステップを読む ( < のRuntime Semantics) 2 ~ 4 はスキップします
27. アルゴリズムステップを読む ( < のRuntime Semantics) 5. Let r be ? IsLessThan(lval, rval, true). IsLessThan(lval, rval, true). → IsLessThan と言う Abstract Operation の呼び出し Abstract Operation は、 () に引数を伴う、関数に似た形式で呼び出される 6. If r is undefined, return false. Otherwise, return r. → r が undefined なら false を、それ以外なら r の値を返す
28. Abstract Operation とSyntax-Directed Operation のおさらい ECMAScript の仕様内で記述されるアルゴリズムは、Abstract Operation かSyntax- Directed Operation を通じて呼び出される。 Abstract Operation は Operation(arg1, arg2) といった関数的なスタイルで、値を 受け取ってアルゴリズムを処理する。 Syntax-Directed Operation は Operation of Syntax のスタイルで、文法生成規則を 受け取ってアルゴリズムを処理する。 文法生成規則に複数の代替 (alternatives) が存在する場合、それぞれに対するアル ゴリズムが定義される
29. IsLessThan の仕様を読む
30. https://262.ecma-international.org/14.0/#sec-islessthan
31. 死ぬほど長い
32. 時間がないのでざっくり説明 IsLessThan(x, y, LeftFirst) に対して、 1. x, y に ToPrimitive を適用して、値をプリミティブ型にする。 2. String 同士の組なら、同じindex 同士のcode unit の大きさで比較して終了。 3. BigInt とString の組なら、BigInt 側に揃えて比較して終了。 String からBigInt に変換を試みる。 4. ToPrimitive を適用した x, y に、更に ToNumeric を適用する。 5. Number 同士またはBigInt 同士の組となった場合、それらを比較して終了。 6. x, y のいずれかが NaN であれば、 undefined を返して終了。 7. -∞ < +∞ なら true 、 +∞ < -∞ なら false を返して終了。 8. x, y を実数に変換したものを比較した結果を返して終了。
33. 冒頭の例を振り返る 0 < 1 -> true 1 < 0 -> false "a" < "b" -> true "b" < "a" -> false これらは、Number 同士の組、およびString 同士の組なので、特に懸念なし
34. 冒頭の例を振り返る undefined < 1 -> false undefined < -1 -> false これは、 ToPrimitive(undefined) が undefined ToNumeric(undefined) が NaN となるため、 NaN < 1 NaN < -1 となり、 IsLessThan が undefined を返すため、 Evaluation で false を返す
35. 13.10.1 Runtime Semantics: Evaluation の再掲
36. 冒頭の例を振り返る null < 1 -> true null < -1 -> false これは、 ToPrimitive(null) が null ToNumeric(null) が 0 となるため、 0 < 1 0 < -1 となり、 IsLessThan が undefined ではない値を返すため、 Evaluation で true および false を返す
37. 冒頭の例を振り返る 1 < ({}) -> false ({}) < 1 -> false これは、 ToPrimitive({}) が "[object Object]" ToNumeric("[object Object]") が NaN となるため、 NaN < 1 NaN < -1 となり、 IsLessThan が undefined を返すため、 Evaluation で false を返す
38. まとめ ECMAScript の仕様を読むには、知っておくべき概念がいくつかある セマンティクスは、アルゴリズムステップで示される アルゴリズムステップは、Syntax-Directed Operation 、Abstract Operation を通じ て呼び出される その他色々ありますが、今回は紹介し切れていません ECMAScript 仕様書には、パーマリンクが大量に貼ってあって便利 一見複雑そうに見えるが、ルールがわかってきたら意外と読める
39. 宣伝 ECMAScript の仕様を読むのに興味が出た方は、ぜひECMAScript 仕様輪読会にお越し ください！ 2 週に1 回、火曜に開催しています https://esspec.connpass.com/
40. ご清聴ありがとうございました！
41. おまけ ECMAScript の仕様を読むにあたって便利なリンク集 esmeta https://github.com/es-meta/esmeta ECMAScript 仕様書をステップ実行できるツール How to Read the ECMAScript Specification https://timothygu.me/es-howto/ 読み方の基本的なルールについてよくまとまっています Understanding the ECMAScript spec https://v8.dev/blog/tags/understanding-ecmascript V8 公式ブログの記事。全4 記事に跨って説明しています