自作JSエンジンに推しプロポーザルを実装したい！

フロントエンドカンファレンス北海道
- https://fortee.jp/frontend-conf-hokkaido-2025/proposal/b6be4744-2b56-40e0-9e69-e1df5d787068
サンプルリポジトリ
- https://github.com/sajikix/js-minimal-runtime-for-mf2
X
- https://twitter.com/sajikix

Transcript

1. 3ZVTFJ
   4BKJLJ
   
   !TBKJLJY ࣗ࡞+4Τϯδϯʹ
   ਪ͠1SPQPTBMΛ࣮૷͍ͨ͠ʂ
2. ਪ͠1SPQPTBM͸͋Γ·͔͢ʁ
3. ࣗ෼
   
   *OUM.FTTBHF'PSNBU 6OJDPEF͕ࡦఆ͍ͯ͠Δ*$6
   .FTTBHF'PSNBUW .' Λ*OUMͰར༻Ͱ͖Δʂ
   w ݱࡏࠃࡍԽ༻ϥΠϒϥϦͰ΍ͬͯΔ͜ͱ Ћ ͕ඪ४Ͱ
   
   ৄ͘͠͸ڈ೥ͷϑϩϯτΤϯυΧϯϑΝϨϯε๺ւಓͷൃදΛΈͯͶ
   w ͋ͱ;FOOʹ΋ॻ͍ͯΔͷͰͥͻ
4. Ͱ΋
   4UBHF͔ͩΒಈ͘؀ڥ͸ͳ͍😭
5. ໨ඪ
   
   *OUM.FTTBHF'PSNBU ͷҰ෦ ͕ಈ͘ ࠓճͷ໨ඪ͸ҎԼͷίʔυ͕࣮ߦͰ͖Δ͜ͱ
   👌
   const mf = new Intl.MessageFormat("en","Hello {$place}!"); mf.format({ place: "World" }); // ↓ // Hello World!
6. ϨΪϡϨʔγϣϯ w 3VTUͰॻ͖·͢
   w 3VTUࣗମ͸·ͩॳ৺ऀͳͷͰ੿͍ίʔυͰ΋ڐͯ͠
   w લड़ͷ+4ίʔυʹ͋ΔߏจҎ֎͸ղऍɾ࣮ߦͰ͖ͳͯ͘΋ྑ͍ͱ͢Δ
   w Τϥʔॲཧܥͱ͔΋Ұ୴ແࢹʂ🙇
   w .FTTBHF'PSNBUWͷߏจ͸Ұ୴ϓϨʔεϗϧμ 7BSJBCMF ػೳ͚࣮ͩ૷
   w ຊ౰͸ม਺એݴػೳͱ͔ؔ਺ݺͼग़͠ػೳͱ͔໘ന͍Μ͚ͩͲ
7. ඞཁͳ޻ఔ ҎԼͷ
   TUFQ
   Ͱ࣮૷Ͱ͖Δͧʂ
    .FTTBHF'PSNBU
   Wͷ1BSTFSΛ࡞Δ
    ඞཁ࠷௿ݶͳจ๏ΛղऍͰ͖Δ+4
   3VOUJNFΛ࣮૷͢Δ
    ̍Λར༻ͯ͠*OUM.FTTBHF'PSNBUͷGPSNBUݺͼग़͠ػೳΛ࡞Δ
   
8. 
   .FTTBHF'PSNBU
   Wͷ1BSTFSΛ࡞Δ Ҏલ3VTUͷษڧͷͨΊࣗ࡞ͨ͠෺͕͋ΔͷͰͦΕΛ࢖͏
   w IUUQTHJUIVCDPNTBKJLJYNGQBSTFS
   w ෆ۩߹͸ଟগ͋Δ͔΋͚ͩͲҰԠҰ௨ΓͷߏจʹରԠͯ͠Δ
   w ͪΌΜͱDSBUF͕͋ΔͷͰຊདྷ͸ͦͬͪ࢖ͬͨ΄͏͕͍͍
   w IUUQTEPDTSTNG@QBSTFSMBUFTUNG@QBSTFS
   w *$69ʹ΋13͸͋ͬͨͷͰೖͬͨΒͦͬͪ࢖͏΂͠
