Slide 1

Slide 1 text

+BWB4DSJQU ࣌ʑ5ZQF4DSJQU Ͱ ΏΔ΍͔ʹ͸͡ΊΔؔ਺ܕϓϩάϥϛϯά Introducing functional programming w/ JavaScript ( & sometimes TypeScript ) ॳՆͷ+BWB4DSJQUࡇ  !XBLBNTIB /BPLJ:"."%"

Slide 2

Slide 2 text

͸͡Ίʹ +BWB4DSJQUʹ͸ؔ਺ܕϓϩάϥϛϯάͷΤοηϯε͕ଟ෼ʹؚ·Ε͍ͯΔ ϦΞΫςΟϒɾϓϩάϥϛϯάͷྲྀߦʹΑΓɺXFCϑϩϯτΤϯυͷੈք ʹ΋ਁಁ͖ͯͨ͠ ͦΜͳؔ਺ܕϓϩάϥϛϯάͷ͞ΘΓ෦෼Λ͝঺հ

Slide 3

Slide 3 text

·ͣ͸ͪ͜ΒͷίʔυΛޚཡ͍ͩ͘͞ First, please take a look at this code… TS

Slide 4

Slide 4 text

['foo', 'bar', 'baz'].map((val: string) => { return `${val}!!!`; }); //=> ['foo!!!', 'bar!!!', 'baz!!!'] function double(x: number): number { return x * 2; } double(3); //=> 6

Slide 5

Slide 5 text

['foo', 'bar', 'baz'].map((val: string) => { return `${val}!!!`; }); //=> ['foo!!!', 'bar!!!', 'baz!!!'] function double(x: number): number { return x * 2; } double(3); //=> 6 ͲͪΒ΋ؔ਺ܕϓϩάϥϛϯάͷఆٛʹଈͨ͠΋ͷͰ͢

Slide 6

Slide 6 text

['foo', 'bar', 'baz'].map((val: string) => { return `${val}!!!`; }); //=> ['foo!!!', 'bar!!!', 'baz!!!'] function double(x: number): number { return x * 2; } double(3); //=> 6 ͦ΋ͦ΋ؔ਺ܕϓϩάϥϛϯάͱ͸ʁ ෳ਺ͷࣜΛؔ਺ͷద༻ʹΑͬͯ૊Έ߹ΘͤΔϓϩάϥϛϯάελΠϧ ؔ਺߹੒ ෭࡞༻ͷແ͍ؔ਺ΛϝΠϯʹѻ͏ϓϩάϥϛϯάελΠϧ ७ਮ

Slide 7

Slide 7 text

['foo', 'bar', 'baz'].map((val: string) => { return `${val}!!!`; }); //=> ['foo!!!', 'bar!!!', 'baz!!!'] function double(x: number): number { return x * 2; } double(3); //=> 6 ରٛʹҐஔ͢Δͷ͕ʰखଓ͖ܕϓϩάϥϛϯάʱ ม਺Λഁյతʹॻ͖׵͑ΔͳͲɺ෭࡞༻Λۦ࢖͢Δ ໨తͷͨΊʹ࣮ߦ͢΂͖Ұ࿈ͷεςοϓΛҰͭͷؔ਺ʹ࣋ͨͤΔ ఆٛͨؔ͠਺͸ϓϩάϥϜ࣮ߦதͷ೚ҙͷλΠϛϯάͰݺͼग़ͤΔ

Slide 8

Slide 8 text

 ؔ਺߹੒  খ͞ͳؔ਺Λ૊Έ߹ΘͤΔͱ͍͏͜ͱ  ߴ֊ؔ਺  ७ਮ  ෭࡞༻Λແ͘͢ͱ͍͏͜ͱ  ෆมੑ *NNVUBCMF   ࢀরಁաੑ  ͜Ε͔Βؔ਺ܕϓϩάϥϛϯάΛֶͿਓ΁ ຊ೔͓࣋ͪؼΓ͍͖͍ͨͩͨ͜ͱ 1PJOUTUP MFBSO

