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