2014/9/5にLIG社で行われたWebフロント勉強会で発表した資料です。

1. これからのJavaScript
関数型プログラミングとECMAScript 6
/46
1

2. 自己紹介
• 名前：安田裕介
• Trifortに今年４月入社の新卒１年生
• JavaScript, Scala, C++が好き
• Webフロントエンジニアやってます
• GitHubアカウント: TanUkkii007
この資料に出てくるサンプルコードはhttps://github.com/TanUkkii007/js_pitch_sample_codeにあります
/46
2

3. Webアプリケーション開発の
現状
/46
より大規模に
• クライアントマシンのパフォーマンスの向上
• WebブラウザのAPIの充実
• ランタイムの強化
• SPAやMVCの導入
• JavaScriptのサーバーサイドへの進出
3

4. スケーラブルで保守性の高いコードを
JavaScriptで書く必要がある
/46
4

5. どうやって？
• 短く書く
• 変更しない（させない）
/46
5

6. 今日話す内容
/46
• 関数型プログラミング
• 第一級オブジェクトとしての関数
• 不変性
• 副作用をなくす
• 不変なデータ
• ECMAScript 6
• const
• 分割代入（デストラクチャリング）
• 末尾呼び出し最適化
• for-ofループ
6

7. 関数型プログラミング
スケーラブルで保守性の高いコードを構築する手
法として関数型プログラミングが注目されている
関数型のスタイルを言語レベルでサポートしたも
のが関数型プログラミング言語
e.g.
Lisp, Scheme, SML, Erlang, Haskell, OCaml,
F#, Scala
/46
7

8. JavaScriptは関数型プログラミング言語
ではない
しかし
関数型プログラミングの考え方は
大規模化するコードに立ち向かう際に
役に立つ
/46
8

9. JavaScriptとは
• Javaのシンタックス
• Selfのプロトタイプ
• Schemeの第一級関数オブジェクト
ポータビリティに優れたダイナミックな言語
/46
9

10. JavaScriptとは
• Javaのシンタックス
• Selfのプロトタイプ
• Schemeの第一級関数オブジェクト
JavaScriptの先祖であるSchemeが
関数型プログラミング言語
＝＞JavaScriptでもある程度関数型プログラミングが可能
10
/46

11. 関数型プログラミングの
構成要素
• 第一級オブジェクトとしての関数
• イミュータビリティ（不変性）
11
/46

12. • 第一級オブジェクトとしての関数
• イミュータビリティ（不変性）
12
/46

13. 第一級オブジェクトとしての
関数とは
オブジェクトとしてのすべての能力をもつ関数である
13
/46

14. オブジェクト（値）は
1 //変数に代入できる!
2 var one = 1;!
3 //関数からの返り値として返すことができる!
4 function getOne() {!
5 return 1;!
6 }!
7 //関数の引数として渡すことができる!
8 function identity(num) {!
9 return num;!
10 }!
11 //意味はないが値が書けるところにはどこにでも書ける!
12 1;!
13 "1";!
14 //メンバーとしてメソッドをもつ!
15 "1".toString();!
16 //メンバーとしてプロパティをもつ!
17 "1".length;!
14
/46

15. 関数オブジェクトも同様
1 //変数に関数を代入する!
2 var func = function() {};!
3 //関数からの返り値として関数を返す!
4 function emptyFunc() {!
5 return function() {};!
6 }!
7 ///関数の引数として関数を渡す!
8 function result(f) {!
9 return typeof f === 'function' ? f() : f; !
10 }!
11 //意味はないが値が書けるところにはどこにでも書ける!
12 (function(){});!
13 func;!
14 //関数がメンバーとしてメソッドをもつ!
15 (function(){}).apply(null, []);!
16 //関数がメンバーとしてプロパティをもつ!
17 (function(){}).length;!
15
/46

16. 関数オブジェクトを用いれば
短いコードで柔軟な処理が可能だ
Array.prototype.reduceの例
＊配列の要素を集約し１つの値にする
reduce(callback(prev, next, index, array){}, initial)
16
/46

17. 1 //合計!
2 [0,1,2,3,4,5].reduce(function(prev, current) {!
3 return prev + current;!
4 });!
5 // > 15!
6 //平均!
7 [0,1,2,3,4,5].reduce(function(prev, current, index, array) {!
8 return prev + current/array.length;!
9 });!
10 // > 2.5!
11 //最大値!
12 [0,1,2,3,4,5].reduce(function(prev, current, index, array) {!
13 return prev < current ? current : prev;!
14 });!
15 // > 5!
16 //配列の平坦化!
17 [!
18 [1,2,3,4,5],!
19 [6,7,8,9,10],!
20 [11,12,13,14,15],!
21 [16,17,18,19,20],!
22 ].reduce(function(prev, current) {!
23 return prev.concat(current);!
24 }, []);!
25 // > [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
/46
17, 18, 19, 20]!
17

