Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

6228c7eb945dbd4b30bcefa9f8f3e49a?s=128

hivesbee

July 01, 2019
Tweet

Transcript

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

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

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

  4. ͸͡Ίʹ 7VFͰμΠΞϩάɺ
 ͲΜͳײ͡Ͱॻ͖·͔͢ʁ

  5. ଟ෼͜Μͳײ͡ <template> <div> <h1>λΠτϧ</h1> <div> <!-- ͳΜ͔ίϯςϯπ --> </div> <!--

    μΠΞϩά --> <sample-dialog v-show="shown" /> </div> </template> ݺͼग़͢ίϯϙʔωϯτͰμΠΞϩάදࣔඇදࣔΛ
 AWTIPXAͰ؅ཧ
  6. ͚ͩͲ͜Ε ৔߹ʹΑͬͯ͸
 ͏·͍͔͘ͳ͍

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

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

  9. ͏·͍͔͘ͳ͍σϞ ԡ͢ͱ͜͏ͳΔ
 ϔομʔͱφϏ্͕ͣͬͯग़ͯ͘Δ Χϓʔ

  10. Ͱ͸ Ͳ͏͢Δ͔

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

  12. ϒϦοδϞδϡʔϧ ໾ׂ w μΠΞϩάίϯϙʔωϯτͷΠϯελϯεੜ੒อ࣋ w CPEZ௚Լ΁্هΠϯελϯεΛϚ΢ϯτ w ʢ΋ͷʹΑͬͯ͸ʣ[JOEFYͷௐ੔ w දࣔඇදࣔͷϝιουΛ਌ίϯϙʔωϯτʹఏڙ

    w μΠΞϩάίϯϙʔωϯτͰ͍࣋ͬͯΔQSPQT͸
 දࣔϝιουͷҾ਺Ͱड͚౉͢͠Δ
  13. ۩ମతͳߏ੒ ਌ίϯϙʔωϯτ μΠΞϩά
 ίϯϙʔωϯτ ϒϦοδϞδϡʔϧ <body> <header>ϔομʔ</header> <main> <nav>φϏ</nav> <div

    class=“content”> <div class=“oya” /> </div> </main> <!-- DOM ৭ʑ… --> <!-- μΠΞϩάͷϚ΢ϯτઌ --> </body> ᶄੜ੒ ᶅੜ੒ ᶆCPEZʹ
 ɹ௥Ճ ᶇϝιουఏڙ ᶃϚ΢ϯτ Ϛ΢ϯτઌͷIUNM
  14. ͏·͍ͬͨ͘σϞ CPEZ௚ԼʹϚ΢ϯτ͞Ε͍ͯΔͷͰʜ Χϓʔ

  15. ͏·͍ͬͨ͘σϞ ϔομʔ΍φϏʹෛ͚ͣʹग़ͯ͜Ε·͢ Χϓʔ

  16. ·ͱΊ w ͜ͷํ๏ɺকདྷతʹશ෦7VFʹͳͬͨΒ
 ϒϦοδϞδϡʔϧΛऔΓ෷͑Δ͚ͩͰͦͷ··࢖͑Δʂ w ҙ֎ͱ͜ͷํ๏͋Γઆ͕͋Δ w ໘౗ͳॲཧΛԡ͠ࠐΉ͜ͱ͕Ͱ͖Δ
 ϏδωεϩδοΫ͕Ұ੾བྷ·ͳ͍ॲཧͱ͔ɺHUNܥͷॲཧͱ͔
 ׂΓࠐΈॲཧͷड͚ޱʹɺͱ͔

    w 7VFIPPLTͰ΋୅༻Մʢ7VF·Ͱ଴ͪ·͠ΐ͏ʣ w 1SPHSFTTJWFʹ7VF͸ಋೖͰ͖ΔΜͩΑʂ IUUQTHJUIVCDPNIJWFTCFFWVFEJBMPHNPEVMF We are Hiring ! Χϓʔ
  17. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Χϓʔʂ