2019-08-17 CaT vol.7 真夏のVue.js祭りにてお話してきました。
OPUFΛ/VYUKTͰ࠶ߏஙͨ͠OE$B5WPMਅՆͷ7VFKTࡇΓ Ҫ |@GVLVJSFUV
View Slide
ࣗݾհҪ[email protected]w גࣜձࣾϐʔεΦϒέΠΫ• since 2015.3 ~• Engineerw ϑϩϯτΤϯυόοΫΤϯυΠϯϑϥͱͳΜͰΔϚϯw ࠷ۙͬͺΒ(Pw ੨ࡏॅw ϦϞʔτϫʔΧʔ@fukuiretu@fukuiretur82
˞ଓฤͰ͢
OPUFͷϑϩϯτΤϯυͷาΈ /VYUKTͷ৽ΛৼΓฦΔ /VYUKTݕ౼தPSಋೖͨͯ͠ͷํΞδΣϯμ
50%0ޙೖΕΫϦΤΠλʔ͕จষϚϯΨɺࣸਅɺԻΛߘ͢Δ͜ͱ͕Ͱ͖ɺϢʔβʔͦͷίϯςϯπΛָ͠ΜͰԠԉͰ͖ΔϝσΟΞϓϥοτϑΥʔϜ
݄ؒΞΫςΟϒϢʔβʔ1,000ສਓ˞݄࣌
OPUFͷ։ൃ։࢝#BDLCPOFKT͕ओྲྀ͕ͩͬͨ"OHVMBS+4 ܥΛ࠾༻ཧ༝w XBZCJOEJOHw αʔόʔαΠυΛ"1*ʹઐ೦ˠωΠςΟϒΞϓϦͱڞ༻w ϦΫϧʔςΟϯά
ϩʔϯνɻ͕ɺঃʑʹ՝͕ු͖ூΓʹٕज़తw /PU443ˠॳظද͕͍ࣔw 3BJMTͷΤίγεςϜΛར༻ͨ͠ϑϩϯτΤϯυٕज़తෛ࠴w /PίʔσΟϯάنw /Pίϯϙʔωϯτઃܭϧʔϧ
θϩϕʔεͰ৽Λݕ౼طଘͷٕज़ͷԆͰղܾ͕ࠔ࠾༻
/VYUKTͷ࠾༻ཧ༝ίϛϡχςΟͷΓ্͕Γ͠Έ͢͞نϞμϯͳ։ൃڥΤΩεύʔτͷίϯαϧ
'&ઐ͕͍ͳͯ͘ϝϯςφϒϧʹίϛϡχςΟͷΓ্͕Γ͠Έ͢͞نϞμϯͳ։ൃڥΤΩεύʔτͷίϯαϧ/VYUKTͷ࠾༻ཧ༝
)5.-͕গ͠༨ஊ
! ! !ΤϯδχΞc໊! !σβΠφʔc໊/VYUҠߦνʔϜͷര˞'&ઐ໊/VYUҠߦνʔϜ
/VYUҠߦνʔϜͷϛογϣϯOPUFܑఋͷҠߦw هࣄৄࡉϖʔδw ΫϦΤΠλʔ5PQϖʔδw ϚΨδϯ5PQϖʔδ
։ൃϑϩʔिؒ4QSJOUλεΫཧZenHub;Γ͔͑ΓKPTϫʔΫϑϩʔGitHubFlow
w "OHVMBS+4൛ॏϝϯςͱͷਏ͍ઓ͍ʜw '&!OJDFEFSZೖࣾΤϯδχΞ໊ମ੍w ΞΫηγϏϦςΟw ίʔυεϓϦοςΟϯά d63-୯ҐͰগͮͭ͠/VYUԽ
࣌ͷOPUFͷΞʔΩςΫνϟ
-BNCEB͕ಥવམͪΔͷר
IUUQTHJUIVCDPNBXTMBCTBXTTFSWFSMFTTFYQSFTTJTTVFT
ΞδΣϯμ͋Δಥવਖ਼ৗʹಈ࡞࢝͠Ί͕ͨʜෆ҆Λ১͑ͣΞʔΩςΫνϟมߋΛݕ౼-BNCEB͕ಥવམͪΔͷר
ΞʔΩςΫνϟͷมߋw 43&!GVUPBTFೖࣾw -BNCEBˠ&MBTUJD#FBOTUBMLʹw บ͋Δ͚Ͳ҆ఆӡ༻ͯ͠Δʢͱࢥ͏ʣ
dݱࡏͷOPUFͷΞʔΩςΫνϟ
5ZQF4DSJQUԽΛਐΊΔw '&!NQೖࣾΤϯδχΞ໊ମ੍w ίʔυංେԽˠ*'ͷᐆດ͕͞ঃʑʹετϨεʹw 54ͷݟ͕͋Δ!NQΛத৺ʹஈ֊తʹҠߦ
هࣄৄࡉϖʔδϦϦʔε
ϦϦʔεޙʹҰଉ͍͍ͭͯΔγʔϯهࣄৄࡉϖʔδϦϦʔε
"1*ͷෛՙࢄͰ͖͓ͯΒͣߴෛՙʹ Γ͠खॱΛޡΓɺαʔϏεશମ͕མͪΔ࣍ࡂ͕ʜແࣄނͱ͍͔ͳ͔ͬͨʜޙʹແࣄϦϦʔεهࣄৄࡉϖʔδϦϦʔε
ΫϦΤΠλʔ5PQϖʔδϦϦʔε
͓͓Αͦॲཱ͕ͬͨͷͰ/VYUҠߦνʔϜղࢄΫϦΤΠλʔ5PQϖʔδϦϦʔε
ϚΨδϯ5PQϖʔδϦϦʔε
/VYUҠߦνʔϜղࢄޙ!TOBHBJ͕ҰਓͰॗʑͱTo Be Continued…ϚΨδϯ5PQϖʔδϦϦʔε
ྑ͔ͬͨ͜ͱ/VYUKTͷ৽ΛৼΓฦΔ
69ͷ্ %9ͷ্ ϦϦʔε࣌ͷਫ਼ਆతΏͱΓ ΤϥʔͷݕͱΈԽྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
69ͷ্ྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
ϖʔδͷॳظදࣔ69ͷ্
443ͷ͓͔͛ͰΊͪΌ͘ͳͬͨϖʔδͷॳظදࣔಛʹ4UBSU3FOEFSͱ4QFFE*OEFY4UBSU3FOEFSϨϯμϦϯά͕։࢝͞ΕΔ·Ͱʹ͔͔Δ࣌ؒ4QFFE*OEFYίϯςϯπ͕ʹݟ͑Δঢ়ଶʹͳΔ·Ͱͷ࣌ؒ
"OHVMBS+4൛/VYUKT൛ ࣌8FC1BHF5FTUͷൺֱ
/VYUKT൛ ࣌/VYUKT൛ ࣌8FC1BHF5FTUͷൺֱ
"OHVMBS+4൛/VYUKT൛ ࣌-JHIUIPVTFͷൺֱ
/VYUKT൛ ࣌/VYUKT൛ ࣌-JHIUIPVTFͷൺֱ
͔࣌ΒͷύϑΥʔϚϯε্ཁҼw -BNCEBˠ&MBTUJD#FBOTUBMLw /VYUKTͷόʔδϣϯΞοϓw ίʔυεϓϦοςΟϯάw ϥΠϒϥϦʢ[email protected]ʣͷܰྔԽw OVYUCVJMEBOBMZ[FͰνΣοΫ
ϒϥβόοΫ࣌ͷεΫϩʔϧҐஔ69ͷ্
"OHVMBS+4൛ผΠϯυͰ։͍͍ͯͨεΫϩʔϧҐஔ͕อ࣋͞ΕΔΑ͏ʹͳͬͨϒϥβόοΫ࣌ͷεΫϩʔϧҐஔ
%9ͷ্ྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
Ͳ͜ʹԿΛॻ͚͍͍͔໌֬ʹͳͬͨ%9ͷ্
ΞδΣϯμͲ͜ʹԿΛॻ͚͍͍͔໌֬ʹͳͬͨw /VYUKTͷنw ෦ຖͷ͕໌֬w "UPNJD%FTJHOϕʔεͷίϯϙʔωϯτઃܭϧʔϧw ཻʹ໊শ͕͋ΔͷͰ͕͍ٞ͢͠w ݫີʹΓ͗ͣ͢ɺνʔϜͰམͱ͠ॴΛܾΊΔ
$44ͷάϩʔόϧείʔϓͷղফ%9ͷ্
ΞδΣϯμ$44ͷάϩʔόϧείʔϓͷղফw 4DPQFE$44ͷԸܙw ίϯϙʔωϯτʹTDPQFด͡Δ͕ɺ '-0$44ϕʔεͰͷωʔϛϯάΛ࠾༻w (SFQBCJMJUZͷ؍
ΞδΣϯμFH"UPNJD%FTJHOͷཻͷ಄จࣈlzίϯϙʔωϯτ໊$44ͷάϩʔόϧείʔϓͷղফ
ϦϦʔε࣌ͷਫ਼ਆతΏͱΓྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
63-୯ҐͰͷҠߦϦϦʔε࣌ͷਫ਼ਆతΏͱΓ
ΞδΣϯμ63-୯ҐͰͷҠߦϏοΫόϯϦϦʔεΛආ͚Δͷఆੴ͕ͩʜ63-୯ҐΑΓখ͞ͳϦϦʔεʹͰ͖ͳ͍
ΞδΣϯμ63-୯ҐͰͷҠߦࣄނͬͯ"OHVMBS+4൛ʹ͙͢ʹΓସ͑ΕΔ҆৺ײΓସ͑࡞ۀ$MPVE'SPOUͷઃఆมߋͷΈਫ਼ਆతΏͱΓ
ΤϥʔͷݕͱΈԽྑ͔ͬͨ͜ͱc/VYUKTͷ৽ΛৼΓฦΔ
ΞδΣϯμΤϥʔͷݕ&MBTUJD#FBOTUBMLαʔόʔαΠυͷΤϥʔΛૹ৴ΫϥΠΞϯταΠυͷΤϥʔΛૹ৴Τϥʔ༻ͷνϟϯωϧʹ௨
ΞδΣϯμΫϦςΟΧϧͳΤϥʔҎ֎์ஔ͞Ε͕ͪʜ൪੍ͰεϓϨουγʔτʹΤϥʔϩάΛϓʔϧ͠ɺఆظతʹ୨Է͠Τϥʔͷݕ
ΞδΣϯμ൪੍ͰࣗಈԽεϓϨουγʔτͷॻ͖ࠐΈͰޮԽࣗಈԽɾޮԽ
ΞδΣϯμ൪ͷϩʔςγϣϯΛࣗಈԽ
ΞδΣϯμ".ʹىಈલճͷ൪ऀͷΠϯσοΫεΛऔಘࠓճͷ൪ऀͷ4MBDL*%Λऔಘࠓճͷ൪ऀͷΠϯσοΫεΛอଘ4MBDLʹ൪Λ௨൪ͷϩʔςγϣϯΛࣗಈԽ
ΞδΣϯμΤϥʔͷ͚ΛޮԽಛఆͷϦΞΫγϣϯΛϑοΫͯ͠εϓϨουγʔτʹॻ͖ࠐΈ
ΞδΣϯμϦΞΫγϣϯJHOPSFআ֎ରCVHΞϓϦέʔγϣϯͷόάEJTDVTཁٞEVQMJDBUFҎલ͚ͨ͠ΤϥʔͱॏෳΤϥʔͷ͚ΛޮԽ
ΞδΣϯμΤϥʔϩάਫ਼ࠪͷΈԽࡁͱඋߟҎ֎ࣗಈೖྗ͞ΕΔ
ΞδΣϯμࠓޙͷ՝/VYUKTͷ৽ΛৼΓฦΔ
ύϑΥʔϚϯε εέʔϥϏϦςΟ ϝϯςφϏϦςΟࠓޙͷ՝c/VYUKTͷ৽ΛৼΓฦΔ
ύϑΥʔϚϯεࠓޙͷ՝c/VYUKTͷ৽ΛৼΓฦΔ
ը૾͕ॏ͍ύϑΥʔϚϯε
1BHF4QFFE*OTJHIUTͰͷղੳ݁Ռը૾͕ॏ͍Ϩεϙϯγϒʹը૾Λ࠷దԽ͢Δػӡ
Ұ෦Ͱ Λݕূதը૾͕ॏ͍
9 performance secrets revealedύϑΥʔϚϯε
ݩωλhttps://slides.com/akryum/vueconfus-2019#/
Functional componentsGVODUJPOBMΛ͚Δ͚ͩhttps://slides.com/akryum/vueconfus-2019#/3
εςʔτϨεͰϥΠϑαΠΫϧෆཁͳίϯϙʔωϯτશͯஔ͖͑ΒΕΔʢϋζʣFunctional components
εέʔϥϏϦςΟࠓޙͷ՝c/VYUKTͷ৽ΛৼΓฦΔ
/PEFKTαʔόʔͷෛՙܰݮεέʔϥϏϦςΟ
/PEFKTαʔόʔͷෛՙܰݮهࣄ͕όζΔΦʔτεέʔϧ͕͍͔ͭͣʹαʔϏεఀࢭઈରʹආ͚͍ͨʂʂ
w $%/ͷ&EHFͰ͍͍ײ͡ʹw 4FSWJDF8PSLFS 8PSLCPYͰ͍͍ײ͡ʹw ίϯϙʔωϯτͷΩϟογϡΛ͍͍ײ͡ʹw هࣄ୯ҐͰΞΫηε੍ݶʢΛฦ͢ʣෛՙܰݮରࡦҊ
ϝϯςφϏϦςΟࠓޙͷ՝c/VYUKTͷ৽ΛৼΓฦΔ
"1*ϦΫΤετॲཧͷநԽϝϯςφϏϦςΟ
ݩωλhttps://slides.com/nakajmg/replace-axios-module#/
ݱঢ়OVYUDPNNVOJUZBYJPTNPEVMFΛར༻FHετΞ͔Βͷར༻ྫ
nuxt-community/axios-modulew ίϯϙʔωϯτετΞ͔ΒUIJTͰࢀরͰ͖͓ͯखܰw Πϯλʔηϓλʔ͕༻ҙ͞Εͯͯศརw PO3FRVFTU DPOGJHw PO&SSPS FSSw FUDʜ
Կ͕͔w ΤϯυϙΠϯτύϥϝʔλมߋw IUUQΫϥΠΞϯτมߋ"1*ϦΫΤετॲཧ͕ࢄࡒ͠มߋʹऑ͘Մಡੑ͕͍
Ͳ͏͍͔ͨ͠ "1*௨৴༻ͷήʔτΣΠΛڬΉ ΤϯυϙΠϯτຖʹؔԽมߋՕॴΛ࠷খݶʹ͑ΒΕ͔ͭՄಡੑ্͕͕Δ
27VFKT /VYUKTΛ࢝Ίɺ3FBDU"OHVMBSͳͲ͍ΘΏΔେϑϨʔϜϫʔΫͷ͍ͣΕ͔Λͬͯ ։ൃ͠ͳ͍ͱμϝ
"શવμϝ͡Όͳ͍ͱࢥ͍·͢ʂw ղܾ͍ͨ͠՝ͷຊ࣭ΛݟۃΊͯɺ αʔϏενʔϜʹ͋ͬͨબΛ͢Δ͜ͱ͕େࣄɻw ৗʹ࠷৽ͷτϨϯυΛ͏ඞཁͳ͍͕ɺ ΑΓ࠷ྑͷબ͕͋ΔͷͰʁৗʹࣗ͠ɺ ใऩू͖ͩ͢ͱࢥ͍·͢ɻ
2443࠾༻͢Δ͖
w ϢχόʔαϧରԠͰ։ൃίετw /PEFKTαʔόʔͷӡ༻Ͱӡ༻ίετ"αʔϏεͷಛੑ্ɺຊʹඞཁ͔Ͳ͏͔ۛຯ͠ɺۃྗ࠾༻͠ͳ͍͖ͩͱࢥ͍·͢ʂ࠾༻͢Δ߹ͷτϨʔυΦϑ
2443Λ࠾༻͠ͳ͍߹/VYUKTΘͳ͍͖
"443ΛΘͣͱेՁ͕͋Δ͠ɺ Θͣͱར༻Ͱ͖ΔϞʔυ͕༻ҙ͞Ε͍ͯ·͢ʂ41"OVYUDPOGJHKTʹNPEFTQBΛઃఆ͢Δ͚ͩ੩తαΠτੜOVYUHFOFSBUFΛ࣮ߦ͢Δ͚ͩ
$44/JUF"PNPSJWPMૣׂ͋Γ·͢ʂhttp://cssnite-aomori.net/vol12/
7VF'FTاۀϒʔεͰ͓͓ͪͯ͠Γ·͢https://vuefes.jp/2019/
͋Γ͕ͱ͏͍͟͝·ͨ͠ΤϯδχΞશํҐͰืूதhttps://www.wantedly.com/companies/pieceofcake/projects