TypeScript

2022年度リクルート エンジニアコース新人研修の講義資料です

Transcript

1. TypeScript Bootcamp 2022 1
2. ߨࢣ - ໊শɿ૔ݟ༸ี ʢ@Quramy / ͘ΒΈʔ ͱݺ͹ΕΕΔ͜ͱ͕ଟ͍ʣ - ॴଐɿԣஅΤϯδχΞϦϯά෦ ASG - ৬ྺɿϦΫϧʔτʹདྷͨͷ͸2020/2݄ɻ ࠃ಺SIer -> Webܥϕϯνϟʔ2ࣾʹ͍·ͨ͠
3. QuramyͱTypeScript - 2015೥3݄5೔͔ΒTS΍ͬͯ·͢ - ౰࣌͸VSCͳ͔ͬͨͨΊɺVim޲͚ͷTypeScript pluginΛॻ͍ͨΓ - ࠷ۙ΋ESLint޲͚ͷΤσΟλ֦ு΍GarphQL༻ͷΤσΟλ֦ுΛ࡞ͬͨ Γ͍ͯ͠·͢ɻASTܥͷٕज़ׂ͕ͱಘҙͰ͢ - https://github.com/microsoft/TypeScript-Website ͰTSຊՈαΠτͷ຋ ༁׆ಈΛ͍ͯͨ࣌͠ظ΋ʢͨͩ͠࠷ۙશવܞΘͬͯͳ͍ʣ
4. ͳʹ΍Δͷ - ຊߨ࠲Ͱ͸ԼهΛֶΜͰ͍͖·͢ - TypeScriptͷجຊతͳจ๏΍ίʔυͷॻ͖ํʢ࠲ֶ + ԋशʣ - TypeScriptʹؔ܎͢ΔϑϩϯτΤϯυπʔϧνΣΠϯʢ࠲ֶͷΈʣ 4
5. ΍Βͳ͍͜ͱ - ෳࡶոحͳܕૢ࡞ - VSCͳͲɺಛఆΤσΟλͷศརػೳ঺հ - TypeScriptࣗମͷAPI
6. ࠓ೔ͷΰʔϧ ʮίϯύΠϧΤϥʔ͸ૂͬͯ֫Γʹ͍͘΋ͷͩʯ ͜ͷײ֮Λ਎ʹண͚ͯؼ͍ͬͯͩ͘͞
7. ໨࣍ 1. TypeScript is Կ 2. TypeScriptʹ৮ΕΔ ※ 3. ܕͷૢ࡞ ※ 4. ϥΠϒϥϦͷܕఆٛ 5. TypeScriptͱϞδϡʔϧ 6. TypeScriptͱϏϧυΤίγεςϜ
8. TypeScript is Կ 8
9. TypeScript - Microsoft͕։ൃɾϝϯςφϯε͍ͯ͠Δϓϩάϥϛϯάݴޠ - ੩తͳܕ෇͚ - JavaScriptʹͳΔ 9
10. TypeScript is Alt JS - TypeScriptͷιʔείʔυ͸JavaScriptʹίϯύΠϧ͞Ε·͢ɻʮτϥϯ εύΠϧʯͱ΋ݺͿ͜ͱ΋͋Γ·͢ - ੜͰJavaScriptΛॻ͔ͣʹɺผݴޠͰॻ͍ͯJavaScriptΛੜ੒͢ΔΞϓ ϩʔν͸Alt JSʢ͓Δͱ͐͡ʔ͑͢ʣͱݺΜͩΓ͢Δ͜ͱ΋ 10
11. ͍ͬͺ͍͋Δͧ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ʹ ܉഑্͕͕Γͭͭ͋Δؾ഑ 11
12. ͦͦ͜͜ਓؾ΋͋Δ Developers who are developing with the language or technology and have expressed interest in continuing to develop with it 12 https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages
13. ͳΜͰTypeScript࢖͏ͷʁ - शಘ͕ൺֱత͔ΜͨΜ - ૉͷJavaScriptίʔυ͸ਖ਼͍͠TypeScriptίʔυ - JavaScriptͱ஍ଓ͖ͰशಘͰ͖Δʂ 13
14. ·ͣ͸৮ͬͯΈΑ͏ - TypeScript Playground ʹ͓खܰ؀ڥ͕͋Γ·͢ - ৮ͬͯΈΑ͏Playgroundɿ - Run / LogsͰ࣮ߦΛ֬ೝ͠Α͏ - JSλϒ͔ΒτϥϯεύΠϧ͞ΕͨJavaScriptίʔυΛ֬ೝ͠Α͏ 14
15. ͳΜͰTS࢖͏ͷʁͨͩͷJS͡Όμ ϝͳͷʁ - TypeScriptͷྑ͍ͱ͜Ζɿ - ܕνΣοΫ͕Ͱ͖Δʂʂʂ - ݹ͍ϒϥ΢βͰ΋ಈ͘ʂʂʂ - ΤσΟλαϙʔτ͕༏लʂʂʂ 15
16. ܕνΣοΫ͕Ͱ͖Δ - JavaScript͸ಈతܕ෇ݴޠ - ࣮ߦ͢Δ·ͰΘ͔Βͳ͍͜ͱ͕͍ͬͺ͍ 😇 🤔 hoge͸είʔϓʹఆٛ͞Εͨม਺ ʁ 🤔 hoge͸objectͰɺfooͱ͍͏ϓϩύςΟ͕ଘࡏ͍ͯ͠Δʁ 🤔 hoge.foo͸ؔ਺ͱ࣮ͯ͠ߦͰ͖Δʁ console.log(hoge.foo()); 16
17. ܕνΣοΫ͕Ͱ͖Δ - TypeScript͸੩తʹܕΛ෇༩ͯ͠ɺhoge.foo() ͕࣮ߦͰ͖Δ͔Ͳ͏͔ ΛιʔείʔυͷϨϕϧͰνΣοΫ͠·͢ - ʮܕΤϥʔͰౖͬͯ΋Β͑Δʯͷ͸޾ͤͳ͜ͱͰ͢ - ςετ͕ޮ཰తʹʢςετ͠ͳ͍͍ͯ͘ͱ͍͏༁Ͱ͸ͳ͍ʣ - ಈతݴޠʹܕΛ༩͑ͯɺ੩తʹνΣοΫͰ͖ΔΑ͏ʹ͢Δ͜ͱΛ઴࣍త ܕ෇ʢGradual typingsʣͱ͍͍·͢ 17
18. ܕνΣοΫ͸બ΂Δ - TypeScript as ઴࣍తܕ෇ͷΑ͍ͱ͜Ζɿ - طଘͷJavaScript͚ͩͰॻ͔ΕͨιʔείʔυʹঃʑʹܕΛ෇͚͍͚ͯΔ - ৽نϓϩδΣΫτͰ͸ɺ࠷ॳ͔Β੩తܕ෇ݴޠͱಉ͡Α͏ʹ࢖͏͜ͱ΋ Ͱ͖Δ - TypeScript as ઴࣍తܕ෇ͷ஫ҙ఺ɿ - ॴḨ͸ޙ෇ͷػߏɻJavaScriptͷࣗ༝౓ͱ૬൓͢ΔՕॴ΋͋Δ͠ɺӕͭ ͍ͯܕγεςϜ͕ὃ͞ΕΔ͜ͱ͢Β͋Γಘ·͢ 18
19. Downleveling - τϥϯεύΠϧͷաఔͰɺ৽͍͠࢓༷ͷJavaScriptߏจΛɺݹ͍ϒϥ΢ βͰ΋ಈ࡞͢ΔΑ͏ʹม׵͠·͢ - e.g. async / await ͸InteretExplorerͰ͸ಈ࡞͠·ͤΜ͕ɺTypeScript ͕ؤுͬͯίʔυΛม׵ͯ͘͠Ε·͢ 19
20. Downleveling - ʮ·ͬͨ͘downlevelΛߦΘͳ͍ʯͱ͍͏ઃఆ΋ՄೳͰ͢ - ͜ͷ৔߹ɺग़ྗ͞ΕΔJavaScriptϑΝΠϧͷίʔυ͸ɺݩͷTypeScript ίʔυͱຆͲࠩ෼͕ແ͍ঢ়ଶʹͰ͖·͢ - ݴ͍׵͑ΔͱʮͦͷؾʹͳΕ͹͍ͭͰ΋ࣺͯΔ͜ͱ͕Ͱ͖Δʯπʔϧ Ͱ͢ 20
21. ΤσΟλαϙʔτ͕༏ल - TypeScriptͦͷ΋ͷʹҎԼͷػೳؚ͕·Ε͍ͯΔͷͰɺΤσΟλ͕շదͰ͢ - ΤϥʔνΣοΫ - ิ׬ - ఆٛδϟϯϓ - ࢀরՕॴͷදࣔ - ϦϑΝΫλϦϯάิॿػೳ - etc… 21
22. ΤσΟλαϙʔτ͕༏ल - ʢ༨ஊʣ - TypeScriptͷݴޠαʔϏεʢtsserverʣ΍C#ͷ࢓૊ΈΛݩʹɺ LSP(Language Service Protocol) ͱ͍͏ʮΤσΟλͱϓϩάϥϛϯά ݴޠؒͷΠϯλʔϑΣʔεʯ͕ੜ·Εͨ΄Ͳ - ࢒೦ͳ͜ͱʹTypeScript͸LSP४ڌ͍ͯ͠·ͤΜ 22
23. TypeScriptͷΞϑΥʔμϯε - UI/UXͷੈքͰ͸ʮϢʔβʔʹ஌֮Λଅ͢؀ڥɾͦΕ͕΋ͨΒ͢Ձ஋ʯ ͷ͜ͱΛΞϑΥʔμϯεͱݺͿ͜ͱ͕͋Γ·͢ʢe.g. υΞͱϊϒʣ - TypeScript͸ʮΤϥʔΛૉૣ͘දࣔ͢Δʯʮิ׬ՄೳͳΩʔϫʔυ΍ม ਺໊Λදࣔ͢Δʯͱ͍͏ԸܙΛ΋ͨΒ͠·͢ - ͜Ε͸DeveloperʹΞϑΥʔμϯεΛఏڙ͍ͯ͠Δɺͱߟ͑Δ͜ͱ͕Ͱ ͖·͢
24. த·ͱΊ TypeScriptͬͯԿ ʮޙ෇ͰܕΛ෇͚Δ͜ͱͷͰ͖ΔڧԽ൛JavaScriptʯ 24
25. TypeScriptʹ৮ΕΔ 25
26. ͸͡Ίʹ - ͜ͷνϟϓλͰ͸ɺTypeScriptͷجຊతͳจ๏Λݟ͍͖ͯ·͢ - ʮ͜Μͳجૅจ๏͸஌ͬͯΔͥʂʯͬͯਓ͸ܕύζϧͰ༡ΜͰ͍ͯͩ͘͞ - TypeScript PlaygroundΛ࢖͍͖ͬͯ·͢ - https://www.typescriptlang.org/play 26
27. Playground৮Δͱ͖ͷ஫ҙ ͜ͷύʔτͰ͸ɺStrict Checks͸શ෦ONʹ͓͍͍ͯͯͩ͘͠͞ 27
28. Type annotation - TypeScriptͰ͸ɺܕΛ໌ࣔతʹએݴ͢Δ͜ͱΛʮܕ஫ऍΛ෇͚Δʯͱݴ ͍·͢ - ܕ஫ऍ͸৭ʑͳͱ͜Ζʹ෇༩Ͱ͖·͕͢ɺ·ͣ͸ؔ਺ͷҾ਺ʹܕ஫ऍΛ ෇༩ͯ͠Έ·͠ΐ͏ 28
29. Function parameters - ؔ਺ͷԾҾ਺ʹ஫ऍΛ෇༩ͯ͠Έ·͢ - 📝 PlaygroundͰԼهΛॻ͍ͯΈͯɿ function add(a: number, b: number) { return a + b; } console.log(add(100, 100)); 29
30. Function parameters - 📝 ஫ऍ͢ΔܕΛҎԼͷΑ͏ʹॻ͖׵͑ͯɺΤϥʔνΣοΫ͞ΕΔ͜ͱΛ ֬ೝͯ͠Έͯɿ function add(a: string, b: string) { return a + b; } 30
31. Type inference - ʮؔ਺ͷҾ਺ʹ͑͞ܕ͕͋Ε͹ଞ͸ਪ࿦͞ΕΔʯ͕TypeScriptܕਪ࿦ͷ جຊͰ͢ - ྫ͑͹ɺؔ਺໊ͷ্ͰϚ΢εΦʔόʔ͢Δͱɺ໭Γ஋ͱͳΔܕͷਪ࿦ ݁Ռ͕දࣔ͞Ε·͢ 31
32. ஫ऍͰ͖Δͱ͜Ζ - ଞʹ΋ : ܕ໊ Ͱ஫ऍͰ͖Δͱ͜Ζ͸৭ʑ͋Γ·͢ const a: string = "hoge"; let b: string; var c: string; function d(): string { return "hoge"; } class MyClass { e: string = ""; } 32
33. ஫ऍͱਪ࿦ͷিಥ - ஫ऍͨ͠ܕͱਪ࿦݁Ռ͕৯͍ҧ͏ͱɺίϯύΠϧΤϥʔʹͳΓ·͢ - 📝 ԼهͷίʔυͰΤϥʔʹͳΔ͜ͱΛ֬ೝͯ͠Έͯɿ - ى͖ͨΤϥʔΛमਖ਼͢Δʹ͸ͲͷΑ͏ʹ͢Ε͹ྑ͍Ͱ͠ΐ͏ʁ function add(a: number, b: number) { return a + b; } const a: string = add(100, 100); 33
34. Primitive types - ਺஋Ҏ֎ʹ΋ɺจࣈྻ΍ਅِ஋ͳͲ΋primitive typeͱͯ͠༻ҙ͞Ε͍ͯ ·͢ const bool: boolean = true; const num: number = 100; const str: string = "hogehoge"; const nullObj: null = null; const undefVal: undefined = undefined; 34
35. Function type - JavaScriptͷੈքͰ͸ɺؔ਺΋ΦϒδΣΫτͷҰछͰ͋Δ͜ͱ͔Βɺ TypeScriptʹ΋ʮؔ਺ࣗମͷܕʯ͕͋Γ·͢ - ྫɿ - ໭Γ஋͕ଘࡏ͠ͳ͍ؔ਺ͷ৔߹͸ɺ=> void ͱॻ͖·͢ (a: number, b: number) => number 35
36. Object / Array type const obj: { name: string, age: number } = { name: "Bob", age: 20, }; const arr: number[] = [1, 2, 3]; 36
37. Type alias - typeߏจͰܕʹผ໊Λ෇͚ͯ࠶ར༻Ͱ͖·͢ɻ”type alias” ͱݺ͹Ε· ͢ɻ͔ͳΓසൟʹ࢖͍·͢ - type໊͸େจࣈ͔Β։࢝͢Δͷ͕ҰൠతͰ͢ type Messages = string[]; function showMessages(msgs: Messages) { msgs.forEach(msg => console.log(msg)); } 37
38. ϛχԋश - 📝 ҎԼΛຬͨ͢ GetUser ͱ͍͏ؔ਺ܕΛॻ͍ͯΈͯ - input(=Ҿ਺): จࣈྻܕ - output(=໭Γ஋): ࣍ͷߏ଄Ͱఆٛ͞ΕΔΑ͏ͳUserܕ id จࣈྻ name จࣈྻ age ਺஋ isMarried ਅِ஋ 38
39. Class - Classߏจ͸ES2015͔ΒJavaScriptʹಋೖ͞Ε͍ͯ·͢ɻTypeScriptͰ΋ ClassΛѻ͏͜ͱ͕Ͱ͖·͢ - એݴͨ͠Class͸ܕͱͯ͠΋࢖͑·͢ʢJavaͱ͔ͱҰॹʣ 39
40. 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; } } 40
41. JavaScriptͷClassʹແ͍ػೳ - ϑΟʔϧυɾϝιουʹՄࢹੑ͕ઃఆͰ͖Δ - private / protected / public - ※ TypeScriptʹ͓͚Δprivateߏจ͸Soft PrivateɻͦͷؾʹͳΕ͹ΞΫ ηεͰ͖Δ - ந৅Ϋϥε / ந৅ϝιουΛఆٛͰ͖Δ - InterfaceΛ࣮૷Ͱ͖Δ 41
42. any - anyܕ͸TypeScriptʹ͓͚ΔϫΠϧυΧʔυͰ͢ - ͲΜͳܕͰ͋ͬͯ΋any΁୅ೖͰ͖·͢͠ɺanyܕͰ͋Δม਺͸͢΂ͯ ͷܕͱͯ͠ৼΔ෣͑ͯ͠·͍·͢ 42
43. any - ʮ͢΂ͯͷܕͱͯ͠ৼΔ෣͏͜ͱ͕Ͱ͖ΔʯͨΊɺܕʹؔ͢Δίϯύ ΠϧΤϥʔ͕͢΂ͯ཈ࢭ͞Ε·͢ - any͸TypeScriptʹ͓͚ΔඞཁѱͰ͢ɻ࢖͏ͱ͖͸ࡑѱײͰ৺Λগ͠௧ ΊΔΑ͏ʹ͠·͠ΐ͏ const fn: any = () => 100; const hoge: number = fn; 43
44. anyΛ࢖͏ͷ͕ଥ౰ͳέʔε - any͸ੑ࣭Λཧղͯ͠࢖͏෼ʹ͸ศརͳػೳͰ͢ - طଘͷJavaScriptϓϩδΣΫτ΁TypeScriptΛಋೖ͢ΔࡍʹɺͱΓ͋͑ ͣܕ஫ऍΛͯ͠͠·͍͍ͨʢ࣮૷ίʔυΛഁյͨ͘͠ͳ͍ʣ - ෳࡶͳؔ਺ͷ಺෦ͰҰ࣌తʹ࢖͏έʔεɻؔ਺ͷςετΛ͔ͬ͠Γͱ ߦ͍ͬͯͯɺ͔ͭҾ਺ͱ໭Γ஋ͷܕ͕ͪΌΜͱॻ͍ͯ͋Ε͹໰୊ͳ͍ - ͍ͣΕʹͤΑʮanyͷӨڹ͸ہॴతʹԡ͓͑ͯ͘͞ʯ͕TypeScriptͱ͏· ͘෇͖߹͍ͬͯ͘ίπͰ͢ 44
45. ୅ೖՄೳͱ͸Կ͔ - TypeScriptͷܕγεςϜ͸Structual Subtypingʢߏ଄త෦෼ܕʣͱ͍͏ ํࣜΛ࠾༻͍ͯ͠·͢ʢରٛޠ͸Nominal Subtypingʣ - TypeScriptͰ͸ɺผʑͷ৔ॴͰఆٛ͞Εͨ interface΍typeͰ͋ͬͯ΋ɺ ֤ϑΟʔϧυͷத਎͕߹͍ͬͯ͑͞Ε͹ͦΕͧΕ୅ೖՄೳͰ͋Δ ʢassignableʣɺͱΈͳ͞Ε·͢ 45
46. ୅ೖՄೳͱ͸Կ͔ - assignableͷྫ: - showMessageؔ਺͸ɺจࣈྻܕͰ͋Δmessageͱ͍͏ϑΟʔϧυΛ ࣋ͬͨܕͰ͋Ε͹ɺԿͰ΋୅ೖՄೳ type SomeType = { message: string; }; function showMessage(obj: SomeType) { console.log(obj.message); } showMessage({ message: “Hello!" }); 46
47. ୅ೖՄೳͱ͸Կ͔ - 📝 લϖʔδͷྫͰɺԼهΛ௥هͯ͠΋ίϯύΠϧ͕௨Δ͜ͱΛࢼͯ͠Έ ͯ showMessage(new Error("error!")); 47
48. (͓·͚) ߏ଄త෦෼ܕͰࠔΔ৔߹ - ʢ࣌ؒʹ༨༟͕͋ͬͨΒʣߟ͑ͯΈͯ - ߏ଄త෦෼ܕͷσϝϦοτΛڍ͛ͯΈͯ - ߟ͍͑ͭͨσϝϦοτΛTypeScriptͰΧόʔ͢ΔͨΊʹ͸ɺͲ͏͢Ε ͹Α͍͔ʁ 48
49. 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; 49
50. Interface v.s. Type alias - 📝 લϖʔδͷ IHoge interface ͱ HogeType ʹ͍ͭͯɺPlayground্Ͱ ͷҧ͍Λ୳ͯ͠Έͯ - 📝 લϖʔδͷྫʹɺԼهΛ௥هͨ͠ͱ͖ʹͲ͏ͳΔ͔֬ೝͯ͠Έͯ interface IHoge { errorCode: number; } 50
51. Θ͔Βͳ͍ॴ͕͋Δ࣌͸ - ֮͑Δۙಓ͸ɺTypeScriptͰԿ͔Λ࣮૷ͯ͠ΈΔ͜ͱͰ͢ - ެࣜαΠτʢhttp://www.typescriptlang.org/docs/homeʣͷϋϯυϒο ΫΛோΊͯΈΔͷ΋͋Γ - twitterͰ #typescript λάΛ෇͚ͯᄁ͍ͨΒɺ୭͔͕रͬͯ͘ΕΔ͔΋͠ Ε·ͤΜ 51
52. ԋश 1 52
53. ԋश1 - ԋश໰୊ͷࢿྉͷ৔ॴͳͲ͸ɺߨٛதʹ࿈ܞ͠·͢ 53
54. ʢิ଍ʣඪ४ APIͱTypeScript - TypeScript ࣗମʹඪ४ APIͷܕ͕όϯυϧ͞Ε͍ͯ·͢ - JavaScriptʢECMAScriptʣͷඪ४ API - DOM API΍fetchͳͲɺϒϥ΢βʹඪ४ͰඋΘ͍ͬͯΔAPI 54
55. ৼΓฦΓ - ʢճ౴ྫΛ΋ͱʹߨٛதʹઆ໌ʣ
56. ܕͷૢ࡞ 56
57. ͸͡Ίʹ - ͜ͷνϟϓλʔͰ͸ɺ࣮ࡍʹίʔυΛॻ͘ͱ͖ʹɺܕΛͲͷΑ͏ʹѻͬ ͍ͯ͘ͷ͔ʹ͍ͭͯઆ໌͍͖ͯ͠·͢
58. Type error - JavaScriptͷϓϩάϥϜͰ΋ͬͱ΋සൟʹੜ͡Δόά͸ɺnull ·ͨ͸ະ ఆٛͷม਺ʹରͯ͠ɺ஋͕ଘࡏ͢ΔલఏͰΞΫηεͯ͠͠·͏έʔεͰ ͢ - ʢ༨ஊʣTony Hoare ᐌ͘ʮNullࢀর͸࠷େͷޡΓͩͬͨɻίϯύΠϧ Ͱ͢΂ͯνΣοΫͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ʯ - https://www.infoq.com/presentations/Null-References-The-Billion-Dollar-Mistake-Tony- Hoare/ 58 Uncaught TypeError: Cannot read property ‘hoge' of undefined
59. Optional - ͜ͷखͷType errorͱઓ͏ͨΊʹ͸ɺʮ͜ͷม਺͸ଘࡏ͠ͳ͍͔΋͠Ε ͳ͍ͧʯͱ͍͏͜ͱΛTypeScriptܕγεςϜʹڭ͑ࠐΉඞཁ͕͋Γ·͢ - type΍interfaceʹͯɺϓϩύςΟ໊຤ඌʹ?Λ෇༩͢Δͱɺʮଘࡏ͠ͳ ͍͔΋͠Εͳ͍ʯͱ͍͏ҙຯʹͳΓ·͢ 59
60. Optional - ΦϓγϣϯͷstrictNullCheck͕trueͷ৔߹ɺOptionalͳ஋Λ͍͖ͳΓૢ ࡞͠Α͏ͱ͢ΔͱTypeScript͕ίϯύΠϧΤϥʔʹͯ͘͠Ε·͢ ʢίϯύΠϧΤϥʔ͸͝๙ඒͩͱࢥ͍·͠ΐ͏ʣ function fn(args: { message?: string}) { // ࣄલʹargs.messageͷଘࡏΛνΣοΫ͢Δඞཁ͕͋Δ if (!args.message) return ""; return args.message.toLowerCase(); } fn({}); // messageΛলུՄೳ 60
61. ͦͷଞͷOptionalදݱ - ϓϩύςΟ໊ޙͷ ? Ҏ֎ʹ΋Optionalม਺Λදݱ͢Δํ๏͕͋Γ·͢ - ※ ύΠϓه߸ͷҙຯ͸ޙड़͠·͢ // ؔ਺ͷoptionalҾ਺ function hoge(a: number, b?: number) { } // null ΍ undefined ͱͷUnion type X = string | undefined; type Y = string | null;
62. strictNullCheck ʹ͍ͭͯ - strictNullChecks͸ɺࢀর͍ͯ͠Δ஋ͷܕʹnull ·ͨ͸ undefined͕୅ೖ Մೳͳ৔߹ʹɺͦͷ஋ͷૢ࡞Λ੍ݶ͢ΔػೳͰ͢ - TypeScriptͷσϑΥϧτઃఆͰ͸ɺstrictNullCheck͸ONͰ͢ - جຊతʹ͸༗ޮʹ͓͍ͯͨ͠ํ͕ྑ͍ػೳͰ͕͢ɺطଘͷJavaScriptϓ ϩδΣΫτʹޙ෇ͰTypeScriptΛಋೖ͢Δ৔߹͸ɺҰ୴offʹ͢Δͷ΋Ξ ϦͰ͢ 62
63. Modifiers - ܕఆٛͰͷ ? ͸optional modifierͱݺ͹Ε·͢ - modifierʹ͸optionalҎ֎ͷmodifierͱͯ͠ɺreadonlyͱ͍͏ͷ΋͋Γ· ͢ʢʮSoftͳʯ࣮૷Ͱ͋ΔͨΊɺτϥϯεύΠϧޙͷjs͔Β͸ॻ͖׵͑Մೳʣ type Hoge = { m1: string; m2?: string; readonly m3: string; readonly m4?: string; }; 63
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 64
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"; 65
66. ܕͷߜΓࠐΈ - Union Type͸ɺifจ΍switchจͰ஋ΛνΣοΫ͍ͯ͘͜͠ͱͰɺΑΓৄࡉͳ ܕ΁ߜΓࠐΉ͜ͱ͕Ͱ͖·͢ɻ͜ΕΛType NarrowingͱΑͼ·͢ - strictNullCheckͰઆ໌ͨ͠ifจʹΑΔߜΓࠐΈ΋Type NarrowingͷҰछͰ͢ function fn(input: string | number) { console.log(input.toString()); if (typeof input === "number") { console.log(200 * input); } else { console.log(input.trim()); } } 66
67. Type Narrowingͷछྨ - ͍͔ͭ͘ͷߏจ͕Type Narrowingͱͯ͠ར༻Ͱ͖·͢ɿ - 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"; } 67
68. ϛχԋश̍ - 📝 ҎԼͷؔ਺͸ type ʹԠͯ͡ɺpayload ͷܕ͕ҟͳΓ·͢ɻ ίϯύΠϧ͕௨ΔΑ͏ʹɺAction ͷܕΛߟ͑ͯΈͯ 68 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; } };
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, ); } 69
70. Ωϟετ - จࣈྻͷLiteral Type͸stringܕʹ୅ೖՄೳͰ͕͢ɺ stringܕ͸จࣈྻͷLiteral Typeʹ͸୅ೖͰ͖·ͤΜ - ʮ୅ೖՄೳʯ͸ɺSub Typeʢ۩৅ʣˠ Super Typeʢந৅ͳܕʣͷํ޲ ʹݶఆ͞ΕΔ͔ΒͰ͢ type SomeString = "some string"; const x: SomeString = "some string"; const y: string = x; const z: SomeString = y; Super type Sub type type SomeString string
71. Ωϟετ - ͜ͷΑ͏ͳ৔߹ɺม਺ͷޙΖʹ as ܕ໊ Λ෇༩͢Δ͜ͱͰܕΛม׵Ͱ͖ ·͢ʢਖ਼ࣜʹ͸ ΩϟετͰ͸ͳ͘ɺType Assertion ͱݺ͹ΕΔػೳʣ Super type Sub type type SomeString string type SomeString = "some string"; const x: SomeString = "some string"; const y: string = x; const z = y as SomeString;
72. asͷ੍໿ - asͰม׵Ͱ͖Δͷ͸ɺSuper Type → Sub Type ͷ৚͕݅ຬͨ͞ΕΔͱ͖ ͷΈͰ͢ - e.g. numberܕ͸stringܕʹม׵Ͱ͖·ͤΜ Super type Sub type type SomeString string
73. Narrowing v.s. Assertion - Type Narrowing ΋ Type Assertion ΋ʮม਺ͷܕΛΑΓڱ͍ܕʹ͢Δʯ ͱ͍͏ޮՌΛಘΔ͜ͱ͕Ͱ͖·͢ - Type Narrowing: JavaScriptͷ੍ޚߏจʹԊͬͨܗࣜͰͷࣗવͳܕͷߜ ΓࠐΈ - Type Assertion: ։ൃऀʹΑΔ(֎෦ͷ஌ࣝΛར༻ͨ͠)൒ڧ੍తͳߜΓ ࠐΈ
74. Intersection Type - Union Type͸ܕͱܕͷ࿨Ͱ͕͢ɺܕͱܕͷੵ΋ଘࡏ͠·͢ - ه߸ & Ͱෳ਺ͷܕΛ࿈݁͢ΔͱɺIntersection TypeʹͳΓ·͢ - type A & B ͸ɺʮAʹ΋Bʹ΋assignableʯͳܕͰ͢ 74
75. Bottom Type - neverܕ͸ʮ͢΂ͯͷܕͷSub Typeʯͱͯ͠ѻΘΕ·͢ɻ͢΂ͯͷܕ͕ never΁୅ೖͰ͖·͕͢ɺnever͸neverҎ֎ͷ͢΂ͯͷܕʹ୅ೖͰ͖· ͤΜ - Type Narrowingͷ݁Ռɺ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ͱҰॹͰ͕͢ɺT ܕͷݕূΛ͠ͳ͍ͱར༻ෆՄೳͱ͍͏఺Ͱ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. ԋशͷલʹ - ։ൃ؀ڥ͕੔͍ͬͯΔ͜ͱΛ֬ೝ͠·͠ΐ͏ - ҎԼͷίϚϯυ͸ར༻ՄೳͰ͔͢ʁ - git - node --version - ΤσΟλ: - ͩ͜ΘΓ͕ແ͚Ε͹ɺVisual Studio Code Λ࢖͍ͬͯͩ͘͞ 84
85. ԋश2 - repositoryΛclone - https://github.com/recruit-tech/bootcamp-2021-ts - clonseͨ͠Βɺcloneͨ͠σΟϨΫτϦʹҠಈͯ͠ҎԼΛ࣮ߦ - npm i - npm run dev 85
86. ৼΓฦΓ - ʢճ౴ྫΛ΋ͱʹߨٛதʹઆ໌ʣ
87. ΋ͬͱߴ౓ͳܕ 87
88. Advanced type - ࠓ೔͸ׂѪ͠·͕͢ɺܕγεςϜʹ͸ΑΓߴ౓ͳػೳ΋༻ҙ͞Ε͍ͯ· ͢ - Mapped Type: objectܕͷkeyΛ࠶ར༻ͯ͠ผͷܕΛ࡞Δ - Conditional Type: ୅ೖՄೳੑͰܕΛύλʔϯϚον - Type Inference in Conditional Type: ύλʔϯϚονͨ͠ܕͷ࠶ར༻ - Template Literal Type: จࣈྻϦςϥϧͷܕԋࢉ 88
89. 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]) => { });
90. Advanced type - ͱ͸͍͑ɺ͜ΕΒͷڽͬͨػೳ͸ɺΞϓϦέʔγϣϯ࣮૷࣌ͷར༻ස౓ ͸͔ͳΓ௿͍Ͱ͢ɻඞཁ͕ੜ͔ͯ͡Β਎ʹ͚ͭΕ͹े෼ͱ͍͑·͢ - ҰํɺطଘJavaScriptϥΠϒϥϦʹܕఆٛ͸͜ΕΒͷςΫχοΫ͕׆༻ ͞Ε͍ͯΔ͜ͱ͕ଟ͍Ͱ͢ - ஶ໊ͳϥΠϒϥϦͷܕఆٛΛಡΉͷ͸शಘͷۙಓ͔΋͠Ε·ͤΜ
91. ༨ஊ - TypeScriptͷܕγεςϜ͸ɺͦΕࣗମ͕νϡʔϦϯά׬શͰ͢ - ͦͷؾʹͳΕ͹ɺԼهͷΑ͏ͳ΋ͷ͕࡞Εͯ͠·͍·͢ - ి୎ - ϥΠϑήʔϜ
92. ϥΠϒϥϦͷܕఆٛ 92
93. JavaScriptϓϩδΣΫτͱґଘϥ ΠϒϥϦ - JavaScriptͷϓϩδΣΫτΛਐΊΔࡍ͸ɺ΄΅࣮֬ʹ֎෦ͷϥΠϒϥϦ ʹґଘ͢Δ͜ͱʹͳΓ·͢ - ௨ৗɺNPMʢNode.jsͷύοέʔδϚωʔδϟʣʹެ։͞Ε͍ͯΔϥΠ ϒϥϦΛར༻͢Δέʔε͕ଟ͍Ͱ͢ - ֎෦ϥΠϒϥϦΛTypeScript͔Βར༻͢ΔͨΊʹ͸ɺʮܕఆٛϑΝΠ ϧʯ͕ඞཁʹͳΓ·͢ 93
94. ܕఆٛϑΝΠϧͱ͸ - ܕఆٛϑΝΠϧͱ͸ɺTypeScriptͷΞϊςʔγϣϯ৘ใͷΈ͕நग़͞Ε ͨϑΝΠϧͰ͢ - ֦ுࢠ͕.d.tsͱͳΔͨΊɺʮͰ͌ʔͯ͌ʔ͑͢;͍͊Δʯͱݺ͹ΕΔ͜ ͱ΋ଟ͍Ͱ͢ - ྫ: ʮjQueryͷ.d.tsΠϯετʔϧ͠๨ΕͯͶʁʯ 94
95. .d.ts - .d.tsϑΝΠϧΛੜ੒ͯ͠ΈΔ: - खݩͰద౰ͳTypeScriptͷϑΝΠϧΛ࡞Δ - tsc --declaration 95
96. types - ϥΠϒϥϦͷܕΛTypeScriptͰར༻͢Δํ๏͸େผ͢Δͱ3௨Γ͋Γ·͢ 1.NPM ύοέʔδʹܕఆ͕ٛಉࠝ͞Ε͍ͯΔ 2.NPMύοέʔδʹରԠ͢ΔܕఆٛΛୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε 3.ࣗ෼ͰܕఆٛΛ༻ҙ͢Δ 96
97. 1. NPM ύοέʔδʹܕఆ͕ٛಉ ࠝ͞Ε͍ͯΔ - npm install (ϥΠϒϥϦ໊) Λ࣮ߦ͢Δ͚ͩͰܕఆ͕ٛར༻ՄೳʹͳΓ· ͢ - ͜ͷखͷ΍ͭ͸ɺϥΠϒϥϦͷpackage.jsonʹ “types”: “index.d.ts” ͱ ͍ͬͨهड़͕͋Γ·͢ 97
98. 2. NPMύοέʔδʹରԠ͢ΔܕఆٛΛ ୈ3ऀ͕ఏڙ͍ͯ͠Δέʔε - ળҙͷୈ3ऀ͕ܕఆٛΛผ్ఏڙͯ͘͠Ε͍ͯΔέʔε͕͋Γ·͢ - https://github.com/DefinitelyTyped/DefinitelyTyped - npm i @types/(ϥΠϒϥϦ໊) ͰΠϯετʔϧ͠·͢ 98
99. 3.ࣗ෼ͰܕఆٛΛ༻ҙ͢Δέʔε - Ambient moduleએݴͱ͍͏ख๏Ͱࣗ෼ͰϥΠϒϥϦʹܕఆٛΛ༩͑Δ ͜ͱ͕Ͱ͖·͢ - গ͠ϚχΞοΫͳͷͰࠓ೔͸৮Ε·ͤΜ 99
100. ܕఆٛΛ୳͢ॱং /1.ύοέʔδʹܕఆٛ ͕ಉࠝ͞Ε͍ͯΔʁ %FpOJUFMZ5ZQFEʹ !UZQFTύοέʔδ͕͋Δʁ ͋Γ͕ͨ͘࢖͏ @types ͔ΒܕఆٛΛ ௥ՃΠϯετʔϧͯ͠࢖͏ ࣗ෼ͰܕఆٛΛॻ͘ yes yes no no 100
101. ܕఆٛ༗ແͷௐ΂ํ - npm ͷwebαΠτʹTSϚʔΫ͕͋Δύοέʔδʹ͸ɺܕఆ͕ٛಉࠜ͞Ε͍ͯ·͢ - Definitely Typed ʹ@typesύοέʔδ͕͋Δ৔߹͸ɺΞΠίϯͷද͕ࣔ “DT” ʹͳΓ· ͢ -
102. ܕఆٛϑΝΠϧͷ஫ҙ - ఏڙ͞Εͨܕఆ͕ٛຊମͷAPIΛ໢ཏ͍ͯ͠ͳ͍͜ͱ΋ɺ··͋Γ·͢ - e.g. ಛఆͷؔ਺ͷܕఆ͕ٛͬͦ͝Γൈ͚ͯΔ / anyͩΒ͚ / etc… - ͜ͷखͷέʔεʹ௚໘ͨ͠ΒɺܕఆٛΛमਖ਼͢ΔPRΛग़͠·͠ΐ͏ 102
103. TypeScriptͱ Ϟδϡʔϧ 103
104. JavaScriptͱʮϞδϡʔϧʯ - ͦ΋ͦ΋ɺJavaScriptͱ͍͏ݴޠʹ͸ʮϞδϡʔϧʯͱ͍͏֓೦͕௕Β ͘ଘࡏ͍ͯ͠·ͤΜͰͨ͠ - ECMAScript 2015ͱ͍͏όʔδϣϯͰॳΊͯϞδϡʔϧʹؔ͢Δߏจ͕ ࢓༷Խ͞Ε·ͨ͠ 104
105. ES2015 Ϟδϡʔϧ // calc.js // ϞδϡʔϧΛར༻͢Δଆ import { add } from “./add.js”; console.log(add(1, 2)); // add.js // ϞδϡʔϧΛఆٛ͢Δଆ export function add(a, b) { return a + b; }
106. JavaScriptͱʮϞδϡʔϧʯ - ECMAScriptͰϞδϡʔϧߏจ͕ඪ४ͰఆΊΒΕΔΑΓҎલ͔ΒɺಠࣗϞ δϡʔϧͱ΋͍͏΂͖ن͕֨৭ʑ͋Γ·͢ - (ECMAScriptඪ४Ͱͳ͍)ಠࣗͷϞδϡʔϧن֨ͱͯ͠ɺࠓͰ΋޿͘࢖Θ Ε͍ͯΔͷ͕Node.js(CommonJS)ͷ require / module.exports ελΠϧ Ͱ͢ 106
107. CommonJSͷϞδϡʔϧ // calc.js // ϞδϡʔϧΛར༻͢Δଆ const add = require("./add"); console.log(add(1, 2)); // add.js // ϞδϡʔϧΛఆٛ͢Δଆ function add(a, b) { return a + b; } module.exports = add;
108. Module loader - ES2015 ϞδϡʔϧͰ͋ΕɺಠࣗܗࣜͰ͋ΕɺϞδϡʔϧԽ͞Εͨ JavaScriptΛऔΓࠐΉ࢓૊Έ͕ඞཁͰ͢ - <script type=“module”>λά΍ɺNode.jsͷrequireػߏͳͲ - ϞδϡʔϧΛಡΈࠐΉ࢓૊Έ͸ʮϞδϡʔϧϩʔμʔʯͱݺ͹Ε·͢ 108
109. --module - ར༻ՄೳͳϞδϡʔϧϩʔμʔ͸ɺjsΛ࣮ߦ͢Δ؀ڥʹΑͬͯҟͳͬͯ͠ ·͏ͷ͕ݱঢ়Ͱ͢ - TypeScript͸ɺ͜ΕΒͷ࣮ߦ؀ڥࠩҟΛٵऩ͢ΔͨΊʹҎԼͷࢥ૝Ͱ࡞ ΒΕ͍ͯ·͢ - ιʔείʔυ͸ES2015ελΠϧͰهड़ - tsconfig.jsonͷmoduleઃఆͰɺϥϯλΠϜͰར༻͢ΔϞδϡʔϧϩʔ μʔΛઃఆɻτϥϯεύΠϧͰม׵͞ΕΔ 109
110. --module - moduleઃఆͷ࢖͍෼͚ྫ - Node.jsͰಈ࡞ͤ͞ΔͨΊʹ module: “commonjs” Λઃఆ (※ ࠓޙ͸ “nodenext” ͳͲͷઃఆ΋ར༻ՄೳʹͳΔݟࠐΈ ) - ϒϥ΢βͷ<script type=“module”>ػೳΛ࢖ͬͯಡΈࠐΉͨΊʹɺ module: “esnext” Λઃఆ 110
111. ʢ༨ஊʣଞͷ--moduleୡ - --module ʹ͸ “amd” / “umd” / “system” ͷ஋΋બ୒ՄೳͰ͢ɻ…͕໓ଟ ʹ࢖͏͜ͱ͸ͳ͍Ͱ͢ - ڵຯ͕͋ͬͨΒɺ“RequireJS” ͱ͔ “SystemJS” Ͱௐ΂ͯΈΔͱྑ͍ͱࢥ ͍·͢ 111
112. TypeScriptͱϏϧυΤ ίγεςϜ 112
113. ͳͥԶͨͪ͸Ϗϧυ͢Δͷ͔ - JavaScriptͷϏϧυྺ࢙͸ׂͱҋ͕ਂ͍Ͱ͢ - ଠݹͷੲ - AltJS͕ྲྀߦΔલ͸ɺ։ൃऀ͕ॻ͍ͨ.jsϑΝΠϧΛͦͷ··HTMLͷ <script>λάͰಡΈࠐΜͰ͍·ͨ͠ 113
114. ๲Ε্͕Δ.js - ΑΓϦονͳମݧ͕webʹٻΊΒΕΔʹͭΕɺಡΈࠐ·ΕΔJavaScript ϑΝΠϧ͸ॏް௕େԽͷҰ్ΛḷΓ·͢ɻ͜Εʹ൐͍৭ʑͳ՝୊͕ු্͠ ·ͨ͠ - μ΢ϯϩʔυ͞ΕΔϑΝΠϧͷαΠζΛݮΒ͍ͨ͠ - ϑΝΠϧΛ෼ׂͯ͠։ൃ͍͕ͨ͠ɺ<script>λάͷಡΈࠐΈճ਺͸গͳ ͍ͨ͘͠ - ผݴޠʢAltJSʣͰޮ཰తʹ։ൃ͍ͨ͠ - etc… 114
115. Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… - ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 115
116. Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… - ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 116 ͱʹ͔͘৭ʑ͋ͬͨʂ
117. Module bundler - αʔόʔαΠυJavaScriptͰ͋ΔNode.jsͷීٴͱɺ Node.jsʹ͓͚ΔϞδϡʔϧػߏʹΠϯεύΠΞ͞Ε ͯɺbrowserifyͱ͍͏πʔϧ͕ҰੈΛ෩ᴆ͠·ͨ͠ - ιʔείʔυதͷ require(‘…’) Λ੩తղੳͰ୳ࡧ͠ɺ require͞Ε͍ͯΔґଘscriptΛ݁߹͢Δ͜ͱͰɺ୯Ұ ͷ.jsϑΝΠϧΛੜ੒͠·͢ 117
118. Module bundler - browserifyͷొ৔Ҏ߱ɺґଘؔ܎Λղܾͯ͠ϑΝΠϧΛ·ͱΊΔπʔϧ ͕਺ଟ͘࡞ΒΕ͍ͯ·͢ɻʮϞδϡʔϧόϯυϥʯͱ૯শ͞Ε·͢ɻ - webpack, rollup.js, fusebox, Parcel, etc… 118
119. webpack - webpack ͸ۙ೥޿͘࢖ΘΕ͍ͯΔϞδϡʔϧόϯυϥͰ͢ - https://webpack.js.org/ - JavaScript / AltJS͚ͩͰͳ͘ɺը૾΍CSSͳͲ༷ʑͳϑΝΠ ϧΛΞηοτͱͯ͠όϯυϧϑΝΠϧʹऔΓࠐΊ·͢ 119
120. webpack - webpackͰͰ͖Δ͜ͱʢҰ෦ൈਮʣ: - AltJSΛτϥϯεύΠϧͭͭ͠ɺόϯυϧΛ࡞੒͢Δ - όϯυϧʹରԠ͢ΔιʔεϚοϓϑΝΠϧΛ࡞੒͢Δ - ೉ಡԽΛࢪͯ͠࠷ऴతͳϑΝΠϧαΠζΛখ͘͢͞Δ - Node.jsͷAPIΛҰ෦ϒϥ΢β޲͚ʹఏڙ͢Δ 120
121. ࠷ۙͷࣄ৘ - ۙ೥Ͱ͸ɺECMAScriptͷimport/exportߏจ΍ϒϥ΢βͷ<script type=“module”>ͱ͍ͬͨඪ४Խ͕ਐΈɺόϯυϥʹཔΒͳ͘ͱ΋Ϟ δϡʔϧ͕ར༻ՄೳͰ͢ - ͱ͸͍͑ɺimport ͷ࿈࠯͕ਂ͘ͳΔͱɺϒϥ΢β͕࠷ޙͷϞδϡʔϧʹ ౸ୡ͢Δ·Ͱʹ͕͔͔࣌ؒͬͯ͠·͍·͢※1 ɻ͜ͷҙຯͰɺϑΝΠϧΛ ·ͱΊΔϞδϡʔϧόϯυϥ͸౰෼ඞཁͱ͞Ε͚ͭͮΔͰ͠ΐ͏ - ※1 https://docs.google.com/document/d/1ds9EEkcDGnt-iR8SAN-_7nsOfw7gsMfhZjzZ_QAIyjM/ mobilebasic 121
122. ʢ༨ஊʣ஗Ԇͱ౤ػ - Ұ֓ʹ͢΂ͯͷJavaScriptϑΝΠϧΛ୯ҰϑΝΠϧʹόϯυϧ͢Ε͹Α ͍ɺͱ͍͏༁Ͱ͸͋Γ·ͤΜɻద੾ͳ࢖͍෼͚͕ॏཁͰ͢ - ʮࣄલʹඞཁͱͳΔ͜ͱ͕Θ͔͍ͬͯΔϞδϡʔϧʯΛ౤ػతʹfetch ͢Δ - ʮϢʔβʔʹͱͬͯຊ౰ʹඞཁͱͳΔ·Ͱʯμ΢ϯϩʔυΛ஗Ԇͤ͞ Δ 122
123. Α͘Ұॹʹ࢖ΘΕΔ πʔϧୡ
124. ίʔυ඼࣭ - ʮ੩తͳܕ෇͚ʯͱ͍͏ಛੑ্ɺن໛ͷେ͖͍ϓϩδΣΫτͰͦ͜ TypeScript͸ͦͷਅՁΛൃش͠·͢ - ෳ਺ͷ։ൃऀ͕ܞΘΔϓϩδΣΫτͰ͸ɺίʔυͷ඼࣭ΛҰఆʹอͭͨ Ίʹ༷ʑͳ޻෉͕ඞཁͱͳΓ·͢
125. tscࣗମͷศརػೳ - TypeScriptຊମʹ෇ଐ͍ͯ͠Δ tsc ͱ͍͏πʔϧࣗମʹ΋ศརػೳ͕උ Θ͍ͬͯ·͢ - --noEmit : .jsϑΝΠϧ΁ͷग़ྗΛߦΘͳͣʹɺܕνΣοΫͷΈΛ࣮ߦ ͢ΔΦϓγϣϯ. CIʹ૊ΈࠐΉͱศར - --noUnusedLocals, --noUnusedParameters: ར༻͞Ε͍ͯͳ͍ม਺Λ ݕ஌ͯ͠Τϥʔʹ͢ΔΦϓγϣϯ. ৑௕ͳίʔυͷ࡟ݮʹͳΔ - ͦͷଞʹ΋ɺtscʹ͸༷ʑͳΦϓγϣϯ͕༻ҙ͞Ε͍ͯ·͢ɻެࣜυΩϡ ϝϯτΛݟͯΈΔͱΑ͍Ͱ͠ΐ͏
126. ESLint - ESLint ͸ASTʢந৅ߏจ໦ʣΛ༻͍ͨίʔυͷνΣοΫπʔϧͰ͢ɻې ࢭ͍ͨ͠ίʔυύλʔϯΛϧʔϧͱͯ͠ొ࿥ͯ͠ར༻͠·͢ - ϧʔϧͷྫ: - consoleΛ࢖Θͳ͍͜ͱ - ࠶୅ೖ͠ͳ͍ม਺ʹ͸letͰ͸ͳ͘constΛ༻͍Δ͜ͱ - TypeScriptͱESLintΛซ༻͢Δ৔߹ɺhttps://github.com/typescript- eslint/typescript-eslint Λ࢖͍·͢
127. Prettier - Prettier͸ιʔείʔυΛػցతʹϑΥʔϚοτ͢ΔͨΊͷπʔϧͰ͢ - ԼهͷΑ͏ͳෆໟͳٞ࿦ʹࠨӈ͞Εͳ͍ͨΊʹ΋ɺίϛοτ࣌ʹίʔυ ΛࣗಈͰϑΥʔϚοτ͓ͯ͘͠श׳Λ͚͓ͭͯ͘ͷ͸ྑ͍͜ͱͰ͢ - ʮจࣈྻϦςϥϧ͸γϯάϧΫΥʔτ or μϒϧΫΥʔτʯ - ʮηϛίϩϯΛจͷ຤ඌʹ͚ͭΔ΂͖͔ʯ - Prettier͸ඪ४ͰTypeScriptʹରԠ͍ͯ͠·͢
128. ࣗಈੜ੒౳ - ԋश1ͱԋश2ͰݟͨΑ͏ʹɺ֎෦ͱͷ௨৴͕ൃੜ͢ΔՕॴ͸any / unknown ʹͳΓ͕ͪͰ͢ - ௨৴ϓϩτίϧʹ߹ΘͤͯɺIDL͔ΒTypeScriptͷܕΛੜ੒͢Δπʔϧ΋ ଟ਺ଘࡏ͠·͢ - e.g. OpenAPI(Swagger), GraphQL, TypeORM, etc…
129. ͓ΘΓʹ
130. ͓ΘΓʹ - ࠓ೔͸ԼهͳͲΛத৺ʹֶΜͰ͖·ͨ͠ - TypeScriptͷجຊจ๏ - طଘͷJavaScriptίʔυʹܕΛಋೖ͢Δํ๏ - ܕͷந৅Խ <-> ۩ମԽͱɺͦΕʹԠͨ͡ॲཧ੍ޚํ๏ - ࣌ؒͷ౎߹্ɺ৮Ε͍ͯͳ͍τϐοΫ΋·ͩ୔ࢁ͋Γ·͢ɻؾʹͳΔ ςʔϚ͕͋ͬͨΒɺੋඇࣗ෼Ͱௐ΂ɺʢՄೳͰ͋Ε͹ʣखΛಈ͔ͯ͠Έ ͍ͯͩ͘͞