おはよーございます。
ブラウザでRubyを実行できる仕組み、WebAssemblyを自分のWebサイトに入れられないかとちょこまかやってみたものの、あえなく挫折しました。
なんですが、せっかくなのでRubyのコードをWebサイトでも使いたいという欲望は捨てきれず、どころか欲望増し増しになったので、別の方法で実現するべく、「Opal」というGemを試してみることにしました。
Gemとは？
RubyにはGemというしくみがあって、Rubyに標準搭載されている機能をさらに拡張したり、別の機能を実現するための拡張機能を有志のみなさんが開発・提供してくれています。
使う側はGeｍを探してインストールするだけというなんともありがたい機能です。しかも無料。
Ruby自体も無料なので、優秀な方達が作ったRubyの標準機能に加えて拡張機能がタダで入手できるという、よくよく考えるととんでもなく太っ腹なシステムです。
Gemの語源は英語のGem「ジェム」そのままで、宝石という意味なんだそうです。Rubyが中心にいて、キラキラ輝くGemたちが散りばめられているようなイメージでしょうかね。なんかロマンチック。
Opalとは？
Opal「オパール」はGemのひとつです。
Rubyで書いたプログラムをJavaScriptに書き直してしまうというGemです。
Rubyコードそのままだと、JavaScriptからは利用できないのですが、JavaScriptに変換してしまうので普通にJavaScriptコードとして使うことができます。
Webブラウザ上でJavaScriptは実行可能です。ということはつまりRubyのコードがWebブラウザ上で動くようなもんです。すごい✨
実際に使ってみました。
で、実際にどうやって使うかというのをMacBookさんを使って試してみました。MacとRubyの環境は以下の通りです。
oco@MacBook-Pro ruby % sw_vers
ProductName: macOS
ProductVersion: 12.3.1
BuildVersion: 21E258
oco@MacBook-Pro ruby % ruby -v
ruby 3.0.0rc1 (2020-12-20 master 8680ae9cbd) [x86_64-darwin20]
まず、Gemをインストールします。
gem install opal
oco@MacBook-Pro ruby % opal -v
Opal v1.5.0
ドキュメントを読みながら適当にRubyのコードを書いてみました。
require 'date'
class Test
def self.say
puts 'hello ruby'
end
def self.today
puts Date.today
end
def self.today_native
Date.today
end
def self.addition(a, b)
a + b
end
end
これを以下のコマンドでJavaScriptに変換できます。
opal --no-method-missing --compile test.rb > test.js
できたJavaScriptファイルをHTMLファイルに組み込んで呼び出してみます。
<html>
<head>
<meta charset="utf-8"/>
<script src="test.js"></script>
<script>
Opal.Test.$say();
Opal.Test.$today();
console.log(Opal.Test.$today_native());
console.log(Opal.Test.$addtion(10,10));
</script>
</head>
<body>
</body>
</html>
ブラウザには何も表示されないですが、Safariだとブラウザ上でトラックパッドをダブルタップしてメニューを出し、要素の詳細を表示を選択。コンソールという画面に切り替えると、さきほど呼び出したスクリプトの実行結果が表示されました。
Chromeでも同じような機能はあって、おなじくダブルタップからの検証というメニューがそれにあたります。
まとめ：Rubyのコード書きたい＆貯めたい欲が強めのときはおすすめ！
とっかかりとして、簡単なコードだけ動かして試してみた感じ、すごくあっさりと動作してくれたので、僕のスキルでも十分に使えそうな感じはします。
メリットとしては、やはりRubyが使えるってのが一番になりますかね。あとはJavaScriptに変換するといっても元のRubyコードはそのまま残るので、Rubyのコード資産として貯めていくことができるのが嬉しいポイントです。
デメリットは、実際使うときの呼び出す側としてのJavaScriptの知識は必要になってくるので、Webサイト専用という目的で使う分には、学習コストが高くついてしまうところでしょうか。
そもそもWebサイト専用ならばJavaScriptだけ覚えればいいですからね。
そう考えると、Webサイトにも応用できるかもしれないという付加価値はあるけれど、Rubyのコードを書きためていきたいって欲求がどれくらいあるか
がキモなんじゃないかなと思いました。
ところで、今回色々と遊びながら次にやってみたいことが浮かびまして、次回は自前のWebサイトに乗っけて小さなコンテンツを作りたいです。
というかWebサイト制作も全く進んでないし、一石二鳥な気がします！😅
osio-toshimasa.hatenablog.com
では、また！
![【力強い飲みごたえと心地よい後味】 金麦 ザ・ラガー [ 500ml × 24本 ]](https://m.media-amazon.com/images/I/41leutlKqZL._SL500_.jpg "【力強い飲みごたえと心地よい後味】 金麦 ザ・ラガー [ 500ml × 24本 ]")
