Tweet
Tweet

Slide 1

Slide 1 text

5ZQF4DSJQUಋೖͰಘΒΕΔ
 ʮม͍͑ͯ͘༐ؾʯ 4FQ (%(%FW'FTU5PLZP !PLVOPLFOUBSP

Slide 2

Slide 2 text

୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w ΫϨε΢ΣΞ୅දɺ ΤϯδχΞ w "OHVMBS೔ຊϢʔβʔձ
 OHLZPUP

Slide 3

Slide 3 text

ࣥච

Slide 4

Slide 4 text

໨࣍ w ͍·ɺ 5ZQF4DSJQUΛ࠾༻͢Δ͜ͱ͕ࣗવͰ͋Δཧ༝ w ੲͷ5ZQF4DSJQUΛ஌ͬͯΔਓͷΑ ͘ ͋Δޡղ wʮม͍͑ͯ͘༐ؾʯ ͱ͸

Slide 5

Slide 5 text

͍·ɺ 5ZQF4DSJQUΛ࠾༻͢Δ͜ͱ͕
 ࣗવͰ͋Δཧ༝

Slide 6

Slide 6 text

5ZQF4DSJQU w 5ZQF4DSJQU͸ϓϩάϥϛϯάݴޠ w +BWB4DSJQUͷεʔύʔηο τݴޠ w ੩తܕ෇͚Λಋೖ w ίϯύΠϧ࣌ʹܕݕࠪ w ೥ʹˠݱࡏ w .JDSPTPGU͕ओಋͰ։ൃ͢ΔΦʔϓϯιʔε

Slide 7

Slide 7 text

ίϯύΠϧ͕ඞཁ w 5ZQF4DSJQUϑΝΠϧ͸tscͰίϯύΠϧ͢Δ͜ͱͰ
 +BWB4DSJQUϑΝΠϧͱͯ͠ग़ྗ w +BWB4DSJQU͸ݩʑΠϯλϓϦλͰಈ࡞͢Δݴޠ w ॻ͍͙ͯ͢ʹϒϥ΢βͰಈ࡞ w ͦΕͳͷʹɺ ͳͥίϯύΠϧ͕ඞཁͳݴޠͱͯ͠ੜ·Εͨ ʁ

Slide 8

Slide 8 text

"MU+4ˠ#BCFM w ͪΐͬͱ ͨ͠ྺ࢙ͷ࿩ w ೥$PGGFF4DSJQU w ೥5ZQF4DSJQU w ೥#BCFM wʮKT͡Όͳ͍ଞͷϑΝΠϧʯ Λ+BWB4DSJQUϑΝΠϧʹม׵ w ม׵ޙͷϑΝΠϧ͕ಈ࡞͢Ε͹Α͍ͱ͍͏ߟ͑ํ

Slide 9

Slide 9 text

Ϟδϡʔϧ w αʔόʔαΠ υ޲͚+BWB4DSJQUͷ࣮ߦ؀ڥ/PEFKT஀ੜ w $PNNPO+4 w +BWB4DSJQUΛϞδϡʔϧ୯ҐͰࡉ͔͘෼͚Δػӡ w &4 w &4.PEVMFT w NPEVMFJNQPSUFYQPSU·ΘΓ͕ ʮߏจ࢓༷ͷΈʯ ܾ·ͬͨ

Slide 10

Slide 10 text

XFCQBDL w OQN w /PEF1BDLBHF.BOBHFS w ΋ͱ͸/PEFKT༻ͷϞδϡʔϧґଘؔ܎؅ཧ༻ͷπʔϧ w ݱ୅Ͱ͸ϑϩϯ τΤϯ υ։ൃͷσϑΝΫ τ ɾ ελϯμʔ υʹ w όοΫΤϯ υɺ ϑϩϯ τΤϯ υؔ܎ͳ͘OQNͰґଘΛ؅ཧ w ϑϩϯ τΤϯ υͳΒ͹XFCQBDLͱ͍͏όϯ υϥʔ࢖ͬͯόϯ υϧϑΝΠϧΛ࡞੒

Slide 11

Slide 11 text

ॲཧΛ଍͢ͳΒɺ Α Γ҆શଆʹ w ݱ୅ͷ+BWB4DSJQUͰ͸࣮ߦલʹԿ͔ͱॲཧ͕ͪ͠ w #BCFMͳͲͷ τϥϯεύΠϧ w XFCQBDLͰͷόϯ υϧ w Ͳ͏࣮ͤߦલʹԿ͔͠Βॲཧ͢ΔͳΒόάΛݮΒͤΔΑ Γ҆શଆʹ޲͚ͨॲཧ΋ w 5ZQF4DSJQUͷίϯύΠϧ ʢ੩తܕݕࠪʣ w ϓϩάϥϜͷ࣮ߦલʹݕ஌Ͱ͖ΔΤϥʔ͸͢΂ͯ੩తʹݕ஌͓ͯ͘͠

Slide 12

Slide 12 text

ੲͷ5ZQF4DSJQUΛ஌ͬͯΔਓͷ
 Α ͘ ͋Δޡղ

Slide 13

Slide 13 text

ޡղܕఆٛϑΝΠϧͷ؅ཧ͕໘౗ w 5ZQF4DSJQUͰɺ +BWB4DSJQUϥΠ ϒϥ ϦΛ࢖͍͍ͨͱ͖
 ͦͷϥΠ ϒϥ ϦͷܕఆٛϑΝΠϧΛඞཁͱ͢Δ w ͦͷܕఆٛϑΝΠϧ .d.ts ͸
 ܕఆٛ؅ཧπʔϧΛ࢖ͬͯผ్Πϯε τʔϧ͠ͳ͍ͱ͍͚ͳ͍ w ੲ͸ͦ͏ͩͬͨ w ࠓ͸ҧ͏

Slide 14

Slide 14 text

OQNͰ؅ཧͰ͖·͢ w ܕఆٛϑΝΠϧ͕ඞཁͳͷ͸ੲͱಉ͡ w ܕఆٛϑΝΠϧ͕%FpOJUFMZ5ZQFEʹϗεςΟ ϯά͞Ε͍ͯΔͷ΋ੲͱಉ͡ w OQNͰͷ؅ཧ͕Մೳʹͳͬͨ w ͨͱ͑͹$ npm i -D @types/reactͳͲ w package.jsonͰґଘ͍ͯ͠ΔܕఆٛϑΝΠϧΛ֬ೝͰ͖Δ

Slide 15

Slide 15 text

ޡղҊ݅ʹ్த͔ΒೖΕΒΕͳ͍ w +BWB4DSJQUͰਐΊ͍ͯΔҊ݅ w ్த͔Β5ZQF4DSJQUʹ੾Γସ͑Δͷ͕ࠔ೉ w ͢΂ͯͷϑΝΠϧʹanyΛॻ͍ͯճ֦ͬͯுࢠΛ.tsʹ͠ͳ͍ͱ͍͚ͳ͍ w ੲ͸ͦ͏ͩͬͨ w ࠓ͸ҧ͏

Slide 16

Slide 16 text

ࠞͥͯӡ༻Ͱ͖·͢ w ίϯύΠ ϥΦϓγϣϯͷ--allowJsΛ༗ޮʹ͢Δ
 ·ͨ͸ɺ tsconfig.jsonͷallowJsΛtrueʹ͢Δ w +BWB4DSJQUଆͷੈք͸͢΂ͯanyͰ͋Δͱ ͯ͠
 ஍ಓʹ5ZQF4DSJQUԽΛਐΊΔ w ίϯύΠ ϥઃఆϑΝΠϧtsconfig.jsonͰ͸ॳظ஋͕strict: true w .jsΛ.tsʹϦωʔϜͨ͠Βɺ Ͳ͜Λ௚ͤ͹͍͍͔ίϯύΠ ϥ͕ڭ͑ͯ͘ΕΔ

Slide 17

Slide 17 text

VOLOPXOܕ w 5ZQF4DSJQUΑ Γunknownܕ͕ఆٛ͞Εͨ w ͍··Ͱ͸ ʮΑ ͘Θ͔Βͳ͍΋ͷʯ ͸anyܕͱ͍ͯͨ͠ w ࠓޙɺ ྫ͑͹JSON.parse()ͷ໭Γܕ͸
 anyΑ Γunknownͱ ͯ͠ѻ͏ ͱ҆શ ʢඪ४ͷܕఆٛͰ͸anyͱͳ͍ͬͯΔʣ

Slide 18

Slide 18 text

BOZͱVOLOPXO any unknown ͋ΒΏΔ஋ˠ5 ͋ΒΏΔ஋͸
 anyʹͳΕΔ ͋ΒΏΔ஋͸
 unknownʹͳΕΔ 5ˠ͋ΒΏΔ஋ any͸
 ͋ΒΏΔ஋ʹͳΕΔ unknown͸
 any, unknownʹ͔͠ͳΕͳ͍

Slide 19

Slide 19 text

ʮม͍͑ͯ͘༐ؾʯ ͱ͸

Slide 20

Slide 20 text

ԿΛม͍͑ͯ͘ͷ͔ w ϓϩάϥϜͷιʔείʔ υ w ίʔ υ͸෗Δ w ෗ͬͨ෦෼͸আڈ͢Δ w ߴ඼࣭ͳϓϩάϥϜͰ͋ΔͨΊʹɺ 
 ৗʹίʔ υશମͷ઱౓Λߴ͘อͨͳ͚Ε͹ͳΒͳ͍

Slide 21

Slide 21 text

ͳͥ෗Δͷ͔ w ϓϩάϥϛϯά͸ϏϧͷݐஙͰ͸ͳ͍ w ઃܭਤ௨Γʹ׬੒͠ͳ͍ w ίʔ υ֎ͰͷมԽ w ࢓༷ͷมߋɺ νʔϜϝϯόʔͷೖΕସ͑ w ։ൃऀͷεΩϧ޲্ ɾ ཁ݅΁ͷख़஌ w ෗Δͱ͸ɺ ίʔ υΛॻ͍͔ͯΒͷ࣌ؒܦաΛࢦ͢ͷͰ͸ͳ͘
 ίʔ υΛॻ͍ͨ࣌఺͔Βݱ࣌఺·Ͱͷɺ ίʔ υ֎ͰͷมԽͷେ͖͞Ͱ͋Δ

Slide 22

Slide 22 text

Ϧ ϑΝΫλ Ϧ ϯά w ιʔείʔ υΛม͍͑ͯͨ͘Ίʹ͸Ϧ ϑΝΫλ Ϧ ϯά͕ඞཁ w ݱ୅ͷϓϩάϥϛϯάʹ͓͍ͯ͸
 ʮҰ౓ಈ࡞ͨ͠ϓϩάϥϜʹ͸ೋ౓ͱखΛՃ͑ͳ͍ʯ ͳΜͯෆՄೳ w ͦ΋ͦ΋ ʮҰ౓ಈ࡞ͨ͠ʯ ΛͲͷ࣌఺ͷಈ࡞ͱ͢Δͷ͔
 ఆٛͰ͖ͳ͍΄Ͳཁ͕݅ڊେʹͳ͍͍ͬͯͬͯΔ w ͢ͳΘͪৗʹϦ ϑΝΫλ Ϧ ϯά͠ଓ͚ͳ͚Ε͹ͳΒͳ͍ wʮม͍͑ͯ͘༐ؾʯ ͕ඞཁ

Slide 23

Slide 23 text

ܕݕࠪʹΑΔ҆৺ײ w Ϧ ϑΝΫλ Ϧ ϯάதʹ৽ͨͳόάΛ࣋ͪࠐΜͰ͸ͳΒͳ͍ w ςε τ͕͋Ε͹ม͍͚͑ͯΔ w ςε τ͕ͳ͚Ε͹ʜʜ w Ұ౓ʹେ෯ͳมߋΛ͠ͳ͍ͳΒɺ ίϯύΠ ϥΛ৴༻͢Δख΋͋Δ wʮςε τ͸ॻ͍ͯͳ͍͚Ͳɺ ίϯύΠϧ ɾ Τϥʔ͕ग़͍ͯͳ͍ʯ w ˠ ʮগͳ͘ ͱ΋ɺ ίϯύΠϧ ɾ ΤϥʔͱͳΔΑ ͏ͳϛε͸ؚ·Ε͍ͯͳ͍ ʂ ʯ w ΋ͪΖΜςε τΛॻ͘ʹӽͨ͜͠ͱ͸ͳ͍

Slide 24

Slide 24 text

ܕݕ͕ࠪ৴༻ͳΒͳ͍ྫ addToFavorites( entryId: number, userId: number ) { // do something } toFormattedString( date: Date, format: string, timeZone: string ): string { // do something }

Slide 25

Slide 25 text

Ҿ਺ʹ஋ΦϒδΣΫ τΛಋೖ addToFavorites( entryId: EntryId, userId: UserId ) { // do something } toFormattedString( date: Date, format: DateFormat, timeZone: TimeZone ): string { // do something }

Slide 26

Slide 26 text

஋ΦϒδΣΫ τ export abstract class EntryId extends NumberValue { constructor(protected value: number) { super(value); } } export abstract class UserId extends NumberValue { constructor(protected value: number) { super(value); } }

Slide 27

Slide 27 text

͜Ε͚ͩ͡Ό଍Γͳ͍ w 5ZQF4DSJQU͸4USVDUVSBM5ZQJOH ʢߏ଄ܕʣ ͱ͍͏ܕࣝผ๏Λ༻͍͍ͯΔ w લทͷྫ w EntryIdܕ΋UserIdܕ΋value: numberϓϩύςΟ Λ࣋ͭ w ಉ͡ϓϩύςΟ ͔͍࣋ͬͯ͠ͳ͍ͷͰɺ ޓ׵ੑͷ͋ΔܕͱΈͳ͞Εͯ͠· ͏ w /PNJOBM5ZQJOH ʢެশܕʣ Λ࠾༻͢Δݴޠ w ϓϩύςΟʹؔΘΒͣDMBTT͕ҧ͑͹ผͷܕͱͳΔ

Slide 28

Slide 28 text

ࠞಉ๷ࢭϓϩύςΟ Λ଍͢ type PreventEquation = void; export abstract class EntryId extends NumberValue { EntryId: PreventEquation; constructor(protected value: number) { super(value); } } export abstract class UserId extends NumberValue { UserId: PreventEquation; constructor(protected value: number) { super(value); } }

Slide 29

Slide 29 text

஋ΦϒδΣΫ τͷ਌Ϋϥε export abstract class NumberValue extends Value { constructor(protected value: number) { super(value); } lt(other: NumberValue): boolean { return this.value < other.value; } lte(other: NumberValue): boolean { return this.value <= other.value; } }

Slide 30

Slide 30 text

جఈΫϥε export abstract class Value { constructor(protected value: T) { // } toString(): string { return this.value.toString(); } valueOf(): T { return this.value; } eq(other: Value): boolean { return this.value === other.value; } }

Slide 31

Slide 31 text

ܧঝ͸ڞ௨ԽͰ͸ͳ͍ w DMBTTͷܧঝ FYUFOET Λෳ਺ͷΫϥεؒͷॲཧͷڞ௨Խखஈͱ ͯ͠༻͍ͯ͸ͳΒͳ͍ w εύήςΟͷݪҼɺ ͍͍ͩͨޙչ͢Δ w FYUFOET͸ڞ௨ԽͷखஈͰ͸ͳ͘ɺ ந৅తੑ࣭ͷදݱͱ ͯ͠࢖͏
 ͜ͷྫͩͱ wʮจࣈྻܥͷΦϒδΣΫ τʯ ͳͷ͔ wʮ਺஋ܥͷΦϒδΣΫ τʯ ͳͷ͔ w Λදݱ͍ͯ͠Δ

Slide 32

Slide 32 text

ίϯύΠϧ ɾ ΤϥʔΛຯํʹ͚ͭΖ

Slide 33

Slide 33 text

ಥવͷ࢓༷มߋ w Locatorܕͱ͍͏஋ΦϒδΣΫ τΛ࢖༻ͯ͠։ൃ͍ͯͨ͠ w औҾઌ͔Β߱ͬͯ͘ Δಥવͷ࢓༷มߋ ʂ w Locatorܕͷ಺෦࣮૷Λमਖ਼͠ͳ͍ͱɺ ͦͷ࢓༷ʹରԠͰ͖ͳ͍

Slide 34

Slide 34 text

ม͍͑ͯͨ͘ΊͷᖰΓग़͠ w ͓΋ΉΖʹLegacyLocatorܕͱ͍͏ո͍͠ܕ໊ʹมߋ w 5ZQF4DSJQUͱ*%&Λ૊Έ߹ΘͤΕ͹੩తղੳʹΑͬͯվ໊΋Ұॠ w ͋ΒͨΊͯ৽͍͠࢓༷Λ࣮૷ͨ͠LocatorܕΛ࣮૷ w ݹ͍LegacyLocatorܕΛҰՕॴLocatorܕʹมߋ్ͨ͠୺ɺ Ұ੪ʹΤϥʔ w ͦͷΤϥʔՕॴΛͻͨ͢Β௵͍ͯ͘͠ w ͜ΕΛᖰΓग़͠ͱݺΜͰ͍Δ

Slide 35

Slide 35 text

ίϯύΠϧ ɾ ΤϥʔΛຯํʹ͚ͭΖ w ίϯύΠϧ ɾ Τϥʔ͸ѱ͍΋ͷͰ͸ͳ͍ w Ή͠Ζ։ൃऀʹৗʹدΓఴ͏ɺ ৺ڧ͍ຯํͰ͋Δ w Τϥʔʹײँ ʂ w QSFUUJFS ʢίʔ υ ɾ ϑΥʔϚολʣ ͱ5ZQF4DSJQUίϯύΠ ϥʹै͓͚ͬͯ͹޾ͤ

Slide 36

Slide 36 text

ෆ҆ΛऔΓআ͘ w ίʔ υΛม͍͑ͯ͘ ͜ͱ͸ৗʹෆ҆ͱͷઓ͍ w ෆ҆ΛऔΓআͨ͘ΊʹԿ͕Ͱ͖Δ͔ w ςε τΛॻ͘ w ܕΛॻ͘ wυΩϡϝϯ τΛॻ͘ ʢܕΞϊςʔγϣϯ͸ྑ࣭ͳ υΩϡϝϯ τͰ͋Δʣ w 5ZQF4DSJQUΛ࠾༻͢Ε͹ɺ ෆ͕҆औΓআ͚ͯ ʮม͍͑ͯ͘༐ؾʯ ΛಘΒΕΔ

Slide 37

Slide 37 text

5IBOLZPV