18. • 第一級オブジェクトとしての関数
• イミュータビリティ（不変性）
18
/46

19. JavaScriptはSchemeから
関数オブジェクトを受け継いだが、
イミュータビリティ（不変性）は受け継がな
かった
/46
!
JavaScriptは
ダイナミックであることを選んだ
19

20. JavaScriptは言語として
イミュータビリティを提供しない。
なのでイミュータビリティを実現
したければ、
プログラマーの手によって
なしとげなければならない
20
/46

21. 副作用
副作用とは
プログラミングにおける副作用（ふくさよう）とは、ある機能が
コンピュータの(論理的な)状態を変化させ、それ以降で得られる結
果に影響を与えることをいう。 wikipedia
関数型プログラミングでは副作用を徹底的に排除する
21
/46

22. /46
副作用をもつ
関数の例
副作用がある関数
は有意な値を返さ
ない特徴がある
1 // 1/2!
2 var half = {!
3 numer: 1,!
4 denom: 2!
5 };!
6 console.log(half.numer + '/' + half.denom);!
7 // > 1/2!
8 //halfに1を足す!
9 function plusOne() {!
10 half.numer += half.denom;!
11 }!
12 //rationalをnumで割る!
13 function devide(rational, num) {!
14 rational.denom *= num;!
15 }!
16 plusOne();!
17 // > undefined!
18 console.log(half.numer + '/' + half.denom);!
19 // > 3/2!
20 devide(half, 2);!
21 // > undefined!
22 console.log(half.numer + '/' + half.denom);!
23 // > 3/4!
22

23. 副作用をもたない関数の例
• 外部のデータや状態に依存しない
• 外部のデータや状態を変更しない
• 引数をもとにただマップ（写像）するだけ
23
/46

24. 1 //分数r1とr2を足す関数!
2 function plus(r1, r2) {!
3 return {!
4 numer: r1.numer*r2.denom + r2.numer* r1.denom,!
5 denom: r1.denom*r2.denom!
6 };!
7 }!
8 // 1/2!
9 var half = {!
10 numer: 1,!
11 denom: 2!
12 };!
13 // 1/4!
14 var quarter = {!
15 numer: 1,!
16 denom: 4!
17 };!
18 // 1/2 + 1/4!
19 var threeOverFour = plus(half, quarter);!
20 !
21 console.log(threeOverFour.numer + '/' + threeOverFour.denom);!
22 // > 6/8!
23 console.log(half.numer + '/' + half.denom);!
24 // > 1/2!
25 console.log(quarter.numer + '/' + quarter.denom);!
26 // > 1/4 24
/46

25. 副作用をもたない関数の利点
/46
• 汎用性が高い
• 安全である
• 結果を予測できる
25

26. おなじみの
副作用をもつ関数
1 // DOM API!
2 image.setAttribute('href', 'image.png');!
3 element.appendChild(child);!
4 element.removeChild(child);!
5 element.classList.add('someclass');!
6 element.classList.remove('someclass');!
7 !
8 // IO!
9 console.log('side effect');
DOM APIやコンソールへの出力は副作用
副作用はGUIや入出力にはなくてはならないもの
26
/46

27. 関数型プログラミングの手法はModelとController
/46
M
V
C
で新価を発揮する
27

28. イミュータブル（不変）な
データをつくる
不変な分数を作りたい
/46
!
!
とりあえずオブジェクト指向の考え
方に基づきカプセル化する
28

29. 1 var Rational = function(numer, denom) {!
2 this.numer = numer || 0; this.denom = denom || 1;!
3 };!
4 Rational.prototype = {!
5 toString: function() {!
6 return this.numer + '/' + this.denom;!
7 },!
8 ensure: function(r) {!
9 return (r instanceof Rational)? r: new Rational(r, 1);!
10 },!
11 plus: function(rational) {!
12 var r = this.ensure(rational);!
13 this.numer = this.numer*r.denom + r.numer*this.denom;!
14 this.denom *= r.denom; return this;!
15 },!
16 minus: function(rational) {!
17 var r = this.ensure(rational);!
18 this.numer = this.numer*r.denom - r.numer*this.denom;!
19 this.denom *= r.denom; return this;!
20 },!
21 multiply: function(rational) {!
22 var r = this.ensure(rational);!
23 this.numer *= r.numer;!
24 this.denom *= r.denom; return this;!
25 },!
26 divide: function(rational) {!
27 var r = this.ensure(rational);!
28 this.numer *= r.denom;!
29 this.denom *= r.numer; return this;!
30 }!
31 }; 29
/46
• 自身の状態を変更することに
よって分数の計算を行う
• 自分自身を返す

