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

Transcript

1. 1SPHSFTTJWFʹ7VFΛ
 ಋೖ͍ͯ͠Δݱ৔͔ΒૹΔ
 খωλ 7TFOEBJ
   7VFKT/VYUKT
   NFFUVQ
   
   .BTBTIJ
   )BHBʢ!)JWFTCFFʣ
2. ⾣
   6ODBVHIU
   3FGFSFODF&SSPS
   )BHB
   JT
   OPU
   EFpOFE .BTBTIJ
   )BHB
   (JUIVC
   IJWFTCFF
 5XJUUFS
   !)JWFTCFFʢ;͕͊ʣ
   'SPOUFOE
   &OHJOFFS
   BU
   ↘
 (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 7VF
    IPPLTͰ΋୅༻Մʢ7VF
    ·Ͱ଴ͪ·͠ΐ͏ʣ
    w 1SPHSFTTJWFʹ7VF͸ಋೖͰ͖ΔΜͩΑʂ
    
    
    
    
    
    IUUQTHJUIVCDPNIJWFTCFFWVFEJBMPHNPEVMF We are Hiring ! Χϓʔ
17. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Χϓʔʂ