Hatena Engineer Seminar #19 フロントエンド編

Transcript

1. Hatena Engineer Seminar #19 id: ϑϩϯτΤϯυฤ ΧΫϤϜͷ೥Λݟਾٕ͑ͨज़ 2022.03.30 mfzy
2. ࣗݾ঺հ • id:mfzy • 2019 ৽ଔೖࣾ • Web ΞϓϦέʔγϣϯΤϯδχΞ • ϊϕϧνʔϜॴଐ
3. ͸͡Ίʹ • ϓϩτλΠϓޙͷ࣮ફͷ࿩Λ͠·͢ ◦ ࣮ࡍʹͲ͏΍ͬͯ React ҠߦΛਐΊ͔ͨ ◦ ͦͷࡍʹԿΛߟ͑ͯͲ͏޻෉͔ͨ͠ ◦ ϑϩϯτΤϯυʹয఺Λ౰͍ͯͯ·͢ • ٕज़ΑΓ͸ख๏ɾ޻෉ʹدͬͨ࿩ʹͳΓ·͢ ◦ ݸʑͷٕज़ཁૉʹ͍ͭͯਂ͘͸৮Ε·ͤΜ • (ࢀߟ) ϑϩϯτΤϯυͷओཁͳٕज़ཁૉ ◦ Next.js (React) ◦ GraphQL
4. ໨࣍ • ޮ཰తɾ҆ఆతʹਐΊΔ ◦ ͳͥޮ཰తɾ҆ఆతʹਐΊΔඞཁ͕͋Δͷ͔ ◦ Ͳ͏޻෉͔ͨ͠ • ܧଓతʹ඼࣭Λҙࣝ͢Δ ◦ ͳͥ඼࣭Λҙࣝ͢Δඞཁ͕͋Δͷ͔ ◦ Ͳ͏޻෉͔ͨ͠ • ·ͱΊ
5. ޮ཰తɾ҆ఆతʹਐΊΔ
6. ͳͥޮ཰తɾ҆ఆతʹਐΊΔඞཁ͕͋Δͷ͔ • ظݶʹؒʹ߹ΘͤΔ ◦ ΋ͬͱݴ͑͹ແཧͤͣʹؒʹ߹ΘͤΒΕΔͱخ͍͠ ▪ ա౓ͳ࢒ۀ΍ٳ೔ग़ۈΛආ͚ΒΕΔΑ͏ʹ • ෆ҆ɾϦεΫΛܰݮ͢Δ ◦ ޮ཰͕ѱ͚Ε͹ͦΕ͚ͩͰετϨε ◦ ҆ఆͯ͠੒ՌΛڍ͛ΒΕͳ͚Ε͹Ϟνϕʔγϣϯͷ௿Լʹܨ͕Δ • ୯ʹ࡞ۀΛ͜ͳ͢Ҏ্ͷ༨༟Λ࡞Δ ◦ εέδϡʔϧɾਫ਼ਆ্ͷ༨༟ ◦ ͜͜Λ۷ΓԼ͛Δ
7. ༨༟Λ࡞Δͱ͍͏͜ͱ • ༨༟͕ͳ͘ͳΔͱେ఍͸ਅͬઌʹ඼࣭͕٘ਜ਼ʹͳΔ ◦ (୅ΘΓʹείʔϓΛ٘ਜ਼ʹͰ͖ΔͳΒͦͷํ͕๬·͍͠) ◦ Ͱ͸ͳͥ඼࣭͕ॏཁͳͷ͔…͸ޙड़ • ༧ΊόοϑΝ (≒ εέδϡʔϧ্ͷ༨༟) Λઃ͚͓ͯ͘ͷ͸େલఏ ◦ ԟʑʹͯ͠ཁ݅௥Ճɾมߋ΁ͷରԠ΍όάमਖ਼ʹ௥ΘΕΔ͜ͱʹͳΔ ▪ ͜ΕΒʹׂ͘޻਺Λ༧ΊόοϑΝͱͯ͠ݟੵ΋͓ͬͯ͘ • ͜ΕͰΑ͏΍͘ʮͳΜͱ͔ؒʹ߹ΘͤΒΕΔʯঢ়ଶ ◦ ͔͜͜ΒͲ͏ʹ͔ͯ͠඼࣭ʹҙࣝΛ޲͚Δ༨༟Λ೧ग़͢Δඞཁ͕͋Δ ▪ ޮ཰తɾ҆ఆతʹਐΊͯ༨༟Λ࡞Δ΄͔ͳ͍
8. Ͳ͏޻෉͔ͨ͠ • ίϯϙʔωϯτΛ෼ׂͯ͠ґଘؔ܎Λચ͍ग़͢ • ίϯϙʔωϯτΛҰׅ࡞੒͢Δ • Storybook Λ׆༻͢Δ
9. ίϯϙʔωϯτΛ෼ׂͯ͠ 
 ґଘؔ܎Λચ͍ग़͢
