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

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
   $MPVE4JHO
 (SBEVBUFE
   ઋ୆ి೾ߴઐʢͩͬͨͱ͜Ζʣ
   ❤
   7VFKT
   K2VFSZ
   Έͣ͞Θ԰ʢ཮લམ߹ʹ͋Γ·͢ʣ
   ɹ͜ͷલͷBZ
   $POGFSFODFͰதຊͷਓೝఆΛड͚Δ
3. ࠓճ͓࿩͢Δ͜ͱ 1SPHSFTTJWFʹ
   7VFΛಋೖ͍ͯ͠Δݱ৔Ͱͷ
   ಋೖઓུ΍࣮ࡍͷઃܭϓϥΫςΟεΛ
   ௕Ίʹ͝঺հ
4. ໔੹ࣄ߲ ॾઆ͋Γ·͢
6. ܖ໿ަব͕ࡁΜͩ׬੒ࡁͷܖ໿ॻΛΞοϓϩʔυ͠ɺ ૬खํ͕ঝೝ͢Δ͚ͩͰܖ໿ΛΉ͢Ϳ͜ͱ͕ग़དྷ·͢ɻ ॻྨͷड৴ऀ͸Ϋϥ΢υαΠϯʹొ࿥͢Δඞཁ͕͋Γ·ͤΜɻ ܖ໿క͔݁Βܖ໿ॻ؅ཧ·ͰՄೳͳ Ϋϥ΢υܕͷిࢠܖ໿αʔϏε ܖ໿ަবࡁͷܖ໿ॻΛΞοϓϩʔυ͠ɺ૬खํ͕ঝೝ͢Δ͚ͩͰܖ໿Λ݁Ϳ͜ͱ͕ग़དྷ·͢ɻ
   ॻྨͷड৴ऀ͸Ϋϥ΢υαΠϯʹొ࿥͢Δඞཁ͕͋Γ·ͤΜɻ Ϋϥ΢υαΠϯͱ͸ʁ
7. Ϋϥ΢υαΠϯͱ͸ʁ ిࢠܖ໿ͳΒ
   εϐʔυΞοϓ΋҆શੑ΋࣮ݱͰ͖·͢ ܖ໿క݁·Ͱͷ
   ϦʔυλΠϜͷ୹ॖ िؒ ෼ ࢴͷܖ໿ॻ ిࢠܖ໿ॻ ίϯϓϥΠΞϯεͱ
   ηΩϡϦςΟڧԽ ϝʔϧɾυϝΠϯ࿈ಈͷຊਓೝূ ిࢠॺ໊ʴೝఆλΠϜελϯϓͰ
   ܖ໿࣌఺ͷ׬શੑΛ୲อ ✔ ෦௕ ✔
8. Ϋϥ΢υαΠϯͱ͸ʁ
9. Ϋϥ΢υαΠϯͱ͸ʁ 
   
10. ͔͜͜Βຊ୊
11. എܠ
    ࠷ॳͷಓ͠Δ΂ͷͨͯํ
    1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε
12. എܠ ೖࣾ࣌఺Ͱͷٕज़ελοΫ͸ʜʜ
    Πϯϑϥɿ"84
    αʔόʔɿHP
    
    SFWFM
    ϑϩϯτʢ1$
    ൛ʣɿ
    K2VFSZ
    ϑϩϯτʢ41
    ൛ʣɿ
    K2VFSZ
    
    7VFKTʢܥʣ
    ͱ͍͏͜ͱͰϑϩϯτͷओ࣠͸
    HPͷςϯϓϨʔτΤϯδϯͱK2VFSZ
13. K2VFSZ͋Δ͋Δ ϏδωεϩδοΫͱ%0.͕ࠞࡏ
    ϑΝΠϧ෼ׂʹΑΔϞδϡʔϧԽΛߦ͍͕ͬͯͨɺ
 ΠϕϯτͷൃՐλΠϛϯάͳͲͳͲෳࡶੑ͕૿͖ͯͨ͠
    ͦͷ··QVCMJTI͍ͯͨ͠ͷͰ
 ίϝϯτ͕ॻ͚ͳ͍ʢҙ֎ͱେࣄʣ 7VFKTΛຊ֨ಋೖ͢ΔྲྀΕʹ
14. 8IZ
    7VFKTʁ ΨΠυϥΠϯΛͬ͟ͱݟͯ࢖͍΍ͦ͢͏
    KTY͕ͪΐͬͱͱ͖ͬͭͮΒͦ͏
    4'$ͱσβΠφʔͷ਌࿨ੑ͕ߴ͍
    ͋ͱ͸΄Μͷग़དྷ৺ʢ௒ॏཁʣ
15. എܠ
    ࠷ॳͷಓ͠Δ΂ͷͨͯํ
    1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε
16. ʮ7VFKTೖΕ·͠ΐ͏ʂʯ
 ʜ
 Ͳ͏΍ͬͯ
    
    ʁ
17. େ͖ͳํ਑ͱͯ͠ʜʜ %SBTUJDʹม͍͑ͯ͘
    ୹ظܾઓܕ
    ͋Δఔ౓ͷόάΛڐ༰͢Δඞཁ͋Γ
    ΍Γ͖Δͱʮ͔͍͍ͬ͜ʯͬͯݴΘΕΔ
    1SPHSFTTJWFʹม͍͑ͯ͘
    ௕ظઓܕ
    όά͸཈͍͑ͯ͘
    ҋͱର࿩͠ଓ͚͍ͯ͘
    ΍Γ͖Δͱʮ͓ർΕ͞·ʯͬͯݴΘΕΔ
18. ࠷ॳͷಓ͠Δ΂ͷͨͯํ Ͳ͏൑அ͢Δ͔ʁ
19. ࠷ॳͷಓ͠Δ΂ͷͨͯํ ϓϩμΫτͷಛੑͱ
    ։ൃ૊৫ͷ໘͔Β
    ߟ͑Δ
20. ϓϩμΫτͷಛੑ͔Βಓ͠Δ΂Λߟ͑Δ Ϋϥ΢υαΠϯ
    ʹ
    ిࢠܖ໿ͷαʔϏε
    ԾʹαʔϏε͕མͪΔͱʜʜ
    ͓٬͞·ͷܖ໿࡞ۀ͕Ͱ͖ͳ͍ˠ͓٬͞·ͷϏδωεʹӨڹେ
    ಛʹ݄຤݄ॳʹམͪͨΒக໋త
    ӨڹൣғΛڱ͘ɺ໰୊Λى͜͞ͳ͍Α͏ʹ
21. ։ൃ૊৫ͷ໘͔Βಓ͠Δ΂Λߟ͑Δ ౰࣌ɺ̍ਓ໨ͷϑϩϯτΤϯυΤϯδχΞ
    ࢥ͍͖ͬΓม͍͑ͯ͘ʹ͸
 ϑϩϯτͷϝϯόʔ͕଍Γͳ͍
    
    ͦͷؾʹͳΕ͹Ͱ͖͔ͨ΋͠Εͳ͍͕
    ػೳ௥Ճͱ͜ͷ࡞ۀΛಉ࣌ʹ͢͢ΊΔ͜ͱʹͳΓ
 ऴᖼΛܴ͑Δʢࢲ͕ʣ
    ϝϯόʔΛ૿΍͍ͯ͘͜͠ͱ΋ؚΊɺಋೖܭըΛ͍ͨͯͯ͘
22. Ͱ͖͕͋ͬͨಓ͠Δ΂
    %SBTUJDʹม͍͑ͯ͘
    
    1SPHSFTTJWFʹม͍͑ͯ͘
    
    ϝϯόʔͷ૿Ճ΋ܭըʹؚΊɺ1SPHSFTTJWFʹಋೖ͍ͯ͘͠
23. Ͱ͖͕͋ͬͨಓ͠Δ΂ ελʔτ
 7VFKTಋೖ։࢝ ΰʔϧ
 7VFKTͰϑϧϦϓϨʔε ը໘ͷҰ෦Ͱ
 7VFKTಋೖ ϝϯόʔΛ
 ૿΍͍ͯ͘͠ 7VFKT
 ಋೖൣғͷ֦େ ੹຿ͷৡ౉
 ʢϧʔςΟϯάɺεςʔτ؅ཧʣ
24. ಓ͠Δ΂͕Ͱ͖Δͱ ࣗવͱઃܭ͕૊Έ্͕Δ
25. ࠓͷϑϩϯτΤϯυઃܭ (P
    
    SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ ࢠ ࢠ ࢠ ϧʔςΟϯά͸αʔόʔଆͷ··
    SFWFMͰग़ྗ͞ΕͨIUNMʹ7VFKTΛ͍͋ͯͯ͘
26. ࠓͷϑϩϯτΤϯυઃܭʢൈਮʣ ϚϧνϖʔδΞϓϦέʔγϣϯ
    ϧʔςΟϯά͸ݱߦͷ··ɺ7VFSPVUFS͸ར༻͠ͳ͍
    ϖʔδΤϯτϦϙΠϯτ
    8FCQBDL͸࢖͏ʢίϝϯτॻ͖͍ͨΠϯϙʔτ͍ͨ͠ʣ
    7VFY͸جຊ࢖Θͳ͍
27. ࠓͷϑϩϯτΤϯυઃܭʢײ૝ʣ ͜͏΍ͬͯݟΔͱϞμϯͳΠέΠέͳϑϩϯτͱ͸͍͑ͳ͍
    ݱঢ়Λཧղ্ͨ͠Ͱ࠷దղΛऔΔͨΊʹ
 ͋͑ͯ࢖Θͳ͍ɺͱ͍͏ͷ͸େ͍ʹΞϦʢͩͱࢥ͏ʣ
    ΠέΠέͳ΋ͷͷ༠࿭ʹෛ͚ͣɺ஍ಓʹ͢͢ΊΔ
 ڧ͍৺͕ཁ݅ͱͯ͠ඞཁ
28. എܠ
    ࠷ॳͷಓ͠Δ΂ͷͨͯํ
    1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε
29. 1SPHSFTTJWFʹ͢͢ΊΔͨΊͷઃܭϓϥΫςΟε Ϛ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓
    ࢠίϯϙʔωϯτͷཻ౓
30. ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ (P
    
    SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ ࢠ ࢠ ࢠ ͜͜ͷʜʜ
31. ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ (P
    
    SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ ࢠ ࢠ ࢠ ͜͜ʂ
32. ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ ϏδωεϩδοΫͱͯ͠੒ΓཱͭϨϕϧͷେ͖͞ͰϚ΢ϯτ
    ը໘ͷݕࡧ෦෼ɺμΠΞϩάɺFUDʜʜ
    "UPNJD
    %FTJHO
    Ͱ͍͏ͱ͜Ζͷ
    0SHBOJTNT
    ͘Β͍
    Ұ൪লΤω
    ˍ
    ໰୊ΛہॴԽͰ͖Δ
    
33. ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ লΤωɺͱ͸ʁ
    ˠ
    ίϯϙʔωϯτཻ౓ͷ࠷େɾ࠷খέʔεͰͦΕͧΕߟ͑Δ
    ."9ɿը໘શମʹϚ΢ϯτ
    ୯७ʹ࿑ྗ͕͔͔Δ
    IUNMςϯϓϨʔτʹग़ྗ͞Ε͍ͯΔσʔλͷ࠶ݱͱ͔΋ඞཁ ༨ܭͳ΋ͷ·ͰखΛண͚ͨ͘ͳ͍
34. ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ .*/ɿখ͞ͳίϯϙʔωϯτ͝ͱʹϚ΢ϯτ
    ίϯϙʔωϯτ΁ͷIUNMςϯϓϨʔτσʔλͷྲྀ͠ࠐΈΛͭͭ͠ɺ
 ίϯϙʔωϯτͷ֎ͰϏδωεϩδοΫΛऔΓѻ͏͜ͱʹ
 ṖϞδϡʔϧര஀ $PNQPOFOU $PNQPOFOU 
 Ṗ IUNM ͩͬͨΒίϯϙʔωϯτʹऔΓࠐΜͩ΄͏ָ͕
35. ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ ໰୊ΛہॴԽͰ͖Δɺͱ͸ʁ
    ʢى͖ͯ͸͍͚ͳ͍͜ͱ͚ͩͲʣ
    ϖʔδ಺ʹԿ͔͠Βόάͬͨ৔߹ɺ
    ϏδωεϩδοΫ͝ͱམͪΔͷͰը໘ͷଞͷՕॴʹӨڹΛٴ ΅͞ͳ͍
36. ͦͷ̍ɿϚ΢ϯτ͢Δίϯϙʔωϯτͷཻ౓ ੺ؙͷͱ͜Ζʹ7VFKTΛϚ΢ϯτ
    Ծʹίί͕όάͬͯ΋ϖʔδͷதͷ
 ଞͷػೳ͕མͪͳ͍ͷͰ͋Δఔ౓ӨڹΛہॴԽͰ͖Δ Ѽઌ Ѽઌ̍ ϑΝΠϧ໊
37. ͦͷ̎ɿࢠίϯϙʔωϯτͷཻ౓ʹ͍ͭͯ (P
    
    SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ ࢠ ࢠ ࢠ ͜͜ͷʜʜ
38. ͦͷ̎ɿࢠίϯϙʔωϯτͷཻ౓ʹ͍ͭͯ (P
    
    SFWFM 1BHF"WVF 1BHF#WVF 1BHF$WVF 8FCQBDL ࢠ ࢠ ࢠ ࢠ ࢠ ࢠ ͜͜ʂ
39. ͦͷ̎ɿࢠίϯϙʔωϯτͷཻ౓ʹ͍ͭͯ ڞ௨Խ͸͠ͳ͍ʢڧ͍৺Λ΋ͭʣ
    'BU
    $PNQPOFOU
    Λڐ༰͢Δ
40. ͦͷ̎ɿࢠίϯϙʔωϯτͷཻ౓ʹ͍ͭͯ ࠓͷઃܭ
    
    ը໘ͷҰ෦ʹ7VFKTΛϚ΢ϯτ
    ෦෼࠷దͷ΋ͷ͕ग़དྷ্͕ͬͯ͠·͏ݒ೦
    औΓճ͠͠΍͍͢ίϯϙʔωϯτΛ࡞ΔͨΊʹ͸
    w ϖʔδ͝ͱʹίϯϙʔωϯτ͕ग़ἧͬͨλΠϛϯάͰ΍Δ
 ˞ίϯϙʔωϯτͰऩ·ΔΑ͏ͳϨϕϧͰͩͬͨΒ෼ղͯ͠΋0,
    w ·ͨ͸Ψνͬͯڞ௨Խ࡞ۀΛߦ͏ඞཁ͋Γ
    ͦͷͨΊʹ΋Ұ࣌తͳ'BU
    $PNQPOFOU͸ڐ༰͞ΕΔ΂͖
41. ΄͔ʹ΋΄͔ʹ΋ [JOEFY
    ʹෛ͚ͳ͍μΠΞϩάͮ͘Γͩͱ͔
 ˠͪ͜Β͸લճͷࢿྉΛ͝ཡ͍ͩ͆͘͞
    $44
    ͷઃܭ΍ͬͨΓͱ͔
    ☝ίίΒ΁Μ΋ؚΊͯ࠙਌ձͰ͝ҙݟͱ͔͍͚ͨͩΕ͹
42. ·ͱΊ
43. ·ͱΊ ͦͷ໊ͷ௨Γ7VFKT͸1SPHSFTTJWFʹಋೖ͸Ͱ͖Δ
    ಓ͠Δ΂ͷͨͯํ͕େࣄ
    ϞμϯͳΠέΠέͳϓϥΫςΟεʹखΛ৳͹͢ͱ
 ͦͷཌྷΛম͔ΕΔ͜ͱʹͳΔͷͰؾΛ͚ͭͯ
    ཧղ্ͨ͠Ͱ͍͍ͱ͜ͲΓͰ͖ΔΑ͏ʹ΍͍ͬͯ͜͏
44. ͦ͏͍͑͹ʜʜ
45. ͦ͏͍͑͹ʜʜ
46. 8F
    BSF
    )JSJOH
47. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Χϓʔʂ