Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

Rubyベースの文法でJavaScriptにコンパイルされるAltJS-Opal言語とReactiveなWAF Voltの情報まとめ #opal #ruby

f:id:tbpg:20150629221253p:plain

Rubyベースの文法でJavaScriptコンパイルされるAltJS-Opal言語とReactiveなWAF Voltの情報まとめです。
2015/06/30 時点の内容をまとめました。

Official Site

f:id:tbpg:20150629221259p:plain

Opal Official

Docs

Opal Docs

GitHub

Opal - GitHub

Playground

環境構築せずにPlaygroundで試せます。

Playground - Opal

f:id:tbpg:20150629221311g:plain

Volt - Web Application Framework

f:id:tbpg:20150629221330p:plain

Links

What is Volt?

Qiita

Opal

Volt

外部サイト(日本語)

www.moongift.jp

matome.naver.jp

ja.stackoverflow.com

blog.livedoor.jp

外部サイト(英語)

www.toptal.com

www.sitepoint.com

rubyist.jaredwhite.com

opalist.curated.co

Slides

Opal - Ruby Style!! Ruby in the browser

Opal chapter 4_a_new_hope

JavaScriptでアレがしたい

CodeIQのOpalに関わる問題(期間限定)

codeiq.jp

codeiq.jp

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Opal Sample</title>
  <script src="http://cdn.opalrb.org/opal/current/opal.min.js"></script>
  <script src="http://cdn.opalrb.org/opal/current/opal-parser.min.js"></script>
</head>
<body>
<script type="text/ruby">
3.times { |i| puts "Hello Opal #{i}" }
puts ('a'..'f').map(&:upcase)
Person = Struct.new(:name, :age)
tanaka = Person.new('tanaka', 34)
suzuki = Person.new('suzuki', 23)
[tanaka, suzuki].map { |e|"#{e.name} - #{e.name}" }.each(&method(:puts))
</script>
</body>
</html>

※デモは実際に上記のOpalのコードで動作しており、開発ツールなどでコンソール出力を確認すると 以下の内容が出力されています。

Hello Opal 0
opal.min.js:11 Hello Opal 1
opal.min.js:11 Hello Opal 2
opal.min.js:11 A,B,C,D,E,F
opal.min.js:11 tanaka - tanaka
opal.min.js:11 suzuki - suzuki

外部資料