TypeScript Bootcamp 2020

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

Transcript

1. TypeScript Bootcamp 2020 1
2. About me - ໊শɿ૔ݟ༸ี ʢ@Quramy / ͘ΒΈʔ ͱݺ͹ΕΕΔ͜ͱ͕ଟ͍ʣ - ॴଐɿPE෦ ASG, ϑϩϯτΤϯυΤϯδχΞ - ৬ྺɿRTCʹདྷͨͷ͸2020/2݄ɻ ࠃ಺SIer -> Webܥϕϯνϟʔ2ࣾʹ͍·ͨ͠
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ͷ͍ͤͰྲྀ Εͨɻɻɻ
4. ͳʹ΍Δͷ - ຊߨ࠲Ͱ͸ԼهΛֶΜͰ͍͖·͢ - TypeScriptͷجຊతͳจ๏΍ίʔυͷॻ͖ํ - TypeScriptʹؔ܎͢ΔϑϩϯτΤϯυπʔϧνΣΠϯ(webpackͳͲ) 4
5. ΍Βͳ͍͜ͱ - ෳࡶոحͳܕૢ࡞ - VSCͳͲɺಛఆΤσΟλͷศརػೳ঺հ - TypeScriptࣗମͷAPI
6. ໨࣍ 1. TypeScript is Կ 2. TypeScriptʹ৮ΕΔ ※ 3. ܕͷૢ࡞ ※ 4. ϥΠϒϥϦͷܕఆٛ 5. TypeScriptͱϞδϡʔϧ 6. TypeScriptͱϏϧυΤίγεςϜ ※
7. TypeScript is Կ 7
8. TypeScript - Microsoft͕։ൃɾϝϯςφϯε͍ͯ͠Δϓϩάϥϛϯάݴޠ - ੩తͳܕ෇͚ - JavaScriptʹͳΔ 8
9. TypeScript is Alt JS - TypeScriptͷιʔείʔυ͸JavaScriptʹίϯύΠϧ͞Ε·͢ɻʮτϥϯ εύΠϧʯͱ΋ݺͿ͜ͱ΋͋Γ·͢ - ੜͰJavaScriptΛॻ͔ͣʹɺผݴޠͰॻ͍ͯJavaScriptΛੜ੒͢ΔΞϓ ϩʔν͸Alt JSʢ͓Δͱ͐͡ʔ͑͢ʣͱݺΜͩΓ͢Δ͜ͱ΋ 9
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
11. ͳΜͰTypeScript࢖͏ͷʁ - शಘ͕ൺֱత͔ΜͨΜ - ૉͷJavaScriptίʔυ͸ਖ਼͍͠TypeScriptίʔυ - JavaScriptͱ஍ଓ͖ͰशಘͰ͖Δʂ 11
12. ·ͣ͸৮ͬͯΈΑ͏ - TypeScript Playground ʹ͓खܰ؀ڥ͕͋Γ·͢ - ৮ͬͯΈΑ͏Playgroundɿ - Run / LogsͰ࣮ߦΛ֬ೝ͠Α͏ - JSλϒ͔ΒτϥϯεύΠϧ͞ΕͨJavaScriptίʔυΛ֬ೝ͠Α͏ 12
13. ͳΜͰTS࢖͏ͷʁͨͩͷJS͡Όμ ϝͳͷʁ - TypeScriptͷྑ͍ͱ͜Ζɿ - ܕνΣοΫ͕Ͱ͖Δʂʂʂ - ݹ͍ϒϥ΢βͰ΋ಈ͘ʂʂʂ - ΤσΟλαϙʔτ͕༏लʂʂʂ 13
14. ܕνΣοΫ͕Ͱ͖Δ - JavaScript͸ಈతܕ෇ݴޠ - ࣮ߦ͢Δ·ͰΘ͔Βͳ͍͜ͱ͕͍ͬͺ͍ hoge͸είʔϓʹఆٛ͞Εͨม਺ ʁ hoge͸objectͰɺfooͱ͍͏ϓϩύςΟ͕ଘࡏ͍ͯ͠Δʁ hoge.foo͸ؔ਺ͱ࣮ͯ͠ߦͰ͖Δʁ console.log(hoge.foo()); 14
15. ܕνΣοΫ͕Ͱ͖Δ - TypeScript͸੩తʹܕΛ෇༩ͯ͠ɺhoge.foo() ͕࣮ߦͰ͖Δ͔Ͳ͏͔ ΛιʔείʔυͷϨϕϧͰνΣοΫ͠·͢ - ʮܕΤϥʔͰౖͬͯ΋Β͑Δʯͷ͸޾ͤͳ͜ͱͰ͢ - ςετ͕ޮ཰తʹʢςετ͠ͳ͍͍ͯ͘ͱ͍͏༁Ͱ͸ͳ͍ʣ - ಈతݴޠʹܕΛ༩͑ͯɺ੩తʹνΣοΫͰ͖ΔΑ͏ʹ͢Δ͜ͱΛ઴࣍త ܕ෇ʢGradual typingsʣͱ͍͍·͢ 15
16. ܕνΣοΫ͸બ΂Δ - TypeScript as ઴࣍తܕ෇ͷΑ͍ͱ͜Ζɿ - طଘͷJavaScript͚ͩͰॻ͔ΕͨιʔείʔυʹঃʑʹܕΛ෇͚͍͚ͯΔ - ৽نϓϩδΣΫτͰ͸ɺ࠷ॳ͔Β੩తܕ෇ݴޠͱಉ͡Α͏ʹ࢖͏͜ͱ΋ Ͱ͖Δ - TypeScript as ઴࣍తܕ෇ͷ஫ҙ఺ɿ - ॴḨ͸ޙ෇ͷػߏɻJavaScriptͷࣗ༝౓ͱ૬൓͢ΔՕॴ΋͋Δ͠ɺӕͭ ͍ͯܕγεςϜ͕ὃ͞ΕΔ͜ͱ͢Β͋Γಘ·͢ 16
17. Downleveling - τϥϯεύΠϧͷաఔͰɺ৽͍͠࢓༷ͷJavaScriptߏจΛɺݹ͍ϒϥ΢ βͰ΋ಈ࡞͢ΔΑ͏ʹม׵͠·͢ - e.g. async / await ͸InteretExplorerͰ͸ಈ࡞͠·ͤΜ͕ɺTypeScript ͕ؤுͬͯίʔυΛม׵ͯ͘͠Ε·͢ 17
18. Downleveling - ʮ·ͬͨ͘downlevelΛߦΘͳ͍ʯͱ͍͏ઃఆ΋ՄೳͰ͢ - ͜ͷ৔߹ɺग़ྗ͞ΕΔJavaScriptϑΝΠϧͷίʔυ͸ɺݩͷTypeScript ίʔυͱຆͲࠩ෼͕ແ͍ঢ়ଶʹͰ͖·͢ - ݴ͍׵͑ΔͱʮͦͷؾʹͳΕ͹͍ͭͰ΋ࣺͯΔ͜ͱ͕Ͱ͖Δʯπʔϧ Ͱ͢ 18
19. ΤσΟλαϙʔτ͕༏ल - TypeScriptͦͷ΋ͷʹҎԼͷػೳؚ͕·Ε͍ͯΔͷͰɺΤσΟλ͕շదͰ͢ - ΤϥʔνΣοΫ - ิ׬ - ఆٛδϟϯϓ - ࢀরՕॴͷදࣔ - ϦϑΝΫλϦϯάิॿػೳ - etc… 19
20. ΤσΟλαϙʔτ͕༏ल - ʢ༨ஊʣ - TypeScriptͷݴޠαʔϏεʢtsserverʣ΍C#ͷ࢓૊ΈΛݩʹɺ LSP(Language Service Protocol) ͱ͍͏ʮΤσΟλͱϓϩάϥϛϯά ݴޠؒͷΠϯλʔϑΣʔεʯ͕ੜ·Εͨ΄Ͳ - ࢒೦ͳ͜ͱʹTypeScript͸LSP४ڌ͍ͯ͠·ͤΜ 20
21. TypeScriptͷΞϑΥʔμϯε - UI/UXͷੈքͰ͸ʮϢʔβʔʹ஌֮Λଅ͢؀ڥɾͦΕ͕΋ͨΒ͢Ձ஋ʯ ͷ͜ͱΛΞϑΥʔμϯεͱݺͿ͜ͱ͕͋Γ·͢ʢe.g. υΞͱϊϒʣ - TypeScript͸ʮΤϥʔΛૉૣ͘දࣔ͢Δʯʮิ׬ՄೳͳΩʔϫʔυ΍ม ਺໊Λදࣔ͢Δʯͱ͍͏ԸܙΛ΋ͨΒ͠·͢ - ͜Ε͸DeveloperʹΞϑΥʔμϯεΛఏڙ͍ͯ͠Δɺͱߟ͑Δ͜ͱ͕Ͱ ͖·͢
22. த·ͱΊ TypeScriptͬͯԿ ʮޙ෇ͰܕΛ෇͚Δ͜ͱͷͰ͖ΔڧԽ൛JavaScriptʯ 22
23. TypeScriptʹ৮ΕΔ 23
24. ͸͡Ίʹ - ͜ͷνϟϓλͰ͸ɺTypeScriptͷجຊతͳจ๏Λݟ͍͖ͯ·͢ - ʮ͜Μͳجૅจ๏͸஌ͬͯΔͥʂʯͬͯਓ͸ܕύζϧͰ༡ΜͰ͍ͯͩ͘͞ - TypeScript PlaygroundΛ࢖͍͖ͬͯ·͢ - https://www.typescriptlang.org/v2/play 24
25. Playground৮Δͱ͖ͷ஫ҙ ͜ͷύʔτͰ͸ɺStrict Checks͸શ෦ONʹ͓͍͍ͯͯͩ͘͠͞ 25
26. Type annotation - TypeScriptͰ͸ɺܕΛ໌ࣔతʹએݴ͢Δ͜ͱΛʮܕ஫ऍΛ෇͚Δʯͱݴ ͍·͢ - ܕ஫ऍ͸৭ʑͳͱ͜Ζʹ෇༩Ͱ͖·͕͢ɺ·ͣ͸ؔ਺ͷҾ਺ʹܕ஫ऍΛ ෇༩ͯ͠Έ·͠ΐ͏ 26
27. Function parameters - ؔ਺ͷԾҾ਺ʹ஫ऍΛ෇༩ͯ͠Έ·͢ - PlaygroundͰԼهΛॻ͍ͯΈͯɿ function add(a: number, b: number) { return a + b; } console.log(add(100, 100)); 27
28. Function parameters - ஫ऍ͢ΔܕΛҎԼͷΑ͏ʹॻ͖׵͑ͯɺΤϥʔνΣοΫ͞ΕΔ͜ͱΛ ֬ೝͯ͠Έͯɿ function add(a: string, b: string) { return a + b; } 28
29. Type inference - ʮؔ਺ͷҾ਺ʹ͑͞ܕ͕͋Ε͹ଞ͸ਪ࿦͞ΕΔʯ͕TypeScriptܕਪ࿦ͷ جຊͰ͢ - ྫ͑͹ɺؔ਺໊ͷ্ͰϚ΢εΦʔόʔ͢Δͱɺ໭Γ஋ͱͳΔܕͷਪ࿦ ݁Ռ͕දࣔ͞Ε·͢ 29
30. ஫ऍͰ͖Δͱ͜Ζ - ଞʹ΋ : ܕ໊ Ͱ஫ऍͰ͖Δͱ͜Ζ͸৭ʑ͋Γ·͢ const a: string = "hoge"; let b: string; var c: string; function d(): string { return "hoge"; } class MyClass { e: string = ""; } 30
31. ஫ऍͱਪ࿦ͷিಥ - ஫ऍͨ͠ܕͱਪ࿦݁Ռ͕৯͍ҧ͏ͱɺίϯύΠϧΤϥʔʹͳΓ·͢ - ԼهͷίʔυͰΤϥʔʹͳΔ͜ͱΛ֬ೝͯ͠Έͯɿ function add(a: number, b: number) { return a + b; } const a: string = add(100, 100); 31
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
33. Function type - JavaScriptͷੈքͰ͸ɺؔ਺΋ΦϒδΣΫτͷҰछͰ͋Δ͜ͱ͔Βɺ TypeScriptʹ΋ʮؔ਺ࣗମͷܕʯ͕͋Γ·͢ - ྫɿ - ໭Γ஋͕ଘࡏ͠ͳ͍ؔ਺ͷ৔߹͸ɺ=> void ͱॻ͖·͢ (a: number, b: number) => number 33
34. Object / Array type const obj: { name: string, age: number } = { name: "Bob", age: 20, }; const arr: number[] = [1, 2, 3]; 34
35. Type alias - typeߏจͰܕʹผ໊Λ෇͚ͯ࠶ར༻Ͱ͖·͢ɻ”type alias” ͱݺ͹Ε· ͢ɻ͔ͳΓසൟʹ࢖͍·͢ - type໊͸େจࣈ͔Β։࢝͢Δͷ͕ҰൠతͰ͢ type Messages = string[]; function showMessages(msgs: Messages) { msgs.forEach(msg => console.log(msg)); } 35
36. ϛχԋश - ҎԼΛຬͨ͢ GetUser ͱ͍͏ؔ਺ܕΛॻ͍ͯΈͯ - input: จࣈྻܕ - output: ࣍ͷߏ଄Ͱఆٛ͞ΕΔΑ͏ͳUserܕ id จࣈྻ name จࣈྻ age ਺஋ isMarried ਅِ஋ 36
37. Class - Classߏจ͸ES2015͔ΒJavaScriptʹಋೖ͞Ε͍ͯ·͢ɻTypeScriptͰ΋ ClassΛѻ͏͜ͱ͕Ͱ͖·͢ - એݴͨ͠Class͸ܕͱͯ͠΋࢖͑·͢ʢJavaͱ͔ͱҰॹʣ 37
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
39. JavaScriptͷClassʹແ͍ػೳ - ϑΟʔϧυɾϝιουʹՄࢹੑ͕ઃఆͰ͖Δ - private / protected / public - ※ TypeScriptʹ͓͚Δprivateߏจ͸Soft PrivateɻͦͷؾʹͳΕ͹ΞΫ ηεͰ͖Δ - ந৅Ϋϥε / ந৅ϝιουΛఆٛͰ͖Δ - InterfaceΛ࣮૷Ͱ͖Δ 39
40. any - anyܕ͸TypeScriptʹ͓͚ΔϫΠϧυΧʔυͰ͢ - ͲΜͳܕͰ͋ͬͯ΋any΁୅ೖͰ͖·͢͠ɺanyܕͰ͋Δม਺͸͢΂ͯ ͷܕͱͯ͠ৼΔ෣͑ͯ͠·͍·͢ 40
41. any - ʮ͢΂ͯͷܕͱͯ͠ৼΔ෣͏͜ͱ͕Ͱ͖ΔʯͨΊɺܕʹؔ͢Δίϯύ ΠϧΤϥʔ͕͢΂ͯ཈ࢭ͞Ε·͢ - any͸TypeScriptʹ͓͚ΔඞཁѱͰ͢ɻ࢖͏ͱ͖͸ࡑѱײͰ৺Λগ͠௧ ΊΔΑ͏ʹ͠·͠ΐ͏ const fn: any = () => 100; const hoge: number = fn; 41
42. anyΛ࢖͏ͷ͕ଥ౰ͳέʔε - any͸ੑ࣭Λཧղͯ͠࢖͏෼ʹ͸ศརͳػೳͰ͢ - طଘͷJavaScriptϓϩδΣΫτ΁TypeScriptΛಋೖ͢ΔࡍʹɺͱΓ͋͑ ͣܕ஫ऍΛͯ͠͠·͍͍ͨʢ࣮૷ίʔυΛഁյͨ͘͠ͳ͍ʣ - ෳࡶͳؔ਺ͷ಺෦ͰҰ࣌తʹ࢖͏έʔεɻؔ਺ͷςετΛ͔ͬ͠Γͱ ߦ͍ͬͯͯɺ͔ͭҾ਺ͱ໭Γ஋ͷܕ͕ͪΌΜͱॻ͍ͯ͋Ε͹໰୊ͳ͍ - ͍ͣΕʹͤΑʮanyͷӨڹ͸ہॴతʹԡ͓͑ͯ͘͞ʯ͕TypeScriptͱ͏· ͘෇͖߹͍ͬͯ͘ίπͰ͢ 42
43. ୅ೖՄೳͱ͸Կ͔ - TypeScriptͷܕγεςϜ͸Structual Subtypingʢߏ଄త෦෼ܕʣͱ͍͏ ํࣜΛ࠾༻͍ͯ͠·͢ʢରٛޠ͸Nominal Subtypingʣ - TypeScriptͰ͸ɺผͷinterface΍typeͰ͋ͬͯ΋ɺ֤ϑΟʔϧυͷத਎ ͕߹͍ͬͯ͑͞Ε͹ͦΕͧΕ୅ೖՄೳͰ͋ΔʢassignableʣɺͱΈͳ͞ Ε·͢ 43
44. ୅ೖՄೳͱ͸Կ͔ - assignableͷྫ: - showMessageؔ਺͸ɺจࣈྻܕͰ͋Δmessageͱ͍͏ϑΟʔϧυΛ ࣋ͬͨܕͰ͋Ε͹ɺԿͰ΋୅ೖՄೳ type SomeType = { message: string; }; function showMessage(obj: SomeType) { console.log(obj.message); } showMessage({ message: “Hello!" }); 44
45. ୅ೖՄೳͱ͸Կ͔ - લϖʔδͷྫͰɺԼهΛ௥هͯ͠΋ίϯύΠϧ͕௨Δ͜ͱΛࢼͯ͠Έ ͯ showMessage(new Error("error!")); 45
46. (͓·͚) ߏ଄త෦෼ܕͰࠔΔ৔߹ - ʢ࣌ؒʹ༨༟͕͋ͬͨΒʣߟ͑ͯΈͯ - ߏ଄త෦෼ܕͷσϝϦοτΛڍ͛ͯΈͯ - ߟ͍͑ͭͨσϝϦοτΛTypeScriptͰΧόʔ͢ΔͨΊʹ͸ɺͲ͏͢Ε ͹Α͍͔ʁ 46
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
48. Interface v.s. Type alias - લϖʔδͷ IHoge interface ͱ HogeType ʹ͍ͭͯɺPlayground্Ͱ ͷҧ͍Λ୳ͯ͠Έͯ - લϖʔδͷྫʹɺԼهΛ௥هͨ͠ͱ͖ʹͲ͏ͳΔ͔֬ೝͯ͠Έͯ interface IHoge { errorCode: number; } 48
49. Θ͔Βͳ͍ॴ͕͋Δ࣌͸ - ֮͑Δۙಓ͸ɺTypeScriptͰԿ͔Λ࣮૷ͯ͠ΈΔ͜ͱͰ͢ - ެࣜαΠτʢhttp://www.typescriptlang.org/docs/homeʣͷϋϯυϒο ΫΛோΊͯΈΔͷ΋͋Γ - twitterͰ #typescript λάΛ෇͚ͯᄁ͍ͨΒɺ୭͔͕रͬͯ͘ΕΔ͔΋͠ Ε·ͤΜ 49
50. ԋश 1 50
51. ԋशͷલʹ - ։ൃ؀ڥ͕੔͍ͬͯΔ͜ͱΛ֬ೝ͠·͠ΐ͏ - ҎԼͷίϚϯυ͸ར༻ՄೳͰ͔͢ʁ - git - node --version - ΤσΟλ: - ͩ͜ΘΓ͕ແ͚Ε͹ɺVisual Studio Code Λ࢖͍ͬͯͩ͘͞ 51
52. ԋश1 - JavaScriptฤͰ࣮૷ͨ͠ToDo MVCͷαʔόʔαΠυͷίʔυʹܕΛ͚ͭ ͯΈ͍ͯͩ͘͞ 52
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ฤͰ࡞Γ͖Ε͍ͯΔͷͰ͋Ε͹ɺ ͦͷίʔυΛ࢖ͬͯ ͜ͷίϚϯυʹ͍ͭͯ͸ޙͰղઆ͠ ·͢
54. ԋशͷ΍Γํ - npx tsc Ͱ.tsϑΝΠϧ͔Β.jsϑΝΠϧ΁τϥϯεύΠϧ͞Ε·͢ - ͍͔ͭ͘ίϯύΠϧΤϥʔ͕ग़Δ͸ͣͳͷͰɺιʔείʔυΛฤू͠ ͯɺΤϥʔΛ0݅ʹͯ͠Έ·͠ΐ͏ - ʢۃྗ any ʹ͸པΒͳ͍Ͱ΍ͬͯΈͯʣ 54
55. ʢิ଍ʣtsconfig.jsonʹ͍ͭͯ - TypeScriptͷઃఆ͸ϓϩδΣΫτϧʔτ഑Լͷtsconfig.jsonʹهड़͠·͢ - ͜ͷԋशͰॻ͖׵͑ΔՕॴɿ - target: “es2020” - ࠔͬͨΒ https://www.typescriptlang.org/v2/ja/tsconfig ΛಡΜͰͩ͘͞ ͍ 55
56. ʢิ଍ʣrequireͱimport - Node.jsͷrequireߏจͷ୅ΘΓʹɺES2015ͷimportจΛ࢖͏Α͏ʹͯ͠ ͍ͩ͘͞ - TypeScriptʹ͓͚ΔʮϞδϡʔϧʯʹ͍ͭͯ͸ผ్ޙड़͠·͢ const express = require("express"); import express from "express"; 56 module.exports = router; export default router;
57. ܕͷૢ࡞ 57
58. ͸͡Ίʹ - ͜ͷνϟϓλʔͰ͸ɺ࣮ࡍʹίʔυΛॻ͘ͱ͖ʹɺܕΛͲͷΑ͏ʹѻͬ ͍ͯ͘ͷ͔ʹ͍ͭͯઆ໌͍͖ͯ͠·͢
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
60. Optional - TypeScriptͰ͜ͷखͷType errorͱઓ͏ͨΊʹ͸ɺʮଘࡏ͠ͳ͍͔΋͠Ε ͳ͍ม਺ʯΛTypeScriptͷܕγεςϜʹڭ͑ࠐΉඞཁ͕͋Γ·͢ - type΍interfaceʹͯɺϓϩύςΟ໊຤ඌʹ?Λ෇༩͢Δͱɺʮଘࡏ͠ͳ ͍͔΋͠Εͳ͍ʯͱ͍͏ҙຯʹͳΓ·͢ 60
61. Optional - ΦϓγϣϯͷstrictNullCheck͕trueͷ৔߹ɺoptionalͳ஋Λ͍͖ͳΓૢ ࡞͠Α͏ͱ͢ΔͱTypeScript͕ίϯύΠϧΤϥʔʹͯ͘͠Ε·͢ ʢίϯύΠϧΤϥʔ͸͝๙ඒͩͱࢥ͍·͠ΐ͏ʣ function fn(args: { message?: string}) { // ࣄલʹargs.messageͷଘࡏΛνΣοΫ͢Δඞཁ͕͋Δ if (!args.message) return ""; return args.message.toLowerCase(); } fn({}); // messageΛলུՄೳ 61
62. ͦͷଞͷOptionalදݱ - ϓϩύςΟ໊ޙͷ ? Ҏ֎ʹ΋Optionalม਺Λදݱ͢Δํ๏͕͋Γ·͢ - ※ ύΠϓه߸ͷҙຯ͸ޙड़͠·͢ // ؔ਺ͷoptionalҾ਺ function hoge(a: number, b?: number) { } // null ΍ undefined ͱͷUnion type X = string | undefined; type Y = string | null;
63. strictNullCheck ʹ͍ͭͯ - strictNullChecks͸ɺࢀর͍ͯ͠Δ஋ͷܕʹnull ·ͨ͸ undefined͕୅ೖ Մೳͳ৔߹ʹɺͦͷ஋ͷૢ࡞Λ੍ݶ͢ΔػೳͰ͢ - TypeScriptͷσϑΥϧτઃఆͰ͸ɺstrictNullCheck͸ONͰ͢ - جຊతʹ͸༗ޮʹ͓͍ͯͨ͠ํ͕ྑ͍ػೳͰ͕͢ɺطଘͷJavaScriptϓ ϩδΣΫτʹޙ෇ͰTypeScriptΛಋೖ͢Δ৔߹͸ɺҰ୴offʹ͢Δͷ΋Ξ ϦͰ͢ 63
64. Modifiers - ܕఆٛͰͷ ? ͸optional modifierͱݺ͹Ε·͢ - modifierʹ͸optionalҎ֎ͷmodifierͱͯ͠ɺreadonlyͱ͍͏ͷ΋͋Γ· ͢ʢʮSoftͳʯ࣮૷Ͱ͋ΔͨΊɺτϥϯεύΠϧޙͷjs͔Β͸ॻ͖׵͑Մೳʣ type Hoge = { m1: string; m2?: string; readonly m3: string; readonly m4?: string; }; 64
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
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
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
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
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; } };
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
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
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;
73. asͷ੍໿ - asͰม׵Ͱ͖Δͷ͸ɺSupar type → Sub type ͷ৚͕݅ຬͨ͞ΕΔͱ͖ ͷΈͰ͢ - e.g. numberܕ͸stringܕʹม׵Ͱ͖·ͤΜ Supar type Sub type type SomeString string
74. Intersection type - Union type͸ܕͱܕͷ࿨Ͱ͕͢ɺܕͱܕͷੵ΋ଘࡏ͠·͢ - ه߸ & Ͱෳ਺ͷܕΛ࿈݁͢ΔͱɺIntersection typeʹͳΓ·͢ - type A & B ͸ɺʮAʹ΋Bʹ΋assignableʯͳܕͰ͢ 74
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
76. Bottom type - neverʹਪ࿦͞ΕΔͱ͜ - ྫ֎Λεϩʔͨ͠ޙΖͷεςʔτϝϯτʹ͓͚Δม਺ - Node.jsͷprocess.exit() ͷ໭Γ஋
77. Composition never - Լهͷܕ A ɺB ͸ͦΕͧΕͲΜͳܕͰ͠ΐ͏ʁ (X͸Կ͔ద౰ͳܕͱ͠·͢ʣ type A = never | X; type B = never & X; 77
78. Unknown type - unknown ͸ anyͷ਌ੰͷΑ͏ͳ΋ͷͰ͢ - ͢΂ͯͷܕ͕unknownʹassignableɺͱ͍͏఺Ͱ͸anyͱҰॹͰ͕͢ɺ type assertion͠ͳ͍ͱར༻ෆՄೳͱ͍͏఺ͰanyͱҟͳΓ·͢ 78
79. Generics - TypeScriptͰ͸ɺGenericsʢ૯শܕʣ͕࢖͑·͢ - GenericsΛ࢖͏ͱɺύϥϝτϦοΫͳܕΛ࡞Δ͜ͱ͕Ͱ͖·͢ 79
80. Generics type List<T> = T[]; function getLength<T>(list: List<T>) { list.length; } interface IFoo<T> { list: ReadonlyArray<T>; } class Foo<T> implements IFoo<T> { constructor(public readonly list: T[]){ } get size() { return getLength(this.list); } } const foo = new Foo<string>([""]); 80
81. Generics - TypeScript͕ඪ४Ͱ༻ҙ͍ͯ͠Δܕʹ΋૯শܕΛ࢖͍ͬͯΔܕ͕৭ʑ͋ Γ·͢ - Map, Set, PromiseͳͲͷJavaScriptඪ४ͷίϯςφܥClass - ReadonlyArrayͷΑ͏ͳTypeScript͕ಠࣗʹ༻ҙ͍ͯ͠ΔUtilityܕ 81
82. Generics // ໭Γ஋͕Promise<{ id: number; name: string; }> function getTodo() { return Promise.resolve({ id: 100, name: "hoge", }); } const index = new Map<number, string>(); index.set(1, "hoge"); index.has(1); const colors: ReadonlyArray<string> = [ "red", "green", "blue", ]; colors.sort(); // ഁյૢ࡞͸ېࢭ
83. ԋश2 83
84. ԋश2 - JavaScriptฤͰ࣮૷ͨ͠ Todo MVC ΞϓϦέʔγϣϯͷϒϥ΢βଆͷ ίʔυʹܕΛ͚͍ͭͯͩ͘͞ 84
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
86. ʢิ଍ʣtsconfig.jsonʹ͍ͭͯ - ͜ͷԋशͰॻ͖׵͑ΔՕॴɿ - module: “esnext” - target: “es2020” 86
87. ʢิ଍ʣimport / export - TypeScriptʹ͓͚ΔʮϞδϡʔϧʯʹ͍ͭͯ͸ผ్ޙड़͠·͢ - ͜ͷԋशͰ͸ɺES2015ͷ import / export ߏจ͕ͦͷ··ར༻Ͱ͖· ͢ɻಛʹ import จ΍ export จΛॻ͖׵͑Δඞཁ͸͋Γ·ͤΜ 87
88. ʢิ଍ʣඪ४ APIͱTypeScript - TypeScript ࣗମʹඪ४ APIͷܕ͕όϯυϧ͞Ε͍ͯ·͢ - JavaScriptʢECMAScriptʣͷඪ४ API - DOM API΍fetchͳͲɺϒϥ΢βʹඪ४ͰඋΘ͍ͬͯΔAPI 88
89. ;Γ͔͑Γ - ԋश1 ͱ ԋश2 Λ௨ͯ͠ɺαʔόʔαΠυɺϒϥ΢βαΠυͷίʔυΛ ܕͰकΔ͜ͱ͸Ͱ͖·ͨ͠ - ͱ͜ΖͰɺϒϥ΢βͱαʔόʔ͕௨৴͍ͯ͠Δ෦෼͸Ͳ͏Ͱ͠ΐ͏͔ʁ - req.bodyʢαʔόʔଆʣ΍ɺfetchͷ໭Γ஋ʢϒϥ΢βଆʣʹҰ؏ੑ͸ ͋Γ·͔͢ʁ
90. ΋ͬͱߴ౓ͳܕ 90
91. Advanced type - ࠓ೔͸ׂѪ͠·͕͢ɺܕγεςϜʹ͸ΑΓߴ౓ͳػೳ΋༻ҙ͞Ε͍ͯ· ͢ - Mapped type: objectܕͷkeyΛ࠶ར༻ͯ͠ผͷܕΛ࡞Δ - Conditional type: ୅ೖՄೳੑͰܕΛύλʔϯϚον - Type inference in conditional type: ύλʔϯϚονͨ͠ܕͷ࠶ར༻ 91
92. Advanced type interface Observable<T> { subscribe(cb: (v: T) => void): void; } type Unboxing<T> = T extends Observable<infer S> ? S : never; declare function combineLatest<U extends Observable<any>[]>( ...args: U ): Observable< { [P in keyof U]: Unboxing<U[P]>; } >; declare const s1: Observable<string>; declare const s2: Observable<number>; declare const s3: Observable<boolean>; combineLatest(s1, s2, s3).subscribe(([v1, v2, v3]) => { });
93. Advanced type - ͱ͸͍͑ɺ͜ΕΒͷڽͬͨػೳ͸ɺΞϓϦέʔγϣϯ࣮૷࣌ͷར༻ස౓ ͸͔ͳΓ௿͍Ͱ͢ɻඞཁ͕ੜ͔ͯ͡Β਎ʹ͚ͭΕ͹े෼ͱ͍͑·͢ - ҰํɺطଘJavaScriptϥΠϒϥϦʹܕఆٛ͸͜ΕΒͷςΫχοΫ͕׆༻ ͞Ε͍ͯΔ͜ͱ͕ଟ͍Ͱ͢ - ஶ໊ͳϥΠϒϥϦͷܕఆٛΛಡΉͷ͸शಘͷۙಓ͔΋͠Ε·ͤΜ
94. ༨ஊ - TypeScriptͷܕγεςϜ͸ɺͦΕࣗମ͕νϡʔϦϯά׬શͰ͢ - ͦͷؾʹͳΕ͹ɺԼهͷΑ͏ͳ΋ͷ͕࡞Εͯ͠·͍·͢ - ϥΠϑήʔϜ - Brainfuck
95. ϥΠϒϥϦͷܕఆٛ 95
96. JavaScriptϓϩδΣΫτͱґଘϥ ΠϒϥϦ - JavaScriptͷϓϩδΣΫτΛਐΊΔࡍ͸ɺ΄΅࣮֬ʹ֎෦ͷϥΠϒϥϦ ʹґଘ͢Δ͜ͱʹͳΓ·͢ - ௨ৗɺNPMʢNode.jsͷύοέʔδϚωʔδϟʣʹެ։͞Ε͍ͯΔϥΠ ϒϥϦΛར༻͢Δέʔε͕ଟ͍Ͱ͢ - ֎෦ϥΠϒϥϦΛTypeScript͔Βར༻͢ΔͨΊʹ͸ɺʮܕఆٛϑΝΠ ϧʯ͕ඞཁʹͳΓ·͢ 96
97. ܕఆٛϑΝΠϧͱ͸ - ܕఆٛϑΝΠϧͱ͸ɺTypeScriptͷΞϊςʔγϣϯ৘ใͷΈ͕நग़͞Ε ͨϑΝΠϧͰ͢ - ֦ுࢠ͕.d.tsͱͳΔͨΊɺʮͰ͌ʔͯ͌ʔ͑͢;͍͊Δʯͱݺ͹ΕΔ͜ ͱ΋ଟ͍Ͱ͢ - ྫ: ʮjQueryͷ.d.tsΠϯετʔϧ͠๨ΕͯͶʁʯ 97
98. .d.ts - .d.tsϑΝΠϧΛੜ੒ͯ͠ΈΔ: - खݩͰద౰ͳTypeScriptͷϑΝΠϧΛ࡞Δ - tsc --declaration 98
99. types - ϥΠϒϥϦͷܕΛTypeScriptͰར༻͢Δํ๏͸େผ͢Δͱ3௨Γ͋Γ·͢ 1.NPM ύοέʔδʹܕఆ͕ٛಉࠝ͞Ε͍ͯΔ 2.NPMύοέʔδʹରԠ͢ΔܕఆٛΛୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε 3.ࣗ෼ͰܕఆٛΛ༻ҙ͢Δ 99
100. 1. NPM ύοέʔδʹܕఆ͕ٛಉ ࠝ͞Ε͍ͯΔ - npm install (ϥΠϒϥϦ໊) Λ࣮ߦ͢Δ͚ͩͰܕఆ͕ٛར༻ՄೳʹͳΓ· ͢ - ͜ͷखͷ΍ͭ͸ɺϥΠϒϥϦͷpackage.jsonʹ “types”: “index.d.ts” ͱ ͍ͬͨهड़͕͋Γ·͢ 100
101. 2. NPMύοέʔδʹରԠ͢ΔܕఆٛΛ ୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε - ળҙͷୈ3ऀ͕ܕఆٛΛผ్ఏڙͯ͘͠Ε͍ͯΔέʔε͕͋Γ·͢ - https://github.com/DefinitelyTyped/DefinitelyTyped - npm i @types/(ϥΠϒϥϦ໊) ͰΠϯετʔϧ͠·͢ 101
102. 3.ࣗ෼ͰܕఆٛΛ༻ҙ͢Δέʔε - Ambient moduleએݴͱ͍͏ख๏Ͱࣗ෼ͰϥΠϒϥϦʹܕఆٛΛ༩͑Δ ͜ͱ͕Ͱ͖·͢ - গ͠ϚχΞοΫͳͷͰࠓ೔͸৮Ε·ͤΜ 102
103. ܕఆٛΛ୳͢ॱং /1.ύοέʔδʹܕఆٛ ͕ಉࠝ͞Ε͍ͯΔʁ %FpOJUFMZ5ZQFEʹ !UZQFTύοέʔδ͕͋Δʁ ͋Γ͕ͨ͘࢖͏ @types ͔ΒܕఆٛΛ ௥ՃΠϯετʔϧͯ͠࢖͏ ࣗ෼ͰܕఆٛΛॻ͘ yes yes no no 103
104. ܕఆٛϑΝΠϧͷ஫ҙ - ఏڙ͞Εͨܕఆ͕ٛຊମͷAPIΛ໢ཏ͍ͯ͠ͳ͍͜ͱ΋ɺ··͋Γ·͢ - e.g. ಛఆͷؔ਺ͷܕఆ͕ٛͬͦ͝Γൈ͚ͯΔ / anyͩΒ͚ / etc… - ͜ͷखͷέʔεʹ௚໘ͨ͠ΒɺܕఆٛΛमਖ਼͢ΔPRΛग़͠·͠ΐ͏ 104
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
106. ௥Ճ՝୊ - લϖʔδͷίʔυ͸ɺRequestʹਅِ஋ܕͷ isAuthenticated ͱ͍ ͏ϓϩύςΟΛੜ΍ͨ͠ྫͰ͢ - ͜ͷίʔυΛTypeScriptͰίϯύΠϧΤϥʔͱͳΒͳ͍Α͏ʹ͢Δʹ͸ Ͳ͏͢Ε͹͍͍Ͱ͠ΐ͏͔ʁ - ώϯτ: Ambient namespace 106
107. TypeScriptͱ Ϟδϡʔϧ 107
108. JavaScriptͱʮϞδϡʔϧʯ - ͦ΋ͦ΋ɺJavaScriptͱ͍͏ݴޠʹ͸ʮϞδϡʔϧʯͱ͍͏֓೦͕௕Β ͘ଘࡏ͍ͯ͠·ͤΜͰͨ͠ - ECMAScript 2015ͱ͍͏όʔδϣϯͰॳΊͯϞδϡʔϧʹؔ͢Δߏจ͕ ࢓༷Խ͞Ε·ͨ͠ 108
109. ES2015 Ϟδϡʔϧ // calc.js // ϞδϡʔϧΛར༻͢Δଆ import { add } from “./add.js”; console.log(add(1, 2)); // add.js // ϞδϡʔϧΛఆٛ͢Δଆ export function add(a, b) { return a + b; }
110. JavaScriptͱʮϞδϡʔϧʯ - ECMAScriptͰϞδϡʔϧߏจ͕ඪ४ͰఆΊΒΕΔΑΓҎલ͔ΒɺಠࣗϞ δϡʔϧͱ΋͍͏΂͖ن͕֨৭ʑ͋Γ·͢ - (ECMAScriptඪ४Ͱͳ͍)ಠࣗͷϞδϡʔϧن֨ͱͯ͠ɺࠓͰ΋޿͘࢖Θ Ε͍ͯΔͷ͕Node.js(CommonJS)ͷ require / module.exports ελΠϧ Ͱ͢ 110
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;
112. Module loader - ES2015 ϞδϡʔϧͰ͋ΕɺಠࣗܗࣜͰ͋ΕɺϞδϡʔϧԽ͞Εͨ JavaScriptΛऔΓࠐΉ࢓૊Έ͕ඞཁͰ͢ - <script type=“module”>λά΍ɺNode.jsͷrequireػߏͳͲ - ϞδϡʔϧΛಡΈࠐΉ࢓૊Έ͸ʮϞδϡʔϧϩʔμʔʯͱݺ͹Ε·͢ 112
113. --module - ར༻ՄೳͳϞδϡʔϧϩʔμʔ͸ɺjsΛ࣮ߦ͢Δ؀ڥʹΑͬͯҟͳͬͯ͠ ·͏ͷ͕ݱঢ়Ͱ͢ - TypeScript͸ɺ͜ΕΒͷ࣮ߦ؀ڥࠩҟΛٵऩ͢ΔͨΊʹɺ - ιʔείʔυ͸ES2015ελΠϧͰهड़ - tsconfig.jsonͷmoduleઃఆͰɺϥϯλΠϜͰར༻͢ΔϞδϡʔϧϩʔ μʔΛઃఆɻτϥϯεύΠϧͰม׵͞ΕΔ 113
114. --module - moduleઃఆͷ࢖͍෼͚ྫ - ԋश1Ͱ͸ɺNode.jsͰಈ࡞ͤ͞ΔͨΊʹ module: “commonjs”Λઃ ఆ - ԋश2Ͱ͸ɺϒϥ΢βͷ<script type=“module”>ػೳΛ࢖ͬͯಡΈ ࠐΉͨΊʹɺ module: “esnext”Λઃఆ 114
115. ʢ༨ஊʣଞͷ--moduleୡ - --module ʹ͸ “amd” / “umd” / “system” ͷ஋΋બ୒ՄೳͰ͢ɻ…͕໓ଟ ʹ࢖͏͜ͱ͸ͳ͍Ͱ͢ - ڵຯ͕͋ͬͨΒɺ“RequireJS” ͱ͔ “SystemJS” Ͱௐ΂ͯΈΔͱྑ͍ͱࢥ ͍·͢ 115
116. TypeScriptͱͯ͠ͷϞδϡʔϧ - ग़ྗ͞ΕΔJavaScriptͷܗࣜͱ͸ผʹʮ.tsϑΝΠϧ͕Ϟδϡʔϧͱͯ͠ղ ऍ͞ΕΔ͔Ͳ͏͔ʯͱ͍͏ج४͕͋Γ·͢ - ʮimport / export એݴͷແ͍.tsϑΝΠϧ͸ϞδϡʔϧͰ͸ͳ͍ʯͱ͍ ͏ͷ͸಄ͷย۱ʹͱͲΊ͓ͯ͘ͱྑ͍Ͱ͢ 116
117. TypeScriptͱͯ͠ͷϞδϡʔϧ - Ϟδϡʔϧͱͯ͠ղऍ͞ΕΔ.tsϑΝΠϧ - ϞδϡʔϧʹͳΒͳ͍.tsϑΝΠϧ /* types.ts */ // Todo ΠϯλʔϑΣΠε͸Ͳ͔͜ΒͰ΋ࢀরՄೳ interface Todo { name: string; } /* types.ts */ // Todo ΠϯλʔϑΣΠε import ͠ͳ͍ͱࢀরͰ͖ͳ͍ export interface Todo { name: string; } 117
118. TypeScriptͱϏϧυΤ ίγεςϜ 118
119. ͳͥԶͨͪ͸Ϗϧυ͢Δͷ͔ - JavaScriptͷϏϧυྺ࢙͸ׂͱҋ͕ਂ͍Ͱ͢ - ଠݹͷੲ - AltJS͕ྲྀߦΔલ͸ɺ։ൃऀ͕ॻ͍ͨ.jsϑΝΠϧΛͦͷ··HTMLͷ <script>λάͰಡΈࠐΜͰ͍·ͨ͠ 119
120. ๲Ε্͕Δ.js - ΑΓϦονͳମݧ͕webʹٻΊΒΕΔʹͭΕɺಡΈࠐ·ΕΔJavaScript ϑΝΠϧ͸ॏް௕େԽͷҰ్ΛḷΓ·͢ɻ͜Εʹ൐͍৭ʑͳ՝୊͕ු্͠ ·ͨ͠ - μ΢ϯϩʔυ͞ΕΔϑΝΠϧͷαΠζΛݮΒ͍ͨ͠ - ϑΝΠϧΛ෼ׂͯ͠։ൃ͍͕ͨ͠ɺ<script>λάͷಡΈࠐΈճ਺͸গͳ ͍ͨ͘͠ - ผݴޠʢAltJSʣͰޮ཰తʹ։ൃ͍ͨ͠ - etc… 120
121. Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… - ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 121
122. Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… - ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 122 ͱʹ͔͘৭ʑ͋ͬͨʂ
123. Module bundler - αʔόʔαΠυJavaScriptͰ͋ΔNode.jsͷීٴͱɺ Node.jsʹ͓͚ΔϞδϡʔϧػߏʹΠϯεύΠΞ͞Ε ͯɺbrowserifyͱ͍͏πʔϧ͕ҰੈΛ෩ᴆ͠·ͨ͠ - ιʔείʔυதͷ require(‘…’) Λ੩తղੳͰ୳ࡧ͠ɺ require͞Ε͍ͯΔґଘscriptΛ݁߹͢Δ͜ͱͰɺ୯Ұ ͷ.jsϑΝΠϧΛੜ੒͠·͢ 123
124. Module bundler - browserifyͷొ৔Ҏ߱ɺґଘؔ܎Λղܾͯ͠ϑΝΠϧΛ·ͱΊΔπʔϧ ͕਺ଟ͘࡞ΒΕ͍ͯ·͢ɻʮϞδϡʔϧόϯυϥʯͱ૯শ͞Ε·͢ɻ - webpack, rollup.js, fusebox, Parcel, etc… 124
125. webpack - webpack ͸ۙ೥޿͘࢖ΘΕ͍ͯΔϞδϡʔϧόϯυϥͰ͢ - https://webpack.js.org/ - JavaScript / AltJS͚ͩͰͳ͘ɺը૾΍CSSͳͲ༷ʑͳϑΝΠ ϧΛΞηοτͱͯ͠όϯυϧϑΝΠϧʹऔΓࠐΊ·͢ 125
126. webpack - webpackͰͰ͖Δ͜ͱʢҰ෦ൈਮʣ: - AltJSΛτϥϯεύΠϧͭͭ͠ɺόϯυϧΛ࡞੒͢Δ - όϯυϧʹରԠ͢ΔιʔεϚοϓϑΝΠϧΛ࡞੒͢Δ - ೉ಡԽΛࢪͯ͠࠷ऴతͳϑΝΠϧαΠζΛখ͘͢͞Δ - Node.jsͷAPIΛҰ෦ϒϥ΢β޲͚ʹఏڙ͢Δ 126
127. ࠷ۙͷࣄ৘ - ۙ೥Ͱ͸ɺECMAScriptͷimport/exportߏจ΍ϒϥ΢βͷ<script type=“module”>ͱ͍ͬͨඪ४Խ͕ਐΈɺόϯυϥʹཔΒͳ͘ͱ΋Ϟ δϡʔϧΛར༻Մೳʹͳ͖ͬͯ·ͨ͠ʢIEআ͘ʣ - ͱ͸͍͑ɺimport ͷ࿈࠯͕ਂ͘ͳΔͱɺϒϥ΢β͕࠷ޙͷϞδϡʔϧʹ ౸ୡ͢Δ·Ͱʹ͕͔͔࣌ؒͬͯ͠·͍·͢※1 ɻ͜ͷҙຯͰɺϑΝΠϧΛ ·ͱΊΔϞδϡʔϧόϯυϥ͸౰෼ඞཁͱ͞Ε͚ͭͮΔͰ͠ΐ͏ - ※1 https://docs.google.com/document/d/1ds9EEkcDGnt-iR8SAN-_7nsOfw7gsMfhZjzZ_QAIyjM/ mobilebasic 127
128. ʢ༨ஊʣ஗Ԇͱ౤ػ - Ұ֓ʹ͢΂ͯͷJavaScriptϑΝΠϧΛ୯ҰϑΝΠϧʹόϯυϧ͢Ε͹Α ͍ɺͱ͍͏༁Ͱ͸͋Γ·ͤΜɻద੾ͳ࢖͍෼͚͕ॏཁͰ͢ - ʮࣄલʹඞཁͱͳΔ͜ͱ͕Θ͔͍ͬͯΔϞδϡʔϧʯΛ౤ػతʹfetch ͢Δ - ʮϢʔβʔʹͱͬͯຊ౰ʹඞཁͱͳΔ·Ͱʯμ΢ϯϩʔυΛ஗Ԇͤ͞ Δ 128
129. ԋश3 129
130. ԋश3 - ԋश1Ͱ࣮૷ͨ͠todoMVCΞϓϦΛwebpackͰ୯Ұͷ.jsϑΝΠϧʹͯ͠ ͍ͩ͘͞ - Chromeͷ։ൃऀπʔϧͰɺ΋ͱͷTypeScriptίʔυͷιʔεϚοϓΛද ࣔͰ͖ΔΑ͏ʹͯ͠Έ͍ͯͩ͘͞ 130
131. t ୯ҰͷKTϑΝΠϧ ιʔεϚοϓ
132. ԋशͷ΍Γ͔ͨ - repositoryΛcloneʢԋश2ͱಉ͡ͱ͜Ͱ͢ - https://github.com/recruit-tech/bootcamp-2020-ts.git - cd client - npm i webpack webpack-cli ts-loader -D 132
133. ԋशͷ΍Γ͔ͨ - webpack.config.jsͱ͍͏ઃఆϑΝΠϧͷ࡞੒͕ඞཁͰ͢ - https://webpack.js.org/guides/typescript/ ͳͲΛಡΈͭͭਐΊͯΈͯ ͍ͩ͘͞ 133
134. Α͘Ұॹʹ࢖ΘΕΔ πʔϧୡ
135. ίʔυ඼࣭ - ʮ੩తͳܕ෇͚ʯͱ͍͏ಛੑ্ɺن໛ͷେ͖͍ϓϩδΣΫτͰͦ͜ TypeScript͸ͦͷਅՁΛൃش͠·͢ - ෳ਺ͷ։ൃऀ͕ܞΘΔϓϩδΣΫτͰ͸ɺίʔυͷ඼࣭ΛҰఆʹอͭͨ Ίʹ༷ʑͳ޻෉͕ඞཁͱͳΓ·͢
136. ESLint - ESLint ͸ASTʢந৅ߏจ໦ʣΛ༻͍ͨίʔυͷνΣοΫπʔϧͰ͢ɻې ࢭ͍ͨ͠ίʔυύλʔϯΛϧʔϧͱͯ͠ొ࿥ͯ͠ར༻͠·͢ - ϧʔϧͷྫ: - consoleΛ࢖Θͳ͍͜ͱ - ࠶୅ೖ͠ͳ͍ม਺ʹ͸letͰ͸ͳ͘constΛ༻͍Δ͜ͱ - TypeScriptͱESLintΛซ༻͢Δ৔߹ɺhttps://github.com/typescript- eslint/typescript-eslint Λ࢖͍·͢
137. Prettier - Prettier͸ιʔείʔυΛػցతʹϑΥʔϚοτ͢ΔͨΊͷπʔϧͰ͢ - ԼهͷΑ͏ͳෆໟͳٞ࿦ʹࠨӈ͞Εͳ͍ͨΊʹ΋ɺίϛοτ࣌ʹίʔυ ΛࣗಈͰϑΥʔϚοτ͓ͯ͘͠श׳Λ͚͓ͭͯ͘ͷ͸ྑ͍͜ͱͰ͢ - ʮจࣈྻϦςϥϧ͸γϯάϧΫΥʔτ or μϒϧΫΥʔτʯ - ʮηϛίϩϯΛจͷ຤ඌʹ͚ͭΔ΂͖͔ʯ - Prettier͸ඪ४ͰTypeScriptʹରԠ͍ͯ͠·͢
138. ࣗಈੜ੒౳ - ԋश1ͱԋश2ͰݟͨΑ͏ʹɺ֎෦ͱͷ௨৴͕ൃੜ͢ΔՕॴ͸anyʹͳΓ ͕ͪͰ͢ - ௨৴ϓϩτίϧʹ߹ΘͤͯɺIDL͔ΒTypeScriptͷܕΛੜ੒͢Δπʔϧ΋ ଟ਺ଘࡏ͠·͢ - e.g. OpenAPI(Swagger), GraphQL, TypeORM, etc…
139. ͓ΘΓʹ
140. ͓ΘΓʹ - ࠓ೔͸ԼهͳͲΛத৺ʹֶΜͰ͖·ͨ͠ - TypeScriptͷجຊจ๏ - طଘͷJavaScriptίʔυʹܕΛಋೖ͢Δํ๏ - TypeScriptͷϓϩδΣΫτʹ͓͚ΔϏϧυͷํ๏ - ࣌ؒͷ౎߹্ɺ৮Ε͍ͯͳ͍τϐοΫ΋·ͩ୔ࢁ͋Γ·͢ɻؾʹͳΔ ςʔϚ͕͋ͬͨΒɺੋඇࣗ෼Ͱௐ΂ɺʢՄೳͰ͋Ε͹ʣखΛಈ͔ͯ͠Έ ͍ͯͩ͘͞