Slide 9

Slide 9 text

ؔ਺߹੒ ෳ਺ͷࣜΛؔ਺ͷద༻ʹΑͬͯ૊Έ߹ΘͤΔϓϩάϥϛϯάελΠϧ

Slide 10

Slide 10 text

ͱɺͦͷલʹߴ֊ؔ਺ʹ͍ͭͯ About a higher-order function

Slide 11

Slide 11 text

ͱɺͦͷલʹߴ֊ؔ਺ʹ͍ͭͯ [1, 4, 9, 16].map(x => x * 2); ['spray', 'limit', 'exuberant', 'present'].filter(word => word.length > 6 ); "SSBZͷ*UFSBUJWFͳϝιου͸ؔ਺ΛҾ਺ʹऔΔ ؔ਺ΛҾ਺PS໭Γ஋ͱͯ͠ѻ͏΋ͷΛʰߴ֊ؔ਺ʱͱ͍͏ ߴ֊ؔ਺͸ؔ਺Λ߹੒͢Δ΋ͷͰ͋Δ

Slide 12

Slide 12 text

؆୯ͳؔ਺߹੒Λ΍ͬͯΈΑ͏ Basic Examples

Slide 13

Slide 13 text

/** * ཁ݅: ͋Δ਺஋ʹ 1 Λ଍ͯ͠ 2ഒͨ݁͠ՌΛฦ͢ػೳ */ // Ұͭͷؔ਺Ͱ࣮ݱ͢Δͱ͜͏ͳΔ // ಛԽ͗ͯͯ͢͠൚༻ੑʹ͚ܽΔͨΊɺอकੑ΋௿͍ function addOneTimesTwo(x: number): number { return (x + 1) * 2; } // Ҿ਺ʹ 1 Λ଍͚ͩ͢ function addOne(x: number): number { return x + 1; } // Ҿ਺Λ 2ഒ͢Δ͚ͩ function timesTwo(x: number): number { return x * 2; }

Slide 14

Slide 14 text

/** * ཁ݅: ͋Δ਺஋ʹ 1 Λ଍ͯ͠ 2ഒͨ݁͠ՌΛฦ͢ػೳ */ // ݁Ռ͸શͯಉ͡ addOneTimesTwo(2); //=> 6 const x = addOne(2); timesTwo(x); //=> 6 timesTwo(addOne(2)); //=> 6

Slide 15

Slide 15 text

DPNQPTF߹੒༻ͷؔ਺Λ࡞ͬͯΈΑ͏ Basic Examples

Slide 16

Slide 16 text

function compose(fn1, fn2) { return function(x0) { return fn1(fn2(x0)); } } // TypeScript Ͱॻ͘ͱ͜Μͳײ͡ function compose( fn1: (x: T1) => T2, fn2: (x0: V0) => T1, ): (x0: V0) => T2 { return function(x0: V0): T2 { return fn1(fn2(x0)); }; }

Slide 17

Slide 17 text

const addOneTimesTwo = compose(timesTwo, addOne); addOneTimesTwo(2); //=> 6 compose(timesTwo, addOne)(2); //=> 6

Slide 18

Slide 18 text

const addOneTimesTwo = compose(timesTwo, addOne); addOneTimesTwo(2); //=> 6 compose(timesTwo, addOne)(2); //=> 6 ؔ਺߹੒ ؔ਺͸ͻͱ·ͱ·Γʹͤͣɺࡉ͔͘෼ղ͢Δ খ͞ͳؔ਺Λ૊Έ߹Θͤͯେ͖ͳػೳΛ࣮ݱ͢Δ খ͘͞୯७ͳؔ਺͸ɺͦΕ͚ͩ൚༻ੑ͕ߴ͍ 6OJU5FTUΛॻ͘ͷ͕༰қʹͳΔ

Slide 19

Slide 19 text

७ਮ ෭࡞༻ͷͳ͍ؔ਺ΛϝΠϯʹѻ͏ϓϩάϥϛϯάελΠϧ

Slide 20

Slide 20 text

·ͣ͸ͪ͜ΒͷίʔυΛޚཡ͍ͩ͘͞ First, please take a look at this code…

Slide 21

Slide 21 text

// 1 function sum(x: number, y: number): number { return x + y; } // 2 let i: number = 0; function sum2(x: number, y: number): number { i += x + y; return x + y; } // 3 function sum3(x: number, y: number): number { return x + y + i; } // 4 function sum4(x: number, y: number): number { const result = x + y; console.log(result); return result; }

Slide 22

Slide 22 text

// 1 function sum(x: number, y: number): number { return x + y; } // 2 let i: number = 0; function sum2(x: number, y: number): number { i += x + y; return x + y; } // 3 function sum3(x: number, y: number): number { return x + y + i; } // 4 function sum4(x: number, y: number): number { const result = x + y; console.log(result); return result; } Ұͭ໨͚͕ͩ७ਮͳؔ਺Ͱ͢ ଞ͸શͯʰෆ७ʱͳؔ਺Ͱ͢

Slide 23

Slide 23 text

// 1 function sum(x: number, y: number): number { return x + y; } // 2 let i: number = 0; function sum2(x: number, y: number): number { i += x + y; return x + y; } // 3 function sum3(x: number, y: number): number { return x + y + i; } // 4 function sum4(x: number, y: number): number { const result = x + y; console.log(result); return result; } ७ਮͳؔ਺ͱ͸ ໭Γ஋͸ඞͣҾ਺ͱͯ͠༩͑ΒΕͨ஋͔ΒͷΈܭࢉ͞ΕΔ ؔ਺ͷ֎෦Ͱมߋ͞ΕΔՄೳੑͷ͋ΔσʔλʹҰ੾ґଘ͠ͳ͍ ؔ਺࣮ߦ෦ͷ֎ଆʹଘࡏ͢ΔԿ͔͠Βͷঢ়ଶΛҰ੾มߋ͠ͳ͍

Slide 24

Slide 24 text

// Ҿ਺ͷ஋Λ଍͠ࢉ͚ͨͩ͠ ( ७ਮ ) function sum(x: number, y: number): number { return x + y; } // άϩʔόϧม਺Λมߋ͍ͯ͠Δ let i: number = 0; function sum2(x: number, y: number): number { i += x + y; return x + y; } // ໭Γ஋͕Ҿ਺͚ͩ͡Όͳ͘άϩʔόϧม਺ʹґଘͯ͠Δ function sum3(x: number, y: number): number { return x + y + i; } // console.log ͱ͍͏׬શʹ֎ͷੈքʹׯবͯ͠Δ function sum4(x: number, y: number): number { const result = x + y; console.log(result); return result; }

Slide 25

Slide 25 text

෭࡞༻͸ͳΔ΂͘ແ͍ํ͕๬·͍͠ ঢ়ଶΛؔͨ͠ґଘؔ܎͕ੜ·Εͯ͠·͏ ঢ়ଶͱ͸άϩʔόϧม਺΍ΠϯελϯεͳͲ ґଘؔ܎ͱ͸ؔ਺ͷݺͼग़͠ॱংͳͲ ࠶ݱੑʹ੍໿͕ൃੜ͢Δ

Slide 26

Slide 26 text

෭࡞༻Λແͨ͘͢ΊͷୈҰา The first step to eliminate side effects…

Slide 27

Slide 27 text

෭࡞༻Λແͨ͘͢ΊͷୈҰา let i: number = 0; function sum3(x: number, y: number, i: number): number { return x + y + i; } ॲཧʹඞཁͳσʔλ͸શͯҾ਺ͱͯ͠ड͚औΔ άϩʔόϧม਺΋Ҿ਺ͱͯ͠ड͚औΕ͹0,

Slide 28

Slide 28 text

interface User { firstName: string; lastName: string; greet(): string; }

Slide 29

Slide 29 text

class User { constructor(private firstName: string, private lastName: string) {} public updateFirstName(name: string): User { return new User(name, this.lastName); } public updateLastName(name: string): User { return new User(this.firstName, name); } public greet(): string { return `hello, ${this.firstName} ${this.lastName}!!`; } }

Slide 30

Slide 30 text

class User { constructor(private firstName: string, private lastName: string) {} public updateFirstName(name: string): User { return new User(name, this.lastName); } public updateLastName(name: string): User { return new User(this.firstName, name); } public greet(): string { return `hello, ${this.firstName} ${this.lastName}!!`; } } ΦϒδΣΫτ͸$MBTTͱͯ͠ఆٛ͢Δ ֤ϝιουͷ࠷ޙʹࣗ਎ͷ৽͍͠ΠϯελϯεΛ໭Γ஋ʹฦ͢ ຖճ৽͍͠ΠϯελϯεΛͦͷ࣌ͷ಺෦஋͔Βੜ੒͢Δ ݺͼग़͠ͷίϯϑϦΫτ͕ൃੜ͠ͳ͍

Slide 31

Slide 31 text

ࢀরಁաੑ ؔ਺Λͦͷ໭Γ஋ࣗମʹࠩ͠ସ͑ͯ΋ϓϩάϥϜશମ͕յΕͳ͍͜ͱ ೔ຊͷࠃձ͸೔ຊͷट౎Ͱ։͔ΕΔ ೔ຊͷࠃձ͸౦ژͰ։͔ΕΔ

Slide 32

Slide 32 text

७ਮ ґଘؔ܎Λ࣋ͨͳ͍ͱ͍͏͜ͱ͸ɺͦΕ͚ͩίʔυͷݟ௨͕͠ྑ͍ ݟ௨͠ͷྑ͍ίʔυ͸อकੑ͕ߴ͍ ґଘؔ܎Λ࣋ͨͳ͍७ਮؔ਺͸6OJU5FTU͕͠΍͍͢ 6OJU5FTUͷ͠΍͍͢ίʔυ͸อकੑ͕ߴ͍ ७ਮؔ਺͸߹੒͕͠΍͍͢

Slide 33

Slide 33 text

3BNEBKT ௒ڧྗͳؔ਺ܕϓϩάϥϛϯά༻ JavaScript ϥΠϒϥϦ

Slide 34

Slide 34 text

3BNEBKT ίϨΫγϣϯૢ࡞ܥͱෆมੑ୲อ ७ਮ ͷೋ໘ੑΛซͤ࣋ͭ ΄΅શͯͷ"1*͸ෆมੑͱ෭࡞༻ͷͳ͍ػೳ *NNVUBCMF ͱͯ͠ઃܭ "1*໊͕)BTLFMM΍4DBMBͷͦΕʹΠϯεύΠΞ͞Ε໋໊ͨ

Slide 35

Slide 35 text

PSYENCE:MEDIA PRODUCED BY ৄ͘͠͸ฐࣾϒϩάΛ͝ࢀর͍ͩ͘͞

Slide 36

Slide 36 text

ؔ਺ܕϓϩάϥϛϯάͷϝϦοτσϝϦοτ First, please take a look at this code… TS

Slide 37

Slide 37 text

ؔ਺ܕϓϩάϥϛϯάͷϝϦοτ ҰͭҰͭͷ෦඼ ؔ਺ ͕খ͍͞ͷͰอकੑɾ֦ுੑ͕ߴ͍ 6OJU5FTU͕ॻ͖΍͍͢ ґଘؔ܎Ͱ಄Λ೰·͢͜ͱ͕গͳ͍ ෭࡞༻Λ௥͍ग़͢͜ͱͰ༧ظͤ͵ಈ࡞ ෆ۩߹ Λະવʹ๷͛Δ TS

