Ruby on Browser

Ruby on Browser NSEG 2024-06-22 とみたまさひろ 1

自己紹介 • とみたまさひろ • • https://twitter.com/tmtms https://blog.tmtms.net 2

Ruby歴27年 3

年を取ると新しいことが覚えられない 4

もうRuby以外書きたくない転職先もRuby使えるところを探した 5

OSとかデバイスドライバとか以外だとだいたいRubyで書けるんだけどブラウザではRubyは動かなかった 6

ruby.wasm の登場によりブラウザでも Ruby が動くようになった 7

やったー 8

最近はプライベートではもうJavaScriptを一切書かずにRubyで書いてる 9

文字化けを復元するよ ruby.wasm で最初に作ったページ https://tmtms.net/mojibake/ 10

前からこういうページを作りたかったんだけど JavaScript で実装するのはムリだと思ったので諦めてた Ruby は文字コード変換処理を内部に持ってるのでできた ruby.wasm すばらしい 11

シャッフル seed を指定して結果を再現できるこれも JavaScript 標準の乱数ではできない https://tmtms.net/shuﬄe.html 12

MySQL Parameters めずらしく実用的なやつもともと Vue.js の練習で作ったやつだったんだけど ruby.wasm で作り直した https://mysql-params.tmtms.net/statement/ 13

Rabbit on Firefox Firefox で PDF / Reveal.js / Speaker
Deck のスライドを表示しているときにブックマークレットを実行するとウサギが表示される Reveal.js用↑ ブックマークレットはJavaScriptで書かないといけない。残念。 https://tmtms.net/rabbit/ javascript:(()=>{if(typeof rubyVM!='undefined'){rubyVM.eval('start');return}; var d=document;var h=d.getElementsByTagName('head')[0];var s=d.createElement('script'); s.src='https://cdn.jsdelivr.net/npm/@ruby/[email protected]/dist/browser.script.iife.js'; h.appendChild(s);s=d.createElement('script');s.src='https://tmtms.net/rabbit/rabbit_revealjs.rb'; s.type='text/ruby';h.appendChild(s);var x=setInterval(()=>{if(typeof rubyVM!='undefined') {try{rubyVM.eval('start');clearInterval(x)}catch(e){}}},500)})() 14

ruby.wasm の使い方 15

別ファイルの場合こっちの方がデバッグが簡単 <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/@ruby/[email protected]/dist/browser.script.iife.js"> </script> <script type="text/ruby"
src="hogehoge.rb"></script> </html> 17

JavaScriptの機能を使う JS.eval で JavaScript を実行できる JS.global 経由で JavaScript のグローバルオブジェクト取得や関数実行ができる
require 'js' JS.eval('alert("hoge")') JS.global.alert('hoge') 18

JavaScript の値を Ruby から見るとすべて JS::Object Ruby では扱いにくいので to_i や to_s
等で変換できる n = JS.eval('return 123') #=> JS::Object (123) n.typeof #=> "number" s = JS.eval('return "hoge"') #=> JS::Object ("hoge") s.typeof #=> "string" JS.eval('return 123').to_i #=> 123 JS.eval('return "hoge"').to_s #=> "hoge" 19

JS::Object#[] でプロパティ取得＆設定 JS::Object#call で JavaScript の関数呼び出し JS::Object#func でも呼び出せる s =
JS.eval('return "hoge"') #=> JS::Object ("hoge") s[:length] #=> JS::Object (4) s.call(:charAt, 2) #=> JS::Object ("g") s.charAT(2) #=> JS::Object ("g") 20

JavaScript の null や undefined も JS::Object のインスタンス Ruby で真偽値として評価すると当然真になるので注意
JS.eval('return null') #=> JS::Object (JS::Null) JS.eval('return undefined') #=> JS::Object (JS::Undefined) !!JS::Null #=> true !!JS::Undefined #=> true 21

Promise / await JavaScript の Proimse は await で待てる data-eval="async"
の指定が必要 <script type="text/ruby" data-eval="async"> promise = JS.global.fetch("https://tmtms.net") #=> JS::Object (Promise) resp = promise.await #=> JS::Object (Response) promise = resp.text #=> JS::Object (Promise) promise.await #=> JS::Object ("<!DOCTYPE html>\n<html>\n ....") </script> 22

DOM ほぼ JavaScript のまんま document = JS.global[:document] hoge = document.getElementById('hoge')
fuga = document.createElement('div') fuga[:id] = 'fuga' hoge.appendChild(fuga) 23

HTML 要素にイベントを設定するには addEventListener() を使う HTML の onclick 等は JavaScript を呼んでしまうので（それはそう）
<input id="b" type="button"> <script type="text/ruby"> require 'js' document = JS.global[:document] document.getElementById('b').addEventListener('click') do |ev| JS.global.alert('hoge') end </script> 24

