Parsing Javascript

The document provides an in-depth look at the process of parsing in Javascript. It explains parsing as the transformation of a programming language described in strings into a structured state. Key topics include the flow of parsing (reading source code, converting Unicode sequences and escapes, tokenization, etc.), dealing with Javascript escapes, lexical analysis, syntax analysis using Backus-Naur Form (BNF), top-down and bottom-up parsing methods, and challenges in parsing regular expressions, template literals, destructuring assignments, and arrow functions. The document also discusses pre-parsing in browsers and testing for custom parsers, highlighting the complexity and intricacies involved in parsing Javascript.

「Parsing Javascript」は、Javascriptのパース（解析）プロセスについて詳細に説明しています。この文書は、文字列で記述されたプログラミング言語を構造化された状態に変換するパースの流れ（ソースコードの読み込み、Unicodeシーケンスとエスケープの変換、トークン化など）、Javascriptエスケープの扱い、字句解析、Backus-Naur Form（BNF）を使用した構文解析、トップダウンとボトムアップのパース方法、正規表現、テンプレートリテラル、分解代入、アロー関数のパースの難しさについて述べています。また、ブラウザでのプリパースやカスタムパーサーのテストについても触れており、Javascriptのパースにおける複雑さと繊細さを強調しています。

Transcript

1. 1BSTJOH
   +BWBTDSJQU
2. Who Name 青野健利 GitHub @brn Twitter @brn227 What Dev Lead at 株式会社AI Shift Contributor of V8 Javascript Engine
3. 8IBU
   JT
   QBSTJOH
4. Parseとは What is parsing 文字列で記述されたプログラミング言語を 構造化された状態に変換すること
5. const a = "Hello World" 7BSJBCMF%FDMBSBUJPO *EFOUJ fi FS B
   -JUFSBM l)FMMP
   8PSMEz
6. Parseの流れ What is parsing 1. ソースコードの読み出し 2. Unicode Sequenceや各種のEscapeを実際の値に変換 3. Token化 4. Parse
7. 各種Escapeのdecode What is parsing Javascriptには以下のEscape Sequenceがあるので Decodeして文字列化しておく 1. Unicode Sequence 2. Hex Escape 3. Ascii Escape 4. Octal Literal 5. Binary Literal "\u0056" 0xFFFFFF "\x12" 0777 0b0000001
8. 字句解析 What is parsing ソースコードの文字列そのままでParseするのはしんどいので ソースコードからTokenへと変換する
9. Token化 What is parsing KEYWORD(const) IDENTIFIER(a) OPERATOR(eq) STRING_LITERAL(Hello World) const a = "Hello World"
10. 構文解析 What is parsing Token列を処理する
11. BNF What is parsing Parse方法について話す前にBNFについて BNFとはバッカス・ナウア・フォーム の略でプログラミング言語の文法を表すのに利用される
12. BNF What is parsing <expression> ::= <term> | <expression> "+" <term> | <expression> "-" <term> <term> ::= <factor> | <term> "*" <factor> | <term> "/" <factor> <factor> ::= <number> | "(" <expression> ")" <number> ::= <digit> | <number> <digit> <digit> ::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" このBNFは単純な算術演算("2*(3+4)" や “5-3/2”のような)を表している
13. BNF What is parsing 多くのプログラミング言語はBNFによる文法の定義を持っている Ecmascriptも例外ではなく ECMA262の仕様書のAppendix A Grammar Summary というページが存在し、そこにBNFで文法が定義されている https://262.ecma-international.org/14.0/#sec-grammar-summary
14. Parse手法 What is parsing プログラミング言語をParseする方法はいくつか種類がある
15. Top-Down Parsing What is parsing Top-Down Parsing • 再帰下降構文解析 • LL(N)
16. 再帰下降構文解析 What is parsing それぞれの文法をParseするための関数を 再帰的に呼び出すことでParseする手法 手書き向き
17. LL(N) What is parsing Left To RightでParseし、左端導出というものを行う
18. 左端導出 What is parsing const a = "Hello World" 7BSJBCMF%FDMBSBUJPO
    
    .PEJ fi FS
    *EFOUJ fi FS
    
    &YQS PNJU 
    .PEJUJ fi FS
    
    lDPOTUz
    c
    lMFUz
    *EFOUJ fi FS
    
    $IBS PNJU 
