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

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

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
   $PNQPOFOU
   0QUJPO ˠ
   ·ͬͨ͘৽͍͠ίϯϙʔωϯτͷهड़༷ࣜ
   ˠ
   ςϯϓϨʔτͷ࿮Λ௒͑ͨࣗ༝ࣗࡏͳߏ੒ ˠ
   ෳ਺ϧʔτཁૉͷαϙʔτ ˠ
   ίϯϙʔωϯτ͕ൃߦ͢ΔΧελϜΠϕϯτͷจॻԽ
9. $PNQPTJUJPO
   "1* Š
   ·ͬͨ͘৽͍͠ίϯϙʔωϯτͷهड़༷ࣜ
   Š $PNQPTJUJPO
   "1*
   ͸ϩδοΫΛ߹੒ؔ਺ʢDPNQPTJUJPO
   GVODUJPOʣͱͯ͠Χϓηϧ ԽͰ͖Δ
   "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
    $PNQPOFOU
    0QUJPO Š
    ίϯϙʔωϯτ͕ൃߦ͢ΔΧελϜΠϕϯτͷจॻԽ
    Š FNJUT
    Φϓγϣϯ͸ɺίϯϙʔωϯτ͕ൃߦ͢ΔΧελϜΠϕϯτͷจॻԽΛ໨తͱͨ͠৽͍͠ΦϓγϣϯͰ ͢ɻ͢΂ͯͷΧελϜΠϕϯτ͸
    FNJUT
    Φϓγϣϯʹఆٛ͢Δ͜ͱ͕ਪ঑͞Ε͍ͯ·͢ɻ ΧελϜΠϕϯτͱҰॹʹૹ৴͢Δσʔλͷ༗ޮੑΛνΣοΫ
15. 7VF
    
    ͷഁյతมߋ w άϩʔόϧ
    7VF
    "1*
    w WNPEFM
    w 'JMUFST
    w POɺPGGɺPODF
    w UFNQMBUF
    GVODUJPOBM ˠ
    ΞϓϦέʔγϣϯΠϯελϯεͷੜ੒͸
    OFX
    7VF
    ͔Β
    DSFBUF"QQ
    ΁มߋ ˠ
    ૒ํ޲σʔλόΠϯσΟϯά
    "1*
    ͷඪ४Խ ˠ
    ϑΟϧλߏจͷ࡟আ ˠ
    طଘͷΠϕϯτόεʹ஫ҙ ˠ
    7VF
    
    Ͱ͸ɺେ෯ͳ଎౓վળɺϝϞϦ࢖༻ྔͷվળ΋͋Γෆཁ
16. ·ͱΊ 7VF
    
    ͸
    
    ೥Ҏ্ͷ։ൃظؒΛܦͯϦϦʔε͞Ε͓ͯΓɺ
    7VF
    ্࢙࠷େͷϦϦʔεʹͳΓ·͢ɻ
    $PNQPTJUJPO
    "1*
    Λ͸͡Ίͱͨ͠஫໨͢΂͖৽ػೳ΍ɺഁյతมߋ͕͋Γ·͢ɻ
    7VF
    ͷઃܭࢥ૝Ͱ͋ΔʮϓϩάϨογϒϑϨʔϜϫʔΫʯ͸ɺ
    ࣗ਎ͷशख़౓ʹ߹Θͤͨ։ൃ͕Ͱ͖·͢ɻ
    ·ͣ͸
    7JUF
    Ͱखܰʹ
    7VF
    
    
    ͷ։ൃ؀ڥΛߏங͠·͠ΐ͏ʂ
17. ࢀߟจݙ w 7VFKT
    w 8&# %#
    13&44
    7PM
    w 7VF
    ͔Β࢝ΊΔɺ7VFKT
    c
    $PEF(SJE
    w 6*5
    */4*%&
    
    -*/&
    6*5ࣨͷ։ൃऀʹΑΔʮ࠷৽ͷϑϩϯτΤϯυʯΛΩϟονΞο ϓͰ͖Δ
    1PEDBTU
    w $PNQPTJUJPO
    "1*
    3'$
    c
    7VF
    $PNQPTJUJPO
    "1* IUUQTWWVFKTPSH IUUQTHJIZPKQNBHB[JOFXEQSFTTBSDIJWFWPM IUUQTXXXDPEFHSJEOFUTFSJFTWVF IUUQTVJUJOTJEFMJOFDPSQDPN IUUQTDPNQPTJUJPOBQJWVFKTPSH
18. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 7VF
    
    ͷίʔυωʔϜ͸ʰ0OF
    1JFDFʱ