rubyVM.eval() を使う手もある <input id="b" type="button" onclick="rubyVM.eval('hoge')"> <script type="text/ruby"> require 'js'
def hoge JS.global.alert('hoge') end </script> 25

require は動かない <script type="text/ruby" src="〜.rb"> はできるけど require で別の rb を読むことはできない
<script src> は HTTP, require はファイルシステム 26

require 'js' ができるのは js.rb が ruby.wasm の仮想ファイルシステムにあるから 27

HTML の中でファイルをひとつずつ <script> で読むまたは仮想ファイルシステム内に必要なファイルをおいた状態で ruby.wasm を作るそういうめんどくさいことはしたくない <script type="text/ruby"
src="main.rb"></script> <script type="text/ruby" src="sub.rb"></script> <script type="text/ruby" src="sub-sub.rb"></script> 28

require_relative が動く！呼び出し元の rb ファイルの URL からの相対パスでサーバーから rb ファイルを読み込む
サーバー上に rb ファイルを置いておくだけでいいめっちゃ便利！ module Kernel def require_relative(path) JS::RequireRemote.instance.load(path) end end 29

まとめ JavaScript でできることならできる JavaScript でできなかったこともできる JavaScript より遅いけど気にしたら負け Ruby でフロントエンドが書けるの最高！ 30

Ruby on Browser

Ruby on Browser

とみたまさひろ

More Decks by とみたまさひろ

Other Decks in Technology

Featured

Transcript

Ruby on Browser NSEG 2024-06-22 とみたまさひろ 1

自己紹介 • とみたまさひろ • • https://twitter.com/tmtms https://blog.tmtms.net 2

Ruby歴27年 3

年を取ると新しいことが覚えられない 4

もうRuby以外書きたくない転職先もRuby使えるところを探した 5

OSとかデバイスドライバとか以外だとだいたいRubyで書けるんだけどブラウザではRubyは動かなかった 6

ruby.wasm の登場によりブラウザでも Ruby が動くようになった 7

やったー 8

最近はプライベートではもうJavaScriptを一切書かずにRubyで書いてる 9

文字化けを復元するよ ruby.wasm で最初に作ったページ https://tmtms.net/mojibake/ 10

前からこういうページを作りたかったんだけど JavaScript で実装するのはムリだと思ったので諦めてた Ruby は文字コード変換処理を内部に持ってるのでできた ruby.wasm すばらしい 11

シャッフル seed を指定して結果を再現できるこれも JavaScript 標準の乱数ではできない https://tmtms.net/shuﬄe.html 12

MySQL Parameters めずらしく実用的なやつもともと Vue.js の練習で作ったやつだったんだけど ruby.wasm で作り直した https://mysql-params.tmtms.net/statement/ 13

Rabbit on Firefox Firefox で PDF / Reveal.js / Speaker

ruby.wasm の使い方 15

<script>にRubyを書く簡単！ <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/@ruby/[email protected]/dist/browser.script.iife.js"> </script> <script type="text/ruby">

別ファイルの場合こっちの方がデバッグが簡単 <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/@ruby/[email protected]/dist/browser.script.iife.js"> </script> <script type="text/ruby"

JavaScriptの機能を使う JS.eval で JavaScript を実行できる JS.global 経由で JavaScript のグローバルオブジェクト取得や関数実行ができる

JavaScript の値を Ruby から見るとすべて JS::Object Ruby では扱いにくいので to_i や to_s

JS::Object#[] でプロパティ取得＆設定 JS::Object#call で JavaScript の関数呼び出し JS::Object#func でも呼び出せる s =

JavaScript の null や undefined も JS::Object のインスタンス Ruby で真偽値として評価すると当然真になるので注意

Promise / await JavaScript の Proimse は await で待てる data-eval="async"

DOM ほぼ JavaScript のまんま document = JS.global[:document] hoge = document.getElementById('hoge')

HTML 要素にイベントを設定するには addEventListener() を使う HTML の onclick 等は JavaScript を呼んでしまうので（それはそう）

rubyVM.eval() を使う手もある <input id="b" type="button" onclick="rubyVM.eval('hoge')"> <script type="text/ruby"> require 'js'

require は動かない <script type="text/ruby" src="〜.rb"> はできるけど require で別の rb を読むことはできない

require 'js' ができるのは js.rb が ruby.wasm の仮想ファイルシステムにあるから 27

HTML の中でファイルをひとつずつ <script> で読むまたは仮想ファイルシステム内に必要なファイルをおいた状態で ruby.wasm を作るそういうめんどくさいことはしたくない <script type="text/ruby"

require_relative が動く！呼び出し元の rb ファイルの URL からの相対パスでサーバーから rb ファイルを読み込む

まとめ JavaScript でできることならできる JavaScript でできなかったこともできる JavaScript より遅いけど気にしたら負け Ruby でフロントエンドが書けるの最高！ 30