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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ඇػೳཁ݅ʹͩ͜ΘΔ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

͜Ε·Ͱ΍͖ͬͯͨ͜ͱ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

จԽʹ͢ΔͨΊʹԿΛ΍ͬͯ ͖͔ͨ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

·ͣ͸ݟ͑ΔΑ͏ʹ͠Α͏

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ݟ͑ͨΒܧଓతʹଌΖ͏

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ܧଓతʹଌΕͨΒ ܧଓతʹվળ͢ΔྲྀΕΛ࡞Δ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ͱ͸͍͑ɺͦΜͳ࣌ؒ࡞Ε·ͤΜΑ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

·ͱΊ

Slide 40

Slide 40 text

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