Slide 1
Slide 1 text
WA
RB
ruby.wasm
ハッキングガイド
2023/08/05
ledsun
(中島滋：株式会社ラグザイア)
@とちぎRubyの勉強会 拡大版
Slide 2
Slide 2 text
ブラウザで
Rubyをキメると
気持ちいい
WA
RB
Slide 3
Slide 3 text
ruby.wasmの
どこをどう変えると
何が変わるか？
WA
RB
Slide 4
Slide 4 text
ハッキングの
•What（何が変わる）
•Where（どこを変える）
•How（どう変える）
WA
RB
Slide 5
Slide 5 text
ふたつの事例
•scriptタグのsrc属性
•JS::Object#newメソッド
WA
RB
Slide 6
Slide 6 text
第一幕
WA
RB
Slide 7
Slide 7 text
WA
RB
scriptタグのsrc属性
Slide 8
Slide 8 text
WA
RB
What
Slide 9
Slide 9 text
WA
RB
Slide 10
Slide 10 text
WA
RB
好きなファイル名が使える
エディタでサポートされる
Slide 11
Slide 11 text
WA
RB
Where
Slide 12
Slide 12 text
WA
RB
ruby.wasmをつかうときのお決まり
Slide 13
Slide 13 text
WA
RB
ソースコードは
Slide 14
Slide 14 text
WA
RB
Slide 15
Slide 15 text
WA
RB
ソースコードを読む前に
Slide 16
Slide 16 text
WA
RB
JavaScript
RubyVM
（JavaScriptのクラス）
WebAssembly化された
CRuby
Ruby呼ぶときは必ず
RubyVMクラスを通る
（詳しくは https://qiita.com/ledsun/items/dacf789c787c7d192529 で）
Slide 17
Slide 17 text
WA
RB
Slide 18
Slide 18 text
WA
RB
VMでevalでinnerHTML
めちゃくちゃ怪しい
Slide 19
Slide 19 text
WA
RB
How
Slide 20
Slide 20 text
WA
RB
src属性に指定されている
ファイルの中身を渡す
（実際 https://github.com/ruby/ruby.wasm/pull/49 はそういう素朴な修正）
Slide 21
Slide 21 text
WA
RB
本当にそうなのか？
試すためにビルドしたい
Slide 22
Slide 22 text
WA
RB
これは抜粋です。
一から構築するビルド手順は
CONTRIBUTING.mdにあります。
Slide 23
Slide 23 text
WA
RB
動作確認
に
Hello, World!のサンプルコードがあります。
これを改造して行うのが簡単です。
に
のテストコードがあります。
Slide 24
Slide 24 text
Scriptタグのsrc属性
•Whaｔ：Rubyスクリプトファイルの名前
•Where：
•How: の引数を変える
WA
RB
Slide 25
Slide 25 text
WA
RB
第一幕
scriptタグのsrc属性
おわり
Slide 26
Slide 26 text
幕間
WA
RB
Slide 27
Slide 27 text
第二幕
WA
RB
Slide 28
Slide 28 text
WA
RB
JS::Object#newメソッド
Slide 29
Slide 29 text
WA
RB
What
Slide 30
Slide 30 text
WA
RB
Rubyスクリプトから
JavaScriptのオブジェクトをつくるのに
JavaScriptの文を実行しないといけない
Slide 31
Slide 31 text
WA
RB
newメソッドで
JavaScriptのオブジェクトをつくる
Slide 32
Slide 32 text
WA
RB
Where
Slide 33
Slide 33 text
WA
RB
ソースコードを読む前に
Slide 34
Slide 34 text
WA
RB
Ruby
スクリプト
JS::Object
（Rubyのクラス）
JavaScriptの
オブジェクト
RubyからJavaScriptの
オブジェクトをさわるときは
JS::Objectクラスを通る
（詳しくは https://qiita.com/ledsun/items/a6421a8c94aa653b42ea で）
Slide 35
Slide 35 text
WA
RB
JS::Objectに
newメソッドを
定義すればよさそう
Slide 36
Slide 36 text
WA
RB
JS::Objectのソースコードは
に
Slide 37
Slide 37 text
WA
RB
How
Slide 38
Slide 38 text
WA
RB
JavaScriptには
がある
任意の関数からオブジェク
トを生成する
Slide 39
Slide 39 text
WA
RB
を呼び出す
メソッドを定義すればよい
（実際に で定義しました。）
Slide 40
Slide 40 text
WA
RB
本当にそうなのか？
試すためにビルドしたい
Slide 41
Slide 41 text
WA
RB
やり方は
もう知っています
Slide 42
Slide 42 text
WA
RB
Slide 43
Slide 43 text
WA
RB
ざわ・・・
反映されない！？
Slide 44
Slide 44 text
WA
RB
第一幕で学んだことを
思い出して
Slide 45
Slide 45 text
WA
RB
JavaScript
RubyVM
（JavaScriptのクラス）
WebAssembly化された
CRuby
ruby.wasmには
JavaScriptの部分と
Rubyの部分がある
Slide 46
Slide 46 text
WA
RB
JavaScript
RubyVM
（JavaScriptのクラス）
WebAssembly化された
CRuby
は
JavaScript部分をビルドする
Slide 47
Slide 47 text
WA
RB
JavaScript
RubyVM
（JavaScriptのクラス）
WebAssembly化された
CRuby
Ruby部分をビルドするには
して
フルビルドする
Slide 48
Slide 48 text
WA
RB
フルビルドは
20分かかる
Slide 49
Slide 49 text
WA
RB
ユニットテストを
つかおう
テストコード内で
JS::Objectにモンキーパッチをあてれば
ビルドしなくて修正が試せる
Slide 50
Slide 50 text
WA
RB
JS::Objectの
ユニットテストは
Slide 51
Slide 51 text
JS::Object#newメソッド
•Whaｔ：JavaScriptのオブジェクトの生成
•Where： クラス
•How: メソッドを定義
WA
RB
Slide 52
Slide 52 text
WA
RB
第二幕
JS::Object#newメソッド
おわり
Slide 53
Slide 53 text
幕間
WA
RB
Slide 54
Slide 54 text
終幕
WA
RB
Slide 55
Slide 55 text
ふたつの事例
•scriptタグのsrc属性
•JS::Object#newメソッド
WA
RB
Slide 56
Slide 56 text
ハッキングの
•What
•Where
•How
WA
RB
Slide 57
Slide 57 text
Scriptタグのsrc属性
•Whaｔ：Rubyスクリプトファイルの名前
•Where：
•How: の引数を変える
WA
RB
Slide 58
Slide 58 text
JS::Object#newメソッド
•Whaｔ：JavaScriptのオブジェクトの生成
•Where： クラス
•How: メソッドを定義
WA
RB
Slide 59
Slide 59 text
その他学んだこと
• ruby.wasmにはRubyとJavaScriptの部分がある
• JavaScript => Ruby の入り口はRubyVMクラス
• Ruby => JavaScript の入り口はJS::Objectクラス
• ビルドの方法
• サンプルコードの場所
• テストコードの場所
WA
RB
Slide 60
Slide 60 text
WA
RB
さいごに
大事なことをもう一度
Slide 61
Slide 61 text
ブラウザで
Rubyをキメると
気持ちいい
WA
RB
Slide 62
Slide 62 text
WA
RB
提供
終