おはよーございます。
ブラウザで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の環境は以下の通りです。
# MacOS oco@MacBook-Pro ruby % sw_vers ProductName: macOS ProductVersion: 12.3.1 BuildVersion: 21E258 # Ruby 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はJavaScriptの世界でconsole.logに変換される模様。 puts 'hello ruby' end # requireした標準ライブラリも呼び出せる。 def self.today puts Date.today end # JavaScriptのオブジェクトに良い感じに変換してくれる。 def self.today_native # JavaScriptのDateに変換してくれる。 Date.today end # JavaScriptから値も受け取れる。 def self.addition(a, b) a + b end end
これを以下のコマンドでJavaScriptに変換できます。
# --no-method-missing：method missingというRubyの機能を使わない場合 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サイト制作も全く進んでないし、一石二鳥な気がします！😅
では、また！
