Slide 1

Slide 1 text

TypeScript ͷܕఆٛΛ
 13͢Δٕज़ ZQSFTUP:VZB5BOBLB
 LBOTBJUT Picture: Ron Clausen (CC-BY-SA 4.0) with trimming & color filter applied by ypresto
 ஫ɿͪΌΜͱTSͷαΠτͱಉ͡γΞτϧͷը૾Ͱ͢

Slide 2

Slide 2 text

!ZVZB@QSFTUP !ZQSFTUP DPEF5BLUֶߍڭҭܥΤϯδχΞ ϑϧϦϞʔτอҭ࢜ࢿ֨ :VZB5BOBLB bit.ly/ypresto-d-ts

Slide 3

Slide 3 text

ۀ຿࿈བྷɿϩΫʹφϨοδγΣΞ΋ͤͣ͢Έ·ͤΜͰͨ͠ɾɾ ͋ɺͰ΋͜ͷ2JJUBهࣄॻ͍ͯͨ ʢ࡟আ௒ա෼͸ZBSOMPDLʣ bit.ly/ypresto-d-ts

Slide 4

Slide 4 text

"UMFBTU13T bit.ly/ypresto-d-ts

Slide 5

Slide 5 text

ܕఆٛΛॻ͘ bit.ly/ypresto-d-ts

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

߇͑Ί͕ա͗Δ P0ʢϥΠϒϥϦͷJNQPSUʹ͚ͩ༗ޮͳOP*NQMJDJU"OZ୭͔࡞͍ͬͯͩ͘͞ʂʂ

Slide 8

Slide 8 text

ॳڃฤ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

தڃฤ

Slide 12

Slide 12 text

˝

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

্ڃฤ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

13Ͱ͖ΔܕΛ࡞Γ্͛Δ·Ͱ IUUQTHJUIVCDPNGOBOEPJOKT IUUQTHJUIVCDPN%FGJOJUFMZ5ZQFE%FGJOJUFMZ5ZQFEUSFF FDDECGFBBEECFUZQFTJOKT ʢ୹ॖˠIUUQCJUMZZQSFTUPEUJOKTʣ ˢ࡞ͬͯ13ͨ͠

Slide 20

Slide 20 text

ܕ৘ใΛऩू͢Δʢਓྗʣ

Slide 21

Slide 21 text

υΩϡϝϯτ͔Β αϯϓϧίʔυ͔Β ຊମͷίʔυ͔Β

Slide 22

Slide 22 text

υΩϡϝϯτ͔Β

Slide 23

Slide 23 text

αϯϓϧίʔυ͔Β

Slide 24

Slide 24 text

αϯϓϧίʔυ͔Β υΩϡϝϯτ͔Β
 ੾Γग़ͯ͠ܕͷςετʹʂ

Slide 25

Slide 25 text

ຊମͷίʔυ͔Β

Slide 26

Slide 26 text

ຊମͷίʔυ͔Β ਖ਼͚֬ͩͲ
 ͿͬͪΌ͚େม
 ֬ೝ࣌ʹGood ͋ͱυΩϡϝϯτ͞Εͯͳ͍
 ύϥϝʔλ΋ݟ͔ͭΔʁ

Slide 27

Slide 27 text

ܕఆٛͳΒͰ͸ͷ
 ͓࡞๏

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

FYQPSU OBNFTQBDF ܕͷFYQPSU

Slide 30

Slide 30 text

͜Ε͡ΌμϝͳΜʁ
 ⾣export defaultΛฒ΂ͯॻ͘ͱյΕΔϥΠϒϥϦ͕ଟ͍ ͜ͷॻ͖ํ͸ES ModulesͷϥΠϒϥϦઐ༻

Slide 31

Slide 31 text

ʢesModuleInterop͕Φϑͷͱ͖ʣ
 ࣮ߦ࣌ʹTypeError ʮdayjs_1.default is undefinedʯ ྫɿexport =Ͱॻ͔Ε͍ͯΔdayjsͷ ܕఆٛΛexport defaultʹͯ͠ΈΔ ˢจݴ͸ద౰

Slide 32

Slide 32 text

FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP54ઐ༻ NPEVMFFYQPSUT JNQPSUBT'PPGSPNGPP JNQPSU'PPSFRVJSF GPP 54 WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP WBS'PPGPP͕&4.PEVMFT GPPEFGBVMUGPP

Slide 33

Slide 33 text

FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP54ઐ༻ NPEVMFFYQPSUT JNQPSUBT'PPGSPNGPP JNQPSU'PPSFRVJSF GPP 54 WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP WBS'PPGPP͕&4.PEVMFT GPPEFGBVMUGPP ݱ୅ɺଟ͘͸ͬͪ͜ͷ͸ͣ
 ʢbabelͯ͠Δ৔߹ͱ͔ʣ

Slide 34

Slide 34 text

FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP54ઐ༻ NPEVMFFYQPSUT JNQPSUBT'PPGSPNGPP JNQPSU'PPSFRVJSF GPP 54 WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP WBS'PPGPP͕&4.PEVMFT GPPEFGBVMUGPP NOTE: I18n.defaultLocale = 'ja' ͸ TSઐ༻requireͰॻ͔ͳ͍ͱͰ͖ͳ͍ ʢES Modules͸readonlyʣ

Slide 35

Slide 35 text

FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP54ઐ༻ NPEVMFFYQPSUT JNQPSUBT'PPGSPNGPP
 JNQPSU'PPSFRVJSF GPP 54 WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP WBS'PPGPP͕&4.PEVMFT GPPEFGBVMUGPP esModuleInterop͸ ࢖͍खͰONͱ͸ݶΒͳ͍

Slide 36

Slide 36 text

FYQPSU OBNFTQBDF ܕͷFYQPSU

Slide 37

Slide 37 text

OBNFTQBDF WBS*O\^10+0΍GVODUJPOΛ༻ҙ͠ NPEVMFTFYQPSUT*O·ΔͬͱFYQPSUʂ ϓϩύςΟࢗͯ͠

Slide 38

Slide 38 text

dayjsؔ਺ΦϒδΣΫτʹ .locale() ΋ੜ͑ͯΔ ͦ͏ɺnamespaceͳΒͶ

Slide 39

Slide 39 text

FYQPSU OBNFTQBDF ܕͷFYQPSU ͓લ͸ɹɹ
 ୭ͩʁ

Slide 40

Slide 40 text

FYQPSUBTOBNFTQBDF ϒϥ΢β௚loadͰ΋࢖͑Δ UMDܗࣜͷ৔߹͸ॻ͘ʂ ྫɿ window.$ ͱ͔ i18n-jsͷίʔυ

Slide 41

Slide 41 text

OBNFTQBDF FYQPSU ܕͷFYQPSU

Slide 42

Slide 42 text

ܕͷFYQPSU &4.PEVMFTͰUPQMFWFMʢ͔EFDMBSFNPEVMF௚ԼʣʹܕΛॻ͘৔߹ɺ ෳࡶͳҾ਺΍ฦΓ஋ͳͲɺඞཁͳܕʹ͸FYQPSUΛʂ /05&FYQPSUͨ͠OBNFTQBDFͷதͷܕ͸উखʹݟ͑Δ໛༷

Slide 43

Slide 43 text

ͦͷଞͷώϯτ ˔ ຊମʹ13͢Δͱ͖͸QBDLBHFKTPOʹUZQFTJOEFYEUTΛ௥Ճ ˔ %FGJOJUFMZ5ZQFEʹ13͢Δͱ͖͸$POUSJCVUJPOHVJEFΛಡΉ ˔ ෳ਺ϑΝΠϧͷϥΠϒϥϦ͸GPPCBSKTʹରԠͯ͠GPPCBSEUTΛ௥Ճ
 ⾣JNQPSUGSPNIPHFGPPCBSͨ͠ͱ͖ʹಡΜͰ͘ΕΔ ˔ ϞνϕΛอͭʹ͸ɿࣗ෼ͷϓϩδΣΫτͷ
 EFDMBSFNPEVMFͷதͰॻ͖࢝ΊͯɺޙͰ13ʹ͢Δ

Slide 44

Slide 44 text

FAQʢʁʣ

Slide 45

Slide 45 text

2৽͍͠ϥΠϒϥϦʹ
 ܕఆٛΛ͚ͭͯ ഑Γ͍ͨͷͰ͕͢ʁ

Slide 46

Slide 46 text

"ྩ࿨࣌୅ͷϥΠϒϥϦ͸
 ࠷ॳ͔Β5ZQF4DSJQUͰ ॻ͖·͢ΑͶʁʁ

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

·ͱΊ ܕఆٛΛॻ͘ʹ͸ υΩϡϝϯτ͔Βܕ৘ใΛ αϯϓϧίʔυ͔ΒܕͷςετΛ ຊମͷίʔυͰর߹Λ ܕఆٛͷ͓࡞๏ FYQPSUʹඞཁͳΒOBNFTQBDFΛ ࢖͏ FYQPSUΛॻ͖෼͚Δ 6.%͸FYQPSUBTOBNFTQBDF ܕ΋FYQPSUͯ͋͛͠Δ ܕͱ͸υΩϡϝϯτͰɺ ܕͱ͸ςετͩʂʂ

Slide 49

Slide 49 text

ॻ͍ͯͳ͍ͱ͜Ζ͸جຊBOZͳͷͰɺଞͷPQUJPOͰΤϥʔʹͳΓʹ͍͘ʢଟ෼ ࣮ࡍ͸΁λϨͩͬͨͷͰTUSJDU/VMM$IFDLTͱOP*NQMJDJU5IJT͚͔ͩΒͰͨ͠ɾɾ ༨ஊɿTUSJDU͠·ͤΜ͔ʁ

Slide 50

Slide 50 text

FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP NPEVMFFYQPSUT'PP JNQPSU\'PP^GSPNGPP WBS'PPSFRVJSF GPP 'PP FYQPSU'PP54ઐ༻ NPEVMFFYQPSUT JNQPSUBT'PPGSPNGPP WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP WBS'PPGPP͕&4.PEVMFT GPPEFGBVMUGPP

Slide 51

Slide 51 text

FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP NPEVMFFYQPSUT'PP JNQPSU\'PP^GSPNGPP WBS'PPSFRVJSF GPP 'PP FYQPSU'PP54ઐ༻ NPEVMFFYQPSUT JNQPSUBT'PPGSPNGPP WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP WBS'PPGPP͕&4.PEVMFT GPPEFGBVMUGPP import * as React from 'react' ▼ import React from 'react' import React, { useState } from 'react'

Slide 52

Slide 52 text

FYQPSU %FGJOJUFMZ5ZQFEΑΓMPEBTILFZ#ZEUT %FGJOJUFMZ5ZQFEΑΓMPEBTIFTLFZ#ZEUT