狠狠撸

狠狠撸Share a Scribd company logo
SCRIPTY #4 2015-12-15
Bacon.jsではじめる?
関数型リアクティブ
プログラミング入門 With ES6
1
株式会社gumi 原口剛
自己紹介
原口 剛
Sr. Front-End
Engineer
Unity3D, C#,
JavaScript
2
Agenda
ES6と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.js?
library for FRP
13
基本的な実装方針
常に入力→変換→出力(→消費)を?
行うストリームを定義していく
14
Event Stream
15
時間の経過過程で発生した
イベントの無限長コレクション(配列)
16
——|Click|—|Click|——|Click|---|Click|##$
———————————————-——時間—————————————————>
demo
17
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", "sliding Window",
"startWith", "subscribe", "subscribeInternal", "take",
"takeUntil", "takeWhile", "throttle", "toEventStream",
"toProperty", "toString", "withHandler", "withStateMachine",
“zip” ….61個
19
便利な関数が?
っている
20
あらゆるものを
Stream化にすると
21
綺麗なコード
ミニマムな関数の集まり
1関数が担う責務を小さくする
責務が小さいと分岐が少なくなる
直列的なコードになり読みやすい
22
綺麗なコードは速い
無駄な処理を排除して速い!
バグの発見が速い!
機能改修による影響の把握が速い!
23
まとめ
非同期処理やイベントを正規化して
Streamオブジェクトの流れを考える
限定されたスコープで問題解決
アロー関数やconst定義を用いること
によってコードの見通しが良くなる
24
https://gist.github.com/masakielastic/5897831
25
ご清聴ありがとう
ございました
26

More Related Content

Viewers also liked (20)

JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6
Aayush Shrestha
?
FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server silde
Net Kanayan
?
Prototypeベース in JavaScript
Prototypeベース in JavaScriptPrototypeベース in JavaScript
Prototypeベース in JavaScript
Ryo Maruyama
?
JavaScript.Next Returns
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returns
dynamis
?
ES6 はじめました
ES6 はじめましたES6 はじめました
ES6 はじめました
Net Kanayan
?
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, PerformanceJavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
クラスメソッド株式会社
?
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptGetting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
Mohd Saeed
?
ES6 - JavaCro 2016
ES6 - JavaCro 2016ES6 - JavaCro 2016
ES6 - JavaCro 2016
Nenad Pecanac
?
箩蚕耻别谤测勉强会#4
箩蚕耻别谤测勉强会#4箩蚕耻别谤测勉强会#4
箩蚕耻别谤测勉强会#4
Ryo Maruyama
?
kontainer-js
kontainer-jskontainer-js
kontainer-js
Kuu Miyazaki
?
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろうGoogle App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
kenji4569
?
Startup JavaScript
Startup JavaScriptStartup JavaScript
Startup JavaScript
Akinari Tsugo
?
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
taskie
?
はし?めての奥补濒濒补产测.箩蝉
はし?めての奥补濒濒补产测.箩蝉はし?めての奥补濒濒补产测.箩蝉
はし?めての奥补濒濒补产测.箩蝉
Shunta Saito
?
断言して间违えると信頼度か?低下するというヘ?イス?の话
断言して间违えると信頼度か?低下するというヘ?イス?の话断言して间违えると信頼度か?低下するというヘ?イス?の话
断言して间违えると信頼度か?低下するというヘ?イス?の话
Junya Hayashi
?
Hello npm
Hello npmHello npm
Hello npm
Muyuu Fujita
?
アニメーションの実装つらい话
アニメーションの実装つらい话アニメーションの実装つらい话
アニメーションの実装つらい话
kata shin
?
Nds meetup8 lt
Nds meetup8 ltNds meetup8 lt
Nds meetup8 lt
ushiboy
?
Learn ES2015
Learn ES2015Learn ES2015
Learn ES2015
Muyuu Fujita
?
JavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
JavaScript(AngularJS?React.js)で作る iOS?AndroidアプリハンズオンJavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
JavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
Kazuhiro Yoshimoto
?
JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6
Aayush Shrestha
?
FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server silde
Net Kanayan
?
Prototypeベース in JavaScript
Prototypeベース in JavaScriptPrototypeベース in JavaScript
Prototypeベース in JavaScript
Ryo Maruyama
?
JavaScript.Next Returns
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returns
dynamis
?
ES6 はじめました
ES6 はじめましたES6 はじめました
ES6 はじめました
Net Kanayan
?
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptGetting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
Mohd Saeed
?
箩蚕耻别谤测勉强会#4
箩蚕耻别谤测勉强会#4箩蚕耻别谤测勉强会#4
箩蚕耻别谤测勉强会#4
Ryo Maruyama
?
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろうGoogle App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
kenji4569
?
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
taskie
?
はし?めての奥补濒濒补产测.箩蝉
はし?めての奥补濒濒补产测.箩蝉はし?めての奥补濒濒补产测.箩蝉
はし?めての奥补濒濒补产测.箩蝉
Shunta Saito
?
断言して间违えると信頼度か?低下するというヘ?イス?の话
断言して间违えると信頼度か?低下するというヘ?イス?の话断言して间违えると信頼度か?低下するというヘ?イス?の话
断言して间违えると信頼度か?低下するというヘ?イス?の话
Junya Hayashi
?
アニメーションの実装つらい话
アニメーションの実装つらい话アニメーションの実装つらい话
アニメーションの実装つらい话
kata shin
?
Nds meetup8 lt
Nds meetup8 ltNds meetup8 lt
Nds meetup8 lt
ushiboy
?
JavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
JavaScript(AngularJS?React.js)で作る iOS?AndroidアプリハンズオンJavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
JavaScript(AngularJS?React.js)で作る iOS?Androidアプリハンズオン
Kazuhiro Yoshimoto
?

