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

6228c7eb945dbd4b30bcefa9f8f3e49a?s=47 hivesbee
September 06, 2019

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

6228c7eb945dbd4b30bcefa9f8f3e49a?s=128

hivesbee

September 06, 2019
Tweet

Transcript

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

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

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

  4. ໔੹ࣄ߲ ॾઆ͋Γ·͢

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

  7. Ϋϥ΢υαΠϯͱ͸ʁ ిࢠܖ໿ͳΒ εϐʔυΞοϓ΋҆શੑ΋࣮ݱͰ͖·͢ ܖ໿క݁·Ͱͷ ϦʔυλΠϜͷ୹ॖ िؒ ෼ ࢴͷܖ໿ॻ ిࢠܖ໿ॻ ίϯϓϥΠΞϯεͱ

    ηΩϡϦςΟڧԽ ϝʔϧɾυϝΠϯ࿈ಈͷຊਓೝূ ిࢠॺ໊ʴೝఆλΠϜελϯϓͰ ܖ໿࣌఺ͷ׬શੑΛ୲อ ✔ ෦௕ ✔
  8. Ϋϥ΢υαΠϯͱ͸ʁ

  9. Ϋϥ΢υαΠϯͱ͸ʁ 

  10. ͔͜͜Βຊ୊

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

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

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

  14. 8IZ7VFKTʁ ΨΠυϥΠϯΛͬ͟ͱݟͯ࢖͍΍ͦ͢͏ 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. 8FBSF)JSJOH

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