19. const a = "Hello World" 7BSJBCMF%FDMBSBUJPO const a = "Hello World" .PEJUJ fi FS const a = "Hello World" .PEJUJ fi FS *EFOUJ fi FS lDPOTUz const a = "Hello World" .PEJUJ fi FS *EFOUJ fi FS lDPOTUz $IBS PNJU  B
20. const a = "Hello World" .PEJUJ fi FS *EFOUJ fi FS lDPOTUz $IBS PNJU  B &YQS PNJU 
    const a = "Hello World" .PEJUJ fi FS *EFOUJ fi FS lDPOTUz $IBS PNJU  B &YQS PNJU 
    4USJOH-JUFSBM 0NJU 
    l)FMMP
    8PSMEz
21. const a = "Hello World" .PEJUJ fi FS *EFOUJ fi FS lDPOTUz $IBS PNJU  B &YQS PNJU 
    4USJOH-JUFSBM 0NJU 
    l)FMMP
    8PSMEz 7BSJBCMF%FDMBSBUJPO
22. Bottom-Up Parsing What is parsing Bottom-Up Parsing • LR(N) • LALR(N)
23. LR法 What is parsing Left To RightでParseし、右端導出を行う 手書きでは作成が難しく BisonやYacc等のParserジェネレータを使い 状態遷移テーブルから次の状態を決め 最終的な文法が決まる
24. 右端導出 What is parsing const a = "Hello World" 7BSJBCMF%FDMBSBUJPO
    
    .PEJ fi FS
    *EFOUJ fi FS
    
    &YQS PNJU 
    .PEJUJ fi FS
    
    lDPOTUz
    c
    lMFUz
    *EFOUJ fi FS
    
    $IBS PNJU 
25. const a = "Hello World" .PEJUJ fi FS 4 const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ fi FS 4 lDPOTUz const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ fi FS 3 lDPOTUz $IBS PNJU  B < DPOTU 4
    4
    FYQFDUFE> <.PEJ fi FS
    B 4
    4
    FYQFDUFE> <.PEJ fi FS
    *EFOUJ fi FS
    4>
26. const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ fi FS 3 lDPOTUz $IBS PNJU  B &YQS PNJU  4 const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ fi FS 3 lDPOTUz $IBS PNJU  B &YQS PNJU  3 4USJOH-JUFSBM PNJU  3 l)FMMP
    8PSMEz <.PEJ fi FS
    *EFOUJ fi FS
    4> <.PEJ fi FS
    *EFOUJ fi FS
    &YQS>
27. const a = "Hello World" .PEJUJ fi FS 3 *EFOUJ fi FS 3 lDPOTUz $IBS PNJU  B &YQS PNJU  3 4USJOH-JUFSBM PNJU  3 l)FMMP
    8PSMEz <7BSJBCMF%FDMBSBUJPO>
28. 結局？ What is parsing Javascriptは一応LL(1)の文法なので 再帰下降構文解析を使うことが多い メジャーなJavascriptエンジンは手書きで書いている
29. 結局？ What is parsing LRの構文解析器を作成するためには BNFレベルで文法の曖昧さをなくしていく必要があるが JavascriptはBNFレベルでは厳密なパースができないので むしろ手書き以外だと非常に面倒なことになる
30. 1BSTJOH
    +BWBTDSJQU
