Rubyベースの文法でJavaScriptにコンパイルされるAltJS-Opal言語とReactiveなWAF Voltの情報まとめです。
2015/06/30 時点の内容をまとめました。
Official Site
Docs
GitHub
Playground
環境構築せずにPlaygroundで試せます。
Volt - Web Application Framework
Links
What is Volt?
Qiita
Opal
- Ruby で JavaScript を書く、 Opal を使ってみる
- 最近のOpalはopal-sprocketsが内蔵されている
- OpalとRubyに両対応したgemを作る
- opal-rspecでOpalコードのテストを書く
- Opal用のgemを作る
- Opal処理系のバグの調査方法
- Opalの標準添付ライブラリ
- JavaScriptからOpal側のコードを呼ぶ方法
- Opalのsprocketsでsouce mapをオフにする方法
- OpalからRaphael.jsを使うためのライブラリを作りました
- OpalタグでQiita内を検索
Volt
外部サイト(日本語)
外部サイト(英語)
Slides
Opal - Ruby Style!! Ruby in the browser
Opal chapter 4_a_new_hope
JavaScriptでアレがしたい
CodeIQのOpalに関わる問題（期間限定）
サンプル
<!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
