JavaScriptで実装したVueJS プロジェクトをTypeScriptへ移行する話

+BWB4DSJQUͰ࣮૷ͨ͠ 7VF+4ϓϩδΣΫτΛ 5ZQF4DSJQU΁Ҡߦ͢Δ࿩   3PQQPOHJWVF    (P5BEBOP

ࣗݾ঺հ w ୞໺߶ (JUIVCBCMF w גࣜձࣾ(BNF8JUI  αʔϏε։ൃ෦ w ϑϩϯτΤϯυΤϯδχΞ
w 3PQQPOHJWVFӡӦϝϯόʔ w /VYUެࣜυΩϡϝϯτ຋༁

ࠓ೔࿩͢͜ͱ w +BWB4DSJQU͔Β5ZQF4DSJQU΁Ҡߦ w 7VFίϯϙʔωϯτ w 7VFY4UPSF

ର৅ऀ w +BWB4DSJQUͰ7VF+4ϓϩδΣΫτΛ࣮૷ͨ͜͠ͱ͋Δ w 7VFYΛ࢖ͬͨঢ়ଶ؅ཧΛཧղ͍ͯ͠Δ͜ͱ w 5ZQF4DSJQUͰ7VF+4ϓϩδΣΫτͷ࣮૷͸ɺ  ͜Ε͔Βֶ΅͏ͱ͍ͯ͠Δ

͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ ϓϩδΣΫτ͕ ༧૝ΑΓେ͖͘ͳͬͨ

͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ ϦϑΝΫλϦϯάΛ ޮ཰Α͘ߦ͍͍ͨ

͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ ෭࡞༻ʹک͑ͳ͍

͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ 7VF+4/VYU+4͕ 5ZQF4DSJQU 54 Λެࣜαϙʔτ

͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ ະͩ5ZQF4DSJQUͰ  7VF+4ΞϓϦ࡞ͬͨ͜ͱͳ͍ʜ

ಘΔֶͼ 7VF+4ϓϩδΣΫτ΁  5ZQF4DSJQUͷΠϯετʔϧ

ಘΔֶͼ 5ZQF4DSJQUΛ࢖༻ͨ͠  7VFίϯϙʔωϯτͷ࣮૷

ಘΔֶͼ 5ZQF4DSJQUͰ  7VFY.PEVMFͷ࡞੒

ಘΔֶͼ 7VFY.PEVMFΛ  7VFίϯϙʔωϯτʹόΠϯυ

։ൃ؀ڥ w /PEF+4 w :BSO w 7VF$-*

ϓϩδΣΫτߏ੒ w 7VF$-*͔Β࡞ΒΕͨ 7VF+4ϓϩδΣΫτ

ϓϩδΣΫτߏ੒ TSD ᵓDPNQPOFOUT ᴹᵓ)FMMPWVF ᴹᵋ8PSMEKTY ᵓSPVUFS ᴹᵋJOEFYKT ᵓTUPSF ᴹᵓGPPKT ᴹᵋJOEFYKT
ᵓWJFXT ᴹᵓ)PNFWVF ᴹᵋ4UPSFWVF ᵓ"QQWVF ᵋNBJOKT

ϓϩδΣΫτߏ੒ w جຊతʹ͸ಉ͜͡ͱΛ͢Δ  ͭͷίϯϙʔωϯτ w 4'$ 4JOHMF'JMF$PNQPOFOU w +49

ϓϩδΣΫτߏ੒ w 7VFY.PEVMFͷTUBUFΛ  7VFίϯϙʔωϯτʹόΠϯυ

Ͱ͸ɺҠߦ?!!

7VF+4ϓϩδΣΫτ΁ 5ZQF4DSJQUͷΠϯετʔϧ

WVFBEE!WVFUZQFTDSJQU

6TFDMBTTTUZMFDPNQPOFOUTZOUBY :O 6TF#BCFMBMPOHTJEF5ZQF4DSJQUGPSBVUPEFUFDUFEQPMZpMMT :O

Changes not staged for commit: (use "git add/rm <file>..." to
update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: .eslintrc.js modified: package.json modified: src/App.vue deleted: src/main.js deleted: src/router/index.js deleted: src/store/foo.js deleted: src/store/index.js modified: src/views/Home.vue modified: yarn.lock Untracked files: (use "git add <file>..." to include in what will be committed) src/components/HelloWorld.vue src/main.ts src/router/index.ts src/shims-tsx.d.ts src/shims-vue.d.ts src/store/foo.ts src/store/index.ts tsconfig.json

HJUDIFDLPVU)&"%TSD"QQWVFTSDWJFXT)PNFWVF

SNTSDDPNQPOFOUT)FMMP8PSMEWVF

7VFY.PEVMF w 54ίϯύΠϥ͕ΤϥʔΛग़͍ͯ͠ΔͷͰղܾ͢Δ w ؔ਺Ҿ਺ʹܕΛఆٛ

