ProgressiveにVueを導入している話 / vue-progressive-integration

1SPHSFTTJWFʹ7VFΛ  ಋೖ͍ͯ͠Δ࿩ 7TFOEBJ7VFKT/VYUKTNFFUVQ .BTBTIJ)BHBʢ!)JWFTCFFʣ

⾣6ODBVHIU3FGFSFODF&SSPS)BHBJTOPUEFpOFE .BTBTIJ)BHB (JUIVCIJWFTCFF  5XJUUFS!)JWFTCFFʢ;͕͊ʣ 'SPOUFOE&OHJOFFSBU$MPVE4JHO  (SBEVBUFEઋ୆ి೾ߴઐʢͩͬͨͱ͜Ζʣ ❤7VFKT K2VFSZ Έͣ͞Θ԰ʢ཮લམ߹ʹ͋Γ·͢ʣ ɹ͜ͷલͷBZ$POGFSFODFͰதຊͷਓೝఆΛड͚Δ

ࠓճ͓࿩͢Δ͜ͱ 1SPHSFTTJWFʹ 7VFΛಋೖ͍ͯ͠Δݱ৔Ͱͷ ಋೖઓུ΍࣮ࡍͷઃܭϓϥΫςΟεΛ ௕Ίʹ͝঺հ

໔੹ࣄ߲ ॾઆ͋Γ·͢

ܖ໿ަব͕ࡁΜͩ׬੒ࡁͷܖ໿ॻΛΞοϓϩʔυ͠ɺ ૬खํ͕ঝೝ͢Δ͚ͩͰܖ໿ΛΉ͢Ϳ͜ͱ͕ग़དྷ·͢ɻ ॻྨͷड৴ऀ͸Ϋϥ΢υαΠϯʹొ࿥͢Δඞཁ͕͋Γ·ͤΜɻ ܖ໿క͔݁Βܖ໿ॻ؅ཧ·ͰՄೳͳ Ϋϥ΢υܕͷిࢠܖ໿αʔϏε ܖ໿ަবࡁͷܖ໿ॻΛΞοϓϩʔυ͠ɺ૬खํ͕ঝೝ͢Δ͚ͩͰܖ໿Λ݁Ϳ͜ͱ͕ग़དྷ·͢ɻ ॻྨͷड৴ऀ͸Ϋϥ΢υαΠϯʹొ࿥͢Δඞཁ͕͋Γ·ͤΜɻ Ϋϥ΢υαΠϯͱ͸ʁ

Ϋϥ΢υαΠϯͱ͸ʁ ిࢠܖ໿ͳΒ εϐʔυΞοϓ΋҆શੑ΋࣮ݱͰ͖·͢ ܖ໿క݁·Ͱͷ ϦʔυλΠϜͷ୹ॖ िؒ ෼ ࢴͷܖ໿ॻ ిࢠܖ໿ॻ ίϯϓϥΠΞϯεͱ
ηΩϡϦςΟڧԽ ϝʔϧɾυϝΠϯ࿈ಈͷຊਓೝূ ిࢠॺ໊ʴೝఆλΠϜελϯϓͰ ܖ໿࣌఺ͷ׬શੑΛ୲อ ✔ ෦௕ ✔

Ϋϥ΢υαΠϯͱ͸ʁ

͔͜͜Βຊ୊

എܠ ࠷ॳͷಓ͠Δ΂ͷͨͯํ 1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε

എܠ ೖࣾ࣌఺Ͱͷٕज़ελοΫ͸ʜʜ Πϯϑϥɿ"84 αʔόʔɿHP SFWFM ϑϩϯτʢ1$൛ʣɿK2VFSZ ϑϩϯτʢ41൛ʣɿK2VFSZ 7VFKTʢܥʣ ͱ͍͏͜ͱͰϑϩϯτͷओ࣠͸ HPͷςϯϓϨʔτΤϯδϯͱK2VFSZ

