Rails 5 で Opal を使う

Opalとは

Opal は、Ruby を JavaScriptにコンパイル、実行するAltJSです。

環境

• Rails 5.2.1
• Ruby 2.6.0preview2
• Opal 0.11.1

使い方

Gemfile

Gemfile

gem 'opal-rails'
gem 'opal-jquery'

application.js.rb

application.jsをapplication.js.rbに変更。

app/assets/javascripts/application.js.rb

require 'rails-ujs'
require 'activestorage'
require 'turbolinks'

require 'opal'
require 'jquery3'      # jqueryが必要
require 'opal-jquery'
require_tree '.'

require_tree . ではなく、require_tree '.'にする。

script

app/assets/javascripts/sample.js.rb

Document.on "turbolinks:load" do
  Element["#sample"].on "click" do
    alert "sample"
  end
end

app/assets/javascripts/sample.js.rb

# turbolinksによるページ切り替えの際に、実行されないので、上のように書く方が良い。
Document.ready? do
  Element['#sample'].on 'click' do
    alert 'sample'
  end
end

view

app/views/users/index.html.slim

button#sample サンプル

参考URL

Opal Ruby in the Browser
opal/opal-rails
opal/opal-jquery

お役に立てば幸いです。