Bacon.jsで四則演算をしてみた。

Bacon.js

Bacon.js


Bacon.jsを使って、今はやりのFRPと呼ばれるものにチャレンジしてみました。
FRPとはFunctionalReactiveProgrammingのことで、イベント等によって動的に変わる値を、ストリームとして、関数に流し込んで演算値を取得することができます。
今回は簡単に下のような四則演算マシンをBacon.jsを使って作ってみました。

See the Pen Bacon.js 四則演算 by Hori Godai (@steelydylan) on CodePen.

HTML

<select class="operand1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<select class="operator">
	<option value="+">+</option>
	<option value="-">-</option>
	<option value="*">*</option>
	<option value="/">/</option>
</select>
<select class="operand2">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<input type="text" class="input">

JS

$(function(){
	//operand1に入力された値のマッピング
	var stream1 = $(".operand1")
	.asEventStream("input")
	.map(function(e){
		return {operand1:parseInt($(e.target).val())};
	});
	//.operatorに入力された値のマッピング
	var stream2 = $(".operator")
	.asEventStream("input")
	.map(function(e){
		return {operator:$(e.target).val()};
	});
	//.operand2に入力された値のマッピング
	var stream3 = $(".operand2")
	.asEventStream("input")
	.map(function(e){
		return {operand2:parseInt($(e.target).val())};
	});
	//それらのストリーミングのマージ
	var stream4 = stream1.merge(stream2).merge(stream3);
	//オブジェクトの初期値
	var initialValue = {operand1:1,operator:"+",operand2:1};
	//オブジェクトを拡張するための関数
	var extendObj = function(curr,v){
		return $.extend(curr,v);
	}
	//オブジェクトから四則演算を行うための関数
	var calcFromObj = function(curr,v){
		if(v.operator == "+"){
			return v.operand1 + v.operand2;
		}else if(v.operator == "-"){
			return v.operand1 - v.operand2;
		}else if(v.operator == "*"){
			return v.operand1 * v.operand2;
		}else{
			return v.operand1 / v.operand2;
		}
	}
	//マージされたストリーミングから流れてきたオブジェクトで初期値を拡張
	var stream5 = stream4.scan(initialValue,extendObj);
	//拡張されたオブジェクトから四則演算の結果値を取得
	var stream6 = stream5.scan(2,calcFromObj);
	//取得した結果値を.inputにアサイン
	stream6.assign($(".input"),"val");
});

感想

これくらいだったら普通にjQueryで値をイベントリスナーで受け取って計算する方が速いかもしれませんが、Ajaxで取得した値のストリーミングや、画面のスクロール時の値のストリーミングなど考慮しなければならないことが増えると、それらのストリーミングをマージして、関数の世界に落とし込んであげた方が便利かもしれませんね。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →