Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hatena Engineer Seminar #19 フロントエンド編
Search
mfzy
March 30, 2022
Programming
0
1.6k
Hatena Engineer Seminar #19 フロントエンド編
mfzy
March 30, 2022
Tweet
Share
More Decks by mfzy
See All by mfzy
Hatena Engineer Seminar #14 Next.js 編 / hatena-engineer-seminar-14-nextjs
mfzy
0
1.3k
Other Decks in Programming
See All in Programming
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
810
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
Java 22 Overview
kishida
1
180
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
新宿ダンジョンを可視化してみた
satoshi7190
2
260
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
ゆるい個人開発のススメ
kuroppe1819
10
990
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
810
Goのmultiple errorsについて (2024年4月版)
syumai
4
920
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
The Mythical Team-Month
searls
216
42k
A Tale of Four Properties
chriscoyier
151
22k
Faster Mobile Websites
deanohume
299
30k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
What's in a price? How to price your products and services
michaelherold
237
11k
Typedesign – Prime Four
hannesfritz
36
2.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Transcript
Hatena Engineer Seminar #19 id: ϑϩϯτΤϯυฤ ΧΫϤϜͷΛݟਾٕ͑ͨज़ 2022.03.30 mfzy
ࣗݾհ • id:mfzy • 2019 ৽ଔೖࣾ • Web ΞϓϦέʔγϣϯΤϯδχΞ •
ϊϕϧνʔϜॴଐ
͡Ίʹ • ϓϩτλΠϓޙͷ࣮ફͷΛ͠·͢ ◦ ࣮ࡍʹͲ͏ͬͯ React ҠߦΛਐΊ͔ͨ ◦ ͦͷࡍʹԿΛߟ͑ͯͲ͏͔ͨ͠ ◦
ϑϩϯτΤϯυʹযΛ͍ͯͯ·͢ • ٕज़ΑΓख๏ɾʹدͬͨʹͳΓ·͢ ◦ ݸʑͷٕज़ཁૉʹ͍ͭͯਂ͘৮Ε·ͤΜ • (ࢀߟ) ϑϩϯτΤϯυͷओཁͳٕज़ཁૉ ◦ Next.js (React) ◦ GraphQL
࣍ • ޮతɾ҆ఆతʹਐΊΔ ◦ ͳͥޮతɾ҆ఆతʹਐΊΔඞཁ͕͋Δͷ͔ ◦ Ͳ͏͔ͨ͠ • ܧଓతʹ࣭Λҙࣝ͢Δ ◦
ͳ࣭ͥΛҙࣝ͢Δඞཁ͕͋Δͷ͔ ◦ Ͳ͏͔ͨ͠ • ·ͱΊ
ޮతɾ҆ఆతʹਐΊΔ
ͳͥޮతɾ҆ఆతʹਐΊΔඞཁ͕͋Δͷ͔ • ظݶʹؒʹ߹ΘͤΔ ◦ ͬͱݴ͑ແཧͤͣʹؒʹ߹ΘͤΒΕΔͱخ͍͠ ▪ աͳۀٳग़ۈΛආ͚ΒΕΔΑ͏ʹ • ෆ҆ɾϦεΫΛܰݮ͢Δ ◦
ޮ͕ѱ͚ΕͦΕ͚ͩͰετϨε ◦ ҆ఆͯ͠ՌΛڍ͛ΒΕͳ͚ΕϞνϕʔγϣϯͷԼʹܨ͕Δ • ୯ʹ࡞ۀΛ͜ͳ͢Ҏ্ͷ༨༟Λ࡞Δ ◦ εέδϡʔϧɾਫ਼ਆ্ͷ༨༟ ◦ ͜͜Λ۷ΓԼ͛Δ
༨༟Λ࡞Δͱ͍͏͜ͱ • ༨༟͕ͳ͘ͳΔͱେਅͬઌʹ࣭͕٘ਜ਼ʹͳΔ ◦ (ΘΓʹείʔϓΛ٘ਜ਼ʹͰ͖ΔͳΒͦͷํ͕·͍͠) ◦ Ͱͳ࣭͕ͥॏཁͳͷ͔…ޙड़ • ༧ΊόοϑΝ (≒
εέδϡʔϧ্ͷ༨༟) Λઃ͚͓ͯ͘ͷେલఏ ◦ ԟʑʹͯ͠ཁ݅ՃɾมߋͷରԠόάमਖ਼ʹΘΕΔ͜ͱʹͳΔ ▪ ͜ΕΒʹׂ͘Λ༧ΊόοϑΝͱͯ͠ݟੵ͓ͬͯ͘ • ͜ΕͰΑ͏͘ʮͳΜͱ͔ؒʹ߹ΘͤΒΕΔʯঢ়ଶ ◦ ͔͜͜ΒͲ͏ʹ͔࣭ͯ͠ʹҙࣝΛ͚Δ༨༟Λ೧ग़͢Δඞཁ͕͋Δ ▪ ޮతɾ҆ఆతʹਐΊͯ༨༟Λ࡞Δ΄͔ͳ͍
Ͳ͏͔ͨ͠ • ίϯϙʔωϯτΛׂͯ͠ґଘؔΛચ͍ग़͢ • ίϯϙʔωϯτΛҰׅ࡞͢Δ • Storybook Λ׆༻͢Δ
ίϯϙʔωϯτΛׂͯ͠ ґଘؔΛચ͍ग़͢
ίϯϙʔωϯτׂ • ίϯϙʔωϯτΛΈ߹ΘͤͯϖʔδΛܗ࡞Δ ◦ (ϖʔδࣗମίϯϙʔωϯτ) ◦ ύʔπͱͳΔίϯϙʔωϯτ͕ͳ͍͜ͱʹ࢝·Βͳ͍ • σβΠϯϞοΫϖʔδ୯ҐͰ࡞ΒΕ͍ͯͨ ◦
͔ͭίϯϙʔωϯτͰදݱ͞Ε͍ͯͳ͔ͬͨ ▪ ۩ମతʹԿΛ࡞Δͷ͔͕ᐆດͳঢ়ଶ • ·ͣίϯϙʔωϯτʹׂ͍ͯ͘͠ͱ͜Ζ͔Β ◦ ۩ମతʹͲ͏ׂΛਐΊ͔ͨʹ͍ͭͯσβΠϯฤͰ
• σβΠϯ࣌Ͱ͋Δఔίϯϙʔωϯτҙࣝ͞Ε͍ͯΔͣ ◦ վΊׂͯ͢ΔͷೋखؒͷΑ͏ʹݟ͑Δ ◦ πʔϧͷదੑͷͩͬͨ • ͔͜͜Β Figma Ҡߦͷைྲྀ͕Ͱ͖ͨ
◦ ϓϩδΣΫτͷޙʹૣ׆༻͞Εͨ ◦ ݁Ռͱͯ͠खؒΛݮΒͤͨ ▪ ޮ্͕͕ͬͯαΫηε ίϯϙʔωϯτͱσβΠϯπʔϧ
։ൃͷྲྀΕ • ॳϖʔδ୯ҐͰλεΫΛͬͯਐΊΔྲྀΕ ◦ ґଘؔݫີʹҙࣝ͞Εͣയવͱͨ͠ΠϝʔδͰ ஔ͞Ε͍ͯͨ ◦ աڈͷϓϩδΣΫτͰͦΕͰԿͱ͔ͳͬͨͱ͍͏ܦҢ • ਐΊΔʹͭΕͯ՝͕ݟ͖͑ͯͨͷͰఏىͨ͠
◦ Կ͕ෆຯ͍ͷ͔
λεΫཧ্ͷ • ࡞ۀ͕සൟʹিಥ͢Δ ◦ ෳਓͰ࡞ۀ͢ΔҎ্ආ͚ΒΕͳ͍ ▪ ಛʹࠓճσβΠφʔͷਓ͕૿͑ͨͷ͕େ͖͍ ◦ ಉ͡ίϯϙʔωϯτʹґଘ͢ΔϖʔδΛಉ࣌ʹ࡞ͬͯ͠·͏ͱ… ▪
ಉ͡ίϯϙʔωϯτΛผʑʹ࡞ͬͯ͠·͏ ▪ ͋Δ͍Ұํͷ࡞ۀʹϒϩοΫ͞Εͯ͠·͏ • ݟੵΓͷਫ਼͕͍ ◦ ཻ͕ૈ͍΄ͲϒϨ͕େ͖͘ͳΔ ▪ ࠓճָ؍తʹݟੵΒΕ͍ͯͨ͜ͱ͕ޙʹൃ֮͢Δ
ίϯϙʔωϯτͱλεΫ • ίϯϙʔωϯτϕʔεͷ։ൃ ◦ ίϯϙʔωϯτ୯ҐͰย͚͍ͯ͘ͷ͕ૉ • ίϯϙʔωϯτʹґଘ͕ؔ͋Δ ◦ େ͖͍ͷ΄Ͳখ͍͞ͷͷدͤूΊʹͳΔ ▪
খ͍͞ͷΛઌʹย͚Δඞཁ͕͋Δ • ͍ͬͦίϯϙʔωϯτ୯ҐͰλεΫΛͬͯཧ͢Δ ◦ ίϯϙʔωϯτͷґଘؔ = λεΫͷґଘؔ ◦ িಥʹک͑ͳ͕Β࡞ۀ͢Δඞཁ͕ͳ͘ͳΔ
ίϯϙʔωϯτؒͷґଘؔΛચ͍ग़͢ • σβΠφʔɾΤϯδχΞͷ໊Ͱू·ͬͯਐΊͨ • ྲྀΕ ◦ ׂͨ͠ίϯϙʔωϯτΛεϓϨουγʔτʹฒΔ ◦ ୲֤ͯ͠ίϯϙʔωϯτ͝ͱʹґଘΛྻڍ͢Δ ▪
ͦͷίϯϙʔωϯτΛ࡞Δͷʹඞཁͳίϯϙʔωϯτ ◦ ग़དྷͨεϓϨουγʔτΛՃ͢Δ ◦ λεΫཧπʔϧͷΠϯϙʔτػೳͰλεΫԽ
ॊೈʹΓํΛม͑Δ • ϓϩδΣΫτऴ൫ϖʔδ୯ҐͰλεΫཧ͢Δํʹ ◦ جຊతͳ෦͕ἧͬͨঢ়ଶ ▪ ϖʔδ୯ҐͰ࡞ۀͯ͠িಥ͢ΔՄೳੑ͕͘ͳͬͨ ◦ ίϯϙʔωϯτ୯ҐͷλεΫཧͦΕͳΓʹࠎ͕ંΕΔ
ෆ҆Λܰݮ͢Δ • ίϯϙʔωϯτ͔Γ࡞͍ͬͯΔͱܗ͕ݟ͑ͣෆ҆ʹͳΔ ◦ ਐḿΛଌΔ্Ͱ͔Γ͍͢Ռϖʔδ ▪ ϖʔδʹணख͢Δͷޙʹͳͬͯ͠·͏ • ίϯϙʔωϯτհίʔφʔ ◦
िʹ 1 ճனձͷ࣌ؒΛͬͯ Storybook ΛோΊΔ ◦ id:takuwolog ͕࠷ۙग़དྷͨίϯϙʔωϯτΛհ • ޙϨϏϡʔձͱ͍͏ܗʹγϑτ ◦ ि࣍Ͱ࣌ؒΛઃ͚ͯग़དྷͨϖʔδΛશһͰோΊΔ ▪ ͜ͷͷϑΟʔυόοΫ͕վળʹܨ͕Δ͜ͱ
݁Ռ • ࡞ۀͷিಥΛؾʹͤͣԁʹ։ൃ͕ਐΊΒΕͨ ◦ Ұিಥ͠ͳ͘ͳΔΘ͚Ͱͳ͍͕ۃΊͯك • ॳͷݟੵΓָ͕؍తͩͬͨ͜ͱ͕໌Β͔ʹͳͬͨ ◦ λεΫΛదʹࡉԽͯ͠ݟੵΓͷਫ਼্͕͕ͬͨͨΊ •
λεΫཻΛͲ͏͢Δ͔ݕ౼ͷ༨͕͋Δ ◦ ґଘؔʹԊͬͯਐΊͨ͜ͱࣗମΑ͔ͬͨ ◦ 1 λεΫ = 1 ίϯϙʔωϯτࡉ͔͔͗ͨ͢͠Εͳ͍ ▪ ࡞ۀऀϚωʔδϟʔͷҙࣝ࣍ୈͰ͋Δ
ίϯϙʔωϯτΛ Ұׅ࡞͢Δ
ίϯϙʔωϯτΛ࡞Δίετ • ϑΝΠϧΛ༻ҙ͢Δ ◦ ίϯϙʔωϯτຊମɾελΠϧγʔτ ◦ ςετετʔϦʔ͋Δ • ίʔυΛॻ͘ ◦
ͦΕͳΓʹϘΠϥʔϓϨʔτ͕͋Δ
Ұׅ࡞ • ίϯϙʔωϯτΛ࡞Γ࢝ΊΔ·ͰʹͦΕͳΓͷख͕͔͔ؒΔ ◦ σβΠφʔʹඍົʹՙ͕ॏ͍ • id:koudenpa ͷͷҰ ◦ ணख࣌ʹຖճϑΝΠϧ͔Β࡞Δͷඇޮత
◦ ࡞Δ͖ίϯϙʔωϯτҰ௨Γग़ἧ͍ͬͯΔ ▪ ༧ΊԼ͚ͩ·ͱΊͯ࡞͓͚͍͍ͬͯͷͰ • Լ = ϑΝΠϧ + ϘΠϥʔϓϨʔτ
Plop • https://plopjs.com/ • ίʔυੜπʔϧ • Handlebars ͱ Inquirer.js ͕ϕʔεʹͳ͍ͬͯΔ
Plop ʹΑΔίϯϙʔωϯτੜ (४උ) • ࣭Λ༻ҙ͢Δ ◦ ίϯϙʔωϯτͷछྨʁ ◦ ίϯϙʔωϯτͷ໊લʁ •
ςϯϓϨʔτΛ༻ҙ͢Δ
࣭Λ༻ҙ͢Δ
ςϯϓϨʔτΛ༻ҙ͢Δ
Plop ʹΑΔίϯϙʔωϯτੜ (࣮ߦ) • ΠϯλϥΫςΟϒͳ࣭ʹ͑Δ͚ͩ ◦ ճ݁Ռͷσʔλ͕ςϯϓϨʔτͱ߹͞ΕΔ ◦ ߹͞Εͨ݁ՌͷϑΝΠϧ͕ग़ྗ͞ΕΔ ▪
ίϯϙʔωϯτͷࠎΈͷग़དྷ্͕Γ ◦ ίϚϯυϥΠϯҾͰ͑ΒΕΔ ▪ εΫϦϓτΛॻ͘ࡍʹศར
࣭ʹ͑Δ
ίʔυ͕ੜ͞ΕΔ
݁Ռ • ܁Γฦ͠ͷख͕ؒল͚Δ ◦ ਖੵΕࢁͱͳΔ • ࠶ݱՄೳͳܗͰ͢͜ͱ͕Ͱ͖ͨ ◦ ޙ͔Β৽نʹίϯϙʔωϯτΛ࡞Δࡍʹ͑Δ ◦
σβΠφʔʹ͍͍͢ • ίϯϙʔωϯτͱͯ͠ͷجຊతͳਫ४Λઃ͚Δ͜ͱ͕Ͱ͖ͨ ◦ (࣭؍Ͱ͏·͘ػೳͨ͠ͱ͍͏) ◦ ਓʹΑͬͯ࡞Γํɾॻ͖ํʹϒϨ͕ੜ͡ΔͷΛ͙ ◦ ςετετʔϦʔͷ࡞࿙ΕΛ͙
4UPSZCPPLΛ׆༻͢Δ
Storybook • https://storybook.js.org/ • UI ίϯϙʔωϯτͷͨΊͷ։ൃπʔϧ ◦ (React ʹݶΒͣ Vue
Angular ʹରԠ) • ετʔϦʔͱ͍͏୯ҐͰཧ ◦ ͋Δίϯϙʔωϯτͷಛఆͷঢ়ଶΛදݱ͢Δͷ ◦ 1 ͭͷίϯϙʔωϯτʹରͯ͠ෳଘࡏ͠͏Δ • ίϯϙʔωϯτϥΠϒϥϦͱͯ͠ͷػೳ ◦ ΧλϩάͷΑ͏ͳͷ
Storybook
Storybook ͷࣗಈσϓϩΠ • id:koudenpa ʹಋೖͯ͠Βͬͨͷ ◦ https://koudenpa.hatenablog.com/entry/2021/09/15/005719 • PR σϑΥϧτϒϥϯνͷ༰ΛσϓϩΠ
◦ Azure Static Web Apps ◦ खݩͰϒϥϯνΛΓସ͑ͨΓ Storybook Λىಈ͠ͳͯ͘ ݟͨΛ֬ೝ͠ʹߦ͚ΔΑ͏ʹ
݁Ռ • σβΠϯίʔσΟϯάͷෛՙΛԼ͛Δ͜ͱ͕Ͱ͖ͨ ◦ ཁ͕݅ෳࡶ → UI ͷऔΓ͏Δঢ়ଶෳࡶ ▪ ݸʑͷঢ়ଶʹ͍ͭͯݟͨΛ֬ೝ͢Δͷ͕େม
◦ ίϯτϩʔϧΛۦͯ͠ૉૣ͘ࢼߦࡨޡͰ͖ΔΑ͏ʹ • σβΠϯϨϏϡʔͷෛՙΛԼ͛Δ͜ͱ͕Ͱ͖ͨ ◦ ෳࡶͳ࠶ݱखॱΛ౿Ή͜ͱͳ͘ݟ͕ͨ֬ೝͰ͖ΔΑ͏ʹ
ܧଓతʹ࣭Λҙࣝ͢Δ
࣭ͷॏཁੑ • ओͳ 2 ͭͷࢹΛऔΓ্͛Δ • Ϣʔβʔࢹ ◦ Ϣʔβʔ͕৮ΕΔɾʹݟ͑Δൣғͷ࣭ ◦
Ϣʔβʔମݧ (UX) ʹ݁͢Δ • ։ൃऀࢹ ◦ ίʔυϕʔεٕज़ཁૉʹΔ࣭ ◦ ։ൃऀମݧ (DX) ʹ݁͢Δ
Ϣʔβʔࢹͷ࣭ vs ։ൃऀࢹͷ࣭ • ୯ʹʮ࣭ʯͱ͍͏ͱલऀʹҙ͕͖͕͕ࣝͪͩ݁ہͲͬͪେࣄ • ೋऀҰͰͳ͍ • Ή͠ΖҰൠʹਖ਼ͷ૬͕ؔ͋Δͣ ◦
۩ମతͳσʔλΛग़ͤͱݴΘΕΔͱ͍͕ۤࣗ͠໌ͳͰ͋Δ ▪ ࣭ → όάͷԹচʹͳ͍ͬͯΔΑ͏ͳίʔυϕʔε͔Β ߴ࣭ͳՌ͕ੜ·ΕΔΘ͚͕ͳ͍ ◦ ։ൃऀମݧ͚ͩΛॏࢹͯ͠Ϣʔβʔࢹͷ࣭Λ㚽Ζʹ ͍ͯͨ͠Βผ (֎) • ࠓճ։ൃऀࢹدΓͷʹͳΔ
ະདྷͷࢿͰ͋Δͱ͍͏ೝࣝ • ͳͥ React ҠߦΛΔͷ͔ ◦ ੜ࢈ੑΛߴΊΔͨΊͷະདྷͷࢿ • ͳͥੜ࢈ੑ͕͔ͬͨͷ͔ ◦
େ͖ͳٕज़తෛ࠴Λ๊͍͔͑ͯͨΒ ▪ ಛʹٕज़ཁૉ͕ݹͼ͍͔ͯͨΒ • Ҡߦͨ͠ͱ͜ΖͰ·ͨେ͖ͳෛ࠴Λ๊͑ͯ͠·ͬͯݩࢠͳ͍ ◦ ҠߦΰʔϧͰͳ͍ʂ
ෛ࠴Λ͜·Ίʹฦ͢ • ීஈ͔Βআ͍ͯ͠Ε៉ྷͳঢ়ଶอͨΕΔ͕… ◦ ਖੵΕࢁͱͳΔ (࠶) ◦ ࢁΛย͚Δͷ૬ͳؾ߹͍ɾ࿑ྗɾ͕࣌ؒඞཁ • ਖ͔ΒΛഎ͚͟ΔΛಘͳ͍ঢ়ଶ͕ଓ͚ͦͷ͏ͪࢁ͕Ͱ͖Δ
◦ ࣍ୈʹࢁʹຒΕͯ։ൃɾӡ༻Λଓ͚ΔӋʹͳΔ ▪ ͔ͤͬ͘ےͷ͍͍ٕज़ελοΫʹҠߦͨ͠ͱͯແବࠎ
ׂΕ૭ཧ Ҿ༻ݩ: ׂΕ૭ཧ - Wikipedia • ࣏͕҆ѱԽ͢Δ·Ͱʹ࣍ͷΑ͏ͳܦաΛͨͲΔɻ 1. ݐͷ૭͕յΕ͍ͯΔͷΛ์ஔ͢ΔͱɺͦΕ͕ʮ୭֘Ҭʹର͠ ؔ৺Λ͍ͬͯͳ͍ʯͱ͍͏αΠϯͱͳΓɺ൜ࡑΛى͍͜͢͠ڥ
Λ࡞Γग़͢ɻ 2. ΰϛͷϙΠࣺͯͳͲͷܰ൜ࡑ͕ى͖ΔΑ͏ʹͳΔɻ 3. ॅຽͷϞϥϧ͕Լͯ͠ɺҬͷৼڵɺ҆શ֬อʹڠྗ͠ͳ͘ͳΔɻ ͦΕ͕͞ΒʹڥΛѱԽͤ͞Δɻ 4. ڟѱ൜ࡑΛؚΊͨ൜ࡑ͕ଟൃ͢ΔΑ͏ʹͳΔɻ
ׂΕ૭ཧͱٕज़తෛ࠴ • ॅຽͷϞϥϧ = ࣭ͷҙ͕ࣝ͘ͳΔ ◦ ʮଞ͜Μͳײ͔ͩ͡ΒखΛൈ͍͍͍ͯͩΖ͏…ʯ ◦ ੵۃతʹ࣭Λվળ͠ͳ͘ͳΓѱԽͷҰ్ΛḷΔ •
ཁ͜·Ίʹෛ࠴Λฦ͠·͠ΐ͏ͱ͍͏ ◦ ෛ࠴Λฦ͍͢͠ → ࣭ͷߴ͍ঢ়ଶΛҡ࣋͢Δͷ͕ॏཁ
Ͳ͏͔ͨ͠ • ίϯϙʔωϯτͷཻ • Storybook ͷ VRT
ίϯϙʔωϯτͷཻ
ίϯϙʔωϯτͷཻ • աڈͷϓϩδΣΫτͰ͏·͍͔͘ͳ͔ͬͨϙΠϯτ • શମతʹίϯϙʔωϯτ͕ංେԽ͍ͯ͠Δ ◦ 1 ίϯϙʔωϯτ͋ͨΓͷߦ͕͍ ◦ ڽू͕͍
▪ อकੑɾՄಡੑ͕͘ͳΔ
Ͳ͏ͯ͜͠͏ͳͬͨ • ୯ʹཻΛҙࣝ͢Δ༨༟͕͍ܽͯͨ͠ ◦ ༨༟Λ࡞Γ·͠ΐ͏ͱ͍͏ʹΔ • ʮίϯϙʔωϯτΛͬͨͱ͜ΖͰଞͷͱ͜ΖͰ͏Θ͚Ͱ ͳ͍ͷͰΔඞཁͳ͍ͩΖ͏ʯͱ͍͏ҙࣝ ◦ ͜Εʹ͍ͭͯੋਖ਼͢Δඞཁ͕͋Δ
நԽͷҙٛ • நԽ࠶ར༻͚͕ͩతͰͳ͍ ◦ ঢ়ଶཧͳͲͷΛવΔ͖ൣғʹด͡ࠐΊΔҙٛେ͍ʹ͋Δ ▪ ؔ৺ͷ (SoC) • ίʔυංେԽ͢Δํʹ͔͠͠ͳ͍
◦ ཻૈ͗͢ΔΑΓࡉ͔͗͢Δํ͕Ϛγ ▪ ࡉ͔͗ͨ͢߹ޙ͔Β݁߹͢Ε͍͍ ▪ ૈ͗ͨ͢߹ʹޙ͔Βׂ͢Δͷେม ◦ ׂ͢ΔΑΓ݁߹͢Δํ͕؆୯ ▪ ҟ͋Δ͔͠Εͳ͍͕ͦ͏࣮ײ͍ͯ͠Δ
ཻͷײ֮ • ͋·Γʹࡉ͔͘Γ͗͢Δͱݟ௨͕͠ѱ͘ͳΔͷࣄ࣮ ◦ ͜Ε͔Γײ֮Λҭͯ·͠ΐ͏ͱ͔͠ݴ͍Α͏͕ͳ͍ ▪ ίʔυϨϏϡʔ, ϖΞϓϩ, etc. ▪
ݱࡏਐߦதͷऔΓΈ • Every Layout ಡॻձ • ΑΓ͘ʮίϯϙʔωϯτͷײ֮ʯΛ͔֬ͳͷʹ ͢ΔͨΊ
4UPSZCPPLͷ735
VRT • Visual Regression Testing • ݟͨʹ͍ͭͯͷճؼςετ ◦ UI ʹҙਤ͠ͳ͍มߋ͕ՃΘΔ
(όά͕ࠞೖ͢Δ) ͷΛ͙ • มߋΛՃ͑ΔલͱޙͷεφοϓγϣοτΛൺֱ͢Δ ◦ ͕ࠩ͋Εࣦഊ ▪ ҙਤͨࠩ͠Ͱ͋Εͳ͍
VRT ͷҙٛ • ϢʔβʔʹյΕͨͷΛఏڙͯ͠͠·͏֬ΛԼ͛Δ ◦ Ϣʔβʔࢹͷ࣭ • ࣗ৴Λ࣋ͬͯϦϑΝΫλϦϯάͰ͖ΔΑ͏ʹͳΔ ◦ վमʹΑͬͯݟ͕ͨյΕΔෆ҆Λܰݮ͢Δ
◦ ։ൃऀࢹͷ࣭
ϖʔδ୯Ґͷ VRT • Ұൠʹ VRT ͱ͍͏ͱϖʔδ୯Ґͷͷ͕ओྲྀ͔ͱࢥΘΕΔ • ͋Δఔ্͕ͬͨঢ়ଶͰͳ͍ͱ͋·Γҙຯ͕ͳ͍ ◦ ։ൃதৗʹյΕ͍ͯΔΑ͏ͳͷ
• γφϦΦΛॻ͘ͷ͕େม ◦ ࡉ͔͍෦ͷݟͨΛపఈతʹ͔֬Ί͍ͨ߹ಛʹ
Storybook ͷ VRT • https://storybook.js.org/docs/react/writing-tests/visual-testing • Storybook ͷετʔϦʔΛରʹ VRT Λߦ͏Έ
◦ ৭ʑ͋Δ • ݸʑͷঢ়ଶʹ͍ͭͯͷݟͨΛςετ͍͢͠ ◦ ঢ়ଶʹରԠ͢ΔετʔϦʔ͑͞༻ҙ͓͚͍͍ͯ͠ͷͰָ • Storybook ࣗମओʹޮԽΛతʹಋೖ͍ͯͨ͠ ◦ ͜͜·Ͱ͖͑ͯͨࢿ࢈Λͦͷ··׆༻Ͱ͖Δͷڧ͍
reg-suit + Storycap • https://github.com/reg-viz/reg-suit ◦ VRT ͷͨΊͷ CLI Λఏڙ
▪ ը૾ͷൺֱ ▪ εφοϓγϣοτͷอɾऔಘ ◦ ࿈ܞ෦χʔζʹ߹ΘͤͯϓϥάΠϯͰ֦ு͢Δܗ ▪ S3, GCS, GitHub, GitLab, Slack, etc. • https://github.com/reg-viz/storycap ◦ Storybook ΛΫϩʔϧͯ͠εΫϦʔϯγϣοτΛग़ྗͯ͘͠ΕΔ • ͜ΕΒΛΈ߹ΘͤΔͱखܰʹ Storybook ͷ VRT ͕࣮ݱՄೳ
ͳͥ reg-suit + Storycap ͳͷ͔ • ੈͷதʹ SaaS ιϦϡʔγϣϯ͋Δ ◦
εφοϓγϣοτ୯Ґͷैྔ՝੍ۚͷͷ͕ଟ͍… ▪ ࢼࢉͨ͠ͱ͜Ζ·͋·͋ͷֹۚʹ • ൺֱతࣗ༝ʹ͑ΔΠϯϑϥ͕͋Δ ◦ ඞཁͳϦιʔε Terraform Ͱखܰʹ࡞Ͱ͖Δঢ়ଶ ▪ S3 Bucket ͱ IAM Role Λੜ͚ͩ͢ • (ޙऀ GitHub Actions ͔Βͷ AssumeRole ༻) ◦ ίετʹ͍ͭͯ͋Δఔ༥௨͕ޮ͘
ྫ
ྫ: Ϩϙʔτ
ྫ: GitHub ͷίϝϯτʹΑΔ݁Ռ௨
ࠓޙͷ՝ • Storybook ͷ VRT Ͱ࠷ऴతͳݟͨςετͰ͖ͳ͍ ◦ ࣮ࡍʹϢʔβʔ͕ʹ͢Δݟͨ ◦ ίϯϙʔωϯτʹดͨ͡ελΠϦϯάΛҙ͍ࣝͯ͠Δ͕
ᘳ͔ͱ͍͏ͱ… ◦ ࠷ऴతͳݟ͕ͨอূ͞Ε͍ͯΕΑΓࣗ৴Λ࣋ͬͯվमͰ͖Δ ▪ ։ൃ͕མͪண͍ͨϖʔδʹ͍ͭͯϖʔδ୯Ґͷ VRT ͷಋೖΛݕ౼
·ͱΊ • ະདྷͷࢿͱͯ͠ͷ React Ҡߦ • ͳͥࢿΛߦͬͨͷ͔ ◦ ٕज़తෛ࠴Λฦ٫ͯ͠ޮతʹ։ൃ͕ߦ͑ΔڥΛ͑Δ ▪
͜ͷঢ়ଶΛҡ࣋Ͱ͖ΔΑ͏ʹ ◦ ͳʹΑΓڀۃతʹྑ͍ͷΛܧଓతʹϢʔβʔʹ ఏڙ͢Δ൫ΛݻΊΔͨΊ • ͻͱ·ͣઅΛܴ͑·͕ͨ͠Ҿ͖ଓ͖ؤுΓ·͢