10. ίϯϙʔωϯτ෼ׂ • ίϯϙʔωϯτΛ૊Έ߹ΘͤͯϖʔδΛܗ࡞Δ ◦ (ϖʔδࣗମ΋ίϯϙʔωϯτ) ◦ ύʔπͱͳΔίϯϙʔωϯτ͕ͳ͍͜ͱʹ͸࢝·Βͳ͍ • σβΠϯϞοΫ͸ϖʔδ୯ҐͰ࡞ΒΕ͍ͯͨ ◦ ͔ͭίϯϙʔωϯτͰදݱ͞Ε͍ͯͳ͔ͬͨ ▪ ۩ମతʹԿΛ࡞Δͷ͔͕ᐆດͳঢ়ଶ • ·ͣίϯϙʔωϯτʹ෼ׂ͍ͯ͘͠ͱ͜Ζ͔Β ◦ ۩ମతʹͲ͏෼ׂΛਐΊ͔ͨʹ͍ͭͯ͸σβΠϯฤͰ
11. • σβΠϯ࣌఺Ͱ͋Δఔ౓ίϯϙʔωϯτ͸ҙࣝ͞Ε͍ͯΔ͸ͣ ◦ վΊͯ෼ׂ͢Δͷ͸ೋ౓खؒͷΑ͏ʹݟ͑Δ ◦ πʔϧͷదੑͷ໰୊ͩͬͨ • ͔͜͜Β Figma Ҡߦ΁ͷைྲྀ͕Ͱ͖ͨ ◦ ϓϩδΣΫτͷޙ൒ʹ͸ૣ଎׆༻͞Εͨ ◦ ݁Ռͱͯ͠खؒΛݮΒͤͨ ▪ ޮ཰্͕͕ͬͯαΫηε ίϯϙʔωϯτͱσβΠϯπʔϧ
12. ։ൃͷྲྀΕ • ౰ॳ͸ϖʔδ୯ҐͰλεΫΛ੾ͬͯਐΊΔྲྀΕ ◦ ґଘؔ܎΋ݫີʹ͸ҙࣝ͞Εͣയવͱͨ͠ΠϝʔδͰ
 ഑ஔ͞Ε͍ͯͨ ◦ աڈͷϓϩδΣΫτͰ͸ͦΕͰԿͱ͔ͳͬͨͱ͍͏ܦҢ • ਐΊΔʹͭΕͯ՝୊͕ݟ͖͑ͯͨͷͰ໰୊ఏىͨ͠ ◦ Կ͕ෆຯ͍ͷ͔