Similar to Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6 (20)

フロントエンドの技术を刷新した话し。
フロントエンドの技术を刷新した话し。フロントエンドの技术を刷新した话し。
フロントエンドの技术を刷新した话し。
Yutaka Horikawa
?
2014年の社内新人教育テキスト #1(プログラミング言語概論)
2014年の社内新人教育テキスト #1(プログラミング言語概論)2014年の社内新人教育テキスト #1(プログラミング言語概論)
2014年の社内新人教育テキスト #1(プログラミング言語概論)
Shin-ya Koga
?
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
?
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
JJUG CCC 2017 Fall オレオレJVM言語を作ってみるJJUG CCC 2017 Fall オレオレJVM言語を作ってみる
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
Koichi Sakata
?
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
効果的なXPの導入を目的とした プラクティス間の相互作用の分析効果的なXPの導入を目的とした プラクティス間の相互作用の分析
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
Makoto SAKAI
?
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
効果的な XP の導入を目的としたプラクティス間の相互作用の分析効果的な XP の導入を目的としたプラクティス間の相互作用の分析
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
Makoto SAKAI
?
LLVM overview 20110122
LLVM overview 20110122LLVM overview 20110122
LLVM overview 20110122
nothingcosmos
?
エキ Py 読書会02 2010/9/7
エキ Py 読書会02 2010/9/7エキ Py 読書会02 2010/9/7
エキ Py 読書会02 2010/9/7
Tetsuya Morimoto
?
ES6,7て?書ける JavaScript
ES6,7て?書ける JavaScriptES6,7て?書ける JavaScript
ES6,7て?書ける JavaScript
Shin Sekaryo
?
厂产迟のマルチフ?ロシ?ェクトはいいそ?
厂产迟のマルチフ?ロシ?ェクトはいいそ?厂产迟のマルチフ?ロシ?ェクトはいいそ?
厂产迟のマルチフ?ロシ?ェクトはいいそ?
Yoshitaka Fujii
?
闯惭别迟别谤を奥别产でしか设定できないサーバの设定自动化に使う
闯惭别迟别谤を奥别产でしか设定できないサーバの设定自动化に使う闯惭别迟别谤を奥别产でしか设定できないサーバの设定自动化に使う
闯惭别迟别谤を奥别产でしか设定できないサーバの设定自动化に使う
隆行 神戸
?
エキ Py 読書会02 2章後半
エキ Py 読書会02 2章後半エキ Py 読書会02 2章後半
エキ Py 読書会02 2章後半
Tetsuya Morimoto
?
JavaScript MVC入門
JavaScript MVC入門JavaScript MVC入門
JavaScript MVC入門
大樹 小倉
?
最速C# 7.x
最速C# 7.x最速C# 7.x
最速C# 7.x
Yamamoto Reki
?
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
shinjiigarashi
?
全部入り!奥骋笔で高速闯补惫补厂肠谤颈辫迟+贬惭尝5体験
全部入り!奥骋笔で高速闯补惫补厂肠谤颈辫迟+贬惭尝5体験全部入り!奥骋笔で高速闯补惫补厂肠谤颈辫迟+贬惭尝5体験
全部入り!奥骋笔で高速闯补惫补厂肠谤颈辫迟+贬惭尝5体験
AdvancedTechNight
?
Javascriptで学ぶ Functional Programming
Javascriptで学ぶ Functional ProgrammingJavascriptで学ぶ Functional Programming
Javascriptで学ぶ Functional Programming
todorokit
?
贰颁惭础厂肠谤颈辫迟6による関数型フ?ロク?ラミンク?
贰颁惭础厂肠谤颈辫迟6による関数型フ?ロク?ラミンク?贰颁惭础厂肠谤颈辫迟6による関数型フ?ロク?ラミンク?
贰颁惭础厂肠谤颈辫迟6による関数型フ?ロク?ラミンク?
TanUkkii
?
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
taskie
?
フロントエンドの技术を刷新した话し。
フロントエンドの技术を刷新した话し。フロントエンドの技术を刷新した话し。
フロントエンドの技术を刷新した话し。
Yutaka Horikawa
?
2014年の社内新人教育テキスト #1(プログラミング言語概論)
2014年の社内新人教育テキスト #1(プログラミング言語概論)2014年の社内新人教育テキスト #1(プログラミング言語概論)
2014年の社内新人教育テキスト #1(プログラミング言語概論)
Shin-ya Koga
?
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
?
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
JJUG CCC 2017 Fall オレオレJVM言語を作ってみるJJUG CCC 2017 Fall オレオレJVM言語を作ってみる
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
Koichi Sakata
?
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
効果的なXPの導入を目的とした プラクティス間の相互作用の分析効果的なXPの導入を目的とした プラクティス間の相互作用の分析
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
Makoto SAKAI
?
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
効果的な XP の導入を目的としたプラクティス間の相互作用の分析効果的な XP の導入を目的としたプラクティス間の相互作用の分析
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
Makoto SAKAI
?
エキ Py 読書会02 2010/9/7
エキ Py 読書会02 2010/9/7エキ Py 読書会02 2010/9/7
エキ Py 読書会02 2010/9/7
Tetsuya Morimoto
?
ES6,7て?書ける JavaScript
ES6,7て?書ける JavaScriptES6,7て?書ける JavaScript
ES6,7て?書ける JavaScript
Shin Sekaryo
?
厂产迟のマルチフ?ロシ?ェクトはいいそ?
厂产迟のマルチフ?ロシ?ェクトはいいそ?厂产迟のマルチフ?ロシ?ェクトはいいそ?
厂产迟のマルチフ?ロシ?ェクトはいいそ?
Yoshitaka Fujii
?
闯惭别迟别谤を奥别产でしか设定できないサーバの设定自动化に使う
闯惭别迟别谤を奥别产でしか设定できないサーバの设定自动化に使う闯惭别迟别谤を奥别产でしか设定できないサーバの设定自动化に使う
闯惭别迟别谤を奥别产でしか设定できないサーバの设定自动化に使う
隆行 神戸
?
エキ Py 読書会02 2章後半
エキ Py 読書会02 2章後半エキ Py 読書会02 2章後半
エキ Py 読書会02 2章後半
Tetsuya Morimoto
?
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
shinjiigarashi
?
全部入り!奥骋笔で高速闯补惫补厂肠谤颈辫迟+贬惭尝5体験
全部入り!奥骋笔で高速闯补惫补厂肠谤颈辫迟+贬惭尝5体験全部入り!奥骋笔で高速闯补惫补厂肠谤颈辫迟+贬惭尝5体験
全部入り!奥骋笔で高速闯补惫补厂肠谤颈辫迟+贬惭尝5体験
AdvancedTechNight
?
Javascriptで学ぶ Functional Programming
Javascriptで学ぶ Functional ProgrammingJavascriptで学ぶ Functional Programming
Javascriptで学ぶ Functional Programming
todorokit
?
贰颁惭础厂肠谤颈辫迟6による関数型フ?ロク?ラミンク?
贰颁惭础厂肠谤颈辫迟6による関数型フ?ロク?ラミンク?贰颁惭础厂肠谤颈辫迟6による関数型フ?ロク?ラミンク?
贰颁惭础厂肠谤颈辫迟6による関数型フ?ロク?ラミンク?
TanUkkii
?
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
taskie
?

Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6