TSDTUPSFGPPUT FYQPSUEFGBVMU\ লུ NVUBUJPOT\ TFU5FYU TUBUFBOZ OFX5FYUTUSJOH \ TUBUFUFYUOFX5FYU ^
^ HFUUFST\ UFYU6QQFS TUBUFBOZ \ SFUVSOTUBUFUFYUUP6QQFS$BTF ^ ^ ^

54ίϯύΠϧ੒ޭ

5ZQF4DSJQUΛ࢖༻ͨ͠ 7VFίϯϙʔωϯτͷ࣮૷

4'$ 4JOHMF'JMF$PNQPOFOU Λ  ΫϥεελΠϧ7VFίϯϙʔωϯτԽ

TDSJQUMBOHlUTz

5ZQF4DSJQUͷσίϨʔλΛ࢖͏ ΫϥεελΠϧ  7VFίϯϙʔωϯτ

WVFQSPQFSUZEFDPSBUPS wWVFBEE!WVFUZQFTDSJQU wґଘϞδϡʔϧ͕ΠϯετʔϧࡁΈ

WVFQSPQFSUZEFDPSBUPS !$PNQPOFOUΛ࢖͏ͱɺ  7VFίϯϙʔωϯτͷ  ϝλσʔλ͕Ϋϥεʹ౉͞ΕΔ

WVFQSPQFSUZEFDPSBUPS ϝλσʔλ EBUB NFUIPET DPNQPOFOUT NJYJOͳͲ

σίϨʔλ෇༩ TSDDPNQPOFOUT)FMMPWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT)FMMPFYUFOET7VF\ QSJWBUFUFYUTUSJOH)FMMP HFUUFYU6QQFS TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF
^ ^

7VFΫϥεΛܧঝ TSDDPNQPOFOUT)FMMPWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT)FMMPFYUFOET7VF\ QSJWBUFUFYUTUSJOH)FMMP HFUUFYU6QQFS TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF
^ ^

EBUBΫϥεϓϩύςΟ TSDDPNQPOFOUT)FMMPWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT)FMMPFYUFOET7VF\ QSJWBUFUFYUTUSJOH)FMMP HFUUFYU6QQFS TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF
^ ^

DPNQVUFEΫϥεͷHFUUFS TSDDPNQPOFOUT)FMMPWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT)FMMPFYUFOET7VF\ QSJWBUFUFYUTUSJOH)FMMP HFUUFYU6QQFS TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF
^ ^

+49Λ549Խ

֦ுࢠΛUTYʹมߋ

͙͢ʹίϯύΠϧΤϥʔ

4'$ WVF ͱಉ༷ʹमਖ਼ TSDDPNQPOFOUT8PSMEUTY JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT8PSMEFYUFOET7VF\ QSJWBUFUFYUTUSJOH8PSME HFUUFYU6QQFS
TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF ^ লུ ^

SFOEFSؔ਺

Ҿ਺͸7VF$SFBUF&MFNFOUܕ TSDDPNQPOFOUT8PSMEUTY JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT8PSMEFYUFOET7VF\ লུ SFOEFS I7VF$SFBUF&MFNFOU
7VF7/PEF\ SFUVSO EJW লུ EJW ^ ^

໭Γ஋͸7VF7/PEFܕ TSDDPNQPOFOUT8PSMEUTY JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT8PSMEFYUFOET7VF\ লུ SFOEFS I7VF$SFBUF&MFNFOU
7VF7/PEF\ SFUVSO EJW লུ EJW ^ ^

Πϕϯτϋϯυϥʔʹܕఆٛ TSDDPNQPOFOUT8PSMEUTY লུ DIBOHF5FYU OFX5FYUTUSJOH WPJE\ UIJTUFYUOFX5FYU ^ SFOEFS I7VF$SFBUF&MFNFOU
7VF7/PEF\ SFUVSO EJW লུ JOQVU POJOQVU\ FBOZ UIJTDIBOHF5FYU FUBSHFUWBMVF ^ লུ

ίϯϙʔωϯτΛϩʔΧϧొ࿥

DPNQPOFOUTΩʔ TSDWJFXT)PNFWVF TDSJQUMBOHUT JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU)FMMPGSPNDPNQPOFOUT)FMMPWVF JNQPSU8PSMEGSPNDPNQPOFOUT8PSME !$PNQPOFOU \ DPNQPOFOUT\
)FMMP 8PSME ^ ^ FYQPSUEFGBVMUDMBTT)PNFFYUFOET7VF\^ TDSJQU

7VFY.PEVMFΛ54Խ

7VFY.PEVMFΛ  ΫϥεϕʔεͰ࣮૷

ZBSOBEEWVFYNPEVMFEFDPSBUPST

WVFDPOpHKT USBOTQJMF%FQFOEFODJFT <bWVFYNPEVMFEFDPSBUPST>

