Ruby Wasmのおさらいと活用方法を探る / After-Rubykaigi-2022-ruby-wasm

After RubyKaigi2022での登壇資料となります。
https://medpeer.connpass.com/event/260548/

当日使用したデモページはこちら
https://lnit.github.io/ruby-wasm-pages/

1. 3VCZ8BTN
   ͷ
   ͓͞Β͍ͱ׆༻ํ๏Λ୳Δ "GUFS
   3VCZ,BJHJ
   
2. ࣗݾ঺հ w ϧχ 
 ɹ5XJUUFS
   !MOJ@5
   w .FE1FFS
   &OHJOFFS ʙ
   w ຊۀ͸4QMBUPPO͓͡͞Μ
   w ޷͖ͳ3BJMTͷϝιου 

   QSFTFODF
   w ݏ͍ͳ3BJMTͷϝιου 

   BDDFQUT@OFTUFE@BUUSJCVUFT@GPS
3. $-*/*$
   4VQQPSU
   ҩࢣͷ։ۀࢧԉ
4. .FE1FFS
   $BSFFS
   
   ҩࢣͷస৬ࢧԉ
5. ຊ೔ͷςʔϚ IUUQTSVCZLBJHJPSHQSFTFOUBUJPOTLBUFJOPJHBLVLVOIUNM
6. 3VCZ
   
   8FC"TTFNCMZ  
   3VCZ
   
   1SFWJFX
   
   ϦϦʔε
    
   3VCZ
   
   1SFWJFX
   
   ϦϦʔε
7. 8FC"TTFNCMZ
8. 8FC"TTFNCMZ 8BTN  Ϟμϯϒϥ΢βͰಈ࡞͢Δ 
 όΠφϦίʔυͷ৽͍͠ϑΥʔϚοτ
    ಛ௃
    ߴύϑΥʔϚϯε
    1PSUBCMF
    ಛఆͷݴޠʹґଘ͠ͳ͍
    4BOECPY؀ڥͳͲͰ҆શʹ࣮ߦͰ͖Δ
9. Ұൠతͳ8BTN࣮ߦϑϩʔ  $
   
   $
    4XJGU
    3VTU
    (P
     XBTN ϒϥ΢β
10. 3VCZͷ8BTN࣮ߦϑϩʔ SVCZXBTN 3VCZΠϯλϓϦλ
    $3VCZ ϒϥ΢β BQQSC
11. ؆୯ʹ3VCZ͸ಈ͔ͳ͍ʜ  ඪ४ͷ8FC"TTFNCMZʹ͸ʜ
     ϑΝΠϧγεςϜ͕ͳ͍
     γεςϜΫϩοΫ͕ͳ͍
     ωοτϫʔΫ͕ͳ͍
     ྫ 
 5JNFOPXɹˡฦ͢஋͕ͳ͍ʂʂʂ
12. ؆୯ʹ3VCZ͸ಈ͔ͳ͍ʜ  +4Ͱ8FC"TTFNCMZʹؔ਺Λఏڙ͢Δ 5JNFOPX
    ˣ
    DMPDL@HFUUJNF
    ˣ
    %BUFOPX XBTN KT
13. ΋͏ͻͱͭͷཁૉ
    8"4*
14. ߴ·Δχʔζ  ʮ༷ʑͳ؀ڥʯͰ 
 ʮ҆શʯ͔ͭʮޮ཰తʯʹ 
 ϓϩάϥϜΛಈ͔͍ͨ͠ʂʂ
     8FCҎ֎ʹ΋ҰൠతͳΞϓϦͰٻΊΒΕ͍ͯΔ
15. 8"4*ϕʔεͱ͸  8FC
    "TTFNCMZ
    4ZTUFN
    *OUFSGBDF
    8"4*
     ϑΝΠϧγεςϜ΁ͷΞΫηεͳͲ 
 04ʹґଘ͢ΔγεςϜίʔϧͳͲΛந৅Խ͢Δ࢓༷ 8BTN
    3VOUJNF 7. )PTU
    4ZTUFN 8"4*
16. 8"4*ϕʔεͱ͸  8FC"TTFNCMZࣗମ͸γεςϜΠϯλʔϑΣΠεΛ 
 ࣋ͨͳ͍7.ͷ্Ͱ࣮ߦ͞ΕΔ
     8"4*͸͜ΕΛن֨Խ͢Δ 8BTN
    3VOUJNF 7. )PTU
    4ZTUFN 8"4*
17. 8"4*7'4
18. 8"4*7'4  Ծ૝ϑΝΠϧγεςϜ 7'4 Λ8"4*্ʹ࣮૷
     ϑΝΠϧૢ࡞͕Ͱ͖ͳ͍؀ڥͰ΋ 
 ϑΝΠϧγεςϜ͔ΒͷಡΈࠐΈ͕Ͱ͖ΔΑ͏ʹ
     Ծ૝ϑΝΠϧγεςϜʹʮSCʯΛຒΊࠐΜͰ͓͚͹ 
 ։ൃऀ͸γϯάϧϑΝΠϧͰͷόΠφϦΛੜ੒Ͱ͖Δʂ
19. ͳΜ͔͍͢͝࢓૊Έ͕
    ࣮૷͞Εͱͬͨʂ
20. ɹΠϯετʔϧͳ͠ʹ
    3VCZ͕ಈ͘Α͏ʹͳͬͨ  Ϟμϯϒϥ΢β֤छ
     $ISPNF
    'JSFGPY
    &EHF
    
     8FC"TTFNCMZରԠ؀ڥ
     Τοδ؀ڥ 'BTUMZ
    $MPVE fl BSF
21. ɹΠϯετʔϧͳ͠ʹ
    3VCZ͕ಈ͘Α͏ʹͳͬͨ  ˞ϒϥ΢βͰಈ͘3VCZͷઌഐʹʮ0QBMʯ͕ଘࡏ͢Δ
     ͪ͜Β͸3VCZΛ+BWB4DSJQUʹม׵͢ΔίϯύΠϥ
22. ଞɺٕज़తͳ೉ॴ͸
    ݩͷൃදࢿྉΛࢀরʂ ಉ͡࿩ͯ͠΋
    ͍Έͳ͍͔ΒͶ
23. ׆༻
24. ׆༻ IUUQTSVCZQV[[MFTDPPLQBEUFDI
25. ׆༻  3VCZϦϑΝϨϯε্Ͱ3VCZΛ࣮ߦͰ͖ΔΑ͏ʹ͢Δ
26. ࣮ࡍʹ࢖ͬͯΈΑ͏ʂ
27. 3VCZ
    8BTNΛखݩͰ
    ࢼ͠·͔ͨ͠ʁ ͸͍ :FT
28. ؆୯ʹࢼͤΔͧʂ
29. HJUIVCDPNSVCZSVCZXBTN ૣ଎DMPOF͠Α͏ʂ
30. ஫
    )5.-ͰࢼͤΔαϯϓϧ͕
    ਂΊͷσΟϨΫτϦʹ͋Δ  IUUQTHJUIVCDPNSVCZSVCZXBTNUSFFNBJO QBDLBHFTOQNQBDLBHFTSVCZXBTNXBTJFYBNQMF
     IUUQTHJUIVCDPNSVCZSVCZXBTNUSFFNBJO QBDLBHFTOQNQBDLBHFTSVCZIFBEXBTNXBTJ
31. ಈ͔ͯ͠ΈΑ͏
32. <html> <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm- wasi@0.3.0-2022-09-06-f/dist/browser.script.iife.js"></script> <script type="text/ruby"> puts "Hello, world!" </script> </html>
33. w OQNͰఏڙ͞Ε͍ͯΔTDSJQUΛಡΈࠐΉ
    w SVCZΛॻ͘
    w Ҏ্ʂ
34. % FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP
35. 3VCZαʔόʔ͍Βͣʂ
36. ੩తϑΝΠϧΛϗετ
    Ͱ͖Ε͹3VCZΛಈ͔ͤΔ
37. ͞Βʹ+4͕ѻ͑Δ
38. +4Λѻ͏ require "js" document = JS.global[:document]
39. % FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP
40. +4Λѻ͏ require "js" window = JS.global[:window] window.alert "Hello, world!"
41. +4Λѻ͏ loop do window.alert "Hello, world!" end
42. % FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP
43. ͋Γ͑ͦ͏ͳ࢓༷Λ
    3VCZͰॻ͍ͯΈΑ͏
44. % FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP
45. ը໘ଆͷ
    όϦσʔγϣϯʂ
46. Ͱ΋ɺ͜Ε͘Β͍ͳΒ
    +4Ͱॻ͚ͦ͏ʜ ͏ʔΜ
47. ΍΍೉ղͳ
    όϦσʔγϣϯͳΒʁ
48. ྫ
    ϚΠφϯόʔ
49. ϚΠφϯόʔ  ܻͷ਺ࣈ
    9999
    9999
    9999
     ेҰܻͷ൪߸ٴͼͦͷޙʹ෇͞ΕͨҰܻͷݕࠪ༻਺ࣈ
     ࠷ޙඌͷܻ͸νΣοΫσΟδοτ
     ܻ਺ νΣοΫσΟδοτ͕߹͍ͬͯΕ͹Α͍
50. ϚΠφϯόʔ
51. ϚΠφϯόʔ def valid_digit?(value) digits = value.to_s.chars.map(&:to_i) return false if digits.length != 12 check_digit = digits.pop digits.reverse! mods = (1..11).sum do |n| pn = digits[n - 1] qn = n <= 6 ? n + 1 : n - 5 pn * qn end % 11 calced_check_digit = mods <= 1 ? 0 : 11 - mods check_digit == calced_check_digit end
52. +4Ҡ২͠ΜͲ͍
    ͔΋͠Εͳ͍
53. % FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP
54. 3VCZͰॻ͚Δʂ
55. +4΋ѻ͑Δ͔Β
    ԿͰ΋Ͱ͖ͦ͏ͩͳ͊
56. ԿͰ΋Ͱ͖ͦ͏ͳʜ <canvas></canvas>
57. ϝΠϯϧʔϓΛ࡞ͬͯʜ vm.eval(` $scene = MainScene.new `) async function main( tFrame ) { const stopMain = window.requestAnimationFrame( main ); vm.eval(` $scene.main `) prevFrame = tFrame; }
58. % FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP
    w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTFOHJOF
59. ήʔϜΤϯδϯ
    ͭ͘Εͦ͏ʂ
60. ΈΜͳ΋8BTN
    ࢼͯ͠ΈΑ͏ ͨͷ͍͠Α
61. ͓ΘΓʹ  3VCZͰ͸8FC"TTFNCMZ͓Αͼ8"4*΁ͷ 
 ରԠ͕༧ఆ͞Ε͍ͯΔ
     SVCZXBTN͸OQNύοέʔδ΍ 
 ίϯύΠϧࡁ3VCZͰ഑෍͞ΕΔ
62. ͓ΘΓʹ  ֦ுϥΠϒϥϦΛಉࠝ͢Δͱ 
 ϑΝΠϧαΠζ͕େ͖͘ͳ͍ͬͯ͘՝୊΋
     ͔͠͠3VCZͷศརͳϥΠϒϥϦ͸࢖͍͍ͨʜ
     HFNͳͲ΋औΓѻ͑ΔΑ͏ʹͳΔͷ͔
     ࠓޙ͕ͨͷ͠Έʂ