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/

株式会社NIJIBOX

December 18, 2020
Tweet

More Decks by 株式会社NIJIBOX

Other Decks in Programming

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