SlideShare 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

PPTX
C#とJavaの違い
PDF
Railsハイパー実践講座-第35回NaCl勉強会
PDF
Students.rb #1 資料
PDF
【書籍紹介】ノンプログラマのためのJavaScript
PDF
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
PDF
Service Workerとの戦い ~ 実装編 ~ #scripty03
PDF
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
PDF
150421 es6とかな話
C#とJavaの違い
Railsハイパー実践講座-第35回NaCl勉強会
Students.rb #1 資料
【書籍紹介】ノンプログラマのためのJavaScript
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Service Workerとの戦い ~ 実装編 ~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
150421 es6とかな話

Viewers also liked (20)

PPTX
JavaScript : What is it really? AND Some new features in ES6
PDF
FileReader and canvas and server silde
PDF
Prototypeベース in JavaScript
PDF
JavaScript.Next Returns
PDF
ES6 はじめました
PDF
JavaScript 実践講座 Framework, Tool, Performance
PPTX
Getting started with ES6 : Future of javascript
PPTX
ES6 - JavaCro 2016
PDF
jQuery勉強会#4
PDF
kontainer-js
PPT
Google App EngineでTwitterアプリを作ろう
PPTX
Startup JavaScript
PDF
ECMAScript 6 Features(PDF 版)
PDF
はじめてのWallaby.js
PDF
断言して間違えると信頼度が低下するというベイズの話
PDF
Hello npm
PDF
アニメーションの実装つらい話
PPTX
Nds meetup8 lt
PDF
Learn ES2015
PPTX
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript : What is it really? AND Some new features in ES6
FileReader and canvas and server silde
Prototypeベース in JavaScript
JavaScript.Next Returns
ES6 はじめました
JavaScript 実践講座 Framework, Tool, Performance
Getting started with ES6 : Future of javascript
ES6 - JavaCro 2016
jQuery勉強会#4
kontainer-js
Google App EngineでTwitterアプリを作ろう
Startup JavaScript
ECMAScript 6 Features(PDF 版)
はじめてのWallaby.js
断言して間違えると信頼度が低下するというベイズの話
Hello npm
アニメーションの実装つらい話
Nds meetup8 lt
Learn ES2015
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Ad

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

PPTX
フロントエンドの技術を刷新した話し。
PDF
2014年の社内新人教育テキスト #1(プログラミング言語概論)
PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
PPTX
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
PDF
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
PDF
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
ODP
LLVM overview 20110122
PDF
エキ Py 読書会02 2010/9/7
PPTX
ES6,7で書ける JavaScript
PDF
Sbtのマルチプロジェクトはいいぞ
PPTX
JMeterをWebでしか設定できないサーバの設定自動化に使う
PDF
エキ Py 読書会02 2章後半
PDF
JavaScript MVC入門
PPTX
最速C# 7.x
PDF
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
PDF
全部入り!WGPで高速JavaScript+HML5体験
ODP
Javascriptで学ぶ Functional Programming
PDF
ATN No.2 Scala事始め
PDF
ECMAScript6による関数型プログラミング
PDF
JavaScript Tips 2015(PDF 版)
フロントエンドの技術を刷新した話し。
2014年の社内新人教育テキスト #1(プログラミング言語概論)
サーバサイドエンジニアが 1年間まじめにSPAやってみた
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
効果的なXPの導入を目的とした プラクティス間の相互作用の分析
効果的な XP の導入を目的としたプラクティス間の相互作用の分析
LLVM overview 20110122
エキ Py 読書会02 2010/9/7
ES6,7で書ける JavaScript
Sbtのマルチプロジェクトはいいぞ
JMeterをWebでしか設定できないサーバの設定自動化に使う
エキ Py 読書会02 2章後半
JavaScript MVC入門
最速C# 7.x
PHP 8 と V8 (JavaScript) で速さを見比べてみよう!
全部入り!WGPで高速JavaScript+HML5体験
Javascriptで学ぶ Functional Programming
ATN No.2 Scala事始め
ECMAScript6による関数型プログラミング
JavaScript Tips 2015(PDF 版)
Ad

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