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

&/(*/&WPMɹ+BO ɹ7VF௒ೖ໳ ࠓ੢ढ़จ Ώ͘7VF͘Δ7VF

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

ຊ೔࿩͢͜ͱ w 7VFͷ͓͞Β͍ w 7JUFͷ͜ͱ͸͡Ί w ࠷৽7VFղઆ w 7VFͷվળ఺ w
7VFͷ৽ػೳ w 7VFͷഁյతมߋ

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

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

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

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

7VFͷ৽ػೳ w $PNQPTJUJPO"1* w 5FMFQPSU w 'SBHNFOUT w &NJUT$PNQPOFOU0QUJPO ˠ·ͬͨ͘৽͍͠ίϯϙʔωϯτͷهड़༷ࣜ
ˠςϯϓϨʔτͷ࿮Λ௒͑ͨࣗ༝ࣗࡏͳߏ੒ ˠෳ਺ϧʔτཁૉͷαϙʔτ ˠίϯϙʔωϯτ͕ൃߦ͢ΔΧελϜΠϕϯτͷจॻԽ

$PNQPTJUJPO"1* ·ͬͨ͘৽͍͠ίϯϙʔωϯτͷهड़༷ࣜ $PNQPTJUJPO"1*͸ϩδοΫΛ߹੒ؔ਺ʢDPNQPTJUJPOGVODUJPOʣͱͯ͠Χϓηϧ ԽͰ͖Δ"1*Ͱ͢ɻैདྷͷهड़༷ࣜΛ0QUJPOT"1*ͱݺͿΑ͏ʹͳΓ·ͨ͠ɻ 0QUJPOT"1* $PNQPTJUJPO"1* /&8 TFUVQؔ਺͸߹੒ؔ਺͕ݺͼग़͞ΕΔΤϯτϦϙΠϯτͱͯ͠ػೳ

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

$PNQPTJUJPO"1*ͷϝϦοτ w UIJTґଘͷղফ w ϩδοΫΛ࠶ར༻͠΍͍͢ w 5ZQF4DSJQUͷܕਪ࿦͕ಇ͖΍͍͢ w Մಡੑͷ޲্ ˠ߹੒ؔ਺͸Ҿ਺ͱάϩʔόϧ7VF"1*ͷΈʹґଘ
ˠϛοΫεΠϯɺߴ֊ίϯϙʔωϯτΑΓσϝϦοτ͕গͳ͍ ˠ֤3FBDUJWJUZ"1*͸୯७ͳؔ਺Ͱ͋ΔͨΊܕ΋୯७ ˠؔ৺ͷ෼཭͕ಇ͖΍͍͢

5FMFQPSU ςϯϓϨʔτͷ࿮Λ௒͑ͨࣗ༝ࣗࡏͳߏ੒ UFMFQPSU͸7VFͷ૊ΈࠐΈίϯϙʔωϯτͰ͢ɻςϯϓϨʔτʹهड़ͨ͠ίϯ ςϯπΛϖʔδ಺ͷ೚ҙͷՕॴʹҠಈͤ͞Δ͜ͱ͕Ͱ͖·͢ɻϞʔμϧͷ[JOEFY ໰୊ͷճආʹ༗ޮͰ͢ɻ UPଐੑ஋ʹηϨΫλΛࢦఆ͢Δ͜ͱͰ೚ҙͷཁૉʹҠಈͰ͖·͢ ։ൃ౰ॳ͸QPSUBMͱ͍͏໊લͰͨ͠

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

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

7VFͷഁյతมߋ w άϩʔόϧ7VF"1* w WNPEFM w 'JMUFST w POɺPGGɺPODF w
UFNQMBUFGVODUJPOBM ˠΞϓϦέʔγϣϯΠϯελϯεͷੜ੒͸OFX7VF ͔ΒDSFBUF"QQ ΁มߋ ˠ૒ํ޲σʔλόΠϯσΟϯά"1*ͷඪ४Խ ˠϑΟϧλߏจͷ࡟আ ˠطଘͷΠϕϯτόεʹ஫ҙ ˠ7VFͰ͸ɺେ෯ͳ଎౓վળɺϝϞϦ࢖༻ྔͷվળ΋͋Γෆཁ

·ͱΊ 7VF͸೥Ҏ্ͷ։ൃظؒΛܦͯϦϦʔε͞Ε͓ͯΓɺ 7VF্࢙࠷େͷϦϦʔεʹͳΓ·͢ɻ $PNQPTJUJPO"1*Λ͸͡Ίͱͨ͠஫໨͢΂͖৽ػೳ΍ɺഁյతมߋ͕͋Γ·͢ɻ 7VFͷઃܭࢥ૝Ͱ͋ΔʮϓϩάϨογϒϑϨʔϜϫʔΫʯ͸ɺ ࣗ਎ͷशख़౓ʹ߹Θͤͨ։ൃ͕Ͱ͖·͢ɻ ·ͣ͸7JUFͰखܰʹ7VFͷ։ൃ؀ڥΛߏங͠·͠ΐ͏ʂ

ࢀߟจݙ 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

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 7VFͷίʔυωʔϜ͸ʰ0OF1JFDFʱ

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

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

IMANISHI TOSHIFUMI

More Decks by IMANISHI TOSHIFUMI

Other Decks in Technology

Featured

Transcript

&/(*/&WPMɹ+BO ɹ7VF௒ೖ໳ ࠓ੢ढ़จ Ώ͘7VF͘Δ7VF

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

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

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

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

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

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

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

$PNQPTJUJPO"1* ·ͬͨ͘৽͍͠ίϯϙʔωϯτͷهड़༷ࣜ $PNQPTJUJPO"1͸ϩδοΫΛ߹੒ؔ਺ʢDPNQPTJUJPOGVODUJPOʣͱͯ͠Χϓηϧ ԽͰ͖Δ"1Ͱ͢ɻैདྷͷهड़༷ࣜΛ0QUJPOT"1ͱݺͿΑ͏ʹͳΓ·ͨ͠ɻ 0QUJPOT"1 $PNQPTJUJPO"1* /&8 TFUVQؔ਺͸߹੒ؔ਺͕ݺͼग़͞ΕΔΤϯτϦϙΠϯτͱͯ͠ػೳ

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

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

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

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

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 7VFͷίʔυωʔϜ͸ʰ0OF1JFDFʱ

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

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

More Decks by IMANISHI TOSHIFUMI

Other Decks in Technology

Featured

Transcript

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

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