ProgressiveにVueを導入している現場から送る小ネタ / vue-progressive-integration-tips-dialog

1SPHSFTTJWFʹ7VFΛ  ಋೖ͍ͯ͠Δݱ৔͔ΒૹΔ  খωλ 7TFOEBJ7VFKT/VYUKTNFFUVQ .BTBTIJ)BHBʢ!)JWFTCFFʣ

⾣6ODBVHIU3FGFSFODF&SSPS)BHBJTOPUEFpOFE .BTBTIJ)BHB (JUIVCIJWFTCFF  5XJUUFS!)JWFTCFFʢ;͕͊ʣ 'SPOUFOE&OHJOFFSBU↘  (SBEVBUFEઋ୆ి೾ߴઐʢͩͬͨͱ͜Ζʣ ❤7VFKT K2VFSZ Έͣ͞Θ԰ʢ཮લམ߹ʹ͋Γ·͢ʣ

ࠓճ͓࿩͢Δ͜ͱ 1SPHSFTTJWFʹ 7VFΛಋೖ͍ͯ͠Δݱ৔Ͱ [JOEFYʹෛ͚ͳ͍Α͏ʹ μΠΞϩάΛ࣮૷ͯ͠ΈΔ খωλΛ͝঺հ

͸͡Ίʹ 7VFͰμΠΞϩάɺ  ͲΜͳײ͡Ͱॻ͖·͔͢ʁ

ଟ෼͜Μͳײ͡ <template> <div> <h1>λΠτϧ</h1> <div>  </div>  <sample-dialog v-show="shown" /> </div> </template> ݺͼग़͢ίϯϙʔωϯτͰμΠΞϩάදࣔඇදࣔΛ  AWTIPXAͰ؅ཧ

͚ͩͲ͜Ε ৔߹ʹΑͬͯ͸  ͏·͍͔͘ͳ͍

͏·͍͔͘ͳ͍৔߹ ྫ͑͹ɺҎԼͷ৚݅Λຬͨ͢ͱ͖ w ը໘ͷҰ෦ʹ7VF͕Ϛ΢ϯτ͞Ε͍ͯΔ w Ϛ΢ϯτઌͷ਌%0.͕[JOEFYෛ͚͍ͯ͠Δ

͏·͍͔͘ͳ͍σϞ Α͋͘ΔΑ͏ͳը໘  ίϯςϯπ෦͕ϔομʔͱφϏͷ[JOEFYʹෛ͚͍ͯΔ Χϓʔ

͏·͍͔͘ͳ͍σϞ ԡ͢ͱ͜͏ͳΔ  ϔομʔͱφϏ্͕ͣͬͯग़ͯ͘Δ Χϓʔ

Ͱ͸ Ͳ͏͢Δ͔

͜͏ͯ͠Έͨ ϒϦοδϞδϡʔϧ࡞੒

ϒϦοδϞδϡʔϧ ໾ׂ w μΠΞϩάίϯϙʔωϯτͷΠϯελϯεੜ੒อ࣋ w CPEZ௚Լ΁্هΠϯελϯεΛϚ΢ϯτ w ʢ΋ͷʹΑͬͯ͸ʣ[JOEFYͷௐ੔ w දࣔඇදࣔͷϝιουΛ਌ίϯϙʔωϯτʹఏڙ
w μΠΞϩάίϯϙʔωϯτͰ͍࣋ͬͯΔQSPQT͸  දࣔϝιουͷҾ਺Ͱड͚౉͢͠Δ

۩ମతͳߏ੒ ਌ίϯϙʔωϯτ μΠΞϩά  ίϯϙʔωϯτ ϒϦοδϞδϡʔϧ <body> <header>ϔομʔ</header> <main> <nav>φϏ</nav> <div
class=“content”> <div class=“oya” /> </div> </main>   </body> ᶄੜ੒ ᶅੜ੒ ᶆCPEZʹ  ɹ௥Ճ ᶇϝιουఏڙ ᶃϚ΢ϯτ Ϛ΢ϯτઌͷIUNM

͏·͍ͬͨ͘σϞ CPEZ௚ԼʹϚ΢ϯτ͞Ε͍ͯΔͷͰʜ Χϓʔ

͏·͍ͬͨ͘σϞ ϔομʔ΍φϏʹෛ͚ͣʹग़ͯ͜Ε·͢ Χϓʔ

·ͱΊ w ͜ͷํ๏ɺকདྷతʹશ෦7VFʹͳͬͨΒ  ϒϦοδϞδϡʔϧΛऔΓ෷͑Δ͚ͩͰͦͷ··࢖͑Δʂ w ҙ֎ͱ͜ͷํ๏͋Γઆ͕͋Δ w ໘౗ͳॲཧΛԡ͠ࠐΉ͜ͱ͕Ͱ͖Δ  ϏδωεϩδοΫ͕Ұ੾བྷ·ͳ͍ॲཧͱ͔ɺHUNܥͷॲཧͱ͔  ׂΓࠐΈॲཧͷड͚ޱʹɺͱ͔
w 7VFIPPLTͰ΋୅༻Մʢ7VF·Ͱ଴ͪ·͠ΐ͏ʣ w 1SPHSFTTJWFʹ7VF͸ಋೖͰ͖ΔΜͩΑʂ IUUQTHJUIVCDPNIJWFTCFFWVFEJBMPHNPEVMF We are Hiring ! Χϓʔ

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

ProgressiveにVueを導入している現場から送る小ネタ / vue-progressi...

ProgressiveにVueを導入している現場から送る小ネタ / vue-progressive-integration-tips-dialog

hivesbee

More Decks by hivesbee

Other Decks in Programming

Featured

Transcript