13. λεΫ؅ཧ্ͷ໰୊఺ • ࡞ۀ͕සൟʹিಥ͢Δ ◦ ෳ਺ਓͰ࡞ۀ͢ΔҎ্ආ͚ΒΕͳ͍໰୊ ▪ ಛʹࠓճ͸σβΠφʔͷਓ਺͕૿͑ͨͷ͕େ͖͍ ◦ ಉ͡ίϯϙʔωϯτʹґଘ͢ΔϖʔδΛಉ࣌ʹ࡞ͬͯ͠·͏ͱ… ▪ ಉ͡ίϯϙʔωϯτΛผʑʹ࡞ͬͯ͠·͏ ▪ ͋Δ͍͸Ұํͷ࡞ۀʹϒϩοΫ͞Εͯ͠·͏ • ݟੵ΋Γͷਫ਼౓͕௿͍ ◦ ཻ౓͕ૈ͍΄ͲϒϨ͕େ͖͘ͳΔ ▪ ࠓճ͸ָ؍తʹݟੵ΋ΒΕ͍ͯͨ͜ͱ͕ޙʹൃ֮͢Δ
14. ίϯϙʔωϯτͱλεΫ • ίϯϙʔωϯτϕʔεͷ։ൃ ◦ ίϯϙʔωϯτ୯ҐͰย෇͚͍ͯ͘ͷ͕ૉ௚ • ίϯϙʔωϯτʹ͸ґଘؔ܎͕͋Δ ◦ େ͖͍΋ͷ΄Ͳখ͍͞΋ͷͷدͤूΊʹͳΔ ▪ খ͍͞΋ͷΛઌʹย෇͚Δඞཁ͕͋Δ • ͍ͬͦίϯϙʔωϯτ୯ҐͰλεΫΛ੾ͬͯ؅ཧ͢Δ ◦ ίϯϙʔωϯτͷґଘؔ܎ = λεΫͷґଘؔ܎ ◦ িಥʹک͑ͳ͕Β࡞ۀ͢Δඞཁ͕ͳ͘ͳΔ
15. ίϯϙʔωϯτؒͷґଘؔ܎Λચ͍ग़͢ • σβΠφʔɾΤϯδχΞͷ਺໊Ͱू·ͬͯਐΊͨ • ྲྀΕ ◦ ෼ׂͨ͠ίϯϙʔωϯτΛεϓϨουγʔτʹฒ΂Δ ◦ ෼୲֤ͯ͠ίϯϙʔωϯτ͝ͱʹґଘΛྻڍ͢Δ ▪ ͦͷίϯϙʔωϯτΛ࡞Δͷʹඞཁͳίϯϙʔωϯτ ◦ ग़དྷͨεϓϨουγʔτΛՃ޻͢Δ ◦ λεΫ؅ཧπʔϧͷΠϯϙʔτػೳͰλεΫԽ
16. ॊೈʹ΍ΓํΛม͑Δ • ϓϩδΣΫτऴ൫͸ϖʔδ୯ҐͰλεΫ؅ཧ͢Δํ਑ʹ ◦ جຊతͳ෦඼͕ἧͬͨঢ়ଶ ▪ ϖʔδ୯ҐͰ࡞ۀͯ͠΋িಥ͢ΔՄೳੑ͕௿͘ͳͬͨ ◦ ίϯϙʔωϯτ୯ҐͷλεΫ؅ཧ͸ͦΕͳΓʹࠎ͕ંΕΔ
17. ෆ҆Λܰݮ͢Δ • ίϯϙʔωϯτ͹͔Γ࡞͍ͬͯΔͱ׬੒ܗ͕ݟ͑ͣෆ҆ʹͳΔ ◦ ਐḿΛଌΔ্Ͱ෼͔Γ΍͍͢੒Ռ෺͸ϖʔδ ▪ ϖʔδʹணख͢Δͷ͸ޙ൒ʹͳͬͯ͠·͏ • ίϯϙʔωϯτ঺հίʔφʔ ◦ िʹ 1 ճனձͷ࣌ؒΛ࢖ͬͯ Storybook ΛோΊΔ ◦ id:takuwolog ͕࠷ۙग़དྷͨίϯϙʔωϯτΛ঺հ • ޙ൒͸ϨϏϡʔձͱ͍͏ܗʹγϑτ ◦ ि࣍Ͱ࣌ؒΛઃ͚ͯग़དྷͨϖʔδΛશһͰோΊΔ ▪ ͜ͷ৔ͷϑΟʔυόοΫ͕վળʹܨ͕Δ͜ͱ΋
18. ݁Ռ • ࡞ۀͷিಥΛؾʹͤͣԁ׈ʹ։ൃ͕ਐΊΒΕͨ ◦ Ұ੾িಥ͠ͳ͘ͳΔΘ͚Ͱ͸ͳ͍͕ۃΊͯك • ౰ॳͷݟੵ΋Γָ͕؍తͩͬͨ͜ͱ͕໌Β͔ʹͳͬͨ ◦ λεΫΛద౓ʹࡉ෼Խͯ͠ݟੵ΋Γͷਫ਼౓্͕͕ͬͨͨΊ • λεΫཻ౓ΛͲ͏͢Δ͔͸ݕ౼ͷ༨஍͕͋Δ ◦ ґଘؔ܎ʹԊͬͯਐΊͨ͜ͱࣗମ͸Α͔ͬͨ ◦ 1 λεΫ = 1 ίϯϙʔωϯτ͸ࡉ͔͔͗ͨ͢΋͠Εͳ͍ ▪ ࡞ۀऀ΍Ϛωʔδϟʔͷҙࣝ࣍ୈͰ͸͋Δ
19. ίϯϙʔωϯτΛ 
 Ұׅ࡞੒͢Δ
