週刊とっしーぱんち

昭和生まれのブロガーが綴る、全力脱力系雑記帳

Opalを使ってRubyのコードをJSに変換するなどした【趣味で始めるWebサイト制作】

おはよーございます。

  ブラウザでRubyを実行できる仕組み、WebAssemblyを自分のWebサイトに入れられないかとちょこまかやってみたものの、あえなく挫折しました。  

なんですが、せっかくなのでRubyのコードをWebサイトでも使いたいという欲望は捨てきれず、どころか欲望増し増しになったので、別の方法で実現するべく、「Opal」というGemを試してみることにしました。  

Gemとは?

RubyにはGemというしくみがあって、Rubyに標準搭載されている機能をさらに拡張したり、別の機能を実現するための拡張機能を有志のみなさんが開発・提供してくれています。    

使う側はGemを探してインストールするだけというなんともありがたい機能です。しかも無料。

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サイト制作も全く進んでないし、一石二鳥な気がします!😅


osio-toshimasa.hatenablog.com

では、また!