WebAssemblyを使ってブラウザでRubyを動かす
WebAssemblyによりJavaScript以外のプログラミング言語で書かれたコードをブラウザ上で動かす道が広く開かれました。現時点ではRustが使われることが多いようですが、RubyやPythonなどのスクリプト言語を利用する手段も整ってきています。たとえばRubyはバージョン3.2からWebAssembly上で動くようになりました。
WebAssembly 上で動くようにコンパイルされたRubyインタープリターがruby.wasmで、そのruby.wasm 上でRubyのコードが動きます。
ブラウザ上でRubyを動かすのは非常に簡単です。以下はruby.wasmのサイトのQuick Exampleです。
<html>
<script src="https://cdn.jsdelivr.net/npm/ruby-3_2-wasm-wasi@2.1.0/dist/browser.script.iife.js"></script>
<script type="text/ruby">
puts "Hello, world!"
</script>
</html>これをexample.htmlとして保存し、同じディレクトリでRubyのhttpdを起動します。
ruby -run -e httpd .ブラウザで以下にアクセスします。
http://localhost:8080/example.html
注意しないといけないのは、puts の実行結果がそのままブラウザ上で表示されるわけではないことです。デベロッパーツールを開いてコンソールを見ると”Hello, world!”が出力されていることがわかります。
ブラウザ上に表示するためにはDOMを操作する必要があります。RubyからはJSパッケージを使ってJavaScriptを通じてDOMを操作できます。
<html>
<script src="https://cdn.jsdelivr.net/npm/ruby-3_2-wasm-wasi@2.1.0/dist/browser.script.iife.js"></script>
<script type="text/ruby">
require "js"
document = JS.global[:document]
body = document[:body]
button = document.getElementById("b1")
button.addEventListener("click") do |e|
div = document.getElementById("d1")
div[:innerText] = "Hello, World""
end
</script>
<button id="b1">Say Hello</button>
<div id="d1"></div>
</html>ボタンを押すとその下に”Hello, World!”と出力されます。
