非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa

リクルートグループ主催！『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/

Transcript

1. ඇػೳཁ݅ΛจԽʹ
   2020/12/10 @ Business & Creative
   

   View Slide

2. Twitter: @yosuke_furukawa
   Github: yosuke-furukawa
   ࠷ۙͷ׆ಈ
   $ISPNF"EWJTPSZ#PBSE
   +4$POG+1PSHBOJ[FSFUD
   

   View Slide

3. ඇػೳཁ݅ʹͩ͜ΘΔ
   

   View Slide

4. ػೳཁ݅ͱඇػೳཁ݅
   • ػೳཁ݅ɿ
   ࣮૷͠ͳ͖Ό͍͚ͳ͍ػೳ
   Ϣʔβʔ͔ΒͷཁٻΛ׎͑ΔγεςϜͷػೳ
   • ඇػೳཁ݅ɿ
   ඞͣ͠΋࣮૷͠ͳ͖Ό͍͚ͳ͍Θ͚Ͱ͸ͳ͍͕ɺ
   ϓϩδΣΫτΛ޲্ͤ͞ΔͨΊʹඞཁͳ͜ͱ
   

   View Slide

5. ඇػೳཁ݅
   • ηΩϡϦςΟ
   • XSS/XSRF/DoS etc
   • ύϑΥʔϚϯε
   • SPA/PWA/AMP etc
   • ϝϯςφϯαϏϦςΟ
   • ςετॻ͘/e2e/storyboard etc
   

   View Slide

6. ػೳཁ݅Λຬͨͯ͠ظ೔ʹ௥
   ΘΕΔதͰͲ͜·Ͱඇػೳཁ
   ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕
   ΤϯδχΞͷҰछͷೳྗ
   

   View Slide

7. ඇػೳཁ݅͸จԽ
   • ௒ߴ଎ͰϝϯςφϒϧͰΞΫηγϒϧͰૉ੖
   Β͍͠΋ͷΛ࡞ͬͨͱͯ͠΋ͦΕΛҡ࣋͠ଓ
   ͚ΒΕͳ͚Ε͹ҙຯ͕ͳ͍ɻ
   • ύϑΥʔϚϯεʹͤΑϝϯςφϯαϏϦςΟ
   ʹͤΑɺҰ࣌తͳରࡦ͚ͩͰ͸ͳ͘ɺϝϯ
   όʔͷҭ੒ؚΊͨ߃ٱతͳରࡦ͕ඞཁɻ
   

   View Slide

8. ϦΫϧʔτͱχδϘοΫε
   

   View Slide

9. ϦΫϧʔτͱχδϘοΫε
   • ϦΫϧʔτͷϑϩϯτΤϯυΛڠۀ͍ͯ͠Δύʔτφʔ
   • ϦΫϧʔτଆͷϑϩϯτΤϯυ͸࢓༷͕ະ֬ఆͩͬͨΓɺٕज़ελο
   Ϋ͕ܾ·ͬͯͳ͔ͬͨΓͱ͍ͬͨෆ࣮֬ੑͷߴ͍ΞϓϦέʔγϣϯͰ΋
   ࣮֬ʹ࡞Δ͜ͱʹओ؟Λ͓͍ͯΔ
   • χδϘοΫεଆͷϑϩϯτΤϯυ͸࡞ͬͨ΋ͷΛҡ࣋ɾ੒௕ͤ͞Δ͜
   ͱʹओ؟Λ͓͍ͯΔ
   • ͲͪΒ΋Ұॹʹ࡞͓ͬͯΓɺڥքΛ͸͖ͬΓҾ͍ͯΔΘ͚Ͱ͸ͳ͍
   • ҰॹʹࣄۀΛ੒௕ͤ͞Δɺඇػೳཁ݅ʹͩ͜ΘΔͱ͍͏ҙຯͰ͸Ͳͪ
   Β΋ಉ͡ɻ
   

   View Slide

10. ͜Ε·Ͱ΍͖ͬͯͨ͜ͱ
    

    View Slide

11. ϦΫϧʔτͷWebΛߴ଎Խ
    ͠ɺϢʔβϏϦςΟΛ޲্͞
    ͤΔ׆ಈΛ֤αΠτͰ࣮ࢪ
    

    View Slide

12. 466.0
    ੑೳͷఆ఺؍ଌπʔϧΛ
    ࡞੒
    ڝ߹ͱͷࠩ෼Λఆৗൺֱ
    "JS4)*'5
    ஗͍ͱݴΘΕ͍ͯͨΫϥ
    ΠΞϯτΛ௚઀๚໰͠ɺ
    ߴ଎Խ
    )1#ίεϝ
    ".1'JSTUͳαΠτΛߏ
    ஙɺύϑΥʔϚϯεΛվ
    ળͭͭ͠ɺϊ΢ϋ΢͕શ
    ମʹਁಁͰ͖ΔΑ͏ʹ͠
    ͨ
    

    View Slide

