これはなに？

3.2.0からブラウザ上でrubyが動くということなので試してみよう、という話です。

今現在RC1が出ています。
https://www.ruby-lang.org/ja/news/2022/12/06/ruby-3-2-0-rc1-released/

この中でも特に気になっていることが、

WASIベースのWebAssemblyサポート
YJIT

この２つあります。
YJITはそのうち試してみるつもりです。

準備

といっても単に動かすだけならローカル上にruby3.2.0をインストールする必要もないので、webrickだけ入れておきます。

$ mkdir _rbrc1
$ cd _rbrc1
$ gem install webrick
$ ruby -run -e httpd .

試す

test.htmlを作成して中身を記述します。

$ vim test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@0.5.0/dist/browser.script.iife.js"></script>
    <script type="text/ruby" src="src/foo.rb"></script>
  </head>
  <body>
    <h1>body</h1>
    <button id="btn">Button</button>
    <div id="result">result</div>
    <script type="text/ruby">
      require 'js'
      @document = JS.global[:document]
      elm = @document.getElementById 'result'
      elm[:innerText] = 'hogehoge'

      puts 'Hello World!'
      puts Time.now.to_s
      puts Foo.new.box

      def handler
        elm = @document.getElementById 'result'
        elm[:innerText] = Foo.new.pick
        puts "onclick handler #{elm[:innerText]}"
      end

      button = @document.getElementById 'btn'
      button.addEventListener "click" do
        handler
      end
    </script>
  </body>
</html>

<script type="text/ruby">の中身はほぼrubyですね。

src/foo.rbという外部ファイルを作成してrubyのコードを書いておきます。

class Foo
  def box
    %w(foo bar baz hoge)
  end

  def pick
    box.shuffle.first
  end
end

localhost:8080/test.htmlを開いて動作を見てみます。

ボタンを押すたびに文字が入れ替わるだけ。
おお・・・動いている・・・！

最後に書いたコードとvercelで動いているURLを載せておきます。

https://github.com/runeleaf/ruby-wasm-dev
https://ruby-wasm-dev.vercel.app/

すべてがjavascriptと置き換わることはないと思いますが、今後の展開はけっこう期待できそうです。