🎃

Rails 5 で Opal を使う

2021/06/19に公開

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.jsapplication.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

お役に立てば幸いです。

Discussion