Submit Search
Upload
Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
•
3 likes
•
4,676 views
Haraguchi Go
Follow
SCRIPTY #4 on 2015-12-15で発表したスライドです。 Bacon.jsを使ったFRPのサンプルと期待する効果を解説しています。
Read less
Read more
Software
Report
Share
Report
Share
1 of 26
Download Now
Download to read offline
Recommended
C#とJavaの違い
C#とJavaの違い
KenjiroUehara
Railsハイパー実践講座-第35回NaCl勉強会
Railsハイパー実践講座-第35回NaCl勉強会
Narihiro Nakamura
Students.rb #1 資料
Students.rb #1 資料
Tetsunari Niina
【書籍紹介】ノンプログラマのためのJavaScript
【書籍紹介】ノンプログラマのためのJavaScript
株式会社ランチェスター
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Yahoo!デベロッパーネットワーク
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
Yahoo!デベロッパーネットワーク
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
Yahoo!デベロッパーネットワーク
150421 es6とかな話
150421 es6とかな話
kotaro_hirayama
More Related Content
Viewers also liked
JavaScript : 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 silde
Net Kanayan
Prototypeベース in JavaScript
Prototypeベース in JavaScript
Ryo Maruyama
JavaScript.Next Returns
JavaScript.Next Returns
dynamis
ES6 はじめました
ES6 はじめました
Net Kanayan
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
クラスメソッド株式会社
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
Mohd Saeed
ES6 - JavaCro 2016
ES6 - JavaCro 2016
Nenad Pecanac
jQuery勉強会#4
jQuery勉強会#4
Ryo Maruyama
kontainer-js
kontainer-js
Kuu Miyazaki
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
kenji4569
Startup JavaScript
Startup JavaScript
Akinari Tsugo
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
taskie
はじめてのWallaby.js
はじめてのWallaby.js
Shunta Saito
断言して間違えると信頼度が低下するというベイズの話
断言して間違えると信頼度が低下するというベイズの話
Junya Hayashi
Hello npm
Hello npm
Muyuu Fujita
アニメーションの実装つらい話
アニメーションの実装つらい話
kata shin
Nds meetup8 lt
Nds meetup8 lt
ushiboy
Learn ES2015
Learn ES2015
Muyuu Fujita
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Kazuhiro Yoshimoto
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 ES6
FileReader and canvas and server silde
FileReader and canvas and server silde
Prototypeベース in JavaScript
Prototypeベース in JavaScript
JavaScript.Next Returns
JavaScript.Next Returns
ES6 はじめました
ES6 はじめました
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
ES6 - JavaCro 2016
ES6 - JavaCro 2016
jQuery勉強会#4
jQuery勉強会#4
kontainer-js
kontainer-js
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
Startup JavaScript
Startup JavaScript
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
はじめてのWallaby.js
はじめてのWallaby.js
断言して間違えると信頼度が低下するというベイズの話
断言して間違えると信頼度が低下するというベイズの話
Hello npm
Hello npm
アニメーションの実装つらい話
アニメーションの実装つらい話
Nds meetup8 lt
Nds meetup8 lt
Learn ES2015
Learn ES2015
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Similar to Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
Yutaka Horikawa
2014年の社内新人教育テキスト #1(プログラミング言語概論)
2014年の社内新人教育テキスト #1(プログラミング言語概論)
Shin-ya Koga
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
Koichi Sakata
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
Makoto SAKAI
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
Makoto SAKAI
LLVM overview 20110122
LLVM overview 20110122
nothingcosmos
エキ Py 読書会02 2010/9/7
エキ Py 読書会02 2010/9/7
Tetsuya Morimoto
ES6,7で書ける JavaScript
ES6,7で書ける JavaScript
Shin Sekaryo
Sbtのマルチプロジェクトはいいぞ
Sbtのマルチプロジェクトはいいぞ
Yoshitaka Fujii
JMeterをWebでしか設定できないサーバの設定自動化に使う
JMeterをWebでしか設定できないサーバの設定自動化に使う
隆行 神戸
エキ Py 読書会02 2章後半
エキ Py 読書会02 2章後半
Tetsuya Morimoto
JavaScript MVC入門
JavaScript MVC入門
大樹 小倉
最速C# 7.x
最速C# 7.x
Yamamoto Reki
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
shinjiigarashi
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
AdvancedTechNight
Javascriptで学ぶ Functional Programming
Javascriptで学ぶ Functional Programming
todorokit
ATN No.2 Scala事始め
ATN No.2 Scala事始め
AdvancedTechNight
ECMAScript6による関数型プログラミング
ECMAScript6による関数型プログラミング
TanUkkii
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
taskie
Similar to Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
(20)
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
2014年の社内新人教育テキスト #1(プログラミング言語概論)
2014年の社内新人教育テキスト #1(プログラミング言語概論)
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
LLVM overview 20110122
LLVM overview 20110122
エキ Py 読書会02 2010/9/7
エキ Py 読書会02 2010/9/7
ES6,7で書ける JavaScript
ES6,7で書ける JavaScript
Sbtのマルチプロジェクトはいいぞ
Sbtのマルチプロジェクトはいいぞ
JMeterをWebでしか設定できないサーバの設定自動化に使う
JMeterをWebでしか設定できないサーバの設定自動化に使う
エキ Py 読書会02 2章後半
エキ Py 読書会02 2章後半
JavaScript MVC入門
JavaScript MVC入門
最速C# 7.x
最速C# 7.x
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
Javascriptで学ぶ Functional Programming
Javascriptで学ぶ Functional Programming
ATN No.2 Scala事始め
ATN No.2 Scala事始め
ECMAScript6による関数型プログラミング
ECMAScript6による関数型プログラミング
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
1.
SCRIPTY #4 2015-12-15 Bacon.jsではじめる 関数型リアクティブ プログラミング入門
With ES6 1 株式会社gumi 原口剛
2.
自己紹介 原口 剛 Sr. Front-End Engineer Unity3D,
C#, JavaScript 2
3.
Agenda ES6とFRPの紹介 Bacon.js FRPに期待すること 3
4.
4
5.
ECMAScript6 クラス、モジュール、イテレータ、for/ofループ、 Pythonスタイルのジェネレータ、 アロー関数、2進数および8進数の整数リテラル、 Map、Set、WeekMap、WeekSet、プロキシ、テン プレート文字列、let、const、型付き配列、デ フォルト引数、Symbol、Promise、分割代入、可変 長引数 5
6.
y=f(x) 6
7.
Functional Reactive Programing 7
8.
FRP 関数型プログラミングと リアクティブプログラミングの 両パラダイムの特徴を組み合わせ 8
9.
Functional Progra!"ing 9
10.
原則 変数は変更されない 関数は処理順や状態に関係なく、 同じ引数に対して戻り値を返す 処理順が非同期 10
11.
Reactive Programing データの流れを通じて変更を自動的に 伝搬することによって成り立つ実行モデル var a
= 1; var b = a + 2; a = 3; console.log(b); !# 結果は、5 11
12.
FRPは言語に依存 しないパラダイム 12
13.
Bacon.js library for FRP 13
14.
基本的な実装方針 常に入力→変換→出力(→消費)を 行うストリームを定義していく 14
15.
Event Stream 15
16.
時間の経過過程で発生した イベントの無限長コレクション(配列) 16 ——|Click|—|Click|——|Click|---|Click|##$ ———————————————-——時間—————————————————>
17.
demo 17
18.
18
19.
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.
便利な関数が っている 20
21.
あらゆるものを Stream化にすると 21
22.
綺麗なコード ミニマムな関数の集まり 1関数が担う責務を小さくする 責務が小さいと分岐が少なくなる 直列的なコードになり読みやすい 22
23.
綺麗なコードは速い 無駄な処理を排除して速い! バグの発見が速い! 機能改修による影響の把握が速い! 23
24.
まとめ 非同期処理やイベントを正規化して Streamオブジェクトの流れを考える 限定されたスコープで問題解決 アロー関数やconst定義を用いること によってコードの見通しが良くなる 24
25.
https://gist.github.com/masakielastic/5897831 25
26.
ご清聴ありがとう ございました 26
Download Now