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

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

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