20. ίϯϙʔωϯτΛ࡞Δίετ • ϑΝΠϧΛ༻ҙ͢Δ ◦ ίϯϙʔωϯτຊମɾελΠϧγʔτ ◦ ςετ΍ετʔϦʔ΋͋Δ • ίʔυΛॻ͘ ◦ ͦΕͳΓʹϘΠϥʔϓϨʔτ͕͋Δ
21. Ұׅ࡞੒ • ίϯϙʔωϯτΛ࡞Γ࢝ΊΔ·ͰʹͦΕͳΓͷख͕͔͔ؒΔ ◦ σβΠφʔʹ͸ඍົʹՙ͕ॏ͍ • id:koudenpa ͷ௽ͷҰ੠ ◦ ணख࣌ʹຖճϑΝΠϧ͔Β࡞Δͷ͸ඇޮ཰త ◦ ࡞Δ΂͖ίϯϙʔωϯτ͸Ұ௨Γग़ἧ͍ͬͯΔ ▪ ༧ΊԼ஍͚ͩ·ͱΊͯ࡞͓͚ͬͯ͹͍͍ͷͰ͸ • Լ஍ = ϑΝΠϧ + ϘΠϥʔϓϨʔτ
22. Plop • https://plopjs.com/ • ίʔυੜ੒πʔϧ • Handlebars ͱ Inquirer.js ͕ϕʔεʹͳ͍ͬͯΔ
23. Plop ʹΑΔίϯϙʔωϯτੜ੒ (४උ) • ࣭໰Λ༻ҙ͢Δ ◦ ίϯϙʔωϯτͷछྨ͸ʁ ◦ ίϯϙʔωϯτͷ໊લ͸ʁ • ςϯϓϨʔτΛ༻ҙ͢Δ
24. ࣭໰Λ༻ҙ͢Δ
25. ςϯϓϨʔτΛ༻ҙ͢Δ
26. Plop ʹΑΔίϯϙʔωϯτੜ੒ (࣮ߦ) • ΠϯλϥΫςΟϒͳ࣭໰ʹ౴͑Δ͚ͩ ◦ ճ౴݁Ռͷσʔλ͕ςϯϓϨʔτͱ߹੒͞ΕΔ ◦ ߹੒͞Εͨ݁ՌͷϑΝΠϧ͕ग़ྗ͞ΕΔ ▪ ίϯϙʔωϯτͷࠎ૊Έͷग़དྷ্͕Γ ◦ ίϚϯυϥΠϯҾ਺Ͱ΋౴͑ΒΕΔ ▪ εΫϦϓτΛॻ͘ࡍʹศར
27. ࣭໰ʹ౴͑Δ
28. ίʔυ͕ੜ੒͞ΕΔ
29. ݁Ռ • ܁Γฦ͠ͷख͕ؒল͚Δ ◦ ਖ΋ੵ΋Ε͹ࢁͱͳΔ • ࠶ݱՄೳͳܗͰ࢒͢͜ͱ͕Ͱ͖ͨ ◦ ޙ͔Β৽نʹίϯϙʔωϯτΛ࡞Δࡍʹ΋࢖͑Δ ◦ σβΠφʔʹ΋࢖͍΍͍͢ • ίϯϙʔωϯτͱͯ͠ͷجຊతͳਫ४Λઃ͚Δ͜ͱ͕Ͱ͖ͨ ◦ (඼࣭؍఺Ͱ΋͏·͘ػೳͨ͠ͱ͍͏࿩) ◦ ਓʹΑͬͯ࡞Γํɾॻ͖ํʹϒϨ͕ੜ͡ΔͷΛ๷͙ ◦ ςετ΍ετʔϦʔͷ࡞੒࿙ΕΛ๷͙
30. 4UPSZCPPL
    Λ׆༻͢Δ
