1. masakielastic

    FizzBuzz を追加

    masakielastic
Changes in body
Source | HTML | Preview
@@ -1,210 +1,233 @@
Cycle.js の勉強を始めて、RxJS の習熟度不足を痛感したので、基本練習に取り組むことにしました。
セットアップ
----------
### RxJS
```bash
npm install rx
```
```javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.min.js"></script>
```
### RxJS-DOM
```bash
npm install rx-dom
```
```js
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/7.0.3/rx.dom.min.js"></script>
```
### RxJS-jQuery
```bash
npm install rx-jquery
```
```js
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.min.js"></script>
```
### Fetch API
Can I use のサイトで Fetch API に対応するブラウザーの[一覧](http://caniuse.com/#feat=fetch) を調べることができます。古いブラウザーのために、Github が[polyfill](https://github.com/github/fetch) を公開しています。
定義されるメソッドの一覧
+--------------------
RxJS は [こちら](https://github.com/Reactive-Extensions/RxJS/tree/master/doc)、RxJS-DOM は[こちら](https://github.com/Reactive-Extensions/RxJS-DOM/tree/master/doc)、RxJS-jQuery は[こちら](https://github.com/Reactive-Extensions/rxjs-jquery)を参照。
+
+FizzBuzz
+--------
+
+FizzBuzz から練習をはじめよう。1 から 100 までの整数で構成されるシーケンスを生成するには `Rx.Observable.range` を使う。
+
+```js
+var Rx = require('rx');
+var source = Rx.Observable.range(1, 100);
+
+source.subscribe(function(value) {
+ if (value % 15 === 0) {
+ console.log('fizzbuzz');
+ } else if (value % 3 === 0) {
+ console.log('fizz');
+ } else if (value % 5 === 0) {
+ console.log('buzz');
+ } else {
+ console.log(value);
+ }
+});
+```
+
ユーザーの入力を表示する
--------------------
テキストボックスの入力をそのまま表示させてみましょう。Cycle.js の[トップページ](http://cycle.js.org/)にもコードサンプルが掲載されています。
```html
<input id="textInput" type="text">
<div id="result"></div>
```
```js
var textInput = document.querySelector('#textInput');
var result = document.querySelector('#result');
Rx.Observable.fromEvent(textInput, 'input')
.pluck('target', 'value')
.startWith('')
.subscribe(function(value) {
result.innerHTML = value;
});
```
pluck の代わりに `map` を使うこともできます。
```js
.map(function(ev) { return ev.target.value; })
```
クリックカウンター
---------------
ボタンをクリックするとカウンターの値が1つ増えるものとします。
```html
<button id="plus">増やす</button>
<div id="result">0</div>
```
```js
var plus = document.getElementById('plus');
var result = document.getElementById('result');
var source = Rx.Observable.fromEvent(plus, 'click')
.map(function() { return +1; })
.startWith(0)
.scan(function(acc, value) { return acc + value; })
.subscribe(function(value) { result.innerHTML = value; });
```
次にクリックするとカウンターの値が1減るボタンおよびカウンターの値が0になるリセットボタンを追加してみましょう。
```html
<button id="plus">増やす</button>
<button id="minus">減らす</button>
<button id="reset">リセット</button>
<div id="counter"></div>
```
```js
var counter = document.getElementById('counter');
var plus = Rx.Observable
.fromEvent(document.getElementById('plus'), 'click').map(function() { return +1; });
var minus = Rx.Observable
.fromEvent(document.getElementById('minus'), 'click').map(function() { return -1; });
var reset = Rx.Observable
.fromEvent(document.getElementById('reset'), 'click').map(function() { return 0; });
Rx.Observable.merge(plus, minus, reset)
.startWith(0)
.scan(function(acc, value) { return value === 0 ? 0 : acc + value; })
.subscribe(function(value) { counter.innerHTML = value; });
```
現在時刻を表示する
---------------
1秒単位で現在時刻を切り替えてみましょう。
```html
<div id="result"></div>
```
```js
var result = document.getElementById('result');
var source = Rx.Observable
.interval(1000)
.timeInterval();
source.subscribe(
function (x) {
result.innerHTML = (new Date()).toLocaleString();
},
function (err) {
console.log('エラー: ' + err);
},
function () {
console.log('完了');
});
```
Ajax
-----
`httpbin.org` で練習します。
### GET
ES6 Promise に対応している Fetch API を使ってみましょう。Promise から Observable を生成するには `fromPromise` を使います。
```js
var promise = fetch('http://httpbin.org/get')
.then(function(response) {
return response.json();
}).then(function(json) {
return json.origin;
}).catch(function(ex) {
return ex;
});
Rx.Observable.fromPromise(promise)
.subscribe(
function (value) {
console.log(value);
},
function (err) {
console.log('エラー: %s', err);
},
function () {
console.log('完了');
});
```
### POST
まずは `FormData` を使ってみましょう。`Content-Type` の値は `multipart/form-data` になります。
```js
var data = new FormData();
data.append('input', 'bar');
var promise = fetch('http://httpbin.org/post', {
method: 'post',
body: data
}).then(function(response) {
return response.json()
})
.then(function(json) {
return json.form;
})
.catch(function(ex) {
return ex;
});
Rx.Observable.fromPromise(promise)
.subscribe(
function (value) {
console.log(value);
},
function (err) {
console.log('エラー: %s', err);
},
function () {
console.log('完了');
});
```