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

TypeScript

Recruit
PRO
September 09, 2022

 TypeScript

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

Recruit
PRO

September 09, 2022
Tweet

More Decks by Recruit

Other Decks in Technology

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ίʔυʹܕΛಋೖ͢Δํ๏ - ܕͷந৅Խ <->

    ۩ମԽͱɺͦΕʹԠͨ͡ॲཧ੍ޚํ๏ - ࣌ؒͷ౎߹্ɺ৮Ε͍ͯͳ͍τϐοΫ΋·ͩ୔ࢁ͋Γ·͢ɻؾʹͳΔ ςʔϚ͕͋ͬͨΒɺੋඇࣗ෼Ͱௐ΂ɺʢՄೳͰ͋Ε͹ʣखΛಈ͔ͯ͠Έ ͍ͯͩ͘͞