Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript Bootcamp 2020

TypeScript Bootcamp 2020

2020年度リクルート新人ブートキャンプ エンジニアコースの講義資料です

Recruit Technologies

August 21, 2020
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

Transcript

  1. TypeScript
    Bootcamp
    2020
    1

    View full-size slide

  2. About me
    - ໊শɿ૔ݟ༸ี
    ʢ@Quramy / ͘ΒΈʔ ͱݺ͹ΕΕΔ͜ͱ͕ଟ͍ʣ
    - ॴଐɿPE෦ ASG, ϑϩϯτΤϯυΤϯδχΞ
    - ৬ྺɿRTCʹདྷͨͷ͸2020/2݄ɻ
    ࠃ಺SIer -> Webܥϕϯνϟʔ2ࣾʹ͍·ͨ͠

    View full-size slide

  3. ๻ͱTypeScript
    - 2015೥3݄5೔͔ΒTS΍ͬͯ·͢
    - ౰࣌͸VSCͳ͔ͬͨͷ΋͋ͬͯɺvim޲͚ͷTypeScript pluginΛॻ͍ͨΓ
    - ࠷ۙ΋ESLint޲͚ͷΤσΟλ֦ு΍GarphQL༻ͷΤσΟλ֦ுΛ࡞ͬͨΓͯ͠
    ͍·͢ɻASTܥͷٕज़ׂ͕ͱಘҙͰ͢
    - https://github.com/microsoft/TypeScript-Website ͰTSຊՈαΠτͷ຋༁׆ಈ
    ΋͍ͯ͠·͢ɻίϯτϦϏϡʔτ͍ͨ͠ɺͱ͍͏ਓ͕͍ͨΒ੠͔͚͍ͯͩ͘͞
    - ࠓ೥2݄։࠵༧ఆͩͬͨTS Conf JPʹCFP௨ͬͨΜ͚ͩͲɺcovid19ͷ͍ͤͰྲྀ
    Εͨɻɻɻ

    View full-size slide

  4. ͳʹ΍Δͷ
    - ຊߨ࠲Ͱ͸ԼهΛֶΜͰ͍͖·͢
    - TypeScriptͷجຊతͳจ๏΍ίʔυͷॻ͖ํ
    - TypeScriptʹؔ܎͢ΔϑϩϯτΤϯυπʔϧνΣΠϯ(webpackͳͲ)
    4

    View full-size slide

  5. ΍Βͳ͍͜ͱ
    - ෳࡶոحͳܕૢ࡞
    - VSCͳͲɺಛఆΤσΟλͷศརػೳ঺հ
    - TypeScriptࣗମͷAPI

    View full-size slide

  6. ໨࣍
    1. TypeScript is Կ
    2. TypeScriptʹ৮ΕΔ ※
    3. ܕͷૢ࡞ ※
    4. ϥΠϒϥϦͷܕఆٛ
    5. TypeScriptͱϞδϡʔϧ
    6. TypeScriptͱϏϧυΤίγεςϜ ※

    View full-size slide

  7. TypeScript is Կ
    7

    View full-size slide

  8. TypeScript
    - Microsoft͕։ൃɾϝϯςφϯε͍ͯ͠Δϓϩάϥϛϯάݴޠ
    - ੩తͳܕ෇͚
    - JavaScriptʹͳΔ
    8

    View full-size slide

  9. TypeScript is Alt JS
    - TypeScriptͷιʔείʔυ͸JavaScriptʹίϯύΠϧ͞Ε·͢ɻʮτϥϯ
    εύΠϧʯͱ΋ݺͿ͜ͱ΋͋Γ·͢
    - ੜͰJavaScriptΛॻ͔ͣʹɺผݴޠͰॻ͍ͯJavaScriptΛੜ੒͢ΔΞϓ
    ϩʔν͸Alt JSʢ͓Δͱ͐͡ʔ͑͢ʣͱݺΜͩΓ͢Δ͜ͱ΋
    9

    View full-size slide

  10. ͍ͬͺ͍͋ΔͧAltJS
    - AltJS͍Ζ͍Ζ
    - Flow Type, CoffeeScript, Dart, Reason, Hexa, Elm, JSX (not React) ,
    ScalaJS, ClojureScript, asm.js, GopherJS, GWT, etc…
    - ϒϥ΢βͰಈ͔ͤΔݴޠ͸جຊతʹJavaScript͚ͩͳͷͰ※1
    ɺੈͷதʹ͸
    ͍ͬͺ͍Alt JS͕͋Γ·͢
    - ※1 ࠷ۙ͸WebAssembly΋͋Δ͚ͲɺͦΕ͸আ֎ͨ͠ͱͯ͠
    - Ұ࣌ظ͸Ӎޙͷ஛ͷࢠͷ͝ͱ͘ཚཱ͍ͯ͠·͕ͨ͠ɺ࠷ۙ͸TypeScriptʹ
    ܉഑্͕͕Γͭͭ͋Δؾ഑
    10

    View full-size slide

  11. ͳΜͰTypeScript࢖͏ͷʁ
    - शಘ͕ൺֱత͔ΜͨΜ
    - ૉͷJavaScriptίʔυ͸ਖ਼͍͠TypeScriptίʔυ
    - JavaScriptͱ஍ଓ͖ͰशಘͰ͖Δʂ
    11

    View full-size slide

  12. ·ͣ͸৮ͬͯΈΑ͏
    - TypeScript Playground ʹ͓खܰ؀ڥ͕͋Γ·͢
    - ৮ͬͯΈΑ͏Playgroundɿ
    - Run / LogsͰ࣮ߦΛ֬ೝ͠Α͏
    - JSλϒ͔ΒτϥϯεύΠϧ͞ΕͨJavaScriptίʔυΛ֬ೝ͠Α͏
    12

    View full-size slide

  13. ͳΜͰTS࢖͏ͷʁͨͩͷJS͡Όμ
    ϝͳͷʁ
    - TypeScriptͷྑ͍ͱ͜Ζɿ
    - ܕνΣοΫ͕Ͱ͖Δʂʂʂ
    - ݹ͍ϒϥ΢βͰ΋ಈ͘ʂʂʂ
    - ΤσΟλαϙʔτ͕༏लʂʂʂ
    13

    View full-size slide

  14. ܕνΣοΫ͕Ͱ͖Δ
    - JavaScript͸ಈతܕ෇ݴޠ
    - ࣮ߦ͢Δ·ͰΘ͔Βͳ͍͜ͱ͕͍ͬͺ͍
    hoge͸είʔϓʹఆٛ͞Εͨม਺ ʁ
    hoge͸objectͰɺfooͱ͍͏ϓϩύςΟ͕ଘࡏ͍ͯ͠Δʁ
    hoge.foo͸ؔ਺ͱ࣮ͯ͠ߦͰ͖Δʁ
    console.log(hoge.foo());
    14

    View full-size slide

  15. ܕνΣοΫ͕Ͱ͖Δ
    - TypeScript͸੩తʹܕΛ෇༩ͯ͠ɺhoge.foo() ͕࣮ߦͰ͖Δ͔Ͳ͏͔
    ΛιʔείʔυͷϨϕϧͰνΣοΫ͠·͢
    - ʮܕΤϥʔͰౖͬͯ΋Β͑Δʯͷ͸޾ͤͳ͜ͱͰ͢
    - ςετ͕ޮ཰తʹʢςετ͠ͳ͍͍ͯ͘ͱ͍͏༁Ͱ͸ͳ͍ʣ
    - ಈతݴޠʹܕΛ༩͑ͯɺ੩తʹνΣοΫͰ͖ΔΑ͏ʹ͢Δ͜ͱΛ઴࣍త
    ܕ෇ʢGradual typingsʣͱ͍͍·͢
    15

    View full-size slide

  16. ܕνΣοΫ͸બ΂Δ
    - TypeScript as ઴࣍తܕ෇ͷΑ͍ͱ͜Ζɿ
    - طଘͷJavaScript͚ͩͰॻ͔ΕͨιʔείʔυʹঃʑʹܕΛ෇͚͍͚ͯΔ
    - ৽نϓϩδΣΫτͰ͸ɺ࠷ॳ͔Β੩తܕ෇ݴޠͱಉ͡Α͏ʹ࢖͏͜ͱ΋
    Ͱ͖Δ
    - TypeScript as ઴࣍తܕ෇ͷ஫ҙ఺ɿ
    - ॴḨ͸ޙ෇ͷػߏɻJavaScriptͷࣗ༝౓ͱ૬൓͢ΔՕॴ΋͋Δ͠ɺӕͭ
    ͍ͯܕγεςϜ͕ὃ͞ΕΔ͜ͱ͢Β͋Γಘ·͢
    16

    View full-size slide

  17. Downleveling
    - τϥϯεύΠϧͷաఔͰɺ৽͍͠࢓༷ͷJavaScriptߏจΛɺݹ͍ϒϥ΢
    βͰ΋ಈ࡞͢ΔΑ͏ʹม׵͠·͢
    - e.g. async / await ͸InteretExplorerͰ͸ಈ࡞͠·ͤΜ͕ɺTypeScript
    ͕ؤுͬͯίʔυΛม׵ͯ͘͠Ε·͢
    17

    View full-size slide

  18. Downleveling
    - ʮ·ͬͨ͘downlevelΛߦΘͳ͍ʯͱ͍͏ઃఆ΋ՄೳͰ͢
    - ͜ͷ৔߹ɺग़ྗ͞ΕΔJavaScriptϑΝΠϧͷίʔυ͸ɺݩͷTypeScript
    ίʔυͱຆͲࠩ෼͕ແ͍ঢ়ଶʹͰ͖·͢
    - ݴ͍׵͑ΔͱʮͦͷؾʹͳΕ͹͍ͭͰ΋ࣺͯΔ͜ͱ͕Ͱ͖Δʯπʔϧ
    Ͱ͢
    18

    View full-size slide

  19. ΤσΟλαϙʔτ͕༏ल
    - TypeScriptͦͷ΋ͷʹҎԼͷػೳؚ͕·Ε͍ͯΔͷͰɺΤσΟλ͕շదͰ͢
    - ΤϥʔνΣοΫ
    - ิ׬
    - ఆٛδϟϯϓ
    - ࢀরՕॴͷදࣔ
    - ϦϑΝΫλϦϯάิॿػೳ
    - etc…
    19

    View full-size slide

  20. ΤσΟλαϙʔτ͕༏ल
    - ʢ༨ஊʣ
    - TypeScriptͷݴޠαʔϏεʢtsserverʣ΍C#ͷ࢓૊ΈΛݩʹɺ
    LSP(Language Service Protocol) ͱ͍͏ʮΤσΟλͱϓϩάϥϛϯά
    ݴޠؒͷΠϯλʔϑΣʔεʯ͕ੜ·Εͨ΄Ͳ
    - ࢒೦ͳ͜ͱʹTypeScript͸LSP४ڌ͍ͯ͠·ͤΜ
    20

    View full-size slide

  21. TypeScriptͷΞϑΥʔμϯε
    - UI/UXͷੈքͰ͸ʮϢʔβʔʹ஌֮Λଅ͢؀ڥɾͦΕ͕΋ͨΒ͢Ձ஋ʯ
    ͷ͜ͱΛΞϑΥʔμϯεͱݺͿ͜ͱ͕͋Γ·͢ʢe.g. υΞͱϊϒʣ
    - TypeScript͸ʮΤϥʔΛૉૣ͘දࣔ͢Δʯʮิ׬ՄೳͳΩʔϫʔυ΍ม
    ਺໊Λදࣔ͢Δʯͱ͍͏ԸܙΛ΋ͨΒ͠·͢
    - ͜Ε͸DeveloperʹΞϑΥʔμϯεΛఏڙ͍ͯ͠Δɺͱߟ͑Δ͜ͱ͕Ͱ
    ͖·͢

    View full-size slide

  22. த·ͱΊ
    TypeScriptͬͯԿ
    ʮޙ෇ͰܕΛ෇͚Δ͜ͱͷͰ͖ΔڧԽ൛JavaScriptʯ
    22

    View full-size slide

  23. TypeScriptʹ৮ΕΔ
    23

    View full-size slide

  24. ͸͡Ίʹ
    - ͜ͷνϟϓλͰ͸ɺTypeScriptͷجຊతͳจ๏Λݟ͍͖ͯ·͢
    - ʮ͜Μͳجૅจ๏͸஌ͬͯΔͥʂʯͬͯਓ͸ܕύζϧͰ༡ΜͰ͍ͯͩ͘͞
    - TypeScript PlaygroundΛ࢖͍͖ͬͯ·͢
    - https://www.typescriptlang.org/v2/play
    24

    View full-size slide

  25. Playground৮Δͱ͖ͷ஫ҙ
    ͜ͷύʔτͰ͸ɺStrict Checks͸શ෦ONʹ͓͍͍ͯͯͩ͘͠͞
    25

    View full-size slide

  26. Type annotation
    - TypeScriptͰ͸ɺܕΛ໌ࣔతʹએݴ͢Δ͜ͱΛʮܕ஫ऍΛ෇͚Δʯͱݴ
    ͍·͢
    - ܕ஫ऍ͸৭ʑͳͱ͜Ζʹ෇༩Ͱ͖·͕͢ɺ·ͣ͸ؔ਺ͷҾ਺ʹܕ஫ऍΛ
    ෇༩ͯ͠Έ·͠ΐ͏
    26

    View full-size slide

  27. Function parameters
    - ؔ਺ͷԾҾ਺ʹ஫ऍΛ෇༩ͯ͠Έ·͢
    - PlaygroundͰԼهΛॻ͍ͯΈͯɿ
    function add(a: number, b: number) {
    return a + b;
    }
    console.log(add(100, 100));
    27

    View full-size slide

  28. Function parameters
    - ஫ऍ͢ΔܕΛҎԼͷΑ͏ʹॻ͖׵͑ͯɺΤϥʔνΣοΫ͞ΕΔ͜ͱΛ
    ֬ೝͯ͠Έͯɿ
    function add(a: string, b: string) {
    return a + b;
    }
    28

    View full-size slide

  29. Type inference
    - ʮؔ਺ͷҾ਺ʹ͑͞ܕ͕͋Ε͹ଞ͸ਪ࿦͞ΕΔʯ͕TypeScriptܕਪ࿦ͷ
    جຊͰ͢
    - ྫ͑͹ɺؔ਺໊ͷ্ͰϚ΢εΦʔόʔ͢Δͱɺ໭Γ஋ͱͳΔܕͷਪ࿦
    ݁Ռ͕දࣔ͞Ε·͢
    29

    View full-size slide

  30. ஫ऍͰ͖Δͱ͜Ζ
    - ଞʹ΋ : ܕ໊ Ͱ஫ऍͰ͖Δͱ͜Ζ͸৭ʑ͋Γ·͢
    const a: string = "hoge";
    let b: string;
    var c: string;
    function d(): string {
    return "hoge";
    }
    class MyClass {
    e: string = "";
    }
    30

    View full-size slide

  31. ஫ऍͱਪ࿦ͷিಥ
    - ஫ऍͨ͠ܕͱਪ࿦݁Ռ͕৯͍ҧ͏ͱɺίϯύΠϧΤϥʔʹͳΓ·͢
    - ԼهͷίʔυͰΤϥʔʹͳΔ͜ͱΛ֬ೝͯ͠Έͯɿ
    function add(a: number, b: number) {
    return a + b;
    }
    const a: string = add(100, 100);
    31

    View full-size slide

  32. Primitive types
    - ਺஋Ҏ֎ʹ΋ɺจࣈྻ΍ਅِ஋ͳͲ΋primitive typeͱͯ͠༻ҙ͞Ε͍ͯ
    ·͢
    const bool: boolean = true;
    const num: number = 100;
    const str: string = "hogehoge";
    const nullObj: null = null;
    const undefVal: undefined = undefined;
    32

    View full-size slide

  33. Function type
    - JavaScriptͷੈքͰ͸ɺؔ਺΋ΦϒδΣΫτͷҰछͰ͋Δ͜ͱ͔Βɺ
    TypeScriptʹ΋ʮؔ਺ࣗମͷܕʯ͕͋Γ·͢
    - ྫɿ
    - ໭Γ஋͕ଘࡏ͠ͳ͍ؔ਺ͷ৔߹͸ɺ=> void ͱॻ͖·͢
    (a: number, b: number) => number
    33

    View full-size slide

  34. Object / Array type
    const obj: { name: string, age: number } = {
    name: "Bob",
    age: 20,
    };
    const arr: number[] = [1, 2, 3];
    34

    View full-size slide

  35. Type alias
    - typeߏจͰܕʹผ໊Λ෇͚ͯ࠶ར༻Ͱ͖·͢ɻ”type alias” ͱݺ͹Ε·
    ͢ɻ͔ͳΓසൟʹ࢖͍·͢
    - type໊͸େจࣈ͔Β։࢝͢Δͷ͕ҰൠతͰ͢
    type Messages = string[];
    function showMessages(msgs: Messages) {
    msgs.forEach(msg => console.log(msg));
    }
    35

    View full-size slide

  36. ϛχԋश
    - ҎԼΛຬͨ͢ GetUser ͱ͍͏ؔ਺ܕΛॻ͍ͯΈͯ
    - input: จࣈྻܕ
    - output: ࣍ͷߏ଄Ͱఆٛ͞ΕΔΑ͏ͳUserܕ
    id จࣈྻ
    name จࣈྻ
    age ਺஋
    isMarried ਅِ஋
    36

    View full-size slide

  37. Class
    - Classߏจ͸ES2015͔ΒJavaScriptʹಋೖ͞Ε͍ͯ·͢ɻTypeScriptͰ΋
    ClassΛѻ͏͜ͱ͕Ͱ͖·͢
    - એݴͨ͠Class͸ܕͱͯ͠΋࢖͑·͢ʢJavaͱ͔ͱҰॹʣ
    37

    View full-size slide

  38. Class
    type TodoItem = {
    name: string;
    };
    interface Service {
    getTodos(): TodoItem[];
    }
    class ConcreteService implements Service {
    private _todos: TodoItem[];
    constructor(initialTodos: TodoItem[]) {
    this._todos = initialTodos;
    }
    getTodos() {
    return this._todos;
    }
    }
    38

    View full-size slide

  39. JavaScriptͷClassʹແ͍ػೳ
    - ϑΟʔϧυɾϝιουʹՄࢹੑ͕ઃఆͰ͖Δ
    - private / protected / public
    - ※ TypeScriptʹ͓͚Δprivateߏจ͸Soft PrivateɻͦͷؾʹͳΕ͹ΞΫ
    ηεͰ͖Δ
    - ந৅Ϋϥε / ந৅ϝιουΛఆٛͰ͖Δ
    - InterfaceΛ࣮૷Ͱ͖Δ
    39

    View full-size slide

  40. any
    - anyܕ͸TypeScriptʹ͓͚ΔϫΠϧυΧʔυͰ͢
    - ͲΜͳܕͰ͋ͬͯ΋any΁୅ೖͰ͖·͢͠ɺanyܕͰ͋Δม਺͸͢΂ͯ
    ͷܕͱͯ͠ৼΔ෣͑ͯ͠·͍·͢
    40

    View full-size slide

  41. any
    - ʮ͢΂ͯͷܕͱͯ͠ৼΔ෣͏͜ͱ͕Ͱ͖ΔʯͨΊɺܕʹؔ͢Δίϯύ
    ΠϧΤϥʔ͕͢΂ͯ཈ࢭ͞Ε·͢
    - any͸TypeScriptʹ͓͚ΔඞཁѱͰ͢ɻ࢖͏ͱ͖͸ࡑѱײͰ৺Λগ͠௧
    ΊΔΑ͏ʹ͠·͠ΐ͏
    const fn: any = () => 100;
    const hoge: number = fn;
    41

    View full-size slide

  42. anyΛ࢖͏ͷ͕ଥ౰ͳέʔε
    - any͸ੑ࣭Λཧղͯ͠࢖͏෼ʹ͸ศརͳػೳͰ͢
    - طଘͷJavaScriptϓϩδΣΫτ΁TypeScriptΛಋೖ͢ΔࡍʹɺͱΓ͋͑
    ͣܕ஫ऍΛͯ͠͠·͍͍ͨʢ࣮૷ίʔυΛഁյͨ͘͠ͳ͍ʣ
    - ෳࡶͳؔ਺ͷ಺෦ͰҰ࣌తʹ࢖͏έʔεɻؔ਺ͷςετΛ͔ͬ͠Γͱ
    ߦ͍ͬͯͯɺ͔ͭҾ਺ͱ໭Γ஋ͷܕ͕ͪΌΜͱॻ͍ͯ͋Ε͹໰୊ͳ͍
    - ͍ͣΕʹͤΑʮanyͷӨڹ͸ہॴతʹԡ͓͑ͯ͘͞ʯ͕TypeScriptͱ͏·
    ͘෇͖߹͍ͬͯ͘ίπͰ͢
    42

    View full-size slide

  43. ୅ೖՄೳͱ͸Կ͔
    - TypeScriptͷܕγεςϜ͸Structual Subtypingʢߏ଄త෦෼ܕʣͱ͍͏
    ํࣜΛ࠾༻͍ͯ͠·͢ʢରٛޠ͸Nominal Subtypingʣ
    - TypeScriptͰ͸ɺผͷinterface΍typeͰ͋ͬͯ΋ɺ֤ϑΟʔϧυͷத਎
    ͕߹͍ͬͯ͑͞Ε͹ͦΕͧΕ୅ೖՄೳͰ͋ΔʢassignableʣɺͱΈͳ͞
    Ε·͢
    43

    View full-size slide

  44. ୅ೖՄೳͱ͸Կ͔
    - assignableͷྫ:
    - showMessageؔ਺͸ɺจࣈྻܕͰ͋Δmessageͱ͍͏ϑΟʔϧυΛ
    ࣋ͬͨܕͰ͋Ε͹ɺԿͰ΋୅ೖՄೳ
    type SomeType = {
    message: string;
    };
    function showMessage(obj: SomeType) {
    console.log(obj.message);
    }
    showMessage({ message: “Hello!" });
    44

    View full-size slide

  45. ୅ೖՄೳͱ͸Կ͔
    - લϖʔδͷྫͰɺԼهΛ௥هͯ͠΋ίϯύΠϧ͕௨Δ͜ͱΛࢼͯ͠Έ
    ͯ
    showMessage(new Error("error!"));
    45

    View full-size slide

  46. (͓·͚) ߏ଄త෦෼ܕͰࠔΔ৔߹
    - ʢ࣌ؒʹ༨༟͕͋ͬͨΒʣߟ͑ͯΈͯ
    - ߏ଄త෦෼ܕͷσϝϦοτΛڍ͛ͯΈͯ
    - ߟ͍͑ͭͨσϝϦοτΛTypeScriptͰΧόʔ͢ΔͨΊʹ͸ɺͲ͏͢Ε
    ͹Α͍͔ʁ
    46

    View full-size slide

  47. Interface v.s. Type alias
    - ϑΟʔϧυ΍ϝιουΛ࣋ͭΦϒδΣΫτͷܕΛఆٛͰ͖Δͱ͍͏ҙຯ
    Ͱɺtype aliasͱinterfaceʹ͸ػೳͷॏෳ͕͋Γ·͢
    interface IHoge {
    message: string;
    onChangeMessage(cb: (msg: string) => void): void;
    }
    type HogeType = {
    message: string;
    onChangeMessage(cb: (msg: string) => void): void;
    };
    let hoge1: IHoge;
    let hoge2: HogeType;
    /* IHogeͱHogeType͸૒ํʹassignable */
    hoge1 = hoge2;
    hoge2 = hoge1;
    47

    View full-size slide

  48. Interface v.s. Type alias
    - લϖʔδͷ IHoge interface ͱ HogeType ʹ͍ͭͯɺPlayground্Ͱ
    ͷҧ͍Λ୳ͯ͠Έͯ
    - લϖʔδͷྫʹɺԼهΛ௥هͨ͠ͱ͖ʹͲ͏ͳΔ͔֬ೝͯ͠Έͯ
    interface IHoge {
    errorCode: number;
    }
    48

    View full-size slide

  49. Θ͔Βͳ͍ॴ͕͋Δ࣌͸
    - ֮͑Δۙಓ͸ɺTypeScriptͰԿ͔Λ࣮૷ͯ͠ΈΔ͜ͱͰ͢
    - ެࣜαΠτʢhttp://www.typescriptlang.org/docs/homeʣͷϋϯυϒο
    ΫΛோΊͯΈΔͷ΋͋Γ
    - twitterͰ #typescript λάΛ෇͚ͯᄁ͍ͨΒɺ୭͔͕रͬͯ͘ΕΔ͔΋͠
    Ε·ͤΜ
    49

    View full-size slide

  50. ԋशͷલʹ
    - ։ൃ؀ڥ͕੔͍ͬͯΔ͜ͱΛ֬ೝ͠·͠ΐ͏
    - ҎԼͷίϚϯυ͸ར༻ՄೳͰ͔͢ʁ
    - git
    - node --version
    - ΤσΟλ:
    - ͩ͜ΘΓ͕ແ͚Ε͹ɺVisual Studio Code Λ࢖͍ͬͯͩ͘͞
    51

    View full-size slide

  51. ԋश1
    - JavaScriptฤͰ࣮૷ͨ͠ToDo MVCͷαʔόʔαΠυͷίʔυʹܕΛ͚ͭ
    ͯΈ͍ͯͩ͘͞
    52

    View full-size slide

  52. ԋशͷ΍Γํ
    - repositoryΛclone
    - https://github.com/recruit-tech/bootcamp-2020-ts.git
    - cd server
    - npm i typescript -D
    - npm i @types/express @types/body-parser -D
    - npx run tsc —init
    - .jsϑΝΠϧΛ.tsϑΝΠϧʹϦωʔϜ͢Δ
    53
    +4ฤͰ࡞Γ͖Ε͍ͯΔͷͰ͋Ε͹ɺ
    ͦͷίʔυΛ࢖ͬͯ
    ͜ͷίϚϯυʹ͍ͭͯ͸ޙͰղઆ͠
    ·͢

    View full-size slide

  53. ԋशͷ΍Γํ
    - npx tsc Ͱ.tsϑΝΠϧ͔Β.jsϑΝΠϧ΁τϥϯεύΠϧ͞Ε·͢
    - ͍͔ͭ͘ίϯύΠϧΤϥʔ͕ग़Δ͸ͣͳͷͰɺιʔείʔυΛฤू͠
    ͯɺΤϥʔΛ0݅ʹͯ͠Έ·͠ΐ͏
    - ʢۃྗ any ʹ͸པΒͳ͍Ͱ΍ͬͯΈͯʣ
    54

    View full-size slide

  54. ʢิ଍ʣtsconfig.jsonʹ͍ͭͯ
    - TypeScriptͷઃఆ͸ϓϩδΣΫτϧʔτ഑Լͷtsconfig.jsonʹهड़͠·͢
    - ͜ͷԋशͰॻ͖׵͑ΔՕॴɿ
    - target: “es2020”
    - ࠔͬͨΒ https://www.typescriptlang.org/v2/ja/tsconfig ΛಡΜͰͩ͘͞
    ͍
    55

    View full-size slide

  55. ʢิ଍ʣrequireͱimport
    - Node.jsͷrequireߏจͷ୅ΘΓʹɺES2015ͷimportจΛ࢖͏Α͏ʹͯ͠
    ͍ͩ͘͞
    - TypeScriptʹ͓͚ΔʮϞδϡʔϧʯʹ͍ͭͯ͸ผ్ޙड़͠·͢
    const express = require("express");
    import express from "express";
    56
    module.exports = router;
    export default router;

    View full-size slide

  56. ܕͷૢ࡞
    57

    View full-size slide

  57. ͸͡Ίʹ
    - ͜ͷνϟϓλʔͰ͸ɺ࣮ࡍʹίʔυΛॻ͘ͱ͖ʹɺܕΛͲͷΑ͏ʹѻͬ
    ͍ͯ͘ͷ͔ʹ͍ͭͯઆ໌͍͖ͯ͠·͢

    View full-size slide

  58. Type error
    - JavaScriptͷϓϩάϥϜͰ΋ͬͱ΋සൟʹੜ͡Δόά͸ɺnull ·ͨ͸ະఆ
    ٛͷม਺ʹରͯ͠ɺ஋͕ଘࡏ͢ΔલఏͰΞΫηεͯ͠͠·͏έʔεͰ͢
    - ʢ༨ஊʣALGOL WੜΈͷ਌Ͱ͋ΔTony Hoareᐌ͘ʮNullࢀর͸࠷େͷ
    ޡΓͩͬͨɻίϯύΠϧͰ͢΂ͯνΣοΫͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ʯ
    - https://www.infoq.com/presentations/Null-References-The-Billion-Dollar-Mistake-Tony-
    Hoare/
    59
    Uncaught TypeError: Cannot read property ‘hoge' of undefined

    View full-size slide

  59. Optional
    - TypeScriptͰ͜ͷखͷType errorͱઓ͏ͨΊʹ͸ɺʮଘࡏ͠ͳ͍͔΋͠Ε
    ͳ͍ม਺ʯΛTypeScriptͷܕγεςϜʹڭ͑ࠐΉඞཁ͕͋Γ·͢
    - type΍interfaceʹͯɺϓϩύςΟ໊຤ඌʹ?Λ෇༩͢Δͱɺʮଘࡏ͠ͳ
    ͍͔΋͠Εͳ͍ʯͱ͍͏ҙຯʹͳΓ·͢
    60

    View full-size slide

  60. Optional
    - ΦϓγϣϯͷstrictNullCheck͕trueͷ৔߹ɺoptionalͳ஋Λ͍͖ͳΓૢ
    ࡞͠Α͏ͱ͢ΔͱTypeScript͕ίϯύΠϧΤϥʔʹͯ͘͠Ε·͢
    ʢίϯύΠϧΤϥʔ͸͝๙ඒͩͱࢥ͍·͠ΐ͏ʣ
    function fn(args: { message?: string}) {
    // ࣄલʹargs.messageͷଘࡏΛνΣοΫ͢Δඞཁ͕͋Δ
    if (!args.message) return "";
    return args.message.toLowerCase();
    }
    fn({}); // messageΛলུՄೳ
    61

    View full-size slide

  61. ͦͷଞͷOptionalදݱ
    - ϓϩύςΟ໊ޙͷ ? Ҏ֎ʹ΋Optionalม਺Λදݱ͢Δํ๏͕͋Γ·͢
    - ※ ύΠϓه߸ͷҙຯ͸ޙड़͠·͢
    // ؔ਺ͷoptionalҾ਺
    function hoge(a: number, b?: number) {
    }
    // null ΍ undefined ͱͷUnion
    type X = string | undefined;
    type Y = string | null;

    View full-size slide

  62. strictNullCheck ʹ͍ͭͯ
    - strictNullChecks͸ɺࢀর͍ͯ͠Δ஋ͷܕʹnull ·ͨ͸ undefined͕୅ೖ
    Մೳͳ৔߹ʹɺͦͷ஋ͷૢ࡞Λ੍ݶ͢ΔػೳͰ͢
    - TypeScriptͷσϑΥϧτઃఆͰ͸ɺstrictNullCheck͸ONͰ͢
    - جຊతʹ͸༗ޮʹ͓͍ͯͨ͠ํ͕ྑ͍ػೳͰ͕͢ɺطଘͷJavaScriptϓ
    ϩδΣΫτʹޙ෇ͰTypeScriptΛಋೖ͢Δ৔߹͸ɺҰ୴offʹ͢Δͷ΋Ξ
    ϦͰ͢
    63

    View full-size slide

  63. Modifiers
    - ܕఆٛͰͷ ? ͸optional modifierͱݺ͹Ε·͢
    - modifierʹ͸optionalҎ֎ͷmodifierͱͯ͠ɺreadonlyͱ͍͏ͷ΋͋Γ·
    ͢ʢʮSoftͳʯ࣮૷Ͱ͋ΔͨΊɺτϥϯεύΠϧޙͷjs͔Β͸ॻ͖׵͑Մೳʣ
    type Hoge = {
    m1: string;
    m2?: string;
    readonly m3: string;
    readonly m4?: string;
    };
    64

    View full-size slide

  64. Literal type
    - ਺஋/จࣈྻ/ਅِ஋ܕ͸ɺͦΕͧΕͷ஋ͦͷ΋ͷΛܕͱͯ͠࢖͏͜ͱ͕
    Ͱ͖·͢ɻ͜ΕΛLiteral Typeͱݺͼ·͢
    type SomeString = "some string";
    type SomeNumber = 1;
    type True = true;
    function fn(str: SomeString) {
    return str.trim();
    }
    fn("some string"); // OK
    fn("other string"): // Error
    65

    View full-size slide

  65. Union type
    - ෳ਺ͷܕΛύΠϓه߸ʢ | ʣͰ۠੾Δ͜ͱͰɺUnion Typeʢ࿨ܕ, ڞ༻ମ
    ܕͱ΋ʣΛએݴ͠·͢
    - String literal typeͱซ༻͢Δͱɺྻڍܕͱಉ͡Α͏ʹѻ͏͜ͱ΋Ͱ͖·
    ͢ʢTypeScriptʹ΋enumߏจ͕༻ҙ͞Ε͍ͯ·͕͢ɺ͋·Γར༻͞Ε·ͤΜʣ
    type NumOrStr = string | number;
    type MaybeStr = string | null | undefined;
    type Colors = "red" | "blue" | "green" | "yellow";
    66

    View full-size slide

  66. ܕͷߜΓࠐΈ
    - Union Type͸ɺifจ΍switchจͰ஋ΛνΣοΫ͍ͯ͘͜͠ͱͰɺΑΓৄࡉ
    ͳܕ΁ߜΓࠐΉ͜ͱ͕Ͱ͖·͢ɻ͜ΕΛType GuardͱΑͼ·͢
    - strictNullCheckͰઆ໌ͨ͠ifจʹΑΔߜΓࠐΈ΋Type GuardͷҰछͰ͢
    function fn(input: string | number) {
    console.log(input.toString());
    if (typeof input === "number") {
    console.log(200 * input);
    } else {
    console.log(input.trim());
    }
    }
    67

    View full-size slide

  67. Type Guardͷछྨ
    - ͍͔ͭ͘ͷߏจ͕Type Guardͱͯ͠ར༻Ͱ͖·͢ɿ
    - typeof x === “string”, x instanceof HogeClass
    - Literal typeʹ͓͚Δಉ஋֬ೝʢ if (x === “some message”) ʣ
    - obj.x ΍ obj[“x”] ΍ x in objͳͲͷଘࡏ֬ೝ
    - User Defined Type Guard function:
    function fn(x: any): x is { msg: string } {
    return x.msg && typeof x.msg === "string";
    }
    68

    View full-size slide

  68. ϛχԋश̍
    - ҎԼͷؔ਺͸ type ʹԠͯ͡ɺpayload ͷܕ͕ҟͳΓ·͢ɻ
    ίϯύΠϧ͕௨ΔΑ͏ʹɺAction ͷܕΛߟ͑ͯΈͯ
    69
    function reduce(state = [100], action: Action) {
    switch (action.type) {
    case “CONCAT":
    // payload: number[]
    return state.concat(action.payload);
    case “REMOVE":
    // payload: number
    return state.filter(val => val !== action.payload);
    default:
    return state;
    }
    };

    View full-size slide

  69. ϛχԋश̎
    - ࣍ͷίʔυ͸੺Լઢ෦෼ͰίϯύΠϧΤϥʔͱ͞Εͯ͠·͍·͢ɻԿ
    ނͰ͠ΐ͏͔ʁ
    const prices = [1000, 500];
    type Item = {
    price?: number;
    };
    function fn(item: Item): boolean {
    if (item.price == null) return false;
    return prices.some(
    p => item.price > p,
    );
    }
    70

    View full-size slide

  70. Ωϟετ
    - จࣈྻͷLiteral type͸stringܕʹ୅ೖՄೳͰ͕͢ɺ
    stringܕ͸จࣈྻͷLiteral typeʹ͸୅ೖͰ͖·ͤΜ
    - ʮ୅ೖՄೳʯ͸ɺSub typeʢ۩৅ʣˠ Supar typeʢந৅ͳܕʣͷํ޲ʹ
    ݶఆ͞ΕΔ͔ΒͰ͢
    type SomeString = "some string";
    const x: SomeString = "some string";
    const y: string = x;
    const z: SomeString = y;
    Supar type
    Sub type
    type SomeString
    string

    View full-size slide

  71. Ωϟετ
    - ͜ͷΑ͏ͳ৔߹ɺม਺ͷޙΖʹ as ܕ໊ Λ෇༩͢Δ͜ͱͰܕΛม׵Ͱ͖
    ·͢ʢਖ਼ࣜʹ͸ ΩϟετͰ͸ͳ͘ɺType assetion ͱݺ͹ΕΔػೳʣ
    Supar type
    Sub type
    type SomeString
    string
    type SomeString = "some string";
    const x: SomeString = "some string";
    const y: string = x;
    const z = y as SomeString;

    View full-size slide

  72. asͷ੍໿
    - asͰม׵Ͱ͖Δͷ͸ɺSupar type → Sub type ͷ৚͕݅ຬͨ͞ΕΔͱ͖
    ͷΈͰ͢
    - e.g. numberܕ͸stringܕʹม׵Ͱ͖·ͤΜ
    Supar type
    Sub type
    type SomeString
    string

    View full-size slide

  73. Intersection type
    - Union type͸ܕͱܕͷ࿨Ͱ͕͢ɺܕͱܕͷੵ΋ଘࡏ͠·͢
    - ه߸ & Ͱෳ਺ͷܕΛ࿈݁͢ΔͱɺIntersection typeʹͳΓ·͢
    - type A & B ͸ɺʮAʹ΋Bʹ΋assignableʯͳܕͰ͢
    74

    View full-size slide

  74. Bottom type
    - neverܕ͸ʮ͢΂ͯͷܕͷsubtypeʯͱͯ͠ѻΘΕ·͢ɻ͢΂ͯͷܕ͕
    never΁୅ೖͰ͖·͕͢ɺnever͸neverҎ֎ͷ͢΂ͯͷܕʹ୅ೖͰ͖·
    ͤΜ
    - Type Guardͷ݁Ռɺneverܕʹਪ࿦͞ΕΔϒϩοΫ͸ʮ౸ୡෆՄೳʯͱ
    ͍͏ҙຯʹͳΓ·͢
    function fn(x: number) {
    if (typeof x === "string") {
    return x.trim();
    }
    return x;
    }
    75

    View full-size slide

  75. Bottom type
    - neverʹਪ࿦͞ΕΔͱ͜
    - ྫ֎Λεϩʔͨ͠ޙΖͷεςʔτϝϯτʹ͓͚Δม਺
    - Node.jsͷprocess.exit() ͷ໭Γ஋

    View full-size slide

  76. Composition never
    - Լهͷܕ A ɺB ͸ͦΕͧΕͲΜͳܕͰ͠ΐ͏ʁ
    (X͸Կ͔ద౰ͳܕͱ͠·͢ʣ
    type A = never | X;
    type B = never & X;
    77

    View full-size slide

  77. Unknown type
    - unknown ͸ anyͷ਌ੰͷΑ͏ͳ΋ͷͰ͢
    - ͢΂ͯͷܕ͕unknownʹassignableɺͱ͍͏఺Ͱ͸anyͱҰॹͰ͕͢ɺ
    type assertion͠ͳ͍ͱར༻ෆՄೳͱ͍͏఺ͰanyͱҟͳΓ·͢
    78

    View full-size slide

  78. Generics
    - TypeScriptͰ͸ɺGenericsʢ૯শܕʣ͕࢖͑·͢
    - GenericsΛ࢖͏ͱɺύϥϝτϦοΫͳܕΛ࡞Δ͜ͱ͕Ͱ͖·͢
    79

    View full-size slide

  79. Generics
    type List = T[];
    function getLength(list: List) {
    list.length;
    }
    interface IFoo {
    list: ReadonlyArray;
    }
    class Foo implements IFoo {
    constructor(public readonly list: T[]){
    }
    get size() {
    return getLength(this.list);
    }
    }
    const foo = new Foo([""]);
    80

    View full-size slide

  80. Generics
    - TypeScript͕ඪ४Ͱ༻ҙ͍ͯ͠Δܕʹ΋૯শܕΛ࢖͍ͬͯΔܕ͕৭ʑ͋
    Γ·͢
    - Map, Set, PromiseͳͲͷJavaScriptඪ४ͷίϯςφܥClass
    - ReadonlyArrayͷΑ͏ͳTypeScript͕ಠࣗʹ༻ҙ͍ͯ͠ΔUtilityܕ
    81

    View full-size slide

  81. Generics
    // ໭Γ஋͕Promise<{ id: number; name: string; }>
    function getTodo() {
    return Promise.resolve({
    id: 100,
    name: "hoge",
    });
    }
    const index = new Map();
    index.set(1, "hoge");
    index.has(1);
    const colors: ReadonlyArray = [
    "red",
    "green",
    "blue",
    ];
    colors.sort(); // ഁյૢ࡞͸ېࢭ

    View full-size slide

  82. ԋश2
    - JavaScriptฤͰ࣮૷ͨ͠ Todo MVC ΞϓϦέʔγϣϯͷϒϥ΢βଆͷ
    ίʔυʹܕΛ͚͍ͭͯͩ͘͞
    84

    View full-size slide

  83. ԋशͷ΍Γํ
    - repositoryΛcloneʢԋश1ͱಉ͡ͱ͜Ͱ͢
    - https://github.com/recruit-tech/bootcamp-2020-ts.git
    - cd client
    - npm init -y
    - npm i typescript -D
    - npx run tsc —init
    - js/**/*.jsΛ.tsʹॻ͖׵͑Δ
    - npx run tsc --watch
    85

    View full-size slide

  84. ʢิ଍ʣtsconfig.jsonʹ͍ͭͯ
    - ͜ͷԋशͰॻ͖׵͑ΔՕॴɿ
    - module: “esnext”
    - target: “es2020”
    86

    View full-size slide

  85. ʢิ଍ʣimport / export
    - TypeScriptʹ͓͚ΔʮϞδϡʔϧʯʹ͍ͭͯ͸ผ్ޙड़͠·͢
    - ͜ͷԋशͰ͸ɺES2015ͷ import / export ߏจ͕ͦͷ··ར༻Ͱ͖·
    ͢ɻಛʹ import จ΍ export จΛॻ͖׵͑Δඞཁ͸͋Γ·ͤΜ
    87

    View full-size slide

  86. ʢิ଍ʣඪ४ APIͱTypeScript
    - TypeScript ࣗମʹඪ४ APIͷܕ͕όϯυϧ͞Ε͍ͯ·͢
    - JavaScriptʢECMAScriptʣͷඪ४ API
    - DOM API΍fetchͳͲɺϒϥ΢βʹඪ४ͰඋΘ͍ͬͯΔAPI
    88

    View full-size slide

  87. ;Γ͔͑Γ
    - ԋश1 ͱ ԋश2 Λ௨ͯ͠ɺαʔόʔαΠυɺϒϥ΢βαΠυͷίʔυΛ
    ܕͰकΔ͜ͱ͸Ͱ͖·ͨ͠
    - ͱ͜ΖͰɺϒϥ΢βͱαʔόʔ͕௨৴͍ͯ͠Δ෦෼͸Ͳ͏Ͱ͠ΐ͏͔ʁ
    - req.bodyʢαʔόʔଆʣ΍ɺfetchͷ໭Γ஋ʢϒϥ΢βଆʣʹҰ؏ੑ͸
    ͋Γ·͔͢ʁ

    View full-size slide

  88. ΋ͬͱߴ౓ͳܕ
    90

    View full-size slide

  89. Advanced type
    - ࠓ೔͸ׂѪ͠·͕͢ɺܕγεςϜʹ͸ΑΓߴ౓ͳػೳ΋༻ҙ͞Ε͍ͯ·
    ͢
    - Mapped type: objectܕͷkeyΛ࠶ར༻ͯ͠ผͷܕΛ࡞Δ
    - Conditional type: ୅ೖՄೳੑͰܕΛύλʔϯϚον
    - Type inference in conditional type: ύλʔϯϚονͨ͠ܕͷ࠶ར༻
    91

    View full-size slide

  90. Advanced type
    interface Observable {
    subscribe(cb: (v: T) => void): void;
    }
    type Unboxing = T extends Observable ? S : never;
    declare function combineLatest[]>(
    ...args: U
    ): Observable<
    {
    [P in keyof U]: Unboxing;
    }
    >;
    declare const s1: Observable;
    declare const s2: Observable;
    declare const s3: Observable;
    combineLatest(s1, s2, s3).subscribe(([v1, v2, v3]) => {
    });

    View full-size slide

  91. Advanced type
    - ͱ͸͍͑ɺ͜ΕΒͷڽͬͨػೳ͸ɺΞϓϦέʔγϣϯ࣮૷࣌ͷར༻ස౓
    ͸͔ͳΓ௿͍Ͱ͢ɻඞཁ͕ੜ͔ͯ͡Β਎ʹ͚ͭΕ͹े෼ͱ͍͑·͢
    - ҰํɺطଘJavaScriptϥΠϒϥϦʹܕఆٛ͸͜ΕΒͷςΫχοΫ͕׆༻
    ͞Ε͍ͯΔ͜ͱ͕ଟ͍Ͱ͢
    - ஶ໊ͳϥΠϒϥϦͷܕఆٛΛಡΉͷ͸शಘͷۙಓ͔΋͠Ε·ͤΜ

    View full-size slide

  92. ༨ஊ
    - TypeScriptͷܕγεςϜ͸ɺͦΕࣗମ͕νϡʔϦϯά׬શͰ͢
    - ͦͷؾʹͳΕ͹ɺԼهͷΑ͏ͳ΋ͷ͕࡞Εͯ͠·͍·͢
    - ϥΠϑήʔϜ
    - Brainfuck

    View full-size slide

  93. ϥΠϒϥϦͷܕఆٛ
    95

    View full-size slide

  94. JavaScriptϓϩδΣΫτͱґଘϥ
    ΠϒϥϦ
    - JavaScriptͷϓϩδΣΫτΛਐΊΔࡍ͸ɺ΄΅࣮֬ʹ֎෦ͷϥΠϒϥϦ
    ʹґଘ͢Δ͜ͱʹͳΓ·͢
    - ௨ৗɺNPMʢNode.jsͷύοέʔδϚωʔδϟʣʹެ։͞Ε͍ͯΔϥΠ
    ϒϥϦΛར༻͢Δέʔε͕ଟ͍Ͱ͢
    - ֎෦ϥΠϒϥϦΛTypeScript͔Βར༻͢ΔͨΊʹ͸ɺʮܕఆٛϑΝΠ
    ϧʯ͕ඞཁʹͳΓ·͢
    96

    View full-size slide

  95. ܕఆٛϑΝΠϧͱ͸
    - ܕఆٛϑΝΠϧͱ͸ɺTypeScriptͷΞϊςʔγϣϯ৘ใͷΈ͕நग़͞Ε
    ͨϑΝΠϧͰ͢
    - ֦ுࢠ͕.d.tsͱͳΔͨΊɺʮͰ͌ʔͯ͌ʔ͑͢;͍͊Δʯͱݺ͹ΕΔ͜
    ͱ΋ଟ͍Ͱ͢
    - ྫ: ʮjQueryͷ.d.tsΠϯετʔϧ͠๨ΕͯͶʁʯ
    97

    View full-size slide

  96. .d.ts
    - .d.tsϑΝΠϧΛੜ੒ͯ͠ΈΔ:
    - खݩͰద౰ͳTypeScriptͷϑΝΠϧΛ࡞Δ
    - tsc --declaration
    98

    View full-size slide

  97. types
    - ϥΠϒϥϦͷܕΛTypeScriptͰར༻͢Δํ๏͸େผ͢Δͱ3௨Γ͋Γ·͢
    1.NPM ύοέʔδʹܕఆ͕ٛಉࠝ͞Ε͍ͯΔ
    2.NPMύοέʔδʹରԠ͢ΔܕఆٛΛୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε
    3.ࣗ෼ͰܕఆٛΛ༻ҙ͢Δ
    99

    View full-size slide

  98. 1. NPM ύοέʔδʹܕఆ͕ٛಉ
    ࠝ͞Ε͍ͯΔ
    - npm install (ϥΠϒϥϦ໊) Λ࣮ߦ͢Δ͚ͩͰܕఆ͕ٛར༻ՄೳʹͳΓ·
    ͢
    - ͜ͷखͷ΍ͭ͸ɺϥΠϒϥϦͷpackage.jsonʹ “types”: “index.d.ts” ͱ
    ͍ͬͨهड़͕͋Γ·͢
    100

    View full-size slide

  99. 2. NPMύοέʔδʹରԠ͢ΔܕఆٛΛ
    ୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε
    - ળҙͷୈ3ऀ͕ܕఆٛΛผ్ఏڙͯ͘͠Ε͍ͯΔέʔε͕͋Γ·͢
    - https://github.com/DefinitelyTyped/DefinitelyTyped
    - npm i @types/(ϥΠϒϥϦ໊) ͰΠϯετʔϧ͠·͢
    101

    View full-size slide

  100. 3.ࣗ෼ͰܕఆٛΛ༻ҙ͢Δέʔε
    - Ambient moduleએݴͱ͍͏ख๏Ͱࣗ෼ͰϥΠϒϥϦʹܕఆٛΛ༩͑Δ
    ͜ͱ͕Ͱ͖·͢
    - গ͠ϚχΞοΫͳͷͰࠓ೔͸৮Ε·ͤΜ
    102

    View full-size slide

  101. ܕఆٛΛ୳͢ॱং
    /1.ύοέʔδʹܕఆٛ
    ͕ಉࠝ͞Ε͍ͯΔʁ
    %FpOJUFMZ5ZQFEʹ
    !UZQFTύοέʔδ͕͋Δʁ
    ͋Γ͕ͨ͘࢖͏
    @types ͔ΒܕఆٛΛ
    ௥ՃΠϯετʔϧͯ͠࢖͏
    ࣗ෼ͰܕఆٛΛॻ͘
    yes
    yes
    no
    no
    103

    View full-size slide

  102. ܕఆٛϑΝΠϧͷ஫ҙ
    - ఏڙ͞Εͨܕఆ͕ٛຊମͷAPIΛ໢ཏ͍ͯ͠ͳ͍͜ͱ΋ɺ··͋Γ·͢
    - e.g. ಛఆͷؔ਺ͷܕఆ͕ٛͬͦ͝Γൈ͚ͯΔ / anyͩΒ͚ / etc…
    - ͜ͷखͷέʔεʹ௚໘ͨ͠ΒɺܕఆٛΛमਖ਼͢ΔPRΛग़͠·͠ΐ͏
    104

    View full-size slide

  103. ௥Ճ՝୊
    - ԋश1͕ૣ͘௥ΘͪΌͬͨਓ޲͚
    - expressʹ͸ϛυϧ΢ΣΞͱ͍͏࢓૊ΈͰɺϢʔβʔଆͰ Request /
    ResponseͷΦϒδΣΫτΛ֦ுͰ͖·͢
    const app = express();
    app.use((req, res, next) => {
    req.isAuthenticated = true;
    next();
    });
    app.get("/api/v1/todos", (req, res) => {
    console.log(req.isAuthenticated);
    // ͦͷଞͷॲཧ
    });
    ͜ͷ෦෼͕ϛυϧ΢ΣΞ
    ϛυϧ΢ΣΞͰ௥Ճ͞ΕͨϑΟʔϧυ
    105

    View full-size slide

  104. ௥Ճ՝୊
    - લϖʔδͷίʔυ͸ɺRequestʹਅِ஋ܕͷ isAuthenticated ͱ͍
    ͏ϓϩύςΟΛੜ΍ͨ͠ྫͰ͢
    - ͜ͷίʔυΛTypeScriptͰίϯύΠϧΤϥʔͱͳΒͳ͍Α͏ʹ͢Δʹ͸
    Ͳ͏͢Ε͹͍͍Ͱ͠ΐ͏͔ʁ
    - ώϯτ: Ambient namespace
    106

    View full-size slide

  105. TypeScriptͱ
    Ϟδϡʔϧ
    107

    View full-size slide

  106. JavaScriptͱʮϞδϡʔϧʯ
    - ͦ΋ͦ΋ɺJavaScriptͱ͍͏ݴޠʹ͸ʮϞδϡʔϧʯͱ͍͏֓೦͕௕Β
    ͘ଘࡏ͍ͯ͠·ͤΜͰͨ͠
    - ECMAScript 2015ͱ͍͏όʔδϣϯͰॳΊͯϞδϡʔϧʹؔ͢Δߏจ͕
    ࢓༷Խ͞Ε·ͨ͠
    108

    View full-size slide

  107. ES2015 Ϟδϡʔϧ
    // calc.js
    // ϞδϡʔϧΛར༻͢Δଆ
    import { add } from “./add.js”;
    console.log(add(1, 2));
    // add.js
    // ϞδϡʔϧΛఆٛ͢Δଆ
    export function add(a, b) {
    return a + b;
    }

    View full-size slide

  108. JavaScriptͱʮϞδϡʔϧʯ
    - ECMAScriptͰϞδϡʔϧߏจ͕ඪ४ͰఆΊΒΕΔΑΓҎલ͔ΒɺಠࣗϞ
    δϡʔϧͱ΋͍͏΂͖ن͕֨৭ʑ͋Γ·͢
    - (ECMAScriptඪ४Ͱͳ͍)ಠࣗͷϞδϡʔϧن֨ͱͯ͠ɺࠓͰ΋޿͘࢖Θ
    Ε͍ͯΔͷ͕Node.js(CommonJS)ͷ require / module.exports ελΠϧ
    Ͱ͢
    110

    View full-size slide

  109. CommonJSͷϞδϡʔϧ
    // calc.js
    // ϞδϡʔϧΛར༻͢Δଆ
    const add = require("./add");
    console.log(add(1, 2));
    // add.js
    // ϞδϡʔϧΛఆٛ͢Δଆ
    function add(a, b) {
    return a + b;
    }
    module.exports = add;

    View full-size slide

  110. Module loader
    - ES2015 ϞδϡʔϧͰ͋ΕɺಠࣗܗࣜͰ͋ΕɺϞδϡʔϧԽ͞Εͨ
    JavaScriptΛऔΓࠐΉ࢓૊Έ͕ඞཁͰ͢
    - λά΍ɺNode.jsͷrequireػߏͳͲ<br/>- ϞδϡʔϧΛಡΈࠐΉ࢓૊Έ͸ʮϞδϡʔϧϩʔμʔʯͱݺ͹Ε·͢<br/>112<br/>

    View full-size slide

  111. --module
    - ར༻ՄೳͳϞδϡʔϧϩʔμʔ͸ɺjsΛ࣮ߦ͢Δ؀ڥʹΑͬͯҟͳͬͯ͠
    ·͏ͷ͕ݱঢ়Ͱ͢
    - TypeScript͸ɺ͜ΕΒͷ࣮ߦ؀ڥࠩҟΛٵऩ͢ΔͨΊʹɺ
    - ιʔείʔυ͸ES2015ελΠϧͰهड़
    - tsconfig.jsonͷmoduleઃఆͰɺϥϯλΠϜͰར༻͢ΔϞδϡʔϧϩʔ
    μʔΛઃఆɻτϥϯεύΠϧͰม׵͞ΕΔ
    113

    View full-size slide

  112. --module
    - moduleઃఆͷ࢖͍෼͚ྫ
    - ԋश1Ͱ͸ɺNode.jsͰಈ࡞ͤ͞ΔͨΊʹ module: “commonjs”Λઃ

    - ԋश2Ͱ͸ɺϒϥ΢βͷػೳΛ࢖ͬͯಡΈ<br/>ࠐΉͨΊʹɺ module: “esnext”Λઃఆ<br/>114<br/>

    View full-size slide

  113. ʢ༨ஊʣଞͷ--moduleୡ
    - --module ʹ͸ “amd” / “umd” / “system” ͷ஋΋બ୒ՄೳͰ͢ɻ…͕໓ଟ
    ʹ࢖͏͜ͱ͸ͳ͍Ͱ͢
    - ڵຯ͕͋ͬͨΒɺ“RequireJS” ͱ͔ “SystemJS” Ͱௐ΂ͯΈΔͱྑ͍ͱࢥ
    ͍·͢
    115

    View full-size slide

  114. TypeScriptͱͯ͠ͷϞδϡʔϧ
    - ग़ྗ͞ΕΔJavaScriptͷܗࣜͱ͸ผʹʮ.tsϑΝΠϧ͕Ϟδϡʔϧͱͯ͠ղ
    ऍ͞ΕΔ͔Ͳ͏͔ʯͱ͍͏ج४͕͋Γ·͢
    - ʮimport / export એݴͷແ͍.tsϑΝΠϧ͸ϞδϡʔϧͰ͸ͳ͍ʯͱ͍
    ͏ͷ͸಄ͷย۱ʹͱͲΊ͓ͯ͘ͱྑ͍Ͱ͢
    116

    View full-size slide

  115. TypeScriptͱͯ͠ͷϞδϡʔϧ
    - Ϟδϡʔϧͱͯ͠ղऍ͞ΕΔ.tsϑΝΠϧ
    - ϞδϡʔϧʹͳΒͳ͍.tsϑΝΠϧ
    /* types.ts */
    // Todo ΠϯλʔϑΣΠε͸Ͳ͔͜ΒͰ΋ࢀরՄೳ
    interface Todo {
    name: string;
    }
    /* types.ts */
    // Todo ΠϯλʔϑΣΠε import ͠ͳ͍ͱࢀরͰ͖ͳ͍
    export interface Todo {
    name: string;
    }
    117

    View full-size slide

  116. TypeScriptͱϏϧυΤ
    ίγεςϜ
    118

    View full-size slide

  117. ͳͥԶͨͪ͸Ϗϧυ͢Δͷ͔
    - JavaScriptͷϏϧυྺ࢙͸ׂͱҋ͕ਂ͍Ͱ͢
    - ଠݹͷੲ
    - AltJS͕ྲྀߦΔલ͸ɺ։ൃऀ͕ॻ͍ͨ.jsϑΝΠϧΛͦͷ··HTMLͷ
    λάͰಡΈࠐΜͰ͍·ͨ͠<br/>119<br/>

    View full-size slide

  118. ๲Ε্͕Δ.js
    - ΑΓϦονͳମݧ͕webʹٻΊΒΕΔʹͭΕɺಡΈࠐ·ΕΔJavaScript
    ϑΝΠϧ͸ॏް௕େԽͷҰ్ΛḷΓ·͢ɻ͜Εʹ൐͍৭ʑͳ՝୊͕ු্͠
    ·ͨ͠
    - μ΢ϯϩʔυ͞ΕΔϑΝΠϧͷαΠζΛݮΒ͍ͨ͠
    - ϑΝΠϧΛ෼ׂͯ͠։ൃ͍͕ͨ͠ɺλάͷಡΈࠐΈճ਺͸গͳ<br/>͍ͨ͘͠<br/>- ผݴޠʢAltJSʣͰޮ཰తʹ։ൃ͍ͨ͠<br/>- etc…<br/>120<br/>

    View full-size slide

  119. Ϗϧυπʔϧͷཚཱ
    - Ϟδϡʔϧϩʔμʔ
    - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc…
    - ϏϧυγεςϜ
    - Grant, Gulp, etc…
    - ѹॖʢ೉ಡԽʣπʔϧ
    - YUI Compressor, ClosureCompiler, UglifyJS, etc…
    121

    View full-size slide

  120. Ϗϧυπʔϧͷཚཱ
    - Ϟδϡʔϧϩʔμʔ
    - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc…
    - ϏϧυγεςϜ
    - Grant, Gulp, etc…
    - ѹॖʢ೉ಡԽʣπʔϧ
    - YUI Compressor, ClosureCompiler, UglifyJS, etc…
    122
    ͱʹ͔͘৭ʑ͋ͬͨʂ

    View full-size slide

  121. Module bundler
    - αʔόʔαΠυJavaScriptͰ͋ΔNode.jsͷීٴͱɺ
    Node.jsʹ͓͚ΔϞδϡʔϧػߏʹΠϯεύΠΞ͞Ε
    ͯɺbrowserifyͱ͍͏πʔϧ͕ҰੈΛ෩ᴆ͠·ͨ͠
    - ιʔείʔυதͷ require(‘…’) Λ੩తղੳͰ୳ࡧ͠ɺ
    require͞Ε͍ͯΔґଘscriptΛ݁߹͢Δ͜ͱͰɺ୯Ұ
    ͷ.jsϑΝΠϧΛੜ੒͠·͢
    123

    View full-size slide

  122. Module bundler
    - browserifyͷొ৔Ҏ߱ɺґଘؔ܎Λղܾͯ͠ϑΝΠϧΛ·ͱΊΔπʔϧ
    ͕਺ଟ͘࡞ΒΕ͍ͯ·͢ɻʮϞδϡʔϧόϯυϥʯͱ૯শ͞Ε·͢ɻ
    - webpack, rollup.js, fusebox, Parcel, etc…
    124

    View full-size slide

  123. webpack
    - webpack ͸ۙ೥޿͘࢖ΘΕ͍ͯΔϞδϡʔϧόϯυϥͰ͢
    - https://webpack.js.org/
    - JavaScript / AltJS͚ͩͰͳ͘ɺը૾΍CSSͳͲ༷ʑͳϑΝΠ
    ϧΛΞηοτͱͯ͠όϯυϧϑΝΠϧʹऔΓࠐΊ·͢
    125

    View full-size slide

  124. webpack
    - webpackͰͰ͖Δ͜ͱʢҰ෦ൈਮʣ:
    - AltJSΛτϥϯεύΠϧͭͭ͠ɺόϯυϧΛ࡞੒͢Δ
    - όϯυϧʹରԠ͢ΔιʔεϚοϓϑΝΠϧΛ࡞੒͢Δ
    - ೉ಡԽΛࢪͯ͠࠷ऴతͳϑΝΠϧαΠζΛখ͘͢͞Δ
    - Node.jsͷAPIΛҰ෦ϒϥ΢β޲͚ʹఏڙ͢Δ
    126

    View full-size slide

  125. ࠷ۙͷࣄ৘
    - ۙ೥Ͱ͸ɺECMAScriptͷimport/exportߏจ΍ϒϥ΢βͷtype=“module”>ͱ͍ͬͨඪ४Խ͕ਐΈɺόϯυϥʹཔΒͳ͘ͱ΋Ϟ
    δϡʔϧΛར༻Մೳʹͳ͖ͬͯ·ͨ͠ʢIEআ͘ʣ
    - ͱ͸͍͑ɺimport ͷ࿈࠯͕ਂ͘ͳΔͱɺϒϥ΢β͕࠷ޙͷϞδϡʔϧʹ
    ౸ୡ͢Δ·Ͱʹ͕͔͔࣌ؒͬͯ͠·͍·͢※1
    ɻ͜ͷҙຯͰɺϑΝΠϧΛ
    ·ͱΊΔϞδϡʔϧόϯυϥ͸౰෼ඞཁͱ͞Ε͚ͭͮΔͰ͠ΐ͏
    - ※1 https://docs.google.com/document/d/1ds9EEkcDGnt-iR8SAN-_7nsOfw7gsMfhZjzZ_QAIyjM/
    mobilebasic
    127

    View full-size slide

  126. ʢ༨ஊʣ஗Ԇͱ౤ػ
    - Ұ֓ʹ͢΂ͯͷJavaScriptϑΝΠϧΛ୯ҰϑΝΠϧʹόϯυϧ͢Ε͹Α
    ͍ɺͱ͍͏༁Ͱ͸͋Γ·ͤΜɻద੾ͳ࢖͍෼͚͕ॏཁͰ͢
    - ʮࣄલʹඞཁͱͳΔ͜ͱ͕Θ͔͍ͬͯΔϞδϡʔϧʯΛ౤ػతʹfetch
    ͢Δ
    - ʮϢʔβʔʹͱͬͯຊ౰ʹඞཁͱͳΔ·Ͱʯμ΢ϯϩʔυΛ஗Ԇͤ͞
    Δ
    128

    View full-size slide

  127. ԋश3
    - ԋश1Ͱ࣮૷ͨ͠todoMVCΞϓϦΛwebpackͰ୯Ұͷ.jsϑΝΠϧʹͯ͠
    ͍ͩ͘͞
    - Chromeͷ։ൃऀπʔϧͰɺ΋ͱͷTypeScriptίʔυͷιʔεϚοϓΛද
    ࣔͰ͖ΔΑ͏ʹͯ͠Έ͍ͯͩ͘͞
    130

    View full-size slide

  128. t
    ୯ҰͷKTϑΝΠϧ
    ιʔεϚοϓ

    View full-size slide

  129. ԋशͷ΍Γ͔ͨ
    - repositoryΛcloneʢԋश2ͱಉ͡ͱ͜Ͱ͢
    - https://github.com/recruit-tech/bootcamp-2020-ts.git
    - cd client
    - npm i webpack webpack-cli ts-loader -D
    132

    View full-size slide

  130. ԋशͷ΍Γ͔ͨ
    - webpack.config.jsͱ͍͏ઃఆϑΝΠϧͷ࡞੒͕ඞཁͰ͢
    - https://webpack.js.org/guides/typescript/ ͳͲΛಡΈͭͭਐΊͯΈͯ
    ͍ͩ͘͞
    133

    View full-size slide

  131. Α͘Ұॹʹ࢖ΘΕΔ
    πʔϧୡ

    View full-size slide

  132. ίʔυ඼࣭
    - ʮ੩తͳܕ෇͚ʯͱ͍͏ಛੑ্ɺن໛ͷେ͖͍ϓϩδΣΫτͰͦ͜
    TypeScript͸ͦͷਅՁΛൃش͠·͢
    - ෳ਺ͷ։ൃऀ͕ܞΘΔϓϩδΣΫτͰ͸ɺίʔυͷ඼࣭ΛҰఆʹอͭͨ
    Ίʹ༷ʑͳ޻෉͕ඞཁͱͳΓ·͢

    View full-size slide

  133. ESLint
    - ESLint ͸ASTʢந৅ߏจ໦ʣΛ༻͍ͨίʔυͷνΣοΫπʔϧͰ͢ɻې
    ࢭ͍ͨ͠ίʔυύλʔϯΛϧʔϧͱͯ͠ొ࿥ͯ͠ར༻͠·͢
    - ϧʔϧͷྫ:
    - consoleΛ࢖Θͳ͍͜ͱ
    - ࠶୅ೖ͠ͳ͍ม਺ʹ͸letͰ͸ͳ͘constΛ༻͍Δ͜ͱ
    - TypeScriptͱESLintΛซ༻͢Δ৔߹ɺhttps://github.com/typescript-
    eslint/typescript-eslint Λ࢖͍·͢

    View full-size slide

  134. Prettier
    - Prettier͸ιʔείʔυΛػցతʹϑΥʔϚοτ͢ΔͨΊͷπʔϧͰ͢
    - ԼهͷΑ͏ͳෆໟͳٞ࿦ʹࠨӈ͞Εͳ͍ͨΊʹ΋ɺίϛοτ࣌ʹίʔυ
    ΛࣗಈͰϑΥʔϚοτ͓ͯ͘͠श׳Λ͚͓ͭͯ͘ͷ͸ྑ͍͜ͱͰ͢
    - ʮจࣈྻϦςϥϧ͸γϯάϧΫΥʔτ or μϒϧΫΥʔτʯ
    - ʮηϛίϩϯΛจͷ຤ඌʹ͚ͭΔ΂͖͔ʯ
    - Prettier͸ඪ४ͰTypeScriptʹରԠ͍ͯ͠·͢

    View full-size slide

  135. ࣗಈੜ੒౳
    - ԋश1ͱԋश2ͰݟͨΑ͏ʹɺ֎෦ͱͷ௨৴͕ൃੜ͢ΔՕॴ͸anyʹͳΓ
    ͕ͪͰ͢
    - ௨৴ϓϩτίϧʹ߹ΘͤͯɺIDL͔ΒTypeScriptͷܕΛੜ੒͢Δπʔϧ΋
    ଟ਺ଘࡏ͠·͢
    - e.g. OpenAPI(Swagger), GraphQL, TypeORM, etc…

    View full-size slide

  136. ͓ΘΓʹ
    - ࠓ೔͸ԼهͳͲΛத৺ʹֶΜͰ͖·ͨ͠
    - TypeScriptͷجຊจ๏
    - طଘͷJavaScriptίʔυʹܕΛಋೖ͢Δํ๏
    - TypeScriptͷϓϩδΣΫτʹ͓͚ΔϏϧυͷํ๏
    - ࣌ؒͷ౎߹্ɺ৮Ε͍ͯͳ͍τϐοΫ΋·ͩ୔ࢁ͋Γ·͢ɻؾʹͳΔ
    ςʔϚ͕͋ͬͨΒɺੋඇࣗ෼Ͱௐ΂ɺʢՄೳͰ͋Ε͹ʣखΛಈ͔ͯ͠Έ
    ͍ͯͩ͘͞

    View full-size slide