bacon.jsではじめる関数型リアアクティブプログラミング入門 with es6
TRANSCRIPT
SCRIPTY #4 2015-12-15
Bacon.jsではじめる関数型リアクティブ
プログラミング入門 With ES6
1
株式会社gumi 原口剛
自己紹介原口 剛
Sr. Front-End Engineer
Unity3D, C#, JavaScript
2
AgendaES6とFRPの紹介
Bacon.js
FRPに期待すること
3
4
ECMAScript6クラス、モジュール、イテレータ、for/ofループ、
Pythonスタイルのジェネレータ、
アロー関数、2進数および8進数の整数リテラル、Map、Set、WeekMap、WeekSet、プロキシ、テン
プレート文字列、let、const、型付き配列、デフォルト引数、Symbol、Promise、分割代入、可変長引数
5
y=f(x)6
Functional Reactive
Programing
7
FRP関数型プログラミングと
リアクティブプログラミングの
両パラダイムの特徴を組み合わせ
8
Functional Progra!"ing
9
原則変数は変更されない
関数は処理順や状態に関係なく、同じ引数に対して戻り値を返す
処理順が非同期
10
Reactive Programing
データの流れを通じて変更を自動的に伝搬することによって成り立つ実行モデル
var a = 1;var b = a + 2;a = 3;console.log(b); !# 結果は、5
11
FRPは言語に依存しないパラダイム
12
Bacon.jslibrary for FRP
13
基本的な実装方針常に入力→変換→出力(→消費)を行うストリームを定義していく
14
Event Stream
15
時間の経過過程で発生した
イベントの無限長コレクション(配列)
16
——|Click|—|Click|——|Click|---|Click|##$
———————————————-——時間—————————————————>
18
and more!"assign", "awaiting", "buffer", "bufferWithCount", "bufferWithTime", "bufferWithTimeOrCount", "combine", "concat", "constructor", "debounce", "debounceI!"ediate", "decode", "delay", "dependsOn", "deps", "desc", "diff", "doAction", "endOnError", "errors", "filter", "flatMap", "flatMapFirst", "flatMapLatest", "fold", "hasSubscribers", "inspect", "internalDeps", "log", "map", "mapEnd", "mapError", "merge", "name", "not", "onEnd", "onError", "onValue", "onValues", "reduce", "sampledBy", "scan", "skip", "skipDuplicates", "skipErrors", "skipUntil", "skipWhile", "slidingWindow", "startWith", "subscribe", "subscribeInternal", "take", "takeUntil", "takeWhile", "throttle", "toEventStream", "toProperty", "toString", "withHandler", "withStateMachine", “zip” ….61個
19
便利な関数が揃っている
20
あらゆるものを
Stream化にすると
21
綺麗なコードミニマムな関数の集まり
1関数が担う責務を小さくする
責務が小さいと分岐が少なくなる
直列的なコードになり読みやすい
22
綺麗なコードは速い無駄な処理を排除して速い!
バグの発見が速い!
機能改修による影響の把握が速い!
23
まとめ非同期処理やイベントを正規化して
Streamオブジェクトの流れを考える
限定されたスコープで問題解決
アロー関数やconst定義を用いることによってコードの見通しが良くなる
24
ご清聴ありがとうございました
26