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

3VCZ8BTNͷ ͓͞Β͍ͱ׆༻ํ๏Λ୳Δ "GUFS3VCZ,BJHJ

ࣗݾ঺հ w ϧχ   ɹ5XJUUFS!MOJ@5 w .FE1FFS&OHJOFFS ʙ w
ຊۀ͸4QMBUPPO͓͡͞Μ w ޷͖ͳ3BJMTͷϝιου   QSFTFODF w ݏ͍ͳ3BJMTͷϝιου   BDDFQUT@OFTUFE@BUUSJCVUFT@GPS

$-*/*$4VQQPSU ҩࢣͷ։ۀࢧԉ

.FE1FFS$BSFFS ҩࢣͷస৬ࢧԉ

ຊ೔ͷςʔϚ IUUQTSVCZLBJHJPSHQSFTFOUBUJPOTLBUFJOPJHBLVLVOIUNM

3VCZ8FC"TTFNCMZ 3VCZ1SFWJFXϦϦʔε 3VCZ1SFWJFXϦϦʔε

8FC"TTFNCMZ

8FC"TTFNCMZ 8BTN Ϟμϯϒϥ΢βͰಈ࡞͢Δ   όΠφϦίʔυͷ৽͍͠ϑΥʔϚοτ ಛ௃ ߴύϑΥʔϚϯε
1PSUBCMF ಛఆͷݴޠʹґଘ͠ͳ͍ 4BOECPY؀ڥͳͲͰ҆શʹ࣮ߦͰ͖Δ

Ұൠతͳ8BTN࣮ߦϑϩʔ $$ 4XJGU 3VTU (P
XBTN ϒϥ΢β

3VCZͷ8BTN࣮ߦϑϩʔ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ ϒϥ΢β BQQSC

؆୯ʹ3VCZ͸ಈ͔ͳ͍ʜ ඪ४ͷ8FC"TTFNCMZʹ͸ʜ ϑΝΠϧγεςϜ͕ͳ͍ γεςϜΫϩοΫ͕ͳ͍ ωοτϫʔΫ͕ͳ͍
ྫ   5JNFOPXɹˡฦ͢஋͕ͳ͍ʂʂʂ

؆୯ʹ3VCZ͸ಈ͔ͳ͍ʜ +4Ͱ8FC"TTFNCMZʹؔ਺Λఏڙ͢Δ 5JNFOPX ˣ DMPDL@HFUUJNF ˣ %BUFOPX XBTN KT

΋͏ͻͱͭͷཁૉ 8"4*

ߴ·Δχʔζ ʮ༷ʑͳ؀ڥʯͰ   ʮ҆શʯ͔ͭʮޮ཰తʯʹ   ϓϩάϥϜΛಈ͔͍ͨ͠ʂʂ 8FCҎ֎ʹ΋ҰൠతͳΞϓϦͰٻΊΒΕ͍ͯΔ

8"4*ϕʔεͱ͸ 8FC"TTFNCMZ4ZTUFN*OUFSGBDF 8"4* ϑΝΠϧγεςϜ΁ͷΞΫηεͳͲ   04ʹґଘ͢ΔγεςϜίʔϧͳͲΛந৅Խ͢Δ࢓༷ 8BTN3VOUJNF
7. )PTU4ZTUFN 8"4*

8"4*ϕʔεͱ͸ 8FC"TTFNCMZࣗମ͸γεςϜΠϯλʔϑΣΠεΛ   ࣋ͨͳ͍7.ͷ্Ͱ࣮ߦ͞ΕΔ 8"4*͸͜ΕΛن֨Խ͢Δ 8BTN3VOUJNF 7. )PTU4ZTUFN
8"4*

8"4*7'4

8"4*7'4 Ծ૝ϑΝΠϧγεςϜ 7'4 Λ8"4*্ʹ࣮૷ ϑΝΠϧૢ࡞͕Ͱ͖ͳ͍؀ڥͰ΋   ϑΝΠϧγεςϜ͔ΒͷಡΈࠐΈ͕Ͱ͖ΔΑ͏ʹ
Ծ૝ϑΝΠϧγεςϜʹʮSCʯΛຒΊࠐΜͰ͓͚͹   ։ൃऀ͸γϯάϧϑΝΠϧͰͷόΠφϦΛੜ੒Ͱ͖Δʂ

ͳΜ͔͍͢͝࢓૊Έ͕ ࣮૷͞Εͱͬͨʂ

ɹΠϯετʔϧͳ͠ʹ 3VCZ͕ಈ͘Α͏ʹͳͬͨ Ϟμϯϒϥ΢β֤छ $ISPNF 'JSFGPY &EHF 8FC"TTFNCMZରԠ؀ڥ
Τοδ؀ڥ 'BTUMZ $MPVE fl BSF

ɹΠϯετʔϧͳ͠ʹ 3VCZ͕ಈ͘Α͏ʹͳͬͨ ˞ϒϥ΢βͰಈ͘3VCZͷઌഐʹʮ0QBMʯ͕ଘࡏ͢Δ ͪ͜Β͸3VCZΛ+BWB4DSJQUʹม׵͢ΔίϯύΠϥ

ଞɺٕज़తͳ೉ॴ͸ ݩͷൃදࢿྉΛࢀরʂ ಉ͡࿩ͯ͠΋ ͍Έͳ͍͔ΒͶ

׆༻ IUUQTSVCZQV[[MFTDPPLQBEUFDI

׆༻ 3VCZϦϑΝϨϯε্Ͱ3VCZΛ࣮ߦͰ͖ΔΑ͏ʹ͢Δ

࣮ࡍʹ࢖ͬͯΈΑ͏ʂ

3VCZ8BTNΛखݩͰ ࢼ͠·͔ͨ͠ʁ ͸͍ :FT

؆୯ʹࢼͤΔͧʂ

HJUIVCDPNSVCZSVCZXBTN ૣ଎DMPOF͠Α͏ʂ

஫)5.-ͰࢼͤΔαϯϓϧ͕ ਂΊͷσΟϨΫτϦʹ͋Δ IUUQTHJUIVCDPNSVCZSVCZXBTNUSFFNBJO QBDLBHFTOQNQBDLBHFTSVCZXBTNXBTJFYBNQMF IUUQTHJUIVCDPNSVCZSVCZXBTNUSFFNBJO QBDLBHFTOQNQBDLBHFTSVCZIFBEXBTNXBTJ

ಈ͔ͯ͠ΈΑ͏

<html> <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm- [email protected]/dist/browser.script.iife.js"></script> <script type="text/ruby"> puts "Hello, world!" </script>
</html>

w OQNͰఏڙ͞Ε͍ͯΔTDSJQUΛಡΈࠐΉ w SVCZΛॻ͘ w Ҏ্ʂ

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP

3VCZαʔόʔ͍Βͣʂ

੩తϑΝΠϧΛϗετ Ͱ͖Ε͹3VCZΛಈ͔ͤΔ

͞Βʹ+4͕ѻ͑Δ

+4Λѻ͏ require "js" document = JS.global[:document]

+4Λѻ͏ require "js" window = JS.global[:window] window.alert "Hello, world!"

+4Λѻ͏ loop do window.alert "Hello, world!" end

͋Γ͑ͦ͏ͳ࢓༷Λ 3VCZͰॻ͍ͯΈΑ͏

ը໘ଆͷ όϦσʔγϣϯʂ

Ͱ΋ɺ͜Ε͘Β͍ͳΒ +4Ͱॻ͚ͦ͏ʜ ͏ʔΜ

΍΍೉ղͳ όϦσʔγϣϯͳΒʁ

ྫϚΠφϯόʔ

ϚΠφϯόʔ ܻͷ਺ࣈ 999999999999 ेҰܻͷ൪߸ٴͼͦͷޙʹ෇͞ΕͨҰܻͷݕࠪ༻਺ࣈ ࠷ޙඌͷܻ͸νΣοΫσΟδοτ
ܻ਺ νΣοΫσΟδοτ͕߹͍ͬͯΕ͹Α͍

ϚΠφϯόʔ

ϚΠφϯόʔ 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

+4Ҡ২͠ΜͲ͍ ͔΋͠Εͳ͍

3VCZͰॻ͚Δʂ

+4΋ѻ͑Δ͔Β ԿͰ΋Ͱ͖ͦ͏ͩͳ͊

ԿͰ΋Ͱ͖ͦ͏ͳʜ <canvas></canvas>

ϝΠϯϧʔϓΛ࡞ͬͯʜ vm.eval(` $scene = MainScene.new `) async function main( tFrame
) { const stopMain = window.requestAnimationFrame( main ); vm.eval(` $scene.main `) prevFrame = tFrame; }

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTFOHJOF

ήʔϜΤϯδϯ ͭ͘Εͦ͏ʂ

ΈΜͳ΋8BTN ࢼͯ͠ΈΑ͏ ͨͷ͍͠Α

͓ΘΓʹ 3VCZͰ͸8FC"TTFNCMZ͓Αͼ8"4*΁ͷ   ରԠ͕༧ఆ͞Ε͍ͯΔ SVCZXBTN͸OQNύοέʔδ΍   ίϯύΠϧࡁ3VCZͰ഑෍͞ΕΔ

͓ΘΓʹ ֦ுϥΠϒϥϦΛಉࠝ͢Δͱ   ϑΝΠϧαΠζ͕େ͖͘ͳ͍ͬͯ͘՝୊΋ ͔͠͠3VCZͷศརͳϥΠϒϥϦ͸࢖͍͍ͨʜ HFNͳͲ΋औΓѻ͑ΔΑ͏ʹͳΔͷ͔
ࠓޙ͕ͨͷ͠Έʂ

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

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

More Decks by lni_T

Other Decks in Programming

Featured

Transcript