30. 1 // 1/2!
2 var half = new Rational(1,2);!
3 // 1/2!
4 var threeOverTwo = half.plus(1);!
5 !
6 half === threeOverTwo;!
7 // > true!
8 console.log(half);!
9 // > 3/2!
10 console.log(threeOverTwo);!
11 // > 3/2!
12 !
13 // 3/2 * 2/3!
14 threeOverTwo.multiply(new Rational(2,3));!
15 // > 6/6!
データの状態はメソッドの呼び出しごとに変化していく
30
/46

31. イミュータブルにする
31
/46

32. 1 var Rational = function(numer, denom) {!
2 this.numer = numer || 0; this.denom = denom || 1;!
3 };!
4 Rational.prototype = {!
5 toString: function() {!
6 return this.numer + '/' + this.denom;!
7 },!
8 ensure: function(r) {!
9 return (r instanceof Rational)? r: new Rational(r, 1);!
10 },!
11 plus: function(rational) {!
12 var r = this.ensure(rational);!
13 var numer = this.numer*r.denom + r.numer*this.denom;!
14 var denom = this.denom * r.denom;!
15 return new Rational(numer, denom);!
16 },!
17 minus: function(rational) {!
18 var r = this.ensure(rational);!
19 var numer = this.numer*r.denom - r.numer*this.denom;!
20 var denom = this.denom * r.denom;!
21 return new Rational(numer, denom);!
22 },!
23 multiply: function(rational) {!
24 var r = this.ensure(rational);!
25 var numer = this.numer * r.numer;!
26 var denom = this.denom * r.denom;!
27 return new Rational(numer, denom);!
28 },!
29 divide: function(rational) { /* omitted */ }!
30 };!
32
/46
• 自身の状態を変更しない
• 新しいオブジェクトを返す

33. 1 // 1/2!
2 var half = new Rational(1,2);!
3 !
4 // 1/2 + 1!
5 var threeOverTwo = half.plus(1);!
6 // > 3/2!
7 // halfとthreeOverTwoは違うオブジェクト!
8 half === threeOverTwo;!
9 // > false!
10 !
11 console.log(half);!
12 // > 1/2!
13 console.log(threeOverTwo);!
14 // > 3/2!
15 !
16 3/2 * 2/3!
17 threeOverTwo.multiply(new Rational(2,3));!
18 // > 6/6!
19 !
20 console.log(threeOverTwo);!
21 // > 3/2!
/46
いずれも
メソッド呼び出
しの後に
変化していない
33

34. ES6で導入される
便利な機能
短く、より安全に書けるようになります
• const
• 分割代入（デストラクチャリング）
• 末尾呼び出し最適化
• for-ofループ
/46
すべてFF33で動作
34

35. const
• constキーワードを使うことで、再代入不可能な
定数を宣言できる
35
/46

36. 1 const foo = 'foo';!
2 //再代入しても値は変わらない!
3 foo = 'bar';!
4 console.log(foo);!
5 // > foo!
6 !
7 const cobj = {foo: 'foo'};!
8 //再代入しても値は変わらない!
9 cobj = {};!
10 console.log(cobj.foo);!
11 // > foo!
12 //プロパティは変更できる!
13 cobj.foo = 'bar';!
14 console.log(cobj.foo);!
15 // > bar!
16 !
17 Object.freeze(cobj);!
18 //Writable is false!
19 cobj.foo = 'baz';!
20 console.log(cobj.foo);!
21 // > 'foo'!
22 //Extensible is false!
23 cobj.bar = 'bar';!
24 console.log(cobj.bar);!
25 // > undefined 36
/46
• const指定された変数は
再代入できない
• const指定のオブジェクトでは参照
先は変わらないが、プロパティは変
更できる
• プロパティの変更を防ぐには
Object.freeze()を慎重に使う

37. 分割代入（デストラクチャリング）
• 配列やオブジェクトをパターンで分解し、値を
取り出す
• 代入文を逆にしたような構文
• 元の配列やオブジェクトを変更しない
• 代入の回数を減らせる
37
/46

