Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
株式会社NIJIBOX
December 18, 2020
Programming
0
50
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
リクルートグループ主催!『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/
株式会社NIJIBOX
December 18, 2020
Tweet
Share
More Decks by 株式会社NIJIBOX
See All by 株式会社NIJIBOX
nbkouhou
1
1k
nbkouhou
9
4.5k
nbkouhou
0
730
nbkouhou
0
380
nbkouhou
0
350
nbkouhou
0
14
nbkouhou
0
330
nbkouhou
0
98
nbkouhou
0
94
Other Decks in Programming
See All in Programming
kubode
0
170
makicamel
1
160
loleg
0
190
yshrsmz
1
450
nanimonodemonai
2
1.4k
hr01
0
1.6k
nrslib
20
13k
rukiadia
0
1.3k
masayaaoyama
4
520
77web
4
1.4k
ippey
0
170
line_developers_tw
0
350
Featured
See All Featured
bermonpainter
342
26k
mza
80
4.1k
thoeni
4
550
pauljervisheath
196
15k
shpigford
368
42k
dougneiner
55
5.4k
jponch
103
4.9k
brad_frost
156
6.4k
robhawkes
52
2.8k
holman
448
130k
nonsquared
81
3.3k
chriscoyier
145
19k
Transcript
ඇػೳཁ݅ΛจԽʹ 2020/12/10 @ Business & Creative
Twitter: @yosuke_furukawa Github: yosuke-furukawa ࠷ۙͷ׆ಈ $ISPNF"EWJTPSZ#PBSE +4$POG+1PSHBOJ[FSFUD
ඇػೳཁ݅ʹͩ͜ΘΔ
ػೳཁ݅ͱඇػೳཁ݅ • ػೳཁ݅ɿ ࣮͠ͳ͖Ό͍͚ͳ͍ػೳ Ϣʔβʔ͔ΒͷཁٻΛ͑ΔγεςϜͷػೳ • ඇػೳཁ݅ɿ ඞ࣮ͣ͠͠ͳ͖Ό͍͚ͳ͍Θ͚Ͱͳ͍͕ɺ ϓϩδΣΫτΛ্ͤ͞ΔͨΊʹඞཁͳ͜ͱ
ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ύϑΥʔϚϯε • SPA/PWA/AMP
etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc
ػೳཁ݅Λຬͨͯ͠ظʹ ΘΕΔதͰͲ͜·Ͱඇػೳཁ ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ ΤϯδχΞͷҰछͷೳྗ
ඇػೳཁ݅จԽ • ߴͰϝϯςφϒϧͰΞΫηγϒϧͰૉ Β͍͠ͷΛ࡞ͬͨͱͯͦ͠ΕΛҡ࣋͠ଓ ͚ΒΕͳ͚Εҙຯ͕ͳ͍ɻ • ύϑΥʔϚϯεʹͤΑϝϯςφϯαϏϦςΟ ʹͤΑɺҰ࣌తͳରࡦ͚ͩͰͳ͘ɺϝϯ όʔͷҭؚΊͨ߃ٱతͳରࡦ͕ඞཁɻ
ϦΫϧʔτͱχδϘοΫε
ϦΫϧʔτͱχδϘοΫε • ϦΫϧʔτͷϑϩϯτΤϯυΛڠۀ͍ͯ͠Δύʔτφʔ • ϦΫϧʔτଆͷϑϩϯτΤϯυ༷͕ະ֬ఆͩͬͨΓɺٕज़ελο Ϋ͕ܾ·ͬͯͳ͔ͬͨΓͱ͍ͬͨෆ࣮֬ੑͷߴ͍ΞϓϦέʔγϣϯͰ ࣮֬ʹ࡞Δ͜ͱʹओ؟Λ͓͍ͯΔ • χδϘοΫεଆͷϑϩϯτΤϯυ࡞ͬͨͷΛҡ࣋ɾͤ͞Δ͜ ͱʹओ؟Λ͓͍ͯΔ
• ͲͪΒҰॹʹ࡞͓ͬͯΓɺڥքΛ͖ͬΓҾ͍ͯΔΘ͚Ͱͳ͍ • ҰॹʹࣄۀΛͤ͞Δɺඇػೳཁ݅ʹͩ͜ΘΔͱ͍͏ҙຯͰͲͪ Βಉ͡ɻ
͜Ε·Ͱ͖ͬͯͨ͜ͱ
ϦΫϧʔτͷWebΛߴԽ ͠ɺϢʔβϏϦςΟΛ্͞ ͤΔ׆ಈΛ֤αΠτͰ࣮ࢪ
466.0 ੑೳͷఆ؍ଌπʔϧΛ ࡞ ڝ߹ͱͷࠩΛఆৗൺֱ "JS4)*'5 ͍ͱݴΘΕ͍ͯͨΫϥ ΠΞϯτΛ๚͠ɺ ߴԽ )1#ίεϝ ".1'JSTUͳαΠτΛߏ
ஙɺύϑΥʔϚϯεΛվ ળͭͭ͠ɺϊϋ͕શ ମʹਁಁͰ͖ΔΑ͏ʹ͠ ͨ
AirSHIFT https://web.dev/five-ways-airshift-improved-their-react-app/ virtual rendering ͰදࣔཁૉΛݮ Ұ෦ͷཁૉΛComlinkͰ workerize
SUUMO ͍ͬͯͳ͍CSS Λ95%ݮ ը૾αΠζΛ90%ݮ Core Web Vitals All Green ୡ
https://recruit-tech.co.jp/blog/2020/08/07/suumo_performance_improvement/
HPBCosme https://youtu.be/S_UttIYzKtM Lighthouse CI Λͬͯఆظతʹ ύϑΥʔϚϯεܭଌ StoryBookͱreg-suitͰVRT
͍Ζ͍Ζ͖͚ͬͯͨͲ... • ϓϩμΫτ࣭Λվળ͚ͨͩ͠Ͱಓ • ͜ͷվળΛจԽʹ͠ɺܧଓతʹଓ͚ɺϏδω εΰʔϧʹͭͳ͛ͯͦ͜ޭ • վળ׆ಈΛܧଓͭͭ͠ɺ࠷ऴతͳϏδωε ΰʔϧΛࢦ͢
จԽʹ͢ΔͨΊʹԿΛͬͯ ͖͔ͨ
ͨΓతʹվળ => ͍͖ͳ ΓίϯόʔδϣϯͷୡͳͲ ͷநͷߴ͍ͱ͜ΖΛૂ͏ μϝύλʔϯ Ϙʔϧ࣋ͬͨΒ͍͖ͳΓγϡʔτଧͬͪΌ͏λΠϓ
ඇػೳཁ݅Λ্͍͛ͯ͘ͷʹ ઓུ͕͋Δ
ݟ͑ͳ͍ͷଌΕͳ͍ ଌΕͳ͍ͷվળͰ͖ͳ͍
·ͣݟ͑ΔΑ͏ʹ͠Α͏
ՄࢹԽ͕ॏཁ • AirSHIFTͰϢʔβʔͷ࣮ࡍͷૢ࡞Λجʹ͔ ͔ͬͨඵΛݟ͑ΔΑ͏ʹ͍ͯ͠Δɻ ݟ͑ΔͱؾʹͳΔɺෆࢥٞͱվળͨ͘͠ͳΔ
ݟ͑ͨΒܧଓతʹଌΖ͏
ଌΔ͜ͱΛश׳ʹ͠Α͏ɻ • HPBίεϝͰͷࣄྫ • Speed Curve ͳͲͷಋೖݕ౼͠ɺଌΓଓ͚Δ श׳Λ࡞Δɻ
ܧଓతʹଌΕͨΒ ܧଓతʹվળ͢ΔྲྀΕΛ࡞Δ
վળΛී௨ʹεϓϦϯτʹ ͤΔ • ඇػೳཁ݅ͷվળΛػೳͷՃͱ͘͠ѻ͍ɺ εϓϦϯτʹೖΕͯվળ͢ΔྲྀΕΛ࡞Δɻ • ߹ʹΑͬͯOSSʹPRΛग़͢ͱ͔ݕ౼͢ Δɻ AMP Optimizer
Bug... ƅ̖ƅ;)
ՄࢹԽ => ϞχλϦϯάͷश ׳ͮ͘Γ => վળΛॏͶΔ উͪύλʔϯ
ͱ͍͑ɺͦΜͳ࣌ؒ࡞Ε·ͤΜΑ
ͦΕͪΖΜͦ͏ɻ ϝϯόʔؒͰͷೳྗ্ඞཁɻ ೳྗ͕͋Δఔߴ͍ϝϯόʔ͡Όͳ͍ ͱΤϯϋϯε͠ͳ͕ΒվળͰ͖ͳ͍ɻ
ϝϯόʔͷҭηοτͰߟ ͑ΔɻҰ࣌తͳվળͰऴΘΓ ʹ͠ͳ͍ɻ
Ωʔϫʔυ ͦͷ1: ήʔϛϑΟέʔγϣϯ
ࢀըॳ 1ޙ ήʔϛϑΟέʔγϣϯ ήʔϜͷݸମάϥϑΈ͍ͨ ͳײ֮ͰεΩϧϚοϓΛ࡞Δ
ࢀըॳ 1ޙ ͜ͷϨʔμʔνϟʔτάϥϑΛ ίʔϯϑϨʔΫάϥϑͱݺΜͰ ͍Δʢອ࠽ͷωλΑΓʣ
ۀͷߦʹΓ͍ͯͳ͍ॴ ͕ՄࢹԽ͞Εɺೳྗ্ͷα ϙʔτʹ͑Δɻ
Ωʔϫʔυ ͦͷ2: εϐʔυϋοΧιϯ
ΣϒϑϩϯτΤϯυ͚ͩͰ Ͳ͜·ͰLighthouseͷείΞ Λ্͛ΒΕΔ͔ڝ͏େձ
ظతʹੑೳʹؔ͢ΔφϨο δΛ࣮ઓܗࣜͰஷΊΒΕΔɻ
ϝϯόʔͷೳྗ্ɺҭ· ͰηοτͰඇػೳཁ݅ͷจԽ ͷৢͱͯ͠औΓΉ
·ͱΊ
·ͱΊ • χδϘοΫεϦΫϧʔτͲͪΒඇػೳཁ݅ʹͩ͜Θͬ ͍ͯΔɻ • ඇػೳཁ݅ΛͨͩҰ࣌తʹୡ͢Δ͚ͩͰͳ͘தظతʹ औΓΜͰ͍͘ = จԽʹ͢ΔͨΊʹ͍ͬͯΔ͜ͱ •
ݟ͑ΔԽ => ܭଌͷश׳Խ => վળͷश׳Խ • ҭ·ͰηοτͰߟ͑Δ͖ɺεϐʔυϋοΧιϯήʔ ϛϑΟέʔγϣϯΛ׆༻ֶָͯ͘͠͠Δֻ͚࡞ΓΛɻ