13. AirSHIFT
    https://web.dev/five-ways-airshift-improved-their-react-app/
    virtual rendering
    ͰදࣔཁૉΛ࡟ݮ
    Ұ෦ͷཁૉΛComlinkͰ
    workerize
    

    View Slide

14. SUUMO
    ࢖͍ͬͯͳ͍CSS Λ95%࡟ݮ
    ը૾αΠζΛ90%࡟ݮ
    Core Web Vitals All Green ୡ੒
    https://recruit-tech.co.jp/blog/2020/08/07/suumo_performance_improvement/
    

    View Slide

15. HPBCosme
    https://youtu.be/S_UttIYzKtM
    Lighthouse CI Λ࢖ͬͯఆظతʹ
    ύϑΥʔϚϯεܭଌ
    StoryBookͱreg-suitͰVRT
    

    View Slide

16. ͍Ζ͍Ζ΍͖͚ͬͯͨͲ΋...
    • ϓϩμΫτ඼࣭Λվળ͚ͨͩ͠Ͱ͸ಓ൒͹
    • ͜ͷվળΛจԽʹ͠ɺܧଓతʹଓ͚ɺϏδω
    εΰʔϧʹͭͳ͛ͯͦ͜੒ޭ
    • վળ׆ಈΛܧଓͭͭ͠ɺ࠷ऴతͳϏδωε
    ΰʔϧΛ໨ࢦ͢
    

    View Slide

17. จԽʹ͢ΔͨΊʹԿΛ΍ͬͯ
    ͖͔ͨ
    

    View Slide

18. ৔౰ͨΓతʹվળ => ͍͖ͳ
    Γίϯόʔδϣϯͷୡ੒ͳͲ
    ͷந৅౓ͷߴ͍ͱ͜ΖΛૂ͏
    μϝύλʔϯ
    Ϙʔϧ࣋ͬͨΒ͍͖ͳΓγϡʔτଧͬͪΌ͏λΠϓ
    

    View Slide

19. ඇػೳཁ݅Λ্͍͛ͯ͘ͷʹ
    ΋ઓུ͕͋Δ
    

    View Slide

20. ݟ͑ͳ͍΋ͷ͸ଌΕͳ͍
    ଌΕͳ͍΋ͷ͸վળͰ͖ͳ͍
    

    View Slide

21. ·ͣ͸ݟ͑ΔΑ͏ʹ͠Α͏
    

    View Slide

22. ՄࢹԽ͕ॏཁ
    • AirSHIFTͰ͸Ϣʔβʔͷ࣮ࡍͷૢ࡞Λجʹ͔
    ͔ͬͨඵ਺Λݟ͑ΔΑ͏ʹ͍ͯ͠Δɻ
    ݟ͑ΔͱؾʹͳΔɺෆࢥٞͱվળͨ͘͠ͳΔ
    

    View Slide

23. ݟ͑ͨΒܧଓతʹଌΖ͏
    

    View Slide

24. ଌΔ͜ͱΛश׳ʹ͠Α͏ɻ
    • HPBίεϝͰͷࣄྫ
    • Speed Curve ͳͲͷಋೖ΋ݕ౼͠ɺଌΓଓ͚Δ
    श׳Λ࡞Δɻ
    

    View Slide

25. ܧଓతʹଌΕͨΒ
    ܧଓతʹվળ͢ΔྲྀΕΛ࡞Δ
    

    View Slide

