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

Transcript

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

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

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

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

5. ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ύϑΥʔϚϯε • SPA/PWA/AMP

   etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc

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

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

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

9. ϦΫϧʔτͱχδϘοΫε • ϦΫϧʔτͷϑϩϯτΤϯυΛڠۀ͍ͯ͠Δύʔτφʔ • ϦΫϧʔτଆͷϑϩϯτΤϯυ͸࢓༷͕ະ֬ఆͩͬͨΓɺٕज़ελο Ϋ͕ܾ·ͬͯͳ͔ͬͨΓͱ͍ͬͨෆ࣮֬ੑͷߴ͍ΞϓϦέʔγϣϯͰ΋ ࣮֬ʹ࡞Δ͜ͱʹओ؟Λ͓͍ͯΔ • χδϘοΫεଆͷϑϩϯτΤϯυ͸࡞ͬͨ΋ͷΛҡ࣋ɾ੒௕ͤ͞Δ͜ ͱʹओ؟Λ͓͍ͯΔ

   • ͲͪΒ΋Ұॹʹ࡞͓ͬͯΓɺڥքΛ͸͖ͬΓҾ͍ͯΔΘ͚Ͱ͸ͳ͍ • ҰॹʹࣄۀΛ੒௕ͤ͞Δɺඇػೳཁ݅ʹͩ͜ΘΔͱ͍͏ҙຯͰ͸Ͳͪ Β΋ಉ͡ɻ

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

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

12. 466.0
    ੑೳͷఆ఺؍ଌπʔϧΛ ࡞੒
    ڝ߹ͱͷࠩ෼Λఆৗൺֱ "JS4)*'5
    ஗͍ͱݴΘΕ͍ͯͨΫϥ ΠΞϯτΛ௚઀๚໰͠ɺ ߴ଎Խ )1#ίεϝ
    ".1
    'JSTU
    ͳαΠτΛߏ

    ஙɺύϑΥʔϚϯεΛվ ળͭͭ͠ɺϊ΢ϋ΢͕શ ମʹਁಁͰ͖ΔΑ͏ʹ͠ ͨ

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

14. SUUMO ࢖͍ͬͯͳ͍CSS Λ95%࡟ݮ ը૾αΠζΛ90%࡟ݮ Core Web Vitals All Green ୡ੒

    https://recruit-tech.co.jp/blog/2020/08/07/suumo_performance_improvement/

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

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

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

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

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

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

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

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

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

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

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

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

    Bug... ƅ̖ƅ;)

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

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

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

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

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

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

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

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

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

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

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

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

39. ·ͱΊ

40. ·ͱΊ • χδϘοΫε΋ϦΫϧʔτ΋ͲͪΒ΋ඇػೳཁ݅ʹͩ͜Θͬ ͍ͯΔɻ • ඇػೳཁ݅ΛͨͩҰ࣌తʹୡ੒͢Δ͚ͩͰ͸ͳ͘த௕ظతʹ औΓ૊ΜͰ͍͘ = จԽʹ͢ΔͨΊʹ΍͍ͬͯΔ͜ͱ •

    ݟ͑ΔԽ => ܭଌͷश׳Խ => վળͷश׳Խ • ҭ੒·ͰηοτͰߟ͑Δ΂͖ɺεϐʔυϋοΧιϯ΍ήʔ ϛϑΟέʔγϣϯΛ׆༻ֶָͯ͘͠͠΂Δ࢓ֻ͚࡞ΓΛɻ