Written on 2014, 12, 15

フロントエンドもRubyで開発?「Opal」

エンジニアの松本です。

今日はフロントエンドもRubyで開発出来るかも知れない、RubyをJavaScriptに変換する「Opal」の紹介をしたいと思います。

公式ページはこちら → Opal: Ruby to Javascript Compiler
Railsで使うならこちら → opal/opal-rails

コラム - Ruby & Rails | 第16回 Opal ~JavaScriptもRubyで~|CTC教育サービス 研修/トレーニング
↑この記事から抜粋させて頂きますが

↓このJavaScriptを

$(function(){
  $("h1").on("click", function(){
    var p_elem = $("<p>");
    p_elem.text("h1 was clicked");
    p_elem.css("color", "red");

    $().append(p_elem);
  }); 
});

↓Rubyでこのように書けるようになります。

Document.ready? do
  Element.find("h1").on(:click) do
    p_elem = Element.new("p")
    p_elem.text("h1 was clicked!")
    p_elem.css("color", "red")

    Element.find("body").append(p_elem)
  end
end

上記の他にも基本的なDOM操作やイベント駆動処理などは問題なく書けそうです。
試しに使ってみた感じでは、CoffeeScriptやjQueryの代わりになりそうなイメージです。
またサンプルが溜まったらブログやQiitaなどで共有していきたいと思います。

2014/12/15時点でOpalのバージョンが0.6.3なので、まだ1.0にも達していませんが、アクティブに開発されており、個人的には常々フロントエンドもRubyで書きたいと言っていたので、かなり期待したいと思っています。

※毎回デフォルトでインストールするGemにも追加しました。
https://github.com/shu0115/rails4apptemplate/blob/master/app_template.rb#L17

それでは今日は短いですがこの辺りで。