これはなに？
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と置き換わることはないと思いますが、今後の展開はけっこう期待できそうです。