概要
Ruby の opal を使うと Ruby から JavaScript のコードを生成することができます
今回は入門として DOM の操作などをやってみました
※bundler を使うとうまく動作しないのでグローバル環境にインストールして作業します
環境
- macOS 11.6.2
- Ruby 3.0.3
- opal 1.3.2
- opel-jquery 0.4.6
準備
- gem install opal opal-jquery
今回は DOM の操作もするので opal-jquery もインストールしています
test.rb
puts "Hello from ruby."
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="test.js"></script>
</head>
<body>
</body>
</html>
コンパイル
- opal -c test.rb > test.js
動作確認
- open index.html
こんな感じで puts は console.log として表示されるようです
DOM 操作する
require 'opal'
require 'opal-jquery'
msg = "Hello from Ruby."
`$('#msg').text(#{msg})`
JavaScript の部分はバッククォートで囲んで評価する必要があります
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div id="msg"></div>
<script src="test.js"></script>
</body>
</html>
jQuery を使っているので CDN を使って head タグで読み込んでいます
コンパイルで出力される js は body の最後に呼び出します
コンパイル
少し実行方法が変わります
RUBYOPT で先に opal-jquery を require するようにしてからコンパイルします
- RUBYOPT="-ropal-jquery" opal -c test.rb > test.js
動作確認
- open index.html
ちゃんと div タグにメッセージが表示されているのが確認できます
最後に
opal を使って js の生成や DOM の制御をしてみました
jquery で書けるので割と直感的にかけるので js を書けるかなと思いました
コンパイルする必要はありますが Ruby ですべて書けるので js コードを取り除きたい場合はいいのかもしれません
bundler を使ってbundle exec opal しようとするといろいろとハマるので注意が必要です
0 件のコメント:
コメントを投稿