31. 理想と現実 Parsing Javascript 理想: ParserとScannerが疎結合かつ単純なパーサジェネレー タでパーサが作れる 現実: ParserとScannerは相互に結合し、手書きで泥臭いコー ドを大量に書いて、ようやくパースできても重箱の隅的な言語仕 様に引っかかり、さらに泥臭いコードを書いて解決する
32. ここがつらいよJavascript Parsing Javascript 正規表現
33. 正規表現がつらい Parsing Javascript 正規表現リテラルは/で始まり/で終わる Scannerにとって/をどう解釈するかがキモ
34. 正規表現がつらい Parsing Javascript なので、Parser側で正規表現が来ることが可能な箇所を Parserの状態として持っておいて、Scannerから参照すること で、”/”の処理を変える必要がある
35. テンプレートリテラルがつらい Parsing Javascript テンプレートリテラルも同様 “`”の処理を考える必要がある
36. ここがつらいよJavascript Parsing Javascript 分割代入
37. 分割代入がつらい Parsing Javascript 分割代入は左辺に特殊な形式のObject/Array Literal を利用することが可能だが、ParserはParseのタイミングでそれ がArray/Objectかどうかを判断するのが難しい
38. 分割代入がつらい Parsing Javascript [a,b,c] = [1,2,3] [a,b,c]をパースする時点ではそれが何かはわからない
39. 分割代入がつらい Parsing Javascript なので分割代入用に拡張されたArray/Object のASTを用意して、先にParseしてから親の文法側で左辺に Array/Objectが来ていた場合だけValidationを実施する
40. ({a = 1}) = {a} ObjectLikeLiteral { Property { has_assignment = true Identifier {a} } } ({a = 1}) = {a} ObjectLikeLiteral { Property { has_assignment = true Identifier {a} } } Validationを実施 has_assignmentは許可される
41. ({a = 1}) ObjectLikeLiteral { Property { has_assignment = true Identifier {a} } } ({a = 1}) ObjectLikeLiteral { Property { has_assignment = true Identifier {a} } } Validationを実施 has_assignmentは許可されないので エラー
42. ここがつらいよJavascript Parsing Javascript Arrow Function
43. ArrowFunctionがつらい Parsing Javascript アロー関数は簡潔に書けるので非常に良いのだが Parserは地獄
44. ArrowFunctionがつらい Parsing Javascript (a, b, c = 1) => {} (a, b, c = 1) この2つを左からParseして別の構文木として作り上げる必要がある そのため、Ecma262では CoverCallExpressionAndAsyncArrowHead というExpressionとArrowFunction両方をカバーするための文法規則が導入されている
45. ArrowFunctionがつらい Parsing Javascript アロー関数も基本的には分割代入とかと同じで、まずは ExpressionとしてParseして、”=>”が見えたらアロー関数とし て取り扱うことでなんとか回避する
46. ここがつらいよJavascript Parsing Javascript 他にも色々あるけど割愛 - Eary Errors - Strict Mode etc..
47. 1SF1BSTJOH
48. PreParsingとは PreParsing ブラウザで動くJavascriptならではの工夫が PreParsing
49. PreParsingとは PreParsing 事前に関数の外観だけParseして呼び出されるまでParse自体 をスキップする機能 すべての関数定義をParseしているとStartup Timeが遅くなる ので先に今からすぐ動かすべきポイントだけParseして動作させ る
50. PreParsingとは PreParsing function A() { alert(1) } function B () { alert(2) } document.addEventListener("#target", "click", () => { A() B() }) 関数AとBはParseされずに document.addEventListenerがParseされる AとBはclickが発生したタイミングでParseされる
51. どのように実現するか PreParsing ブラウザごとに実現方法が違うので紹介
52. Chrome PreParsing PreParserという別のParser実装が存在しており、Parse処理 自体を変更している 関数を見つけると引数等の情報のみParseしてBodyはすべて ParseはするもののASTを生成せずにスキップする処理に差し替 えてある
53. Webkit PreParsing AST生成側に工夫があり、PreParsingのタイミングではASTは 空のオブジェクトのみを返し、新たに値を生成しない
54. どっち PreParsing どっちが良いというものはないが、自分が実装したときは Webkit方式を採用した
55. 1BSTFS
    5FTU
56. テスト PreParsing Parserを自分で書いた場合テストがかなり大変だが、 Ecmaがテストケースを用意していくれており https://github.com/tc39/test262-parser-tests に必要なテストケースが大量にある
57. ͓ΘΓ