Ϋϥεϕʔεͷ7VFYNPEVMF TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ লུ ^

໊લۭؒ෇͖Ͱ͋Δ͜ͱΛ໌ࣔ TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST !.PEVMF \ OBNFTQBDFEUSVF ^
FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ লུ ^

TUBUFQVCMJDΫϥεϓϩύςΟ TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST লུ FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ QVCMJDUFYUTUSJOHJOTJEFNPEVMFTUPSF লུ ^

NVUBUJPOT  !.VUBUJPOΛ෇༩ͨ͠Ϋϥεϝιου TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST লུ FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ লུ !.VUBUJPO
TFU5FYU OFX5FYUTUSJOH \ UIJTUFYUOFX5FYU ^ লུ ^

HFUUFSTΫϥεͷHFUUFS TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST লུ FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ লུ HFUUFYU6QQFS TUSJOH\
SFUVSOUIJTUFYUUP6QQFS$BTF ^ ^

7VFYͱόΠϯυ͢Δ  ίϯϙʔωϯτΛ54Խ

WVFYDMBTT όΠϯυ͢ΔͨΊͷ  σίϨʔλΛ࡞੒͢ΔϥΠϒϥϦ

ZBSOBEEWVFYDMBTT

7VFYͷ֤ϓϩύςΟ͸ɺ  ໊લۭؒ෇͖Ϟδϡʔϧ಺ʹ͋Δ

໊લۭؒͷσίϨʔλΛ࡞੒ TSDTUPSFGPPUT JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP !$PNQPOFOU FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\
লུ ^

໊લۭؒ෇͖σίϨʔλΛ࢖ͬͯ  7VFYϓϩύςΟͱόΠϯυ

7VFYTUBUFͱ  ಉ͡ܕ໊લͷΫϥεϓϩύςΟ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF b'PP !$PNQPOFOU
FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\ !GPP.PEVMF4UBUF QSJWBUFUFYUTUSJOH লུ ^

7VFYHFUUFSTͱ  ಉ͡ܕ໊લͷΫϥεϓϩύςΟ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP !$PNQPOFOU
FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\ লུ !GPP.PEVMF(FUUFS QSJWBUFUFYU6QQFSTUSJOH লུ ^

7VFYNVUBUJPOTͱ  ಉ͡ܕ໊લͷΫϥεϓϩύςΟ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP !$PNQPOFOU
FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\ লུ !GPP.PEVMF.VUBUJPO QSJWBUFTFU5FYU OFX5FYUTUSJOH WPJE ^

7VFYNVUBUJPOT͸ؔ਺ܕ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP !$PNQPOFOU FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\
লུ !GPP.PEVMF.VUBUJPO QSJWBUFTFU5FYU OFX5FYUTUSJOH WPJE ^

%FpOJUF"TTJHONFOU "TTFSUJPOԋࢉࢠ TSDWJFXT4UPSFWVF !GPP.PEVMF4UBUF QSJWBUFUFYUTUSJOH !GPP.PEVMF(FUUFS QSJWBUFUFYU6QQFSTUSJOH !GPP.PEVMF.VUBUJPO QSJWBUFTFU5FYU OFX5FYUTUSJOH
WPJE

ΫϥεϓϩύςΟͷܕνΣοΫ TSDWJFXT4UPSFWVF !GPP.PEVMF4UBUF QSJWBUFUFYUCPPMFBO !GPP.PEVMF(FUUFS QSJWBUFUFYU6QQFSCPPMFBO !GPP.PEVMF.VUBUJPO QSJWBUFTFU5FYU OFX5FYUCPPMFBO CPPMFBO

Πϕϯτϋϯυϥʔͷܕఆٛ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP !$PNQPOFOU FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\
লུ DIBOHF5FYU FWFOUBOZ WPJE\ UIJTTFU5FYU FWFOUUBSHFUWBMVF ^ ^

·ͱΊ w طଘͷ7VF+4ϓϩδΣΫτʹܕࢦఆ͕ग़དྷͨ w ͢΂ͯͷ7VFίϯϙʔωϯτ͕54ͷΫϥεϕʔεͷ࣮૷ʹ ͳͬͨ w 7VFY.PEVMF͕54ͷΫϥεϕʔεͷ࣮૷ʹͳͬͨ w ؔ਺ͷ໭Γ஋ܕΛఆٛ͠ͳͯ͘΋ίϯύΠϧΤϥʔʹͳΒͳ͍
w 7VFY.PEVMFͱόΠϯυ͢ΔΫϥεϓϩύςΟͷܕνΣοΫ͕ ߦΘΕΔ͔͕՝୊

JavaScriptで実装したVueJS プロジェクトをTypeScriptへ移行する話

JavaScriptで実装したVueJS プロジェクトをTypeScriptへ移行する話

Transcript

More Decks by 53

Other Decks in Programming

Featured