Ruby WASMを少しだけ触ってみる #Ruby

Rubyをブラウザで動かせるようになったらしいです
日々Rubyを書いているエンジニアとしてはHello Worldぐらいはやってみたいので実行してみました

こちらのExampleを参考にやってみます

Hello Wasm

ブラウザのコンソールにHello, Wasmと表示してみます

hello_wasm.html

<html>
  <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@0.5.0/dist/browser.script.iife.js"></script>
  <script type="text/ruby">
    puts "Hello, Wasm!"
  </script>
</html>

動きました！！！

DOM操作

DOM操作をやってみます
formに入力された値を受け取ってそのまま表示してみます

hello_wasm.html

<html>
  <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@0.5.0/dist/browser.script.iife.js"></script>
  <input id="input" type="text">
  <div id="result"></div>
  <script type="text/ruby">
    require "js"

    document = JS.global[:document]

    input = document.getElementById 'input'
    result = document.getElementById 'result'
  
    input.addEventListener 'change' do |e|
      result[:innerText] =  e[:target][:value]
    end
  </script>
</html>

JSのAPIをRubyから利用しているみたいですね！
実行してみます

表示されましたね

まとめ

Quick Exampleを動かしてみただけで複雑なことは何もやらなかったですが、ブラウザ上でRubyの実行をできるのがシンプルに面白いですね
今後どうなっていくのか、非常に楽しみです