38. 1 //配列パターンによる分割!
2 var [a,b] = [1,2];!
3 console.log(a, b);!
4 // > 1 2!
5 !
6 //従来の値の交換!
7 var tmp = a;!
8 a = b;!
9 b = tmp;!
10 //分割代入による値の交換!
11 [b, a] = [a,b];!
12 !
13 //オブジェクトパターンによる分割!
14 var half = {numer: 1, denom: 2};!
15 var {numer, a, denom: b} = half;!
16 console.log(a, b);!
17 // > 1 2!
18 !
19 //ネストも可能!
20 var {name: name, family: {sister: sister}} =!
{name: 'John Doe', family: {sister: 1}}!
21 console.log(name, sister);!
22 // "John Doe" 1 38
/46

39. 末尾呼び出し最適化
• 繰り返し計算では関数の再帰の方がループより
も短く書ける
• 関数内の代入文という副作用を排除できる
39
/46

40. 例えば階乗の計算を
再帰とループの２通りで書いてみると
1 // 再帰による階乗計算!
2 function factorial1(n) {!
3 if (n === 0)!
4 return 1;!
5 return n * factorial1(n - 1);!
6 }!
7 !
8 //ループによる階乗計算!
9 function factorial2(n) {!
10 var result = 1;!
11 for (var i = 1; i <= n; ++i) {!
12 result *= i;!
13 }!
14 return result;!
15 }!
16 !
17 // 5 * 4 * 3 * 2 * 1!
18 factorial1(5);!
19 // > 120!
40/46

41. 再帰の問題
• 関数呼び出しのオーバーヘッド
• スタックオーバーフローの危険性
ES6で導入される末尾呼び出し最適化
により末尾再帰に限り
これらは解決される
41
/46

42. for-ofループ
• オブジェクトの列挙可能なプロパティの名前を列挙する。値ではない。
• 配列のインデックスを文字列にして列挙する。
• prototype中の列挙可能なプロパティも対象にする
• 順番が未定義
• カスタマイズ不能
/46
for-inループの問題
for-ofループは値を列挙し、カスタマイズ可能である
42

43. 1 //for-inループはキーを列挙する!
2 for (var i in [1,2,3,4,5])!
3 console.log(i);!
4 // > "0" "1" "2" "3" "4"!
5 !
6 //for-inループは[[Enumerable]]なprototypeプロパティを列挙する!
7 var F = function() {};!
8 F.prototype = {enumerable: 'enumerable'};!
9 var obj = new F();!
10 for (var key in obj)!
11 console.log(obj[key], obj.hasOwnProperty(key));!
12 // > enumerable false!
13 !
14 //独自のデータ構造はfor-inでループできない!
15 var LinkedList = function(value, next) {!
16 this.value = value;!
17 this.next = next || null;!
18 };!
19 var list = !
new LinkedList(1, new LinkedList(2, new LinkedList(3)));!
20 for (var curr = list; curr !== null; curr = curr.next)!
21 console.log(curr.value);!
22 // > 1 2 3! 開始、終了、次のデータを知っている必要がある
43/46

44. 1 //for-ofループは値を列挙する
2 for (var i of [1,2,3,4,5])
3 console.log(i);
4 // > 1 2 3 4 5
5 //@@iteratorを定義すれば、独自のデータ構造もループ可能
6 var LinkedList = function(value, next) {
7 this.value = value;
8 this.next = (next === undefined)? new LinkedList(null, null)
/46
: next;
9 };
10 LinkedList.prototype = {
11 '@@iterator': function() {
12 return {
13 current: this,
14 next: function() {
15 var prev = this.current;
16 this.current = prev.next;
17 return {value: prev.value, done: prev.value === null};
18 }
19 };
20 }
21 };
22 var list =
new LinkedList(1, new LinkedList(2, new LinkedList(3)));
23 //@@iteratorの暗黙の呼び出しがおきる
24 for (var value of list)
25 console.log(value);
26 // > 1 2 3 44

45. @@iteratorの定義が長いって？
ジェネレーターつかえば簡単に書けるよ
1 var LinkedList = function(value, next) {!
2 this.value = value;!
3 this.next = (next === undefined)? !
new LinkedList(null, null) : next;!
4 };!
5 LinkedList.prototype = {!
6 //!
7 '@@iterator': function*() {!
8 for (var curr = list; curr.next !== null; curr =
/46
curr.next) {!
9 yield curr.value;!
10 }!
11 }!
12 };!
13 var list = !
new LinkedList(1, new LinkedList(2, new LinkedList(3)));!
14 //!
15 for (var value of list)!
16 console.log(value);!
17 // > 1 2 3
45

46. まとめ
• JavaScriptの関数オブジェクトは強力
• 関数、データは副作用をもたないように設計す
べき
• JavaScriptで不変性を強制することは難しい
＝＞プログラマ自身が努力するしかない
• ES6の登場をお楽しみに
46
/46