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

大規模フロントエンドで のVueの漸進的な導入

2dfb65b481d9e382551b76c7cb0b7c98?s=47 koudai
November 18, 2020

大規模フロントエンドで のVueの漸進的な導入

2dfb65b481d9e382551b76c7cb0b7c98?s=128

koudai

November 18, 2020
Tweet

Transcript

  1. None
  2. ੴُ޿େ େن໛ϑϩϯτΤϯυͰ ͷ7VFͷ઴ਐతͳಋೖ J$BSF.FFUVQWPM

  3. ࣗݾ঺հ ɾ໊લੴُ޿େʢ͍͕͠Ί͜͏͍ͩʣ ɾॴଐΞδΞΫΤετגࣜձࣾ ɾ΍ͬͯΔ͜ͱϑϩϯτΤϯυΤϯδχΞ ɾٕज़7VF /VYUKT /FYUKT 54+4 KBNTUBDL ɾ޷͖ͳ͜ͱਆࣾ८Γɺࣸਅ

    ɾ5XJUUFS !LBNFQPO@GF RJJUB !JTJIJHBNF,PVEBJ
  4. ࣗݾ঺հ 7VFͷຊΛࣥචɾग़൛͠·ͨ͠ʂ ʮ̍೔Ͱجૅ͕਎ʹ෇͘ʂ7VFKT௒ೖ໳ʯ "NB[PO ָఱɺٕज़ධ࿦ࣾެࣜαΠτ Ͱൢചத

  5. None
  6. &OKPZ7VFKTͯ͠·͔͢ʁ

  7. ϞμϯϑϩϯτΤϯυΛऔΓר͘؀ڥ શͯͷϓϩμΫτɾձ͕ࣾશ෦ Ϟμϯ؀ڥͱ͍͏͜ͱͰ͸ແ͍ PS τϨϯυ௥ै͖͍ͬͯ͠ΔΘ͚Ͱ΋ͳ͍

  8. ద੾ʹٕज़ΛΞοϓσʔτɾϞμϯԽ͠ͳ͍ͱ Կ͕໰୊ͳͷ͔ ɾίʔυͷෛ࠴ԽɾϝϯςͰ͖ͳ͍ ɾΤϯδχΞ࠾༻ͷ೉қ౓͕ര্͕Γ ɾ։ൃ͕ࣄۀͷϘτϧωοΫʹͳΔ ɾ΋͸΍ɺࣄۀܧଓੑ͕ة͏͍

  9. ద੾ʹٕज़ΛΞοϓσʔτɾϞμϯԽ͠ͳ͍ͱ Կ͕໰୊ͳͷ͔ ɾίʔυͷෛ࠴ԽɾϝϯςͰ͖ͳ͍ ɾΤϯδχΞ࠾༻ͷ೉қ౓͕ര্͕Γ ɾ։ൃ͕ࣄۀͷϘτϧωοΫʹͳΔ ɾ΋͸΍ɺࣄۀܧଓੑ͕ة͏͍

  10. ͲΜͳઓུͰΞοϓσʔτ͍͔ͯ͘͠

  11. 7VFKTͷϓϩάϨογϒϦϓϨΠε

  12. લఏɾλʔήοτ ɾٕज़తෛ࠴ͱ޲͖߹ͬͯΔ ɾ7VFKTͷಋೖΛߟ͍͑ͯΔɾಋೖ࠷த ɾϑϩϯτΤϯυͷઃܭɾٕज़બఆΛ͢Δ ɾࣄۀαΠυ΁ͷઆ໌͕ඞཁͳਓ

  13. લఏɾλʔήοτ ɾࠓճͷέʔε͸7VFKTϦϓϨΠεͷ΄Μͷ Ұͭͷέʔε ɾϓϩδΣΫτ΍αʔϏε͕ҟͳΔͱ΋ͪΖ Μख๏΍ઓུ͸มΘͬͯ͘Δ

  14. ΞδΣϯμʢ࣮ࢪ߲໨ʣ ɾݱঢ়ͷௐࠪͱഎܠ ɾߏ଄ͷܾఆͱٕज़ௐࠪ ɾ݁ՌͲ͏͔ͩͬͨ

  15. ݱঢ়ͷௐࠪͱഎܠ ɾ&4 8FCQBDL FTMJOU QSFUUJFS ɾKFTU WVFUFTUJOHMJCSBSZ 5%% ɾK2VFSZΛ࢖ͬͨಠࣗ'8 ɾϑϩϯτΤϯυ૊৫͕໿̎̌ਓʢυϝΠϯ

    ͝ͱʹνʔϜ͕෼͔Ε͍ͯΔʣ
  16. ݱঢ়ͷௐࠪͱഎܠ ɾ&4 8FCQBDL FTMJOU QSFUUJFS ɾKFTU WVFUFTUJOHMJCSBSZ 5%% ɾK2VFSZΛ࢖ͬͨಠࣗ'8 ɾϑϩϯτΤϯυ૊৫͕໿̎̌ਓʢυϝΠϯ

    ͝ͱʹνʔϜ͕෼͔Ε͍ͯΔʣ ɾಠࣗ'8͕͔ͳΓߴ౓͕ͩͬͨϝϯςɾ৽ن։ൃͰ͖Δਓ͕΄ ΅͍ͳ͍ ɾ7VF͸෦෼తʹೖ͍͕ͬͯͨɺϝΠϯ͸ಠࣗ'8ͰͰ͖͍ͯͨ ɾࠓճɺ͜ͷಠࣗ'8Λ7VFKTʹஈ֊తʹஔ͖׵͑Δ
  17. ݱঢ়ͷௐࠪͱഎܠ IPHF GVHB QJZP ಠࣗ'8 7VF41" ಠࣗ'8 αʔόʔαΠυςϯϓϨʔτ ϑϩϯτΤϯυ

  18. ݱঢ়ͷௐࠪͱഎܠ ɾର৅ϦϓϨΠεը໘͕໿̍̌̌ը໘ ɾશͯΛ7VFͰϦϓϨΠε͢Δ͜ͱ͕ݫ͍͠ ɾ޻਺಺ʹऩΊΔࢪࡦΛଧͭඞཁ͕͋Δ

  19. ͦ͜ͰʮϓϩάϨογϒϦϓϨΠεʯ

  20. ͦ͜ͰʮϓϩάϨογϒϦϓϨΠεʯ ಉ͡ΤϯτϦʔϙΠϯτ಺ʹೋͭͷҟͳΔ'8Λಉډͤ͞Δ

  21. ݱঢ়ͷௐࠪͱഎܠ ϝϦοτ σϝϦοτ 7VFϑϧϦϓϨΠε ɾϝϯς͠΍͢͞ˍ඼࣭୲อ ɾΤϯδχΞ࠾༻ͷ͠΍͢͞ ɾ޻਺͕࠷΋͔͔Δ ࣗࣾ'8ʹཹΊΔ ɾ޻਺͕͔͔Γʹ͍͘ ɾϝϯςΤϯϋϯε͕ແཧ

    ɾϚϯύϫʔ͕࠷΋ඞཁ ϓϩάϨογϒϦϓϨΠε ɾ޻਺಺ʹऩΊΒΕΔ ɾҎ߱ͰϦϓϨΠε͠΍͍͢ ɾφϨοδ͕ͳ͍ ɾ༧ظͤ͵όάͷԹচ
  22. ݱঢ়ͷௐࠪͱഎܠ ͲͷઓུΛͱͬͯ΋σϝϦοτɾϦεΫ͸ඞͣ࢒Δ ϝϦοτ σϝϦοτ 7VFϑϧϦϓϨΠε ɾϝϯς͠΍͢͞ˍ඼࣭୲อ ɾΤϯδχΞ࠾༻ͷ͠΍͢͞ ɾ޻਺͕࠷΋͔͔Δ ࣗࣾ'8ʹཹΊΔ ɾ޻਺͕͔͔Γʹ͍͘

    ɾϝϯςΤϯϋϯε͕ແཧ ɾϚϯύϫʔ͕࠷΋ඞཁ ϓϩάϨογϒϦϓϨΠε ɾ޻਺಺ʹऩΊΒΕΔ ɾҎ߱ͰϦϓϨΠε͠΍͍͢ ɾφϨοδ͕ͳ͍ ɾ༧ظͤ͵όάͷԹচ
  23. ݱঢ়ͷௐࠪͱഎܠ ϦεΫͷେ͖͞ ࣌ܥྻ ɾอ༗ͨ͠ϦεΫͷฦࡁܭըʢ͍ͭɺͲΜͳखஈͰʣΛલఏͱͯ͠ɺઃܭΛબͿ ɾશ෦෼্͔ͬͨͰͲͷϦεΫΛอ༗͠ɺͲΜͳϝϦοτΛڗड͢Δ͔ ɾ͜͜·ͰΛυΩϡϝϯτ΍"%3ʢ"SDIJUFDUVSF%FDJTJPO3FDPSEʣʹ࢒͢ 7VFKT ࣗࣾ'8 ϛοΫεʢ7VFࣗࣾ'8ʣ

  24. ߏ଄ͷܾఆͱٕज़ௐࠪ

  25. ߏ଄ͷܾఆͱٕज़ௐࠪ ը໘ ࣗࣾ'8 Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ ը໘ ࣗࣾ'8 Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ

    Ϟʔμϧʢࣗࣾ'8ʣ
  26. ߏ଄ͷܾఆͱٕज़ௐࠪ ը໘ ࣗࣾ'8 Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ ը໘ ࣗࣾ'8 Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ

    Ϟʔμϧʢࣗࣾ'8ʣ ը໘ ࣗࣾ'8 Ϟʔμϧʢ7VFʣ Ϟʔμϧʢ7VFʣ Ϟʔμϧʢࣗࣾ'8ʣ ը໘ 7VF Ϟʔμϧʢ7VFʣ Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ
  27. ߏ଄ͷܾఆͱٕज़ௐࠪ ը໘ 7VF Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ

  28. ߏ଄ͷܾఆͱٕज़ௐࠪ ը໘ 7VF Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ ɾҟͳΔ'8ؒͰͷσʔλͱΠϕϯτͷ఻ୡ ɾෛ࠴Խ͠ʹ͍͘ߏ଄ͱ࣮૷ํ๏ͷཱ֬

  29. ߏ଄ͷܾఆͱٕज़ௐࠪ ɾػೳ΍ӨڹൣғΛ໌ࣔతʹݶఆ͢Δ ɾյ͠΍͍͢ɾࣺͯΔલఏͷߏ੒

  30. ߏ଄ͷܾఆͱٕज़ௐࠪ ը໘ 7VF Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ Ϟʔμϧʢࣗࣾ'8ʣ ը໘ 7VF Ξμϓλʔ

    Ξμϓλʔ DPOOFDU૚
  31. ߏ଄ͷܾఆͱٕज़ௐࠪ ɾTSDDMJFOUɾɾɾ7VFͰ࡞ΒΕͨը໘΍෦඼܈ ɾTSDKTɾɾɾࣗࣾ'8Ͱ࡞ΒΕͨը໘΍෦඼܈ ɾTSDDPOOFDUɾɾɾೋͭͷ'8Λܨ͙Ξμϓλʔ DPOOFDU૚ͷϝϦοτ ɾҎ߱ͷϑϧϦϓϨΠε࣌ʹࣺͯ΍͘͢͢Δ ɾҟͳΔ'8͕ಉډ͍ͯ͠Δ͜ͱ͕໌ࣔతʹͳΔ

  32. ߏ଄ͷܾఆͱٕज़ௐࠪ 7VF੡ը໘͔Βಠࣗ'8ͷϞʔμϧΛݺͼग़͢

  33. ߏ଄ͷܾఆͱٕज़ௐࠪ ࣗࣾ'8ը໘͔Β7VFͷϞʔμϧΛݺͼग़͢

  34. ߏ଄ͷܾఆͱٕज़ௐࠪ ࣗࣾ'8ը໘͔Β7VFͷϞʔμϧΛݺͼग़͢

  35. ݁ՌͲ͏͔ͩͬͨ

  36. ݁ՌͲ͏͔ͩͬͨ ɾ໿ਓ೔ͷ޻਺࡟ݮͭͭ͠ɺ޻਺಺Ͱ࡞Γ੾Εͨ ɾϑϩϯτΤϯυҎ֎ͷਓʹ߹ҙܗ੒Λͱ্ͬͨͰ։ൃͰ͖ͨ ɾͭͳ͗͜ΈʹΑΔσϝϦοτΛ࠷খԽ͠ͳ͕ΒɺҎ߱ͷϦϓ ϨΠεΛ͠΍͍͢౔৕Λ࡞Εͨ

  37. ·ͱΊ ɾյ͠΍͍͢ɾࣺͯ΍͍͢ίʔυ͸ྑ͍ઃܭͷॿ͚ʹͳΔ ɾͲͷҙࢥܾఆΛͯ͠΋σϝϦοτ͸ଘࡏ͢ΔͷͰɺશͯ໢ཏ ্ͨ͠Ͱબ୒ɾܾఆͯ͠΋Β͏ ɾϦεΫͷฦࡁܭըͷ؍఺ΛઃܭʹऔΓೖΕͯΈΔ ɾ7VF͕ϓϩάϨογϒϑϨʔϜϫʔΫͳͷͰɺஈ֊తʹಋೖ ͠΍͔ͬͨ͢

  38. &OKPZ7VFKT͠·͠ΐ͏ʂ