9. 
   .FTTBHF'PSNBU
   WΛ1BSTFSΛ࡞Δ ˣ͜Ε͕ɺ͜͏ Ұ෦ུ "Hello {$place}!" PatternMessage { declarations: [], pattern: [ String("Hello "), Expression(Variable(VariableExpression {...})), String("!") ] }
10. 
    ࠷௿ݶͳจ๏ΛղऍͰ͖Δ+4
    3VOUJNFΛ࣮૷ ΑΓ۩ମతʹ͸ҎԼͷͭͷ޻ఔ͕Ͱ͖Ε͹ྑͦ͞͏
    -FYFS 1BSTFS 3VOUJNF +4
    $PEF ධՁ݁Ռ 5PLFOྻ "45
11. 
    +43VOUJNFͷ࣮૷
    d-FYFSd -FYFS͸$PEFΛ"45ʹ͢Δલஈ֊ͷॲཧ
    ҙຯͷ͋Δ࠷খݶͷ୯ҐͰ෼ׂɾ෼ྨ͓ͯ͘͜͠ͱͰ1BSTF͠΍͘͢͢Δ
    w ཁ͸ࠃޠͰ΍ͬͨ෼ͪॻ͖Έ͍ͨͳ͜ͱ
    Πϝʔδ const name = input.get("name"); ↓ const / name / = / input / . / get / ( / "name" / ) / ;
