TypeScript Bootcamp 2020

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

Transcript

1. TypeScript
   Bootcamp
   2020
   1
   

   View Slide

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

   View 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. TypeScript is Կ
   7
   

   View Slide

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

   View Slide

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

   View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. TypeScriptʹ৮ΕΔ
    23
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

50. ԋश 1
    50
    

    View Slide

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

    View Slide

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

    View Slide

53. ԋशͷ΍Γํ
    - 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. ܕͷૢ࡞
    57
    

    View Slide

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

    View Slide

59. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

65. 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 Slide

66. 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 Slide

67. ܕͷߜΓࠐΈ
    - 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 Slide

68. 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 Slide

69. ϛχԋश̍
    - ҎԼͷؔ਺͸ 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 Slide

70. ϛχԋश̎
    - ࣍ͷίʔυ͸੺Լઢ෦෼ͰίϯύΠϧΤϥʔͱ͞Εͯ͠·͍·͢ɻԿ
    ނͰ͠ΐ͏͔ʁ
    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 Slide

71. Ωϟετ
    - จࣈྻͷ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 Slide

72. Ωϟετ
    - ͜ͷΑ͏ͳ৔߹ɺม਺ͷޙΖʹ 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 Slide

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

    View Slide

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

    View Slide

75. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

80. 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 Slide

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

    View Slide

82. 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 Slide

83. ԋश2
    83
    

    View Slide

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

    View Slide

85. ԋशͷ΍Γํ
    - 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

90. ΋ͬͱߴ౓ͳܕ
    90
    

    View Slide

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

    View Slide

92. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

105. ௥Ճ՝୊
     - ԋश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 Slide

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

     View Slide

107. TypeScriptͱ
     Ϟδϡʔϧ
     107
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

111. 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 Slide

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

     View Slide

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

     View Slide

114. --module
     - moduleઃఆͷ࢖͍෼͚ྫ
     - ԋश1Ͱ͸ɺNode.jsͰಈ࡞ͤ͞ΔͨΊʹ module: “commonjs”Λઃ
     ఆ
     - ԋश2Ͱ͸ɺϒϥ΢βͷػೳΛ࢖ͬͯಡΈ<br/>ࠐΉͨΊʹɺ module: “esnext”Λઃఆ<br/>114<br/>

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

129. ԋश3
     129
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

139. ͓ΘΓʹ
     

     View Slide

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

     View Slide