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

JSからTSへ移行した Vue.jsプロダクトの型チェックを 漸進的に強化する/ reinforcing the type

ryo
October 16, 2022

JSからTSへ移行した Vue.jsプロダクトの型チェックを 漸進的に強化する/ reinforcing the type

Vue Fes Japan 2022

ryo

October 16, 2022
Tweet

More Decks by ryo

Other Decks in Programming

Transcript

  1. +4͔Β54΁Ҡߦͨ͠ 7VFKTϓϩμΫτͷܕνΣοΫΛ ઴ਐతʹڧԽ͢Δ 7VF'FT+BQBO

  2. !,BXBNBUB3ZP 👨💻&OHJOFFS!-"13"4JOD 🔥ݩফ๷࢜ ❤5ZQF4DSJQU 7VF %FOP 3FBDU 🏄ݒਨ ݸਓ։ൃ

  3. ࠓ೔࿩͢͜ͱ💬

  4. w 7VFKTͷ54ରԠͷྺ࢙ w 54Խ͕ෆ׬શͳ7VFKTϓϩμΫτͷ 
 ܕνΣοΫΛͲͷΑ͏ʹڧԽ͍ͯͬͨ͠ͷ͔

  5. 7VFKTͷ54ରԠͷྺ࢙

  6.      7VFKT54ରԠͷྺ࢙

  7.      7VFKTͷϩʔϯν &WBO:PVࢯʹΑͬͯ 7VFKT͕ެ։

  8.      7VF54ͷొ৔ ܕఆٛϑΝΠϧͷఏڙͱɺ 7VFKTͷ"1*Λϥοϓͯ͠ 54͔Β࢖͑ΔΑ͏ʹͨ͠ϓϩδΣΫτ ͕஀ੜ

  9.      7VFKT΁ͷ54ରԠͷ*TTVF 7VFKTຊମͷ54Խ΍ɺ54ରԠʹ͍ͭͯͷ แׅతͳ*TTVF͕౤ߘ͞Εͨɻ ೥ۙ͘ίϝϯτ͕ଓ͖ɺ 7VFKTͷϦϦʔε࣌ʹΫϩʔζ

  10.      7VF$MBTT$PNQPOFOUͷ஀ੜ 54ͷΫϥεελΠϧͱɺ σίϨʔλΛ࢖͍7VFίϯϙʔωϯτΛ هड़Ͱ͖Δ7VF$MBTT$PNQPOFOU͕ ஀ੜ

  11.      54؀ڥͷେ෯վળ 7VFͷϦϦʔεʹͯ σίϨʔλͳ͠ͷૉͷ7VFͰ UIJTͷܕਪ࿦͕ޮ͘Α͏ʹ

  12.      $PNQPTJUJPO"1*ͷϦϦʔε 7VFͷ3'$ΑΓެ։ɻ 7VFFYUFOEͰඞཁͩͬͨ ܕΞϊςʔγϣϯ͕ෆཁͰ ΑΓ54͕ॻ͖΍͘͢

  13.      7VFͷϦϦʔε ಺෦ϩδοΫ΋54Ͱॻ͖׵͑ ΑΓܕ҆શͳ"1*΋ఏڙ

  14. 7VFKTͷ54ରԠͦͷଞͷτϐοΫ🐙 ɾ 5FNQMBUFͰͷܕਪ࿦ ➜WVFUTDͰͷܕνΣοΫɺ7PMBSͰͷΤσΟλαϙʔτ ɾ5FNQMBUFͰͷ0QUJPOBM$IBJOJH OVMMJTIDPMFTDSJOH ➜7VFͰ͸αϙʔτ ɾ 4UPSFʢ7VFYʣͷܕαϙʔτ ➜7VFYͰͷରԠɺܕ҆શͳ1JOJB

  15. 7VFKTͷ54ରԠͦͷଞͷτϐοΫ🐙 ɾ 5FNQMBUFͰͷܕਪ࿦ ➜WVFUTDͰͷܕνΣοΫɺ7PMBSͰͷΤσΟλαϙʔτ ɾ5FNQMBUFͰͷ0QUJPOBM$IBJOJH OVMMJTIDPMFTDSJOH ➜7VFͰ͸αϙʔτ ɾ 4UPSFʢ7VFYʣͷܕαϙʔτ ➜7VFYͰͷରԠɺܕ҆શͳ1JOJB

  16. 7VFKTͷ54ରԠͦͷଞͷτϐοΫ🐙 ɾ 5FNQMBUFͰͷܕਪ࿦ ➜WVFUTDͰͷܕνΣοΫɺ7PMBSͰͷΤσΟλαϙʔτ ɾ5FNQMBUFͰͷ0QUJPOBM$IBJOJH OVMMJTIDPMFTDSJOH ➜7VFͰ͸αϙʔτ ɾ 4UPSFʢ7VFYʣͷܕαϙʔτ ➜7VFYͰͷରԠɺܕ҆શͳ1JOJB

  17. 7VFKTͷ54ରԠͦͷଞͷτϐοΫ🐙 ɾ 5FNQMBUFͰͷܕਪ࿦ ➜WVFUTDͰͷܕνΣοΫɺ7PMBSͰͷΤσΟλαϙʔτ ɾ5FNQMBUFͰͷ0QUJPOBM$IBJOJH OVMMJTIDPMFTDSJOH ➜7VFͰ͸αϙʔτ ɾ 4UPSFʢ7VFYʣͷܕαϙʔτ ➜7VFYͰͷରԠɺܕ҆શͳ1JOJB

  18. ࠓ͸΋͏7VFKTͷ54ରԠ͸ॆ࣮͍ͯ͠Δ

  19. 54Խ͕ෆ׬શͳ7VFKTϓϩμΫτͷ ܕνΣοΫΛڧԽ͢Δ

  20. ͲΜͳϓϩμΫτʁ📦

  21. ߏ੒%KBOHPʷ7VFKTʢܥʣ ॳظίϛοτɿ೥ ೥ 54ಋೖ࣌ظɿ೥ ؔ࿈ϑΝΠϧ਺ɿ7VFKT4'$ 54˞ ˞ͭͷϓϩμΫτͷ߹ܭ

  22. 54Խ͕ෆ׬શͱ͸ʁ🤔

  23. w AMBOHlUTzAͱ͍ͯ͠ͳ͍7VF4'$ϑΝΠϧ͕ଟ਺͋Δ w ATUSJDUUSVFAͰ͸ͳ͘؇͍ܕνΣοΫͱͳ͍ͬͯΔ w $*ͰܕνΣοΫ͕࣮ߦ͞Ε͍ͯͳ͍ w ܕΤϥʔ͕์ஔ͞ΕҰ෦ϑΝΠϧͰΤσΟλ͕ਅͬ੺ w TUSJDUUSVFͱ͢ΔͱܕΤϥʔ૯਺ʢ

    ʣ
  24. ˞&SSPS-FOTΛ࢖͍ͬͯΔͷͰ&SSPS͕ڧௐ͞Εͯ·͢ ˞͜͜·Ͱ੺͍ͷ͸ۃʑҰ෦Ͱ͢ ౰࣌ͷΤσΟλ

  25. ͳͥܕνΣοΫΛڧԽ͍ͨ͠ͷʁ🛡

  26. ɾ ࣮ߦ࣌Τϥʔͷճආ ɾ ܕਪ࿦ɾΦʔτίϯϓϦʔτʹΑΔ։ൃମݧͷ޲্ ɾ อकੑͷ޲্ʢػೳվमɺϦϑΝΫλͰͷσάϨճආʣ ɾ 7VFόʔδϣϯΞοϓ΁ͷ෍ੴ ɾ ਅͬ੺ͳΤσΟλΛͳΜͱ͔͍ͨ͠

  27. ϓϩδΣΫτ֓ཁ🔧

  28. ϓϩδΣΫτ໊ɿਅͷ5ZQF4DSJQUԽ Ϧιʔεɿ໊ Ћ ظؒɿ೥݄຤ʙݱࡏ ॳظ!ZVJDILVOͦͷޙ!.BTB4IJO ʹ͢͢Ίͯ΋Β͍ɺࣗ෼͸ํ਑ܾఆɾαϙʔτͷΈ

  29. ͲͷΑ͏ʹਐΊͨʁ🛣

  30. %FTJHO%PDͷ࡞੒

  31. ͳͥɺԿͷͨΊʹɺͲͷΑ͏ʹ։ൃΛ͢͢ΊΔ͔Λه ͨ͠υΩϡϝϯτɻ എܠɺઃܭɺτϨʔυΦϑɺϦεΫͳͲʹ͍ͭͯ· ͱΊ্ͨͰɺϝϯόʔؒͰϨϏϡʔ͢Δɻ %FTJHO%PDͱ͸ʁ

  32. ɾ ඞཁͳ͚Ε͹ແཧʹ$PNQPTJUJPO"1*ʢTFUVQʣʹॻ͖௚͞ͳ͍ ɾ 54➜7VFKT4'$4DSJQU෦෼➜UFNQMBUF෦෼ͷॱͰॱ࣍ܕΤ ϥʔΛमਖ਼͢Δ ɾ ৽نʹܕΤϥʔ͕ࠞೖ͢ΔͷΛ๷͙ͨΊɺ·ͣ$*ͰͷܕνΣοΫ Λಋೖ͢Δ ࣮ࡍʹఆΊ੍ͨ໿

  33. 54ԽͷδϨϯϚΛղফ͢Δ

  34. $*ͰܕνΣοΫΛ࣮ߦͯ͠ɺ ৽نίʔυʹܕΤϥʔ͕ ࠞೖ͢Δ͜ͱ͸๷͍͗ͨ طଘͷίʔυʹܕΤϥʔ͕ଟ ͗ͯ͢ɺڧ͍ܕνΣοΫͷઃ ఆͰ$*Λ௨͢͜ͱ͕Ͱ͖ͳ͍ 74 54ԽͷδϨϯϚ😵💫

  35. طଘͷܕΤϥʔશͯʹ!UTFYQFDUFSSPSΛ͚ͭͯ ܕΤϥʔΛճආ্ͨ͠Ͱɺ$*ʹܕνΣοΫΛ௥Ճ͢Δ ˞ !UTFYQFDUFSSPS͸࣍ߦͷܕΤϥʔΛ཈੍͢Δίϝϯτɻ΋࣍͠ߦʹ ܕΤϥʔ͕ͳ͘ͳͬͨ৔߹͸ɺ!UTFYQFDUFSSPSࣗମ͕ΤϥʔʹͳΔ ղফํ๏💊

  36. Ͱ΋Τϥʔ͕͋Γ͗ͯ͢େม🥲

  37. πʔϧΛ࡞Ζ͏🦾

  38. 5ZQF4DSJQU$PNQJMFS"1*Λ࢖͍ 54ͷܕΤϥʔൃੜՕॴʹɺ !UTFYQFDUFSSPSͷίϝϯτΛҰׅૠೖ ܕΤϥʔΛແޮԽ͢Δ$-*πʔϧɻ 7VFKT4'$ͷTDSJQU෦෼ʹ΋ରԠ LBXBNBUBSZP TVQQSFTTUTFSSPST

  39. 54 549ͳͲจ຺ΛΈͯద੾ͳίϝϯτ͕ૠೖ͞ΕΔ

  40. TVQQSFTTUTFSSPSΛ࣮ߦͨ͠13 54Λ➜ʹΞοϓσʔτ ͞ΒʹTUSJDUUSVFʹ্ͨ͠Ͱɺ !UTFYQFDUFSSPSΛ௥Ճ

  41. ˏUTFYQFDUFSSPSΛॱ࣍౗͢

  42. 54ԽͷδϨϯϚΛղফ͠ɺ $*ͰܕνΣοΫΛ௨͢͜ͱ͕ग़དྷͨͷͰɺ ৽نίʔυʹܕΤϥʔ͕ࠞೖ͢Δ͜ͱ͸๷͛Δ طଘͷܕΤϥʔΛ௚͢͜ͱʹूதͰ͖Δ

  43. 54ͷΤϥʔछผ͝ͱʹɺ ͻͨ͢ΒܕΤϥʔΛղফ͍ͯ͘͠

  44. ˏUTFYQFDUFSSPSͷ௥Ճ $*ͷܕνΣοΫڧԽ !UTFYQFDUFSSPSͷॱ࣍࡟আ 54ϑΝΠϧɺ7VFKT4'$ͷ4DSJQU෦෼ͷॱͰ ࣮ߦ͍ͯ͘͠ɻ

  45. ͦͷଞ޻෉ϙΠϯτ💡

  46. ੩తΞηοτͷࠩ෼ൺֱͰϨϏϡʔෛՙΛܰݮ

  47. (JU)VC"DUJPOTͰ13͝ͱʹ੩తΞηοτͷ Ϗϧυ݁ՌΛ.BTUFSϒϥϯνͱൺֱɻ Ϗϧυ݁Ռʹࠩ෼͸ग़ͳ͍ ➜ϓϩμΫτͷಈ࡞ʹมԽ͸ͳ͍ͳͷͰɺ EJ ff ͕ଟͯ͘΋҆৺ײΛ࣋ͬͯϚʔδग़དྷΔ ˞7VFKT4'$ͷ৔߹͸ɺܕͷมߋͷΈͰ΋ࠩ෼͕ ग़ͨͷͰɺ͋͘·Ͱ54ϑΝΠϧݶఆ

  48. ϦϑΝΫλπʔϧͷར༻ɾ։ൃͰޮ཰Խ

  49. NJZBPLB WVFDPNQPTJUJPODPOWFSUFS 0QUJPOT"1*Λ$PNQPTJUJPO"1*ʹ ࣗಈม׵͢Δπʔϧɻ 4FUVQʹॻ͖׵͑ͳ͚Ε͹ɺ௚Βͳ͍ܕΤϥʔΛ ࣋ͭίϯϙʔωϯτͷม׵Ͱར༻

  50. 7VFFYUFOE΍ͨͩͷPCKFDUΛ࢖͍ͬͯΔMBOHlUTzͷ 7VFKT4'$ϑΝΠϧΛɺEF fi OF$PNQPOFOU ʜ ʹม׵͢Δ πʔϧɻ 7PMBS͕7VFFYUFOEͰ͸ద੾ͳܕਪ࿦Λͯ͘͠Εͳ͍໰୊ Λղܾ͢ΔͨΊʹେ׆༂ɻ .BTB4IJO

    EF fi OFDPNQPOFOUDPOWFSUFS
  51. 7VFKT4'$ͷTDSJQU෦෼ͷΈΛܕνΣοΫ͢Δ$-*πʔϧɻ 5FNQMBUF෦෼ͷܕΤϥʔ͕ଟ͗ͯ͢WVFUTDΛ$*Ͱ࣮ߦ͢ Δ͜ͱ͸ग़དྷͳ͍͕ɺTVQQSFTTUTFSSPSTͰ!UTFYQFDU FSSPSΛ෇༩Ͱ͖ΔTDSJQU෦෼ͷΈ͸ܕνΣοΫ͍ͨ͠ͱ͍ ͏ࢥ͍͔Β։ൃɻ LBXBNBUBSZP WVFTDSJQUUZQFDIFDL

  52. ෛ࠴ղফμογϡϘʔυͰਐḿঢ়گΛՄࢹԽ

  53. (JU)VC"DUJPOTͱ[Yɺ%BUBEPHΛ࢖ͬͯɺ ࡞ͬͨϑϩϯτΤϯυͷίʔυϕʔεͷঢ়گ ΛՄࢹԽ͢ΔμογϡϘʔυ 7VF4'$ͷ54Խ཰ 54&SSPSͷ਺ʢUTFYFDUFSSPSΛؚΉʣ ΧόϨοδ ͳͲͳͲΛ೔࣌Ͱܭଌ͍ͯ͠Δɻ ˞਺஋͸μϛʔͰ͢

  54. ݁Ռ🏍

  55. 🔴#FGPSF 🟢"GUFS 5ZQF4DSJQUͷόʔδϣϯ ܥ ܥ $*ͰͷܕνΣοΫ 54ͷΈ 54 7VF4'$˞ 4USJDU

    '"-4& 536& ܕΤϥʔ਺   UFNQMBUF෦෼ Ҏ֎΄΅ͳ͠˞
  56. ·ͱΊ🏁

  57. ɾ ࠓͷ7VFKTͰ͸5ZQF4DSJQUͷԸܙΛॆ෼ड͚ΒΕΔ ɾ 54ԽΛॱ࣍͢͢ΊΔʹ͸!UTFYQFDUFSSPS͕͓͢͢Ίɹ ʢTVQQSFTTUTFSSPST΋࢖ͬͯͶʣ ɾ ෛ࠴ղফϓϩδΣΫτ͸޻෉࣍ୈͰޮ཰Խ͕Մೳ 7VF؀ڥͰͷ7PMPSͷରԠͳͲͰҰ෦ϋϚΔͱ͜Ζ͸͋ͬͨ ͕ɺܕΤϥʔղফࣗମ͸٧·Δͱ͜Ζ͋·Γͳ͍ɻ πʔϧ͕͋Δ͜ͱͰ։ൃޮ཰VQʹܨ͕ͬͨɻ

  58. &OE