Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
Search
syumai
January 25, 2024
Programming
5
540
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
Meguro.es # 26の発表資料です。
https://meguroes.connpass.com/event/305991/
syumai
January 25, 2024
Tweet
Share
More Decks by syumai
See All by syumai
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
Go言語で始めるCloudflare Workers
syumai
4
1.4k
Goのジェネリクスを活用する
syumai
2
2.6k
Goでスタックトレースを扱う方法がややこしい件について
syumai
2
4.6k
What's new in Go 1.20?
syumai
2
1.7k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
1.1k
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
670
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
480
What's new in Go 1.18?
syumai
4
1.9k
Other Decks in Programming
See All in Programming
雑に思考を整理する技術と効能
konifar
63
30k
try! Swift Tokyo 初参加報告LT
hinakko2
0
240
Site Reliability Engineering for GMO
pyama86
8
1.1k
Git Rebase
bkuhlmann
11
1.6k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
450
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
Try creating your own orderedmap
kazamori
1
210
Polars入門
daikikatsuragawa
1
180
敵対的ポイフル
futabato
0
130
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
Code Reviews
bkuhlmann
4
900
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
360
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
14
1k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.6k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Side Projects
sachag
451
41k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Teambox: Starting and Learning
jrom
128
8.4k
4 Signs Your Business is Dying
shpigford
176
21k
Code Review Best Practice
trishagee
56
15k
Transcript
ECMAScript 仕様の読み方ガイド 〜比較演算子編〜 syumai Meguro.es # 26 (2024/1/25)
自己紹介 syumai ECMAScript 仕様輪読会 主催 株式会社ベースマキナで管理画面のSaaS を開発中 Go でGraphQL サーバー
(gqlgen) や TypeScript でフロント エンドを書いています Software Design 12 月号からCloudflare Workers の連載をして ます Twitter: @__syumai Website: https://syum.ai
None
ベースマキナとは? DB やAPI の接続設定 & 呼び出し設定をするだけで、簡単にUI 生成が行える管理画面 SaaS API 呼び出しへの権限設定や、レビュー依頼
/ 承認機能も簡単に使えます https://about.basemachina.com
本日話すこと ECMAScript の仕様の読み方について 比較演算子の仕様を読みながら、登場順に紹介
ECMAScript 仕様書
ECMAScript 仕様書 TC39 のサイトから閲覧可能 https://tc39.es/ TC39 -> 標準化団体Ecma International のTechnical
Committee 39 Ecma International には他にも沢山のCommittee がある https://ecma-international.org/technical-committees/ サイトを見る限り54 まであるらしい
None
ECMAScript はECMA-262 の仕様 https://ecma-international.org/technical-committees/tc39/?tab=published-standards
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/
比較演算子の仕様を読む
ゴール 以下のコードの振る舞いを説明できる 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: ECMAScript Language: Expressions 内の Relational Operators に記載
文法 文脈自由文法で表現される Syntax に記載される 斜体文字 は非終端記号 ここでは RelationalExpression など :
は非終端記号の定義 ( 文法生成規則とも言う) 左辺の非終端記号を構成するトークン列が : の右辺に示される 右辺のトークン列には、非終端記号および終端記号が並ぶ 左辺の非終端記号が同一となる生成規則が複数並ぶ場合、縦に並べて記載される 繰り返し同じ記載をするのを避けるための省略記法 共通した左辺を持つ複数の生成規則を指して代替 (alternatives) とも言う
文法 等幅フォントの文字は終端記号 ここでは < 終端記号は、非終端記号と異なり、記載された通りにソースコード中に現れる 非終端記号は最終的にこれらの記号に辿り着くため、終端記号と呼ばれる
セマンティクス
MDN Web Docs 用語集: ウェブ関連用語の定義 > Semantics ( セマンティクス) https://developer.mozilla.org/ja/docs/Glossary/Semantics
13.10.1 Runtime Semantics: Evaluation に記載
セマンティクスが気になる文法生成規則にホバーすると出てくるリンクから飛べます
比較演算子 < のセマンティクス 文法生成規則に対応するRuntime Semantics が定義されている 実行時 (runtime) のセマンティクスを示すためのアルゴリズム列 セマンティクスはStatic
Semantics によって定義されるケースもある 文脈自由文法だけでは入力列が有効か判断できないようなケースで使う Runtime Semantics の前段のバリデーション的な用法が多い (Early Errors 等)
アルゴリズムステップを読む ( < のRuntime Semantics) 1. Let lref be ?
Evaluation of RelationalExpression. Let lref be → エイリアス宣言。アルゴリズムステップ中でのみ有効。 ここでは、 ? ... 以下の結果に lref と言うエイリアスを付けている
アルゴリズムステップを読む ( < の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 には複数の表現があり、それぞれのセマンティク スが定義されている点に注意
アルゴリズムステップを読む ( < のRuntime Semantics) 1. Let lref be ?
Evaluation of RelationalExpression. ? → ReturnIfAbrupt の省略記法 これが書かれている箇所の右側の処理が失敗した場合、ステップをここで中 断し、失敗した結果を返す
アルゴリズムステップを読む ( < のRuntime Semantics) 1. Let lref be ?
Evaluation of RelationalExpression. まとめると → RelationalExpression に対して Evaluation を評価し、その結果に lref と言うエイリ アスを割り当てる。 Evaluation の評価に失敗したら、失敗した結果を返して中断する。
アルゴリズムステップを読む ( < のRuntime Semantics) 2 ~ 4 はスキップします
アルゴリズムステップを読む ( < の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 の値を返す
Abstract Operation とSyntax-Directed Operation のおさらい ECMAScript の仕様内で記述されるアルゴリズムは、Abstract Operation かSyntax- Directed
Operation を通じて呼び出される。 Abstract Operation は Operation(arg1, arg2) といった関数的なスタイルで、値を 受け取ってアルゴリズムを処理する。 Syntax-Directed Operation は Operation of Syntax のスタイルで、文法生成規則を 受け取ってアルゴリズムを処理する。 文法生成規則に複数の代替 (alternatives) が存在する場合、それぞれに対するアル ゴリズムが定義される
IsLessThan の仕様を読む
https://262.ecma-international.org/14.0/#sec-islessthan
死ぬほど長い
時間がないのでざっくり説明 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 を実数に変換したものを比較した結果を返して終了。
冒頭の例を振り返る 0 < 1 -> true 1 < 0 ->
false "a" < "b" -> true "b" < "a" -> false これらは、Number 同士の組、およびString 同士の組なので、特に懸念なし
冒頭の例を振り返る undefined < 1 -> false undefined < -1 ->
false これは、 ToPrimitive(undefined) が undefined ToNumeric(undefined) が NaN となるため、 NaN < 1 NaN < -1 となり、 IsLessThan が undefined を返すため、 Evaluation で false を返す
13.10.1 Runtime Semantics: Evaluation の再掲
冒頭の例を振り返る null < 1 -> true null < -1 ->
false これは、 ToPrimitive(null) が null ToNumeric(null) が 0 となるため、 0 < 1 0 < -1 となり、 IsLessThan が undefined ではない値を返すため、 Evaluation で true および false を返す
冒頭の例を振り返る 1 < ({}) -> false ({}) < 1 ->
false これは、 ToPrimitive({}) が "[object Object]" ToNumeric("[object Object]") が NaN となるため、 NaN < 1 NaN < -1 となり、 IsLessThan が undefined を返すため、 Evaluation で false を返す
まとめ ECMAScript の仕様を読むには、知っておくべき概念がいくつかある セマンティクスは、アルゴリズムステップで示される アルゴリズムステップは、Syntax-Directed Operation 、Abstract Operation を通じ て呼び出される
その他色々ありますが、今回は紹介し切れていません ECMAScript 仕様書には、パーマリンクが大量に貼ってあって便利 一見複雑そうに見えるが、ルールがわかってきたら意外と読める
宣伝 ECMAScript の仕様を読むのに興味が出た方は、ぜひECMAScript 仕様輪読会にお越し ください! 2 週に1 回、火曜に開催しています https://esspec.connpass.com/
ご清聴ありがとうございました!
おまけ 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 記事に跨って説明しています