31. Storybook • https://storybook.js.org/ • UI ίϯϙʔωϯτͷͨΊͷ։ൃπʔϧ ◦ (React ʹݶΒͣ Vue ΍ Angular ʹ΋ରԠ) • ετʔϦʔͱ͍͏୯ҐͰ؅ཧ ◦ ͋Δίϯϙʔωϯτͷಛఆͷঢ়ଶΛදݱ͢Δ΋ͷ ◦ 1 ͭͷίϯϙʔωϯτʹରͯ͠ෳ਺ଘࡏ͠͏Δ • ίϯϙʔωϯτϥΠϒϥϦͱͯ͠ͷػೳ ◦ ΧλϩάͷΑ͏ͳ΋ͷ
32. Storybook
33. Storybook ͷࣗಈσϓϩΠ • id:koudenpa ʹಋೖͯ͠΋Βͬͨ΋ͷ ◦ https://koudenpa.hatenablog.com/entry/2021/09/15/005719 • PR ΍σϑΥϧτϒϥϯνͷ಺༰ΛσϓϩΠ ◦ Azure Static Web Apps ◦ खݩͰϒϥϯνΛ੾Γସ͑ͨΓ Storybook Λىಈ͠ͳͯ͘ ΋ݟͨ໨Λ֬ೝ͠ʹߦ͚ΔΑ͏ʹ
34. ݁Ռ • σβΠϯίʔσΟϯάͷෛՙΛԼ͛Δ͜ͱ͕Ͱ͖ͨ ◦ ཁ͕݅ෳࡶ → UI ͷऔΓ͏Δঢ়ଶ΋ෳࡶ ▪ ݸʑͷঢ়ଶʹ͍ͭͯݟͨ໨Λ֬ೝ͢Δͷ͕େม ◦ ίϯτϩʔϧ౳Λۦ࢖ͯ͠ૉૣ͘ࢼߦࡨޡͰ͖ΔΑ͏ʹ • σβΠϯϨϏϡʔͷෛՙΛԼ͛Δ͜ͱ͕Ͱ͖ͨ ◦ ෳࡶͳ࠶ݱखॱΛ౿Ή͜ͱͳ͘ݟͨ໨͕֬ೝͰ͖ΔΑ͏ʹ
35. ܧଓతʹ඼࣭Λҙࣝ͢Δ
36. ඼࣭ͷॏཁੑ • ओͳ 2 ͭͷࢹ఺ΛऔΓ্͛Δ • Ϣʔβʔࢹ఺ ◦ Ϣʔβʔ͕৮ΕΔɾ໨ʹݟ͑Δൣғͷ඼࣭ ◦ Ϣʔβʔମݧ (UX) ʹ௚݁͢Δ • ։ൃऀࢹ఺ ◦ ίʔυϕʔε΍ٕज़ཁૉʹ܎Δ඼࣭ ◦ ։ൃऀମݧ (DX) ʹ௚݁͢Δ
37. Ϣʔβʔࢹ఺ͷ඼࣭ vs ։ൃऀࢹ఺ͷ඼࣭ • ୯ʹʮ඼࣭ʯͱ͍͏ͱલऀʹҙ͕ࣝ޲͖͕͕ͪͩ݁ہͲͬͪ΋େࣄ • ೋऀ୒ҰͰ͸ͳ͍ • Ή͠ΖҰൠʹ͸ਖ਼ͷ૬͕ؔ͋Δ͸ͣ ◦ ۩ମతͳσʔλΛग़ͤͱݴΘΕΔͱ͍͕ۤࣗ͠໌ͳ࿩Ͱ͸͋Δ ▪ ௿඼࣭ → όάͷԹচʹͳ͍ͬͯΔΑ͏ͳίʔυϕʔε͔Β
 ߴ඼࣭ͳ੒Ռ෺͕ੜ·ΕΔΘ͚͕ͳ͍ ◦ ։ൃऀମݧ͚ͩΛॏࢹͯ͠Ϣʔβʔࢹ఺ͷ඼࣭Λ㚽Ζʹ
 ͍ͯͨ͠Β࿩͸ผ (࿦֎) • ࠓճ͸։ൃऀࢹ఺دΓͷ࿩ʹͳΔ