26. վળΛී௨ʹεϓϦϯτʹ΋৐
    ͤΔ
    • ඇػೳཁ݅ͷվળΛػೳͷ௥Ճͱ౳͘͠ѻ͍ɺ
    εϓϦϯτʹೖΕͯվળ͢ΔྲྀΕΛ࡞Δɻ
    • ৔߹ʹΑͬͯ͸OSSʹPRΛग़͢ͱ͔΋ݕ౼͢
    Δɻ
    AMP Optimizer Bug... ƅ̖ƅ;)
    

    View Slide

27. ՄࢹԽ => ϞχλϦϯάͷश
    ׳ͮ͘Γ => վળΛॏͶΔ
    উͪύλʔϯ
    

    View Slide

28. ͱ͸͍͑ɺͦΜͳ࣌ؒ࡞Ε·ͤΜΑ
    

    View Slide

29. ͦΕ͸΋ͪΖΜͦ͏ɻ
    ϝϯόʔؒͰͷೳྗ޲্΋ඞཁɻ
    ೳྗ͕͋Δఔ౓ߴ͍ϝϯόʔ͡Όͳ͍
    ͱΤϯϋϯε͠ͳ͕ΒվળͰ͖ͳ͍ɻ
    

    View Slide

30. ϝϯόʔͷҭ੒΋ηοτͰߟ
    ͑ΔɻҰ࣌తͳվળͰऴΘΓ
    ʹ͠ͳ͍ɻ
    

    View Slide

31. Ωʔϫʔυ ͦͷ1:
    ήʔϛϑΟέʔγϣϯ
    

    View Slide

32. ࢀը౰ॳ
    ໿1೥ޙ
    ήʔϛϑΟέʔγϣϯ
    ήʔϜͷݸମ஋άϥϑΈ͍ͨ
    ͳײ֮ͰεΩϧϚοϓΛ࡞Δ
    

    View Slide

33. ࢀը౰ॳ
    ໿1೥ޙ
    ͜ͷϨʔμʔνϟʔτάϥϑΛ
    ίʔϯϑϨʔΫάϥϑͱݺΜͰ
    ͍Δʢ๭ອ࠽ͷωλΑΓʣ
    

    View Slide

34. ۀ຿ͷ਱ߦʹ଍Γ͍ͯͳ͍ॴ
    ͕ՄࢹԽ͞Εɺೳྗ޲্ͷα
    ϙʔτʹ࢖͑Δɻ
    

    View Slide

35. Ωʔϫʔυ ͦͷ2:
    εϐʔυϋοΧιϯ
    

    View Slide

36. ΢ΣϒϑϩϯτΤϯυ͚ͩͰ
    Ͳ͜·ͰLighthouseͷείΞ
    Λ্͛ΒΕΔ͔ڝ͏େձ
    

    View Slide

37. ୹ظతʹੑೳʹؔ͢ΔφϨο
    δΛ࣮ઓܗࣜͰஷΊΒΕΔɻ
    

    View Slide

38. ϝϯόʔͷೳྗ޲্ɺҭ੒·
    ͰηοτͰඇػೳཁ݅ͷจԽ
    ͷৢ੒ͱͯ͠औΓ૊Ή
    

    View Slide

39. ·ͱΊ
    

    View Slide

40. ·ͱΊ
    • χδϘοΫε΋ϦΫϧʔτ΋ͲͪΒ΋ඇػೳཁ݅ʹͩ͜Θͬ
    ͍ͯΔɻ
    • ඇػೳཁ݅ΛͨͩҰ࣌తʹୡ੒͢Δ͚ͩͰ͸ͳ͘த௕ظతʹ
    औΓ૊ΜͰ͍͘ = จԽʹ͢ΔͨΊʹ΍͍ͬͯΔ͜ͱ
    • ݟ͑ΔԽ => ܭଌͷश׳Խ => վળͷश׳Խ
    • ҭ੒·ͰηοτͰߟ͑Δ΂͖ɺεϐʔυϋοΧιϯ΍ήʔ
    ϛϑΟέʔγϣϯΛ׆༻ֶָͯ͘͠͠΂Δ࢓ֻ͚࡞ΓΛɻ
    

    View Slide