Functional Programming Applied in JS

「JSで実際に役立った関数型プログラミング」
jsCafe #17で発表しました。
関数型プログラミングの考え方を使うことで、JavaScriptのコードがすっきり書けた事例を紹介。

Transcript

1. JSで実際に役立った 関数型プログラミング 柳田 @tyanagida
2. ダムの地図公開してます http://maps.ontarget.cc/dams/
3. ダムの地図公開してます http://maps.ontarget.cc/dams/
4. 自己紹介補足  
5. 自己紹介補足 • 古めのエンジニア  コンピュータ歴約30年  Linuxは0.99から
6. 自己紹介補足 • 古めのエンジニア  コンピュータ歴約30年  Linuxは0.99から • 実はデューク大学のMBA
7. 自己紹介補足 • 古めのエンジニア  コンピュータ歴約30年  Linuxは0.99から • 実はデューク大学のMBA ティム・クックと一緒
8. 自己紹介補足 • 古めのエンジニア  コンピュータ歴約30年  Linuxは0.99から • 実はデューク大学のMBA • ITエンジニアのための英語読解講 座はじめました ティム・クックと一緒
9. 自己紹介補足 • 古めのエンジニア  コンピュータ歴約30年  Linuxは0.99から • 実はデューク大学のMBA • ITエンジニアのための英語読解講 座はじめました ティム・クックと一緒 英語ドキュメントの分からない 箇所があったら解説します http://d.hatena.ne.jp/casualstartup/20131117/it_english_grammar
10. 関数って何?
11. 関数って何? 関数=函数
12. 関数って何? 関数=函数 大昔の教科書表記
13. 関数って何? 関数=函数 f a b ・・・ 大昔の教科書表記 y
14. 関数って何? 関数=函数 f a b ・・・ 大昔の教科書表記 y 値を入力したら、値が返ってくる (副作用はなし)
15. 例題: FizzBuzz
16. 例題: FizzBuzz 1. 1～100まで順に表示する 2. ただし、 1. 3の倍数のときには代わりにFizzと表示 2. 5の倍数のときには代わりにBuzzと表示 3. 15の倍数のときには代わりにFizzBuzzと表示
17. 例題: FizzBuzz 1. 1～100まで順に表示する 2. ただし、 1. 3の倍数のときには代わりにFizzと表示 2. 5の倍数のときには代わりにBuzzと表示 3. 15の倍数のときには代わりにFizzBuzzと表示 まずfor (i = 1; i <= 100; i++)
18. 例題: FizzBuzz 1. 1～100まで順に表示する 2. ただし、 1. 3の倍数のときには代わりにFizzと表示 2. 5の倍数のときには代わりにBuzzと表示 3. 15の倍数のときには代わりにFizzBuzzと表示 まずfor (i = 1; i <= 100; i++) これは手続き脳
19. 関数脳の場合
20. 関数脳の場合 1 ・・・ 2 3 100
21. f f f f 関数脳の場合 1 ・・・ 2 3 100
22. f f f f 関数脳の場合 1 ・・・ 2 3 100 1 2 Fizz Buzz
23. f f f f 関数脳の場合 1 ・・・ 2 3 100 1 2 Fizz Buzz ・fは、数字を1つ受け取って、FizzやBuzzを返す関数
24. f f f f 関数脳の場合 1 ・・・ 2 3 100 1 2 Fizz Buzz ・fは、数字を1つ受け取って、FizzやBuzzを返す関数 ・配列の各要素に、関数を適用する操作が”map”
25. JavaScriptで書く var f = function (x) { if (x % 15 === 0) return 'FizzBuzz'; if (x % 5 === 0) return 'Buzz'; if (x % 3 === 0 ) return 'Fizz'; return x; } [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map(f);
26. JavaScriptで書く var f = function (x) { if (x % 15 === 0) return 'FizzBuzz'; if (x % 5 === 0) return 'Buzz'; if (x % 3 === 0 ) return 'Fizz'; return x; } [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map(f); ECMA Script 5.1以降
27. ダムの地図で使った場所: フィルタの処理
28. ダムの地図で使った場所: フィルタの処理 • if文が結構ややこしい • フィルタ条件は増減あるかも • ダムの分類も変わるかも • 画面内のダムだけ対象か、全ダ ム対象か、決めてない
29. ダムの地図で使った場所: フィルタの処理 • if文が結構ややこしい • フィルタ条件は増減あるかも • ダムの分類も変わるかも • 画面内のダムだけ対象か、全ダ ム対象か、決めてない Mapっぽく書いたらすっきり!!
30. ついでにreduceはこんな感じ * この操作をfoldと呼ぶ言語もある f f f a1 ・・・ a2 a3 an ・・・ y a4 f
31. 言いたかったこと 関数型プログラミングを知って 「コーディングの引き出し」 増やしましょう
32. 参考文献 • プログラミングGauche  Scheme (LISP)の本と見せかけつ つ、同時に関数型プログラミング の初歩に触れられる * FizzBuzzの例題は、この本 をもとにJSで書き換えました