38. ະདྷ΁ͷ౤ࢿͰ͋Δͱ͍͏ೝࣝ • ͳͥ React ҠߦΛ΍Δͷ͔ ◦ ੜ࢈ੑΛߴΊΔͨΊͷະདྷ΁ͷ౤ࢿ • ͳͥੜ࢈ੑ͕௿͔ͬͨͷ͔ ◦ େ͖ͳٕज़తෛ࠴Λ๊͍͔͑ͯͨΒ ▪ ಛʹٕज़ཁૉ͕ݹͼ͍͔ͯͨΒ • Ҡߦͨ͠ͱ͜ΖͰ·ͨେ͖ͳෛ࠴Λ๊͑ͯ͠·ͬͯ͸ݩ΋ࢠ΋ͳ͍ ◦ Ҡߦ͸ΰʔϧͰ͸ͳ͍ʂ
39. ෛ࠴Λ͜·Ίʹฦ͢ • ීஈ͔Β૟আ͍ͯ͠Ε͹៉ྷͳঢ়ଶ͸อͨΕΔ͕… ◦ ਖ΋ੵ΋Ε͹ࢁͱͳΔ (࠶) ◦ ࢁΛย෇͚Δͷ͸૬౰ͳؾ߹͍ɾ࿑ྗɾ͕࣌ؒඞཁ • ਖ͔Β໨Λഎ͚͟ΔΛಘͳ͍ঢ়ଶ͕ଓ͚͹ͦͷ͏ͪࢁ͕Ͱ͖Δ ◦ ࣍ୈʹࢁʹຒ΋Εͯ։ൃɾӡ༻Λଓ͚ΔӋ໨ʹͳΔ ▪ ͔ͤͬ͘ےͷ͍͍ٕज़ελοΫʹҠߦͨ͠ͱͯແବࠎ
40. ׂΕ૭ཧ࿦ Ҿ༻ݩ: ׂΕ૭ཧ࿦ - Wikipedia • ࣏͕҆ѱԽ͢Δ·Ͱʹ͸࣍ͷΑ͏ͳܦաΛͨͲΔɻ 1. ݐ෺ͷ૭͕յΕ͍ͯΔͷΛ์ஔ͢ΔͱɺͦΕ͕ʮ୭΋౰֘஍Ҭʹର͠ ؔ৺Λ෷͍ͬͯͳ͍ʯͱ͍͏αΠϯͱͳΓɺ൜ࡑΛى͜͠΍͍͢؀ڥ Λ࡞Γग़͢ɻ 2. ΰϛͷϙΠࣺͯͳͲͷܰ൜ࡑ͕ى͖ΔΑ͏ʹͳΔɻ 3. ॅຽͷϞϥϧ͕௿Լͯ͠ɺ஍Ҭͷৼڵɺ҆શ֬อʹڠྗ͠ͳ͘ͳΔɻ ͦΕ͕͞Βʹ؀ڥΛѱԽͤ͞Δɻ 4. ڟѱ൜ࡑΛؚΊͨ൜ࡑ͕ଟൃ͢ΔΑ͏ʹͳΔɻ
41. ׂΕ૭ཧ࿦ͱٕज़తෛ࠴ • ॅຽͷϞϥϧ = ඼࣭΁ͷҙ͕ࣝ௿͘ͳΔ ◦ ʮଞ΋͜Μͳײ͔ͩ͡ΒखΛൈ͍͍͍ͯͩΖ͏…ʯ ◦ ੵۃతʹ඼࣭Λվળ͠ͳ͘ͳΓѱԽͷҰ్ΛḷΔ • ཁ͸͜·Ίʹෛ࠴Λฦ͠·͠ΐ͏ͱ͍͏࿩ ◦ ෛ࠴Λฦ͠΍͍͢ → ඼࣭ͷߴ͍ঢ়ଶΛҡ࣋͢Δͷ͕ॏཁ
42. Ͳ͏޻෉͔ͨ͠ • ίϯϙʔωϯτͷཻ౓ • Storybook ͷ VRT
43. ίϯϙʔωϯτͷཻ౓
44. ίϯϙʔωϯτͷཻ౓ • աڈͷϓϩδΣΫτͰ͏·͍͔͘ͳ͔ͬͨϙΠϯτ • શମతʹίϯϙʔωϯτ͕ංେԽ͍ͯ͠Δ ◦ 1 ίϯϙʔωϯτ͋ͨΓͷߦ਺͕௕͍ ◦ ڽू౓͕௿͍ ▪ อकੑɾՄಡੑ͕௿͘ͳΔ
45. Ͳ͏ͯ͜͠͏ͳͬͨ • ୯ʹཻ౓Λҙࣝ͢Δ༨༟͕ܽ೗͍ͯͨ͠ ◦ ༨༟Λ࡞Γ·͠ΐ͏ͱ͍͏࿩ʹ໭Δ • ʮίϯϙʔωϯτΛ੾ͬͨͱ͜ΖͰଞͷͱ͜ΖͰ࢖͏Θ͚Ͱ΋ ͳ͍ͷͰ੾Δඞཁ͸ͳ͍ͩΖ͏ʯͱ͍͏ҙࣝ ◦ ͜Εʹ͍ͭͯ͸ੋਖ਼͢Δඞཁ͕͋Δ
46. ந৅Խͷҙٛ • ந৅Խ͸࠶ར༻͚͕ͩ໨తͰ͸ͳ͍ ◦ ঢ়ଶ؅ཧͳͲͷ੹຿ΛવΔ΂͖ൣғʹด͡ࠐΊΔҙٛ΋େ͍ʹ͋Δ ▪ ؔ৺ͷ෼཭ (SoC) • ίʔυ͸ංେԽ͢Δํ޲ʹ͔͠੒௕͠ͳ͍ ◦ ཻ౓͸ૈ͗͢ΔΑΓ͸ࡉ͔͗͢Δํ͕Ϛγ ▪ ࡉ͔͗ͨ͢৔߹͸ޙ͔Β݁߹͢Ε͹͍͍ ▪ ૈ͗ͨ͢৔߹ʹޙ͔Β෼ׂ͢Δͷ͸େม ◦ ෼ׂ͢ΔΑΓ΋݁߹͢Δํ͕؆୯ ▪ ҟ࿦͸͋Δ͔΋͠Εͳ͍͕ͦ͏࣮ײ͍ͯ͠Δ
47. ཻ౓ͷײ֮ • ͋·Γʹࡉ͔͘੾Γ͗͢Δͱݟ௨͕͠ѱ͘ͳΔͷ͸ࣄ࣮ ◦ ͜Ε͹͔Γ͸ײ֮Λҭͯ·͠ΐ͏ͱ͔͠ݴ͍Α͏͕ͳ͍ ▪ ίʔυϨϏϡʔ, ϖΞϓϩ, etc. ▪ ݱࡏਐߦதͷऔΓ૊Έ • Every Layout ಡॻձ • ΑΓ޿͘ʮίϯϙʔωϯτͷײ֮ʯΛ͔֬ͳ΋ͷʹ ͢ΔͨΊ
48. 4UPSZCPPL
    ͷ
    735