Slide 38

Slide 38 text

ؔ਺ܕϓϩάϥϛϯάͷϝϦοτ Ұൠతͳ(6*ΞϓϦέʔγϣϯͱͷ૬ੑ͕ྑ͍ ϦΞΫςΟϒϓϩάϥϛϯά 3Y΍'MVYͳͲ ͕ద͍ͯ͠Δ TS

Slide 39

Slide 39 text

ؔ਺ܕϓϩάϥϛϯάͷσϝϦοτ ෋߽ϓϩάϥϛϯάʹͳΓ͕ͪ ඞવతʹؔ਺ͷݺͼग़͠ճ਺͕૿͑Δ ؔ਺߹੒ͳͲ  ֶशίετ͕ߴ͍ खଓ͖ܕͱ͸ύϥμΠϜ͕ͥΜͥ̽ҧ͏ TS

Slide 40

Slide 40 text

͜Ε͔Βؔ਺ܕϓϩάϥϛϯάΛֶͿਓ΁

Slide 41

Slide 41 text

͜Ε͔Βؔ਺ܕϓϩάϥϛϯάΛֶͿਓ΁

Slide 42

Slide 42 text

͜Ε͔Βؔ਺ܕϓϩάϥϛϯάΛֶͿਓ΁ ʰ1BSTFSΛ࡞ͬͯΈΔʱ͕୊ࡐͱ͓ͯ͢͢͠Ί ద౰ͳ+40/σʔλΛߏ଄ղੳͯ͠ΈΔͱ͔ ؆୯ͳίʔυϑΥʔϚολΛ࡞ͬͯΈΔͱ͔

Slide 43

Slide 43 text

͜Ε͔Βؔ਺ܕϓϩάϥϛϯάΛֶͿਓ΁ ຊ֨తʹֶͼ͍ͨͳΒ)BTLFMM ਖ਼ਅਖ਼໏ͷʰ७ਮؔ਺ܕϓϩάϥϛϯάݴޠʱ ੩తܕ෇͚ݴޠ XFCܥͷۀ຿ʹ௚݁͢Δ͜ͱ͸গͳ͍͕ɺʰڭཆʱͱͯ͠ ֶͿͳΒ͜Ε͕࠷ద ʰ͍͢͝)ຊʱҰ࡭ࣸܦ͢Δ͚ͩͰ΋͔ͳΓͷֶͼʹͳΔ

Slide 44

Slide 44 text

*OUSPEVDFNZTFMG Զͷ໊ΛݴͬͯΈΖ ࣗݾ঺հ

Slide 45

Slide 45 text

!XBLBNTIB *OUSPEVDFNZTFMG /BPLJ:"."%"ࢁా௚थ XFCϑϩϯτΤϯυΤϯδχΞ ॴଐגࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ ෭ۀۀ຿ҕୗͱͯ͠๭ελʔτΞοϓاۀΛ͓ख఻͍த

Slide 46

Slide 46 text

PSYENCE:MEDIA PRODUCED BY

Slide 47

Slide 47 text

PSYENCE:MEDIA PRODUCED BY ϦΫϧʔτϚʔέςΟϯάύʔτφʔζͷެࣜςοΫϒϩά ٕज़ྗɾϊ΢ϋ΢ͷମܥԽ 3.1ͷ಺੡։ൃ૊৫͓Αͼࣥචऀͷࣾ֎ϓϨθϯε޲্ ࠾༻ϒϥϯσΟϯάڧԽ ۀք׆ੑԽ΁ͷߩݙ 14:&/$&.&%*"

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

https://tech.recruit-mp.co.jp 3.1 ϒϩά

Slide 50

Slide 50 text

5IBOLZPV