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

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

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

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers

September 18, 2020
Tweet

Transcript

  1. がんばらない 7VF移行 Norimasa Hayashida UIT Department1, Front-End Dev Center 09/18/2020

  2. 7VFJTDPNJOH 2ʹϦϦʔε༧ఆ IUUQTHJUIVCDPNWVFKTWVFQSPKFDUT 3$൛͕ར༻Մೳ IUUQTHJUIVCDPNWVFKTSGDTJTTVFT #PUIUIF"1*BOEJNQMFNFOUBUJPOPG7VFDPSFIBWFTUBCJMJ[FE /POFXNBKPSGFBUVSFTPSCSFBLJOHDIBOHFTCFGPSFUIFGJOBMSFMFBTF ͸΍͘࢖͍͍ͨͰ͢Ͷ Ͱ΋طଘͷ 7VFϓϩδΣΫτ͸ʁ

    ެࣜυΩϡϝϯτ΋ IUUQTWWVFKTPSHHVJEF
  3. 7VF&OEPGMJGF -54͸ ϦϦʔεޙ͔Β ϲ݄ؒ ༧ఆ • ΞΫςΟϒͳϓϩδΣΫτͩͱҠߦظؒΛऔΓͮΒ͍ • ن໛͕େ͖ΊͩͱӨڹൣғ͕޿ͯ͘໘౗ͦ͏ •

    ઌԆ͹͠ʹ͍ͯͨ͠Β͍ͭͷؒʹ͔ظݶ͕ഭ͍ͬͯͯ߄ͯΔ ݱߦόʔδϣϯͷ։ൃͱฒߦ͠ͳ͕Β 7VF΁ͷҠߦ४උΛ • 7VF൛ͷͱͷࠩ෼Λ࠷খݶʹ • #SFBLJOH$IBOHFTͷӨڹ͸ʁ IUUQTWWVFKTPSHHVJEFNJHSBUJPOJOUSPEVDUJPOIUNMCSFBLJOHDIBOHFT • ഇࢭ͞ΕΔػೳΛ࢖ͬͨίʔυ͸͜ΕҎ্ DPNNJUͤ͞ͳ͍ FTMJOU ͷ׆༻ • 7VFͷ··ରॲͰ͖Δ΋ͷ͸΍ͬͯ͠·͓ͬͯ͘ FH'JMUFS • ॻ͖׵͑ඞਢͷ΋ͷ͸Ҡߦ࡞ۀ༻ͷ CSBODI΍ SFQPTJUPSZͰ FH(MPCBM"1* • $PNQPTJUJPO"1*ͱ͍ͬͨ৽ػೳͷར༻͸ 7VFԽ׬ྃޙʹ ࢖Θͳͯ͘΋ಈ͘ ͱ͍͏ͷ͸Α͋͘Δ࿩
  4. -FBSOCZFYBNQMF -*/&-*7&-*/&-*7&7*&8*/( IUUQTMJWFMJOFNF • ΦϯϥΠϯϥΠϒ഑৴ϓϥοτϑΥʔϜ • 8FFLMZͰϦϦʔεத • 7VF 7VFY

    7VF3PVUFS • PG4'$T * As of 09/15/2020
  5. FTMJOUQMVHJOWVF!OFYU 7VFͰഇࢭ͞ΕΔػೳΛ͜ΕҎ্࢖Θͤͨ͘ͳ͍ • 7VF؀ڥʹ FTMJOUQMVHJOWVF!OFYU Λಋೖ • WCFUBͰ 7VFͷαϙʔτΛ։࢝ IUUQTRJJUBDPNPUBNFTIJJUFNTGGEFG

    • WVFWVFYYYΛ FYUFOE • GJYͰमਖ਼Ͱ͖Δ΋ͷ΋ΘΓͱ͋Δ • 7VF؀ڥͰΤϥʔʹͳΔ SVMFʹ͍ͭͯ͸ͱΓ͋͑ͣ XBSOJOHʹ • FHWVFOPEFQSFDBUFEGJMUFS • ։ൃऀ͕͏͔ͬΓ࢖ͬͯ͠·ͬͨͱ͖ʹؾ͔ͮͤΔ • $*ͳͲͱ࿈ܞͯ͠औΓక·Δͷ΋͍͍͔΋
  6. 'JY7VFFSSPSTJO7VFFOW 7VF؀ڥͰରԠͰ͖Δ໰୊͸ͭͿ͓ͯ͘͠ 7VFʹΞοϓάϨʔυͨ࣌͠ͷΤϥʔΛݮΒͤΔ FH'JMUFS • NFUIPEʹॻ͖׵͑Ε͹ 7VFͰ΋ 7VFͰ΋ಈ͘ FH&WFOUIVC •

    NJUUͳͲͷϥΠϒϥϦʹஔ͖׵͓͑ͯ͘ IUUQTHJUIVCDPNWVFKTSGDTCMPCNBTUFSBDUJWFSGDTFWFOUTBQJDIBOHFNE • কདྷతʹ͸ 7VFY ΍ $VTUPN&WFOUΛ࢖͏͜ͱ΋ ݕ౼ͨ͠΄͏͕ྑͦ͞͏
  7. 8PSLPO7VFCSBODI 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ΞϓϦͷσόοάʹ͸ࠓͷͱ͜Ζͪ͜Β͔͠࢖͑ͳ͍ BTPG
  9. .JTD 5ZQF4DSJQU • 7VFFYUFOE ͰίϯϙʔωϯτΛఆٛͯ͠Δ͜ͱ͕ଟ͍ͱࢥ͏͕ 7VFͰ͸࢖͑ͳ͍ ࢀߟσίϨʔλ࢖Θͳ͍ 7VFKT 5ZQF4DSJQUͰਐΜͩʮ-*/&ͷ͓೥ۄʯΩϟϯϖʔϯ IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHWVFKTUZQFTDSJQUPUPTIJEBNB

    • EFGJOF$PNQPOFOU ʹมߋ • WVFDPEFNPE UEFGJOFDPNQPOFOU • 7VF؀ڥͰઌߦͯ͠ॻ͖׵͍͑ͨ৔߹͸ !WVFDPNQPTJUJPOBQJ QMVHJOΛ
  10. .JTD 8FC$PNQPOFOUT • JT$VTUPN&MFNFOU Ͱλά໊ΛೝࣝͰ͖ΔΑ͏ʹ͠ͳ͍ͱ͍͚ͳ͍ IUUQTWWVFKTPSHBQJBQQMJDBUJPODPOGJHIUNMJTDVTUPNFMFNFOU • 8FCQBDLΛ࢖͍ͬͯΔ৔߹͸ WVFMPBEFSͷ PQUJPOʹ௥Ճ͢Δ

    IUUQTHJUIVCDPNWVFKTWVFOFYUJTTVFTJTTVFDPNNFOU • LFCBCDBTFΛ࢖͍ͬͯΔ৔߹͸ DBNFM$BTFʹม׵͠ͳ͍ͱ ಈ͔ͳ͍͜ͱ͕͋ΔͷͰ஫ҙ IUUQTWWVFKTPSHBQJEJSFDUJWFTIUNMWCJOE
  11. THANK YOU