49. VRT • Visual Regression Testing • ݟͨ໨ʹ͍ͭͯͷճؼςετ ◦ UI ʹҙਤ͠ͳ͍มߋ͕ՃΘΔ (όά͕ࠞೖ͢Δ) ͷΛ๷͙ • มߋΛՃ͑ΔલͱޙͷεφοϓγϣοτΛൺֱ͢Δ ◦ ࠩ෼͕͋Ε͹ࣦഊ ▪ ҙਤͨࠩ͠෼Ͱ͋Ε͹໰୊ͳ͍
50. VRT ͷҙٛ • ϢʔβʔʹյΕͨ΋ͷΛఏڙͯ͠͠·͏֬཰ΛԼ͛Δ ◦ Ϣʔβʔࢹ఺ͷ඼࣭ • ࣗ৴Λ࣋ͬͯϦϑΝΫλϦϯάͰ͖ΔΑ͏ʹͳΔ ◦ վमʹΑͬͯݟͨ໨͕յΕΔෆ҆Λܰݮ͢Δ ◦ ։ൃऀࢹ఺ͷ඼࣭
51. ϖʔδ୯Ґͷ VRT • Ұൠʹ VRT ͱ͍͏ͱϖʔδ୯Ґͷ΋ͷ͕ओྲྀ͔ͱࢥΘΕΔ • ͋Δఔ౓࢓্͕ͬͨঢ়ଶͰͳ͍ͱ͋·Γҙຯ͕ͳ͍ ◦ ։ൃத͸ৗʹյΕ͍ͯΔΑ͏ͳ΋ͷ • γφϦΦΛॻ͘ͷ͕େม ◦ ࡉ͔͍෦඼ͷݟͨ໨Λపఈతʹ͔֬Ί͍ͨ৔߹͸ಛʹ
52. Storybook ͷ VRT • https://storybook.js.org/docs/react/writing-tests/visual-testing • Storybook ͷετʔϦʔΛର৅ʹ VRT Λߦ͏࢓૊Έ ◦ ৭ʑ͋Δ • ݸʑͷঢ়ଶʹ͍ͭͯͷݟͨ໨Λςετ͠΍͍͢ ◦ ঢ়ଶʹରԠ͢ΔετʔϦʔ͑͞༻ҙ͓͚ͯ͠͹͍͍ͷͰָ • Storybook ࣗମ͸ओʹޮ཰ԽΛ໨తʹಋೖ͍ͯͨ͠ ◦ ͜͜·Ͱ஝͖͑ͯͨࢿ࢈Λͦͷ··׆༻Ͱ͖Δͷ͸ڧ͍
53. 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 ͕࣮ݱՄೳ
54. ͳͥ reg-suit + Storycap ͳͷ͔ • ੈͷதʹ͸ SaaS ιϦϡʔγϣϯ΋͋Δ ◦ εφοϓγϣοτ୯Ґͷैྔ՝੍ۚͷ΋ͷ͕ଟ͍… ▪ ࢼࢉͨ͠ͱ͜Ζ·͋·͋ͷֹۚʹ • ൺֱతࣗ༝ʹ࢖͑ΔΠϯϑϥ͕͋Δ ◦ ඞཁͳϦιʔε͸ Terraform Ͱखܰʹ࡞੒Ͱ͖Δঢ়ଶ ▪ S3 Bucket ͱ IAM Role Λੜ΍͚ͩ͢ • (ޙऀ͸ GitHub Actions ͔Βͷ AssumeRole ༻) ◦ ίετʹ͍ͭͯ΋͋Δఔ౓༥௨͕ޮ͘
55. ྫ
56. ྫ: Ϩϙʔτ
57. ྫ: GitHub ͷίϝϯτʹΑΔ݁Ռ௨஌
58. ࠓޙͷ՝୊ • Storybook ͷ VRT Ͱ͸࠷ऴతͳݟͨ໨͸ςετͰ͖ͳ͍ ◦ ࣮ࡍʹϢʔβʔ͕໨ʹ͢Δݟͨ໨ ◦ ίϯϙʔωϯτʹดͨ͡ελΠϦϯάΛҙࣝͯ͠͸͍Δ͕
 ׬ᘳ͔ͱ͍͏ͱ… ◦ ࠷ऴతͳݟͨ໨͕อূ͞Ε͍ͯΕ͹ΑΓࣗ৴Λ࣋ͬͯվमͰ͖Δ ▪ ։ൃ͕མͪண͍ͨϖʔδʹ͍ͭͯ͸ϖʔδ୯Ґͷ
 VRT ͷಋೖΛݕ౼
59. ·ͱΊ • ະདྷ΁ͷ౤ࢿͱͯ͠ͷ React Ҡߦ • ͳͥ౤ࢿΛߦͬͨͷ͔ ◦ ٕज़తෛ࠴Λฦ٫ͯ͠ޮ཰తʹ։ൃ͕ߦ͑Δ؀ڥΛ੔͑Δ ▪ ͜ͷঢ়ଶΛҡ࣋Ͱ͖ΔΑ͏ʹ ◦ ͳʹΑΓ΋ڀۃతʹ͸ྑ͍΋ͷΛܧଓతʹϢʔβʔʹ
 ఏڙ͢Δ஍൫ΛݻΊΔͨΊ • ͻͱ·ͣઅ໨Λܴ͑·͕ͨ͠Ҿ͖ଓ͖ؤுΓ·͢