がんばらない Vue 3 移行 / Vue 3 Migration without any effort

Norimasa Hayashida （LINE株式会社）
「UIT meetup vol.10 『Vue 三昧』」での発表資料です
https://uit.connpass.com/event/187267/

Transcript

1. がんばらない
   7VF
   
   移行 Norimasa Hayashida UIT Department1, Front-End Dev Center 09/18/2020
2. 7VF
   
   JT
   DPNJOH 
   2
   ʹϦϦʔε༧ఆ IUUQTHJUIVCDPNWVFKTWVFQSPKFDUT 3$
   ൛͕ར༻Մೳ IUUQTHJUIVCDPNWVFKTSGDTJTTVFT #PUI
   UIF
   "1*
   BOE
   JNQMFNFOUBUJPO
   PG
   7VF
   
   DPSF
   IBWF
   TUBCJMJ[FE /P
   OFX
   NBKPS
   GFBUVSFT
   PS
   CSFBLJOH
   DIBOHFT
   CFGPSF
   UIF
   GJOBM
   SFMFBTF ͸΍͘࢖͍͍ͨͰ͢Ͷ Ͱ΋طଘͷ 7VF
   
   ϓϩδΣΫτ͸ʁ ެࣜυΩϡϝϯτ΋ IUUQTWWVFKTPSHHVJEF
3. 7VF
   
   &OE
   PG
   MJGF -54
   ͸ 
   ϦϦʔεޙ͔Β 
   ϲ݄ؒ ༧ఆ • ΞΫςΟϒͳϓϩδΣΫτͩͱҠߦظؒΛऔΓͮΒ͍ • ن໛͕େ͖ΊͩͱӨڹൣғ͕޿ͯ͘໘౗ͦ͏ • ઌԆ͹͠ʹ͍ͯͨ͠Β͍ͭͷؒʹ͔ظݶ͕ഭ͍ͬͯͯ߄ͯΔ ݱߦόʔδϣϯͷ։ൃͱฒߦ͠ͳ͕Β 7VF
   
   ΁ͷҠߦ४උΛ • 7VF
   
   ൛ͷͱͷࠩ෼Λ࠷খݶʹ • #SFBLJOH
   $IBOHFT
   ͷӨڹ͸ʁ IUUQTWWVFKTPSHHVJEFNJHSBUJPOJOUSPEVDUJPOIUNMCSFBLJOHDIBOHFT • ഇࢭ͞ΕΔػೳΛ࢖ͬͨίʔυ͸͜ΕҎ্ DPNNJU
   ͤ͞ͳ͍ FTMJOU ͷ׆༻ • 7VF
   
   ͷ··ରॲͰ͖Δ΋ͷ͸΍ͬͯ͠·͓ͬͯ͘ FH
   'JMUFS • ॻ͖׵͑ඞਢͷ΋ͷ͸Ҡߦ࡞ۀ༻ͷ CSBODI
   ΍ SFQPTJUPSZ
   Ͱ FH
   (MPCBM
   "1* • $PNQPTJUJPO
   "1*
   ͱ͍ͬͨ৽ػೳͷར༻͸ 7VF
   
   Խ׬ྃޙʹ ࢖Θͳͯ͘΋ಈ͘ ͱ͍͏ͷ͸Α͋͘Δ࿩
4. -FBSO
   CZ
   FYBNQMF -*/&
   -*7&
   
   -*/&
   -*7&7*&8*/(
   IUUQTMJWFMJOFNF • ΦϯϥΠϯϥΠϒ഑৴ϓϥοτϑΥʔϜ • 8FFLMZ
   ͰϦϦʔεத • 7VF
   
   7VFY
   7VF3PVUFS • 
   PG
   4'$T
    * As of 09/15/2020
5. FTMJOUQMVHJOWVF!OFYU 7VF
   
   Ͱഇࢭ͞ΕΔػೳΛ͜ΕҎ্࢖Θͤͨ͘ͳ͍ • 7VF
   
   ؀ڥʹ FTMJOUQMVHJOWVF!OFYU Λಋೖ • WCFUB
   Ͱ 7VF
   
   ͷαϙʔτΛ։࢝ IUUQTRJJUBDPNPUBNFTIJJUFNTGGEFG • WVFWVFYYY
   Λ FYUFOE • GJY
   Ͱमਖ਼Ͱ͖Δ΋ͷ΋ΘΓͱ͋Δ • 7VF
   
   ؀ڥͰΤϥʔʹͳΔ SVMF
   ʹ͍ͭͯ͸ͱΓ͋͑ͣ XBSOJOH
   ʹ • FH
   WVFOPEFQSFDBUFEGJMUFS • ։ൃऀ͕͏͔ͬΓ࢖ͬͯ͠·ͬͨͱ͖ʹؾ͔ͮͤΔ • $*
   ͳͲͱ࿈ܞͯ͠औΓక·Δͷ΋͍͍͔΋
6. 'JY
   7VF
   
   FSSPST
   JO
   7VF
   
   FOW 7VF
   
   ؀ڥͰରԠͰ͖Δ໰୊͸ͭͿ͓ͯ͘͠ 
   7VF
   
   ʹΞοϓάϨʔυͨ࣌͠ͷΤϥʔΛݮΒͤΔ FH
   'JMUFS • NFUIPE
   ʹॻ͖׵͑Ε͹ 7VF
   
   Ͱ΋ 7VF
   
   Ͱ΋ಈ͘ FH
   &WFOU
   IVC • NJUU
   ͳͲͷϥΠϒϥϦʹஔ͖׵͓͑ͯ͘ IUUQTHJUIVCDPNWVFKTSGDTCMPCNBTUFSBDUJWFSGDTFWFOUTBQJDIBOHFNE • কདྷతʹ͸ 7VFY ΍ $VTUPN
   &WFOU
   Λ࢖͏͜ͱ΋ ݕ౼ͨ͠΄͏͕ྑͦ͞͏
7. 8PSL
   PO
   7VF
   
   CSBODI NBJO
   7VF
   
   ͔Β 7VF
   
   ༻ͷ CSBODI
   Λ࡞੒ • 7VF
   
   ༻ͷมߋ࡞ۀΛߦ͏ • มߋ͠ͳ͍ͱಈ͔ͤͳ͍Α͏ͳ΋ͷ͚ͩʹͱͲΊΔ • %FQFOEFODZ
   ͷΞοϓσʔτ • #VJME
   ઃఆ • (MPCBM
   "1*
   EJSFDUJWF
   WVFY
   WVFSPVUFS
   
    • FUD • NBJO
   ͷมߋΛසൟʹऔΓࠐΉ • NBJO
   Ͱ 7VF
   
   ରࡦ͓͚ͯ͠͹ NFSHF
   ΋গָ͠ʹ • ࠩ෼͕େ͖͘ͳΔͱ NFSHF
   ͕ਏ͘ͳΔͷͰେ͖ͳมߋ͸͍Εͳ͍ • $PNQPTJUJPO
   "1*
   ͱ͔࢖͍ͨ͘ͳΔ͚Ͳͦ͜͸զຫ • ैདྷͷॻ͖ํͰ΋໰୊ͳ͘ಈ͘ * package-lock.json: +345 / -85
8. 5PPMT WVFDPEFNPE IUUQTHJUIVCDPNWVFKTWVFDPEFNPE • SFBDUDPEFNPOE ͷ 7VF
   ൛Έ͍ͨͳ΋ͷ • ػցతʹม׵Ͱ͖ΔΑ͏ͳ΋ͷͰ͋Ε͹ $-*
   ΍ "1*
   Ͱ ࣗಈతʹߦ͏͜ͱ͕Ͱ͖Δ 7VFKT EFWUPPMT CFUB
   IUUQTDISPNFHPPHMFDPNXFCTUPSFEFUBJMWVFKTEFWUPPMTMKKFNMMMKDNPHQGB QCLLJHICIIQQKECH • 7VF
   
   ΞϓϦͷσόοάʹ͸ࠓͷͱ͜Ζͪ͜Β͔͠࢖͑ͳ͍ BT
   PG
   
9. .JTD 5ZQF4DSJQU • 7VFFYUFOE ͰίϯϙʔωϯτΛఆٛͯ͠Δ͜ͱ͕ଟ͍ͱࢥ͏͕ 7VF
   
   Ͱ͸࢖͑ͳ͍ ࢀߟ
   σίϨʔλ࢖Θͳ͍ 7VFKT
   5ZQF4DSJQU
   ͰਐΜͩʮ-*/&ͷ͓೥ۄʯΩϟϯϖʔϯ IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHWVFKTUZQFTDSJQUPUPTIJEBNB • EFGJOF$PNQPOFOU ʹมߋ • WVFDPEFNPE U
   EFGJOFDPNQPOFOU • 7VF
   
   ؀ڥͰઌߦͯ͠ॻ͖׵͍͑ͨ৔߹͸ !WVFDPNQPTJUJPOBQJ QMVHJO
   Λ
10. .JTD 8FC
    $PNQPOFOUT • JT$VTUPN&MFNFOU Ͱλά໊ΛೝࣝͰ͖ΔΑ͏ʹ͠ͳ͍ͱ͍͚ͳ͍ IUUQTWWVFKTPSHBQJBQQMJDBUJPODPOGJHIUNMJTDVTUPNFMFNFOU • 8FCQBDL
    Λ࢖͍ͬͯΔ৔߹͸ WVFMPBEFS
    ͷ PQUJPO
    ʹ௥Ճ͢Δ IUUQTHJUIVCDPNWVFKTWVFOFYUJTTVFTJTTVFDPNNFOU • LFCBCDBTF
    Λ࢖͍ͬͯΔ৔߹͸ DBNFM$BTF
    ʹม׵͠ͳ͍ͱ ಈ͔ͳ͍͜ͱ͕͋ΔͷͰ஫ҙ IUUQTWWVFKTPSHBQJEJSFDUJWFTIUNMWCJOE
11. THANK YOU