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

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

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

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

1623dd1adf096ba35ba33727d933e14c?s=128

株式会社NIJIBOX

December 18, 2020
Tweet

Transcript

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

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

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

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