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
2k
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.6k
Other Decks in Programming
See All in Programming
testingを眺める
matumoto
1
140
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Laravel Boost 超入門
fire_arlo
3
220
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Improving my own Ruby thereafter
sisshiki1969
1
160
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Agile that works and the tools we love
rasmusluckow
330
21k
The Invisible Side of Design
smashingmag
301
51k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cult of Friendly URLs
andyhume
79
6.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
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 Ҡߦ • ͳͥࢿΛߦͬͨͷ͔ ◦ ٕज़తෛ࠴Λฦ٫ͯ͠ޮతʹ։ൃ͕ߦ͑ΔڥΛ͑Δ ▪
͜ͷঢ়ଶΛҡ࣋Ͱ͖ΔΑ͏ʹ ◦ ͳʹΑΓڀۃతʹྑ͍ͷΛܧଓతʹϢʔβʔʹ ఏڙ͢Δ൫ΛݻΊΔͨΊ • ͻͱ·ͣઅΛܴ͑·͕ͨ͠Ҿ͖ଓ͖ؤுΓ·͢