K2VFSZ͋Δ͋Δ ϏδωεϩδοΫͱ%0.͕ࠞࡏ ϑΝΠϧ෼ׂʹΑΔϞδϡʔϧԽΛߦ͍͕ͬͯͨɺ  ΠϕϯτͷൃՐλΠϛϯάͳͲͳͲෳࡶੑ͕૿͖ͯͨ͠ ͦͷ··QVCMJTI͍ͯͨ͠ͷͰ  ίϝϯτ͕ॻ͚ͳ͍ʢҙ֎ͱେࣄʣ 7VFKTΛຊ֨ಋೖ͢ΔྲྀΕʹ

8IZ7VFKTʁ ΨΠυϥΠϯΛͬ͟ͱݟͯ࢖͍΍ͦ͢͏ KTY͕ͪΐͬͱͱ͖ͬͭͮΒͦ͏ 4'$ͱσβΠφʔͷ਌࿨ੑ͕ߴ͍ ͋ͱ͸΄Μͷग़དྷ৺ʢ௒ॏཁʣ

ʮ7VFKTೖΕ·͠ΐ͏ʂʯ  ʜ  Ͳ͏΍ͬͯʁ

େ͖ͳํ਑ͱͯ͠ʜʜ %SBTUJDʹม͍͑ͯ͘ ୹ظܾઓܕ ͋Δఔ౓ͷόάΛڐ༰͢Δඞཁ͋Γ ΍Γ͖Δͱʮ͔͍͍ͬ͜ʯͬͯݴΘΕΔ 1SPHSFTTJWFʹม͍͑ͯ͘ ௕ظઓܕ όά͸཈͍͑ͯ͘ ҋͱର࿩͠ଓ͚͍ͯ͘ ΍Γ͖Δͱʮ͓ർΕ͞·ʯͬͯݴΘΕΔ

࠷ॳͷಓ͠Δ΂ͷͨͯํ Ͳ͏൑அ͢Δ͔ʁ

࠷ॳͷಓ͠Δ΂ͷͨͯํ ϓϩμΫτͷಛੑͱ ։ൃ૊৫ͷ໘͔Β ߟ͑Δ

ϓϩμΫτͷಛੑ͔Βಓ͠Δ΂Λߟ͑Δ Ϋϥ΢υαΠϯʹిࢠܖ໿ͷαʔϏε ԾʹαʔϏε͕མͪΔͱʜʜ ͓٬͞·ͷܖ໿࡞ۀ͕Ͱ͖ͳ͍ˠ͓٬͞·ͷϏδωεʹӨڹେ ಛʹ݄຤݄ॳʹམͪͨΒக໋త ӨڹൣғΛڱ͘ɺ໰୊Λى͜͞ͳ͍Α͏ʹ

։ൃ૊৫ͷ໘͔Βಓ͠Δ΂Λߟ͑Δ ౰࣌ɺ̍ਓ໨ͷϑϩϯτΤϯυΤϯδχΞ ࢥ͍͖ͬΓม͍͑ͯ͘ʹ͸  ϑϩϯτͷϝϯόʔ͕଍Γͳ͍ ͦͷؾʹͳΕ͹Ͱ͖͔ͨ΋͠Εͳ͍͕ ػೳ௥Ճͱ͜ͷ࡞ۀΛಉ࣌ʹ͢͢ΊΔ͜ͱʹͳΓ  ऴᖼΛܴ͑Δʢࢲ͕ʣ ϝϯόʔΛ૿΍͍ͯ͘͜͠ͱ΋ؚΊɺಋೖܭըΛ͍ͨͯͯ͘

Ͱ͖͕͋ͬͨಓ͠Δ΂ %SBTUJDʹม͍͑ͯ͘ 1SPHSFTTJWFʹม͍͑ͯ͘ ϝϯόʔͷ૿Ճ΋ܭըʹؚΊɺ1SPHSFTTJWFʹಋೖ͍ͯ͘͠

