こんにちは。今回は現実逃避を兼ねて Jade の素晴らしさをお伝えしたいと思います。
[Jade][0] は JST (JavaScript Templates) の一つであり、HTML を書くための[軽量マークアップ言語][1] である [Haml][2] に影響を受けた JavaScript テンプレートエンジンでもあります。
JavaScript のための小さな FRP (Functional Reactive Programming) ライブラリです。
手続き型から関数型に切り替えることで、イベントスパゲッティのコードがクリーンで宣言スタイルの「風水の bacon」(feng shui bacon)に変わります。入れ子のループを map と filter のような関数型プログラミングのコンセプトに置き換えることに似ています。個別のイベントに取り組むことを止め、イベントストリームを扱います。map と filter でデータを変換します。merge と combine でデータを combine します。重火器に切り替え、上司のように flatMap と combineTemplate を掌握します。
このライブラリはイベントのアンダースコア( _ )です。残念なことに ~ の記号は JavaScript では認められていないからです。
資料です。
| puts 'Hello! May I help you?' | |
| word = gets.chomp | |
| while word != 'BYE' | |
| if word.upcase == word | |
| puts 'Well, it hasn\'t happened since ' + (1930 + rand(21)).to_s + ' !' | |
| else | |
| puts 'Huh? Could you speak up, please??' | |
| end | |
| word = gets.chomp | |
| end |
| $ ruby -e 'C=`stty size`.scan(/\d+/)[1].to_i;S="\xf0\x9f\x8d\xa3";a={};puts "\033[2J";loop{a[rand(C)]=0;a.each{|x,o|;a[x]+=1;print "\033[#{o};#{x}H \033[#{a[x]};#{x}H#{S} \033[0;0H"};$stdout.flush;sleep 0.01}' |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| set listchars=tab:→\ ,trail:␣,extends:…,eol:⏎ | |
| set listchars=tab:→\ ,trail:␣,precedes:«,extends:»,eol:⏎ | |
| set listchars=tab:→\ ,trail:·,precedes:«,extends:»,eol:¶ | |
| set listchars=tab:‣\ ,trail:·,precedes:«,extends:»,eol:¬ | |
| set listchars=tab:␋\ ,trail:␠,precedes:«,extends:»,eol: | |
| set listchars=tab:>-,trail:.,precedes:<,extends:>,eol:$ |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body { | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| padding-top: 50px; |