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

Vue 3 超入門 ー ゆく Vue くる Vue

Vue 3 超入門 ー ゆく Vue くる Vue

社内勉強会「ENGINE vol.37」の発表資料

78d138a74c8135fe40735a286a71f4c7?s=128

IMANISHI TOSHIFUMI

January 22, 2021
Tweet

Transcript

  1. &/(*/&WPMɹ+BO  ɹ7VF௒ೖ໳ ࠓ੢ढ़จ ŠΏ͘7VF͘Δ7VFŠ

  2. ࠓ੢ढ़จ ͍·ʹ͠ ͱ͠;Έ ೥ੜ·Εʢࡀʣ ಸྑݝग़਎ˠେࡕˠ౦ژ ໋ཱؗେֶཧ޻ֶ෦ଔ झຯɿϥδΦΛௌ͘͜ͱʢ'.ˠ+8"7&ʣ ϑϩϯτΤϯυΤϯδχΞ IUUQTUXJUUFSDPNUPTIJNBSOJF 5JQTΛͭͿ΍͘

    !UPTIJNBSOJF
  3. ຊ೔࿩͢͜ͱ w 7VFͷ͓͞Β͍ w 7JUFͷ͜ͱ͸͡Ί w ࠷৽7VFղઆ w 7VFͷվળ఺ w

    7VFͷ৽ػೳ w 7VFͷഁյతมߋ
  4. 7VFͱ͸ʁ ɾWJFX૚ʹಛԽͨ͠ϑϨʔϜϫʔΫ ɾϓϩάϨογϒϑϨʔϜϫʔΫ 7VFKT͸ݩ(PPHMFࣾһͷ&WBO:PVࢯʹΑΓ࡞ΒΕͨ +BWB4DSJQUͷϑϨʔϜϫʔΫͰ͢ɻ ΞϓϦέʔγϣϯͷ੒௕ஈ֊ʹԠͨ͡πʔϧͷಋೖͰ ༷ʑͳن໛ͷ։ൃʹ΋ରԠͰ͖Δઃܭࢥ૝

  5. 7VFKTͷϦϦʔε ɾ7VFͷྺ࢙ͷதͰաڈ࠷େͷϦϦʔε ɾ$PNQPTJUJPO"1*Λ͸͡Ίͱͨ͠৽ػೳ௥Ճ΍վળɹͳͲͳͲʜ ೥݄೔ʹ೥Ҏ্ͷ݄೔Λ͔͚ͯ։ൃ͞Εͨ όʔδϣϯ͕ϦϦʔε͞Ε·ͨ͠ʂ

  6. 7JUFͷ஀ੜ Šܰྔ͔ͭߴ଎ɺ࣍ੈ୅ͷ7VF։ൃ؀ڥŠ 7JUF͸7VFͷ։ൃޙظʹొ৔ͨ͠ϊʔόϯυϧͳϏϧυπʔϧɻ 7VFϓϩδΣΫτͷ࣮ߦɺϏϧυʹՃ͑ɺ).3ͳͲɺ։ൃΛॿ͚ΔػೳΛଟ਺༗͠ ·͢ɻ ϰ Ο ʔ τ ࡞ऀ͸&WBO:PVࢯ

  7. 7VFͷվળ఺ w ܰྔԽ w ॲཧ଎౓ͷ޲্ w 5ZQF4DSJQUͷڧԽ ˠWͷ,#͔Β,#ʹܰྔԽ ˠ7VFʹ͓͚Δ$16࣌ؒͷ෼ͷະຬ ˠܕਪ࿦ͷαϙʔτڧԽɺ549ͷରԠ

  8. 7VFͷ৽ػೳ w $PNQPTJUJPO"1* w 5FMFQPSU w 'SBHNFOUT w &NJUT$PNQPOFOU0QUJPO ˠ·ͬͨ͘৽͍͠ίϯϙʔωϯτͷهड़༷ࣜ

    ˠςϯϓϨʔτͷ࿮Λ௒͑ͨࣗ༝ࣗࡏͳߏ੒ ˠෳ਺ϧʔτཁૉͷαϙʔτ ˠίϯϙʔωϯτ͕ൃߦ͢ΔΧελϜΠϕϯτͷจॻԽ
  9. $PNQPTJUJPO"1* Š·ͬͨ͘৽͍͠ίϯϙʔωϯτͷهड़༷ࣜŠ $PNQPTJUJPO"1*͸ϩδοΫΛ߹੒ؔ਺ʢDPNQPTJUJPOGVODUJPOʣͱͯ͠Χϓηϧ ԽͰ͖Δ"1*Ͱ͢ɻैདྷͷهड़༷ࣜΛ0QUJPOT"1*ͱݺͿΑ͏ʹͳΓ·ͨ͠ɻ 0QUJPOT"1* $PNQPTJUJPO"1* /&8 TFUVQؔ਺͸߹੒ؔ਺͕ݺͼग़͞ΕΔΤϯτϦϙΠϯτͱͯ͠ػೳ

  10. $PNQPTJUJPO"1* Š·ͬͨ͘৽͍͠ίϯϙʔωϯτͷهड़༷ࣜŠ $PNQPTJUJPO"1*ͰίϯϙʔωϯτΛఆٛ͢Δʹ͸3FBDUJWJUZ"1*Λ࢖༻͠·͢ɻ 7VFͰ͸ɺϦΞΫςΟϒγεςϜͰ࢖༻͞ΕΔɺϦΞΫςΟϒΛ؅ཧ͢ΔͨΊͷ ϓϩάϥϛϯά͕ݸผͷ"1*ͱͯ͠੾Γग़͞Ε·ͨ͠ɻ SFGΦϒδΣΫτ͸WBMVFͰ஋Λࢀর͠·͢ 7VFͷ7VFPCTFSWBCMFͱಉ౳

  11. $PNQPTJUJPO"1*ͷϝϦοτ w UIJTґଘͷղফ w ϩδοΫΛ࠶ར༻͠΍͍͢ w 5ZQF4DSJQUͷܕਪ࿦͕ಇ͖΍͍͢ w Մಡੑͷ޲্ ˠ߹੒ؔ਺͸Ҿ਺ͱάϩʔόϧ7VF"1*ͷΈʹґଘ

    ˠϛοΫεΠϯɺߴ֊ίϯϙʔωϯτΑΓσϝϦοτ͕গͳ͍ ˠ֤3FBDUJWJUZ"1*͸୯७ͳؔ਺Ͱ͋ΔͨΊܕ΋୯७ ˠؔ৺ͷ෼཭͕ಇ͖΍͍͢
  12. 5FMFQPSU ŠςϯϓϨʔτͷ࿮Λ௒͑ͨࣗ༝ࣗࡏͳߏ੒Š UFMFQPSU͸7VFͷ૊ΈࠐΈίϯϙʔωϯτͰ͢ɻςϯϓϨʔτʹهड़ͨ͠ίϯ ςϯπΛϖʔδ಺ͷ೚ҙͷՕॴʹҠಈͤ͞Δ͜ͱ͕Ͱ͖·͢ɻϞʔμϧͷ[JOEFY ໰୊ͷճආʹ༗ޮͰ͢ɻ UPଐੑ஋ʹηϨΫλΛࢦఆ͢Δ͜ͱͰ೚ҙͷཁૉʹҠಈͰ͖·͢ ։ൃ౰ॳ͸QPSUBMͱ͍͏໊લͰͨ͠

  13. 'SBHNFOUT Šෳ਺ϧʔτཁૉͷαϙʔτŠ 7VFͰ͸ɺίϯϙʔωϯτʹෳ਺ͷϧʔτཁૉΛ࡞੒͢Δ͜ͱ͕ՄೳʹͳΓ·ͨ͠ɻ8FCඪ४ͷ %PDVNFOU'SBHNFOUΛ7VFͰදݱ͍ͯ͠·͢ɻ 7VFߏจ 7VFߏจ /&8 ෳ਺ͷϧʔτཁૉʹ͸໌ࣔతͳଐੑͷܧঝ͕ඞཁͰ͢ ຊདྷෆཁͳEJWཁૉ

  14. &NJUT$PNQPOFOU0QUJPO Šίϯϙʔωϯτ͕ൃߦ͢ΔΧελϜΠϕϯτͷจॻԽŠ FNJUTΦϓγϣϯ͸ɺίϯϙʔωϯτ͕ൃߦ͢ΔΧελϜΠϕϯτͷจॻԽΛ໨తͱͨ͠৽͍͠ΦϓγϣϯͰ ͢ɻ͢΂ͯͷΧελϜΠϕϯτ͸FNJUTΦϓγϣϯʹఆٛ͢Δ͜ͱ͕ਪ঑͞Ε͍ͯ·͢ɻ ΧελϜΠϕϯτͱҰॹʹૹ৴͢Δσʔλͷ༗ޮੑΛνΣοΫ

  15. 7VFͷഁյతมߋ w άϩʔόϧ7VF"1* w WNPEFM w 'JMUFST w POɺPGGɺPODF w

    UFNQMBUFGVODUJPOBM ˠΞϓϦέʔγϣϯΠϯελϯεͷੜ੒͸OFX7VF ͔ΒDSFBUF"QQ ΁มߋ ˠ૒ํ޲σʔλόΠϯσΟϯά"1*ͷඪ४Խ ˠϑΟϧλߏจͷ࡟আ ˠطଘͷΠϕϯτόεʹ஫ҙ ˠ7VFͰ͸ɺେ෯ͳ଎౓վળɺϝϞϦ࢖༻ྔͷվળ΋͋Γෆཁ
  16. ·ͱΊ 7VF͸೥Ҏ্ͷ։ൃظؒΛܦͯϦϦʔε͞Ε͓ͯΓɺ 7VF্࢙࠷େͷϦϦʔεʹͳΓ·͢ɻ $PNQPTJUJPO"1*Λ͸͡Ίͱͨ͠஫໨͢΂͖৽ػೳ΍ɺഁյతมߋ͕͋Γ·͢ɻ 7VFͷઃܭࢥ૝Ͱ͋ΔʮϓϩάϨογϒϑϨʔϜϫʔΫʯ͸ɺ ࣗ਎ͷशख़౓ʹ߹Θͤͨ։ൃ͕Ͱ͖·͢ɻ ·ͣ͸7JUFͰखܰʹ7VFͷ։ൃ؀ڥΛߏங͠·͠ΐ͏ʂ

  17. ࢀߟจݙ w 7VFKT w 8&# %#13&447PM w 7VF͔Β࢝ΊΔɺ7VFKTc$PEF(SJE w 6*5*/4*%&-*/&6*5ࣨͷ։ൃऀʹΑΔʮ࠷৽ͷϑϩϯτΤϯυʯΛΩϟονΞο

    ϓͰ͖Δ1PEDBTU w $PNQPTJUJPO"1*3'$c7VF$PNQPTJUJPO"1* IUUQTWWVFKTPSH IUUQTHJIZPKQNBHB[JOFXEQSFTTBSDIJWFWPM IUUQTXXXDPEFHSJEOFUTFSJFTWVF IUUQTVJUJOTJEFMJOFDPSQDPN IUUQTDPNQPTJUJPOBQJWVFKTPSH
  18. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 7VFͷίʔυωʔϜ͸ʰ0OF1JFDFʱ