12. 
    +43VOUJNFͷ࣮૷
    d-FYFSd 3VTUͰ͸*UFSBUPSͱ࣮ͯ͠૷͢Δͱѻ͍΍͍͢
    ʮಛఆͷจࣈ͕ଓ͘·Ͱ
    PS
    ಛఆͷจࣈ͔དྷΔ·ͰಡΈਐΊΔʯΛ܁Γฦ͢ fn consume_number(&mut self) -> u64 { ɹ // ... while self.input[self.pos].is_ascii_digit() { self.pos += 1; // 1จࣈͣͭಡΈਐΊΔ } // ... }
13. 
    +43VOUJNFͷ࣮૷
    d1BSTFSd 1BTFS͸Ұൠతʹ-FYFSʹΑͬͯ࡞ΒΕͨ5PLFOྻΛ໦ߏ଄ "45 ʹม׵͢Δ const / name / = / input / . / get / ( / "name" / ) / ; ↓ { "body": [{ "type": "VariableDeclaration", "declarations": [{"type": "VariableDeclarator", "id": {...},"init": {...}}] }] }
14. 
    +43VOUJNFͷ࣮૷
    d1BSTFSd جຊతʹҎԼͷ܁Γฦ͠
    w -FYFSͷOFYU Λݺͼग़࣍͠ͷUPLFOΛಘΔ
    w UPLFOʹΑͬͯߏจΛߟ͑Δ
    w ྫ
    
    ,FZXPSE DPOTU
    ˠ
    ม਺એݴΆ͍ͧʂ
    w ͦͷߏจΛQBSTF͢Δઐ༻ϝιουΛݺͼग़͢
    w ˢͰؼ͖ͬͯͨ/PEFΛ͏·͍͜ͱ਌/PEFʹ഑ஔ͢Δ
    w ҎԼݺͼग़ͨ͠ઌͷQBSTFϝιουͰ࠶ؼతͷ͜ͷ࡞ۀ͕ى͖Δ
15. 
    +43VOUJNFͷ࣮૷
    d1BSTFSd ྫ
    
    DPOTU
    OBNF
    
    JOQVUHFU OBNF 
    ͷ৔߹
    DPOTU͕དྷΔ
    ˠ
    7BSJBCMF%FDMBSBUJPOͩ
    ˠ
    ઐ༻ॲཧ΁
    
    
    ˠ
    ࣍*EFOUJ fi FS͕དྷͦ͏΍ͳ
    ˠ
    OBNF
    ͕དྷΔ
    ˠ
    ͜ΕΛม਺໊ͱ͢Δ
    
    
    ˠ
    ͜ͷઌ͸
    
    
    Έ͍ͨʹ
    *OJUJBMJ[FS͕ଓ͘͸ͣ
    ˠ
    ઐ༻ॲཧ΁
    
    
    
    
    ˠ
    
    ͕དྷͨ
    ˠ
    ͔͜͜Βઌ͸"TTJHONFOU&YQSFTTJPO
    ˠ
    ઐ༻ॲཧ΁
    
    
    
    
    
    
    ˠ
     ҎԼ຤୺ͷ/PEF·Ͱଓ͘
16. 
    ࢀߟ &$."4DSJQU࢓༷ॻΛݟͯΈΑ͏
17. 
    +43VOUJNFͷ࣮૷
    d3VOUJNFd ҎԼͷσʔλΛอ࣋Ͱ͖ΔΑ͏ʹ͓ͯ͘͠
    w ม਺ΛTDPQF͝ͱʹ؅ཧͰ͖Δσʔλߏ଄
    
    FOWJSPONFOU
    
    w ؔ਺ΛهԱ͓ͯ͘͠৔ॴ
    
    ࠓճ͸ؔ਺ఆٛΛαϙʔτ͠ͳ͍ͷͰͳ͍
    
    
    3VOUJNF͕ѻ͑Δ஋ΛFOVNͱͯ͠ఆ͓ٛͯ͘͠
    w ਺஋
    
    
    จࣈྻ
    
    0CKFDU )BTI.BQ
    FUD
    
    
18. "45ͷ֤/PEFʹରԠ͢Δ΍ࣜ΍஋Λ࠶ىతʹධՁ͍ͯ͘͠
    
    +43VOUJNFͷ࣮૷
    d3VOUJNFd 7BSJBCMF%FDMBSBUPS *EFOUJ fi FS ม਺໊
    
    JE
    QSPQΛධՁ ஋
    
    JOJU
    QSPQΛධՁ $BMM&YQSFTTJPO  ஋
    
    DBMMFF
    QSPQΛධՁ *EFOUJ fi FS ஋
    
    BSH
    QSPQΛධՁ *EFOUJ fi FS   
19. 
    +43VOUJNFͷ࣮૷
    d3VOUJNFd ࣮ࡍͷTXJUDIͱ෼ذ match node { Node::ExpressionStatement { expression } => self.eval(Some(*expression), env.clone()), Node::VariableDeclaration { id, init } => { let var_name = match &*id { Node::Identifier(name) => name.clone(), _ => panic!("Identifier Expected"), }; // ... } }
20. ͜ΕͰ+4ͷ࣮ߦ͸͍͚Δʂ
21. .FTTBHF'PSNBU7΋
    1BSTFͰ͖ͯΔ
22. ͋ͱ͸ܨ͗ࠐΈͩʂ
23. 
    *OUM.FTTBHF'PSNBUͷGPSNBUݺͼग़͠ػೳ SVOUJNFͰѻ͑Δσʔλͯ͠ɺ*OUM.FTTBHF'PSNBU
    Πϯελϯεઐ༻ͷσʔλΛఆ ͓ٛͯ͘͠
    w NFTTBHF΍ϩέʔϧΛ৘ใͱͯ࣋ͭ͠
    ˠ
    ม਺ʹ*OUM.FTTBHF'PSNBU
    Πϯελϯεͷ৘ใΛొ࿥͓͚ͯ͠Δ pub enum RuntimeValue { Number(u64), StringLiteral(String), MessageFormatInstance(MessageFormatInstance), // 👈 }
24. 
    *OUM.FTTBHF'PSNBUͷGPSNBUݺͼग़͠ػೳ *OUM.FTTBHF'PSNBU
    ΠϯελϯεͷGPSNBUϝιου͕ݺ͹ΕͨΒɺ
    w Πϯεϯεʹ͋ΔNFTTBHFΛ.'
    1BSTFSͰύʔε
    w GPSNBUϝιουͷҾ਺ΦϒδΣΫτσʔλΛQSJOUFSʹ౉͢
    w QSJOUFS͸΋ΒͬͨPCKFDUσʔλΛ7BSJBCMFʹೖΕͯॻࣜԽ
    Ͱ໨తͷจࣈྻ͕ಘΒΕΔ͸ͣʂ
25. 
    *OUM.FTTBHF'PSNBUͷGPSNBUݺͼग़͠ػೳ Πϯεϯεʹ͋ΔNFTTBHFΛ.'
    1BSTFSͰύʔε // ... let mut mf2_parser = ɹɹ ɹMf2Parser::new(&method.instance.message); let ast = mf2_parser.parse(); // ...
26. 
    *OUM.FTTBHF'PSNBUͷGPSNBUݺͼग़͠ػೳ GPSNBUϝιουͷҾ਺ΦϒδΣΫτσʔλΛQSJOUFSʹ౉͢ // Ҿ਺ObjectΛevalͯ͠औಘ let variables = match self.eval(Some(args), env.clone()) { Some(RuntimeValue::Object(map)) => map, _ => HashMap::new(), }; // printerʹ౉͢ MF2Printer::print(&message, &variables),
27. 
    *OUM.FTTBHF'PSNBUͷGPSNBUݺͼग़͠ػೳ QSJOUFS͸΋ΒͬͨPCKFDUσʔλΛ7BSJBCMFʹೖΕͯॻࣜԽ for item in pattern_msg.pattern.iter() { match item { PatternItem::Expression(Expression::Variable(var)) => { let var_name = var.get_variable_name(); if let Some(value) = variables.get(&var_name) { result.push_str(&value.to_string()); } // ... }
28. σϞ
29. ಈ͍ͨʂ🎉
30. ࠓճͷίʔυެ։ͯ͠ΔͷͰ
    ͥͻோΊͯΈ͍ͯͩ͘͞
31. ·ͱΊ w ΋ͷ੍͘͢͝ݶΛ͚ͭΕ͹ҙ֎ͱ+4
    Τϯδϯॻ͚ͦ͏ ͡Όͳ͍ʁ
    w ΋ͷ͘͢͝ݶΒΕͨߏจ
    
    /P
    ࠷దԽ
    
    FUD
    w ࢓༷ʹؔͯ͠΋੍ݶΛ͚ͭΕ͹ҙ֎ͱ࣮૷Ͱ͖ͳ͘΋ͳ͍
    w GPSNBUϝιου͚ͩ
    
    .'ͰରԠ͢Δߏจ΋ͭͷΈ
    
    Τϥʔܥແࢹ
    w +4ΤϯδϯΛ࡞ͬͯΈΔͱ͘͢͝+4ͷߏจͱ1SPQPTBMͷษڧʹͳΔ
    ˠ
    ࣗ෼ྲྀͷ+4ΤϯδϯΛ࡞ͬͯΈͯ༡ΜͰΈΑ͏ʂ
32. 4BKJ
    
    3ZVTFJ
    4BKJLJ 'SPOUFOE
    %FWFMPQFS
    BU
    $ZCP[V
    JOD 𝕏
    !TBKJLJY
33. ࢀߟ w &$."4DSJQU
    
    -BHVBHF
    4QFDJ fi DBUJPO
    w  &$."4DSJQU
    -BOHVBHF
    &YQSFTTJPO
    w ౔Ҫຑະ  ʰʦ࡞ֶͬͯͿʧϒϥ΢βͷ͘͠Έʱٕज़ධ࿦ࣾ
    w 5$
    1SPQPTBM
    GPS
    *OUM.FTTBHF'PSNBU
    w NFTTBHFGPSNBUNFTTBHFGPSNBU
    (JU)VC