$30 off During Our Annual Pro Sale. View Details »

TypeScript導入で得られる「変えていく勇気」 / The courage to change by TypeScript

OKUNOKENTARO
September 01, 2018

TypeScript導入で得られる「変えていく勇気」 / The courage to change by TypeScript

2018/9/1、GDG DevFest Tokyo 2018にて発表した資料です。

OKUNOKENTARO

September 01, 2018
Tweet

More Decks by OKUNOKENTARO

Other Decks in Technology

Transcript

  1. 5ZQF4DSJQUಋೖͰಘΒΕΔ

    ʮม͍͑ͯ͘༐ؾʯ
    4FQ (%(%FW'FTU5PLZP
    !PLVOPLFOUBSP

    View Slide


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

    OHLZPUP

    View Slide

  3. ࣥච

    View Slide

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

    View Slide

  5. ͍·ɺ
    5ZQF4DSJQUΛ࠾༻͢Δ͜ͱ͕

    ࣗવͰ͋Δཧ༝

    View Slide

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

    View Slide

  7. ίϯύΠϧ͕ඞཁ
    w 5ZQF4DSJQUϑΝΠϧ͸tscͰίϯύΠϧ͢Δ͜ͱͰ

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

    View Slide

  8. "MU+4ˠ#BCFM
    w ͪΐͬͱ
    ͨ͠ྺ࢙ͷ࿩
    w ೥$PGGFF4DSJQU
    w ೥5ZQF4DSJQU

    w ೥#BCFM
    wʮKT͡Όͳ͍ଞͷϑΝΠϧʯ
    Λ+BWB4DSJQUϑΝΠϧʹม׵
    w ม׵ޙͷϑΝΠϧ͕ಈ࡞͢Ε͹Α͍ͱ͍͏ߟ͑ํ

    View Slide

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

    View Slide

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

    View Slide

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

    w ϓϩάϥϜͷ࣮ߦલʹݕ஌Ͱ͖ΔΤϥʔ͸͢΂ͯ੩తʹݕ஌͓ͯ͘͠

    View Slide

  12. ੲͷ5ZQF4DSJQUΛ஌ͬͯΔਓͷ

    Α
    ͘
    ͋Δޡղ

    View Slide

  13. ޡղܕఆٛϑΝΠϧͷ؅ཧ͕໘౗
    w 5ZQF4DSJQUͰɺ
    +BWB4DSJQUϥΠ
    ϒϥ
    ϦΛ࢖͍͍ͨͱ͖

    ͦͷϥΠ
    ϒϥ
    ϦͷܕఆٛϑΝΠϧΛඞཁͱ͢Δ
    w ͦͷܕఆٛϑΝΠϧ .d.ts
    ͸

    ܕఆٛ؅ཧπʔϧΛ࢖ͬͯผ్Πϯε
    τʔϧ͠ͳ͍ͱ͍͚ͳ͍
    w ੲ͸ͦ͏ͩͬͨ
    w ࠓ͸ҧ͏

    View Slide

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

    View Slide

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

    View Slide

  16. ࠞͥͯӡ༻Ͱ͖·͢
    w ίϯύΠ
    ϥΦϓγϣϯͷ--allowJsΛ༗ޮʹ͢Δ

    ·ͨ͸ɺ
    tsconfig.jsonͷallowJsΛtrueʹ͢Δ
    w +BWB4DSJQUଆͷੈք͸͢΂ͯanyͰ͋Δͱ
    ͯ͠

    ஍ಓʹ5ZQF4DSJQUԽΛਐΊΔ
    w ίϯύΠ
    ϥઃఆϑΝΠϧtsconfig.jsonͰ͸ॳظ஋͕strict: true
    w .jsΛ.tsʹϦωʔϜͨ͠Βɺ
    Ͳ͜Λ௚ͤ͹͍͍͔ίϯύΠ
    ϥ͕ڭ͑ͯ͘ΕΔ

    View Slide

  17. VOLOPXOܕ
    w 5ZQF4DSJQUΑ
    Γunknownܕ͕ఆٛ͞Εͨ
    w ͍··Ͱ͸
    ʮΑ
    ͘Θ͔Βͳ͍΋ͷʯ
    ͸anyܕͱ͍ͯͨ͠
    w ࠓޙɺ
    ྫ͑͹JSON.parse()ͷ໭Γܕ͸

    anyΑ
    Γunknownͱ
    ͯ͠ѻ͏
    ͱ҆શ
    ʢඪ४ͷܕఆٛͰ͸anyͱͳ͍ͬͯΔʣ

    View Slide

  18. BOZͱVOLOPXO
    any unknown
    ͋ΒΏΔ஋ˠ5
    ͋ΒΏΔ஋͸

    anyʹͳΕΔ
    ͋ΒΏΔ஋͸

    unknownʹͳΕΔ
    5ˠ͋ΒΏΔ஋
    any͸

    ͋ΒΏΔ஋ʹͳΕΔ
    unknown͸

    any, unknownʹ͔͠ͳΕͳ͍

    View Slide

  19. ʮม͍͑ͯ͘༐ؾʯ
    ͱ͸

    View Slide

  20. ԿΛม͍͑ͯ͘ͷ͔
    w ϓϩάϥϜͷιʔείʔ
    υ
    w ίʔ
    υ͸෗Δ
    w ෗ͬͨ෦෼͸আڈ͢Δ
    w ߴ඼࣭ͳϓϩάϥϜͰ͋ΔͨΊʹɺ

    ৗʹίʔ
    υશମͷ઱౓Λߴ͘อͨͳ͚Ε͹ͳΒͳ͍

    View Slide

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

    ίʔ
    υΛॻ͍ͨ࣌఺͔Βݱ࣌఺·Ͱͷɺ
    ίʔ
    υ֎ͰͷมԽͷେ͖͞Ͱ͋Δ

    View Slide

  22. Ϧ
    ϑΝΫλ
    Ϧ
    ϯά
    w ιʔείʔ
    υΛม͍͑ͯͨ͘Ίʹ͸Ϧ
    ϑΝΫλ
    Ϧ
    ϯά͕ඞཁ
    w ݱ୅ͷϓϩάϥϛϯάʹ͓͍ͯ͸

    ʮҰ౓ಈ࡞ͨ͠ϓϩάϥϜʹ͸ೋ౓ͱखΛՃ͑ͳ͍ʯ
    ͳΜͯෆՄೳ
    w ͦ΋ͦ΋
    ʮҰ౓ಈ࡞ͨ͠ʯ
    ΛͲͷ࣌఺ͷಈ࡞ͱ͢Δͷ͔

    ఆٛͰ͖ͳ͍΄Ͳཁ͕݅ڊେʹͳ͍͍ͬͯͬͯΔ
    w ͢ͳΘͪৗʹϦ
    ϑΝΫλ
    Ϧ
    ϯά͠ଓ͚ͳ͚Ε͹ͳΒͳ͍
    wʮม͍͑ͯ͘༐ؾʯ
    ͕ඞཁ

    View Slide

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

    w ˠ
    ʮগͳ͘
    ͱ΋ɺ
    ίϯύΠϧ
    ɾ
    ΤϥʔͱͳΔΑ
    ͏ͳϛε͸ؚ·Ε͍ͯͳ͍
    ʂ
    ʯ

    w ΋ͪΖΜςε
    τΛॻ͘ʹӽͨ͜͠ͱ͸ͳ͍

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. ࠞಉ๷ࢭϓϩύςΟ
    Λ଍͢
    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);
    }
    }

    View Slide

  29. ஋ΦϒδΣΫ
    τͷ਌Ϋϥε
    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;
    }
    }

    View Slide

  30. جఈΫϥε
    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;
    }
    }

    View Slide

  31. ܧঝ͸ڞ௨ԽͰ͸ͳ͍
    w DMBTTͷܧঝ FYUFOET
    Λෳ਺ͷΫϥεؒͷॲཧͷڞ௨Խखஈͱ
    ͯ͠༻͍ͯ͸ͳΒͳ͍
    w εύήςΟͷݪҼɺ
    ͍͍ͩͨޙչ͢Δ
    w FYUFOET͸ڞ௨ԽͷखஈͰ͸ͳ͘ɺ
    ந৅తੑ࣭ͷදݱͱ
    ͯ͠࢖͏

    ͜ͷྫͩͱ
    wʮจࣈྻܥͷΦϒδΣΫ
    τʯ
    ͳͷ͔
    wʮ਺஋ܥͷΦϒδΣΫ
    τʯ
    ͳͷ͔
    w Λදݱ͍ͯ͠Δ

    View Slide

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

    View Slide

  33. ಥવͷ࢓༷มߋ
    w Locatorܕͱ͍͏஋ΦϒδΣΫ
    τΛ࢖༻ͯ͠։ൃ͍ͯͨ͠
    w औҾઌ͔Β߱ͬͯ͘
    Δಥવͷ࢓༷มߋ
    ʂ

    w Locatorܕͷ಺෦࣮૷Λमਖ਼͠ͳ͍ͱɺ
    ͦͷ࢓༷ʹରԠͰ͖ͳ͍

    View Slide

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

    View Slide

  35. ίϯύΠϧ
    ɾ
    ΤϥʔΛຯํʹ͚ͭΖ
    w ίϯύΠϧ
    ɾ
    Τϥʔ͸ѱ͍΋ͷͰ͸ͳ͍
    w Ή͠Ζ։ൃऀʹৗʹدΓఴ͏ɺ
    ৺ڧ͍ຯํͰ͋Δ
    w Τϥʔʹײँ
    ʂ

    w QSFUUJFS
    ʢίʔ
    υ
    ɾ
    ϑΥʔϚολʣ
    ͱ5ZQF4DSJQUίϯύΠ
    ϥʹै͓͚ͬͯ͹޾ͤ

    View Slide

  36. ෆ҆ΛऔΓআ͘
    w ίʔ
    υΛม͍͑ͯ͘
    ͜ͱ͸ৗʹෆ҆ͱͷઓ͍
    w ෆ҆ΛऔΓআͨ͘ΊʹԿ͕Ͱ͖Δ͔
    w ςε
    τΛॻ͘
    w ܕΛॻ͘
    wυΩϡϝϯ
    τΛॻ͘
    ʢܕΞϊςʔγϣϯ͸ྑ࣭ͳ
    υΩϡϝϯ
    τͰ͋Δʣ

    w 5ZQF4DSJQUΛ࠾༻͢Ε͹ɺ
    ෆ͕҆औΓআ͚ͯ
    ʮม͍͑ͯ͘༐ؾʯ
    ΛಘΒΕΔ

    View Slide

  37. 5IBOLZPV

    View Slide