Ͱ͖͕͋ͬͨಓ͠Δ΂ ελʔτ  7VFKTಋೖ։࢝ ΰʔϧ  7VFKTͰϑϧϦϓϨʔε ը໘ͷҰ෦Ͱ  7VFKTಋೖ ϝϯόʔΛ  ૿΍͍ͯ͘͠ 7VFKT 
ಋೖൣғͷ֦େ ੹຿ͷৡ౉  ʢϧʔςΟϯάɺεςʔτ؅ཧʣ

ಓ͠Δ΂͕Ͱ͖Δͱ ࣗવͱઃܭ͕૊Έ্͕Δ

ࠓͷϑϩϯτΤϯυઃܭ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ϧʔςΟϯά͸αʔόʔଆͷ·· SFWFMͰग़ྗ͞ΕͨIUNMʹ7VFKTΛ͍͋ͯͯ͘

ࠓͷϑϩϯτΤϯυઃܭʢൈਮʣ ϚϧνϖʔδΞϓϦέʔγϣϯ ϧʔςΟϯά͸ݱߦͷ··ɺ7VFSPVUFS͸ར༻͠ͳ͍ ϖʔδΤϯτϦϙΠϯτ 8FCQBDL͸࢖͏ʢίϝϯτॻ͖͍ͨΠϯϙʔτ͍ͨ͠ʣ 7VFY͸جຊ࢖Θͳ͍

ࠓͷϑϩϯτΤϯυઃܭʢײ૝ʣ ͜͏΍ͬͯݟΔͱϞμϯͳΠέΠέͳϑϩϯτͱ͸͍͑ͳ͍ ݱঢ়Λཧղ্ͨ͠Ͱ࠷దղΛऔΔͨΊʹ  ͋͑ͯ࢖Θͳ͍ɺͱ͍͏ͷ͸େ͍ʹΞϦʢͩͱࢥ͏ʣ ΠέΠέͳ΋ͷͷ༠࿭ʹෛ͚ͣɺ஍ಓʹ͢͢ΊΔ  ڧ͍৺͕ཁ݅ͱͯ͠ඞཁ

1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε Ϛ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ ࢠίϯϙʔωϯτͷཻ౓

ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ͜͜ͷʜʜ

ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ͜͜ʂ

ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ ϏδωεϩδοΫͱͯ͠੒ΓཱͭϨϕϧͷେ͖͞ͰϚ΢ϯτ ը໘ͷݕࡧ෦෼ɺμΠΞϩάɺFUDʜʜ "UPNJD%FTJHOͰ͍͏ͱ͜Ζͷ0SHBOJTNT͘Β͍ Ұ൪লΤωˍ໰୊ΛہॴԽͰ͖Δ

ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ লΤωɺͱ͸ʁ ˠίϯϙʔωϯτཻ౓ͷ࠷େɾ࠷খέʔεͰͦΕͧΕߟ͑Δ ."9ɿը໘શମʹϚ΢ϯτ ୯७ʹ࿑ྗ͕͔͔Δ IUNMςϯϓϨʔτʹग़ྗ͞Ε͍ͯΔσʔλͷ࠶ݱͱ͔΋ඞཁ ༨ܭͳ΋ͷ·ͰखΛண͚ͨ͘ͳ͍

ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ .*/ɿখ͞ͳίϯϙʔωϯτ͝ͱʹϚ΢ϯτ ίϯϙʔωϯτ΁ͷIUNMςϯϓϨʔτσʔλͷྲྀ͠ࠐΈΛͭͭ͠ɺ  ίϯϙʔωϯτͷ֎ͰϏδωεϩδοΫΛऔΓѻ͏͜ͱʹ  ṖϞδϡʔϧര஀ $PNQPOFOU $PNQPOFOU   Ṗ IUNM
ͩͬͨΒίϯϙʔωϯτʹऔΓࠐΜͩ΄͏ָ͕

ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ ໰୊ΛہॴԽͰ͖Δɺͱ͸ʁ ʢى͖ͯ͸͍͚ͳ͍͜ͱ͚ͩͲʣ ϖʔδ಺ʹԿ͔͠Βόάͬͨ৔߹ɺ ϏδωεϩδοΫ͝ͱམͪΔͷͰը໘ͷଞͷՕॴʹӨڹΛٴ ΅͞ͳ͍

ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ ੺ؙͷͱ͜Ζʹ7VFKTΛϚ΢ϯτ Ծʹίί͕όάͬͯ΋ϖʔδͷதͷ  ଞͷػೳ͕མͪͳ͍ͷͰ͋Δఔ౓ӨڹΛہॴԽͰ͖Δ Ѽઌ Ѽઌ̍ ϑΝΠϧ໊

ͦͷ̎ɿࢠίϯϙʔωϯτͷཻ౓ʹ͍ͭͯ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ͜͜ͷʜʜ

ͦͷ̎ɿࢠίϯϙʔωϯτͷཻ౓ʹ͍ͭͯ (P SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ
ࢠ ࢠ ࢠ ͜͜ʂ

ͦͷ̎ɿࢠίϯϙʔωϯτͷཻ౓ʹ͍ͭͯ ڞ௨Խ͸͠ͳ͍ʢڧ͍৺Λ΋ͭʣ 'BU$PNQPOFOUΛڐ༰͢Δ

ͦͷ̎ɿࢠίϯϙʔωϯτͷཻ౓ʹ͍ͭͯ ࠓͷઃܭը໘ͷҰ෦ʹ7VFKTΛϚ΢ϯτ ෦෼࠷దͷ΋ͷ͕ग़དྷ্͕ͬͯ͠·͏ݒ೦ औΓճ͠͠΍͍͢ίϯϙʔωϯτΛ࡞ΔͨΊʹ͸ w ϖʔδ͝ͱʹίϯϙʔωϯτ͕ग़ἧͬͨλΠϛϯάͰ΍Δ  ˞ίϯϙʔωϯτͰऩ·ΔΑ͏ͳϨϕϧͰͩͬͨΒ෼ղͯ͠΋0, w ·ͨ͸Ψνͬͯڞ௨Խ࡞ۀΛߦ͏ඞཁ͋Γ ͦͷͨΊʹ΋Ұ࣌తͳ'BU$PNQPOFOU͸ڐ༰͞ΕΔ΂͖

΄͔ʹ΋΄͔ʹ΋ [JOEFYʹෛ͚ͳ͍μΠΞϩάͮ͘Γͩͱ͔  ˠͪ͜Β͸લճͷࢿྉΛ͝ཡ͍ͩ͆͘͞ $44ͷઃܭ΍ͬͨΓͱ͔ ☝ίίΒ΁Μ΋ؚΊͯ࠙਌ձͰ͝ҙݟͱ͔͍͚ͨͩΕ͹

·ͱΊ

·ͱΊ ͦͷ໊ͷ௨Γ7VFKT͸1SPHSFTTJWFʹಋೖ͸Ͱ͖Δ ಓ͠Δ΂ͷͨͯํ͕େࣄ ϞμϯͳΠέΠέͳϓϥΫςΟεʹखΛ৳͹͢ͱ  ͦͷཌྷΛম͔ΕΔ͜ͱʹͳΔͷͰؾΛ͚ͭͯ ཧղ্ͨ͠Ͱ͍͍ͱ͜ͲΓͰ͖ΔΑ͏ʹ΍͍ͬͯ͜͏

ͦ͏͍͑͹ʜʜ

8FBSF)JSJOH

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Χϓʔʂ

ProgressiveにVueを導入している話 / vue-progressive-integ...

ProgressiveにVueを導入している話 / vue-progressive-integration

More Decks by hivesbee

Other Decks in Programming

Featured

Transcript