3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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>

1457d886ea54bab5894501c313193a5b.png

動きました!!!

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から利用しているみたいですね!
実行してみます

b8f15de67821d621f36574207faf3876.png

表示されましたね

まとめ

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

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?