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

by mfzy

Slide 1

Slide 1 text

Hatena Engineer Seminar #19 id: ϑϩϯτΤϯυฤ ΧΫϤϜͷ೥Λݟਾٕ͑ͨज़ 2022.03.30 mfzy

Slide 2

Slide 2 text

ࣗݾ঺հ ● id:mfzy ● 2019 ৽ଔೖࣾ ● Web ΞϓϦέʔγϣϯΤϯδχΞ ● ϊϕϧνʔϜॴଐ

Slide 3

Slide 3 text

͸͡Ίʹ ● ϓϩτλΠϓޙͷ࣮ફͷ࿩Λ͠·͢ ○ ࣮ࡍʹͲ͏΍ͬͯ React ҠߦΛਐΊ͔ͨ ○ ͦͷࡍʹԿΛߟ͑ͯͲ͏޻෉͔ͨ͠ ○ ϑϩϯτΤϯυʹয఺Λ౰͍ͯͯ·͢ ● ٕज़ΑΓ͸ख๏ɾ޻෉ʹدͬͨ࿩ʹͳΓ·͢ ○ ݸʑͷٕज़ཁૉʹ͍ͭͯਂ͘͸৮Ε·ͤΜ ● (ࢀߟ) ϑϩϯτΤϯυͷओཁͳٕज़ཁૉ ○ Next.js (React) ○ GraphQL

Slide 4

Slide 4 text

໨࣍ ● ޮ཰తɾ҆ఆతʹਐΊΔ ○ ͳͥޮ཰తɾ҆ఆతʹਐΊΔඞཁ͕͋Δͷ͔ ○ Ͳ͏޻෉͔ͨ͠ ● ܧଓతʹ඼࣭Λҙࣝ͢Δ ○ ͳͥ඼࣭Λҙࣝ͢Δඞཁ͕͋Δͷ͔ ○ Ͳ͏޻෉͔ͨ͠ ● ·ͱΊ

Slide 5

Slide 5 text

ޮ཰తɾ҆ఆతʹਐΊΔ

Slide 6

Slide 6 text

ͳͥޮ཰తɾ҆ఆతʹਐΊΔඞཁ͕͋Δͷ͔ ● ظݶʹؒʹ߹ΘͤΔ ○ ΋ͬͱݴ͑͹ແཧͤͣʹؒʹ߹ΘͤΒΕΔͱخ͍͠ ■ ա౓ͳ࢒ۀ΍ٳ೔ग़ۈΛආ͚ΒΕΔΑ͏ʹ ● ෆ҆ɾϦεΫΛܰݮ͢Δ ○ ޮ཰͕ѱ͚Ε͹ͦΕ͚ͩͰετϨε ○ ҆ఆͯ͠੒ՌΛڍ͛ΒΕͳ͚Ε͹Ϟνϕʔγϣϯͷ௿Լʹܨ͕Δ ● ୯ʹ࡞ۀΛ͜ͳ͢Ҏ্ͷ༨༟Λ࡞Δ ○ εέδϡʔϧɾਫ਼ਆ্ͷ༨༟ ○ ͜͜Λ۷ΓԼ͛Δ

Slide 7

Slide 7 text

༨༟Λ࡞Δͱ͍͏͜ͱ ● ༨༟͕ͳ͘ͳΔͱେ఍͸ਅͬઌʹ඼࣭͕٘ਜ਼ʹͳΔ ○ (୅ΘΓʹείʔϓΛ٘ਜ਼ʹͰ͖ΔͳΒͦͷํ͕๬·͍͠) ○ Ͱ͸ͳͥ඼࣭͕ॏཁͳͷ͔…͸ޙड़ ● ༧ΊόοϑΝ (≒ εέδϡʔϧ্ͷ༨༟) Λઃ͚͓ͯ͘ͷ͸େલఏ ○ ԟʑʹͯ͠ཁ݅௥Ճɾมߋ΁ͷରԠ΍όάमਖ਼ʹ௥ΘΕΔ͜ͱʹͳΔ ■ ͜ΕΒʹׂ͘޻਺Λ༧ΊόοϑΝͱͯ͠ݟੵ΋͓ͬͯ͘ ● ͜ΕͰΑ͏΍͘ʮͳΜͱ͔ؒʹ߹ΘͤΒΕΔʯঢ়ଶ ○ ͔͜͜ΒͲ͏ʹ͔ͯ͠඼࣭ʹҙࣝΛ޲͚Δ༨༟Λ೧ग़͢Δඞཁ͕͋Δ ■ ޮ཰తɾ҆ఆతʹਐΊͯ༨༟Λ࡞Δ΄͔ͳ͍

Slide 8

Slide 8 text

Ͳ͏޻෉͔ͨ͠ ● ίϯϙʔωϯτΛ෼ׂͯ͠ґଘؔ܎Λચ͍ग़͢ ● ίϯϙʔωϯτΛҰׅ࡞੒͢Δ ● Storybook Λ׆༻͢Δ

Slide 9

Slide 9 text

ίϯϙʔωϯτΛ෼ׂͯ͠   ґଘؔ܎Λચ͍ग़͢

Slide 10

Slide 10 text

ίϯϙʔωϯτ෼ׂ ● ίϯϙʔωϯτΛ૊Έ߹ΘͤͯϖʔδΛܗ࡞Δ ○ (ϖʔδࣗମ΋ίϯϙʔωϯτ) ○ ύʔπͱͳΔίϯϙʔωϯτ͕ͳ͍͜ͱʹ͸࢝·Βͳ͍ ● σβΠϯϞοΫ͸ϖʔδ୯ҐͰ࡞ΒΕ͍ͯͨ ○ ͔ͭίϯϙʔωϯτͰදݱ͞Ε͍ͯͳ͔ͬͨ ■ ۩ମతʹԿΛ࡞Δͷ͔͕ᐆດͳঢ়ଶ ● ·ͣίϯϙʔωϯτʹ෼ׂ͍ͯ͘͠ͱ͜Ζ͔Β ○ ۩ମతʹͲ͏෼ׂΛਐΊ͔ͨʹ͍ͭͯ͸σβΠϯฤͰ

Slide 11

Slide 11 text

● σβΠϯ࣌఺Ͱ͋Δఔ౓ίϯϙʔωϯτ͸ҙࣝ͞Ε͍ͯΔ͸ͣ ○ վΊͯ෼ׂ͢Δͷ͸ೋ౓खؒͷΑ͏ʹݟ͑Δ ○ πʔϧͷదੑͷ໰୊ͩͬͨ ● ͔͜͜Β Figma Ҡߦ΁ͷைྲྀ͕Ͱ͖ͨ ○ ϓϩδΣΫτͷޙ൒ʹ͸ૣ଎׆༻͞Εͨ ○ ݁Ռͱͯ͠खؒΛݮΒͤͨ ■ ޮ཰্͕͕ͬͯαΫηε ίϯϙʔωϯτͱσβΠϯπʔϧ

Slide 12

Slide 12 text

։ൃͷྲྀΕ ● ౰ॳ͸ϖʔδ୯ҐͰλεΫΛ੾ͬͯਐΊΔྲྀΕ ○ ґଘؔ܎΋ݫີʹ͸ҙࣝ͞Εͣയવͱͨ͠ΠϝʔδͰ  ഑ஔ͞Ε͍ͯͨ ○ աڈͷϓϩδΣΫτͰ͸ͦΕͰԿͱ͔ͳͬͨͱ͍͏ܦҢ ● ਐΊΔʹͭΕͯ՝୊͕ݟ͖͑ͯͨͷͰ໰୊ఏىͨ͠ ○ Կ͕ෆຯ͍ͷ͔

Slide 13

Slide 13 text

λεΫ؅ཧ্ͷ໰୊఺ ● ࡞ۀ͕සൟʹিಥ͢Δ ○ ෳ਺ਓͰ࡞ۀ͢ΔҎ্ආ͚ΒΕͳ͍໰୊ ■ ಛʹࠓճ͸σβΠφʔͷਓ਺͕૿͑ͨͷ͕େ͖͍ ○ ಉ͡ίϯϙʔωϯτʹґଘ͢ΔϖʔδΛಉ࣌ʹ࡞ͬͯ͠·͏ͱ… ■ ಉ͡ίϯϙʔωϯτΛผʑʹ࡞ͬͯ͠·͏ ■ ͋Δ͍͸Ұํͷ࡞ۀʹϒϩοΫ͞Εͯ͠·͏ ● ݟੵ΋Γͷਫ਼౓͕௿͍ ○ ཻ౓͕ૈ͍΄ͲϒϨ͕େ͖͘ͳΔ ■ ࠓճ͸ָ؍తʹݟੵ΋ΒΕ͍ͯͨ͜ͱ͕ޙʹൃ֮͢Δ

Slide 14

Slide 14 text

ίϯϙʔωϯτͱλεΫ ● ίϯϙʔωϯτϕʔεͷ։ൃ ○ ίϯϙʔωϯτ୯ҐͰย෇͚͍ͯ͘ͷ͕ૉ௚ ● ίϯϙʔωϯτʹ͸ґଘؔ܎͕͋Δ ○ େ͖͍΋ͷ΄Ͳখ͍͞΋ͷͷدͤूΊʹͳΔ ■ খ͍͞΋ͷΛઌʹย෇͚Δඞཁ͕͋Δ ● ͍ͬͦίϯϙʔωϯτ୯ҐͰλεΫΛ੾ͬͯ؅ཧ͢Δ ○ ίϯϙʔωϯτͷґଘؔ܎ = λεΫͷґଘؔ܎ ○ িಥʹک͑ͳ͕Β࡞ۀ͢Δඞཁ͕ͳ͘ͳΔ

Slide 15

Slide 15 text

ίϯϙʔωϯτؒͷґଘؔ܎Λચ͍ग़͢ ● σβΠφʔɾΤϯδχΞͷ਺໊Ͱू·ͬͯਐΊͨ ● ྲྀΕ ○ ෼ׂͨ͠ίϯϙʔωϯτΛεϓϨουγʔτʹฒ΂Δ ○ ෼୲֤ͯ͠ίϯϙʔωϯτ͝ͱʹґଘΛྻڍ͢Δ ■ ͦͷίϯϙʔωϯτΛ࡞Δͷʹඞཁͳίϯϙʔωϯτ ○ ग़དྷͨεϓϨουγʔτΛՃ޻͢Δ ○ λεΫ؅ཧπʔϧͷΠϯϙʔτػೳͰλεΫԽ

Slide 16

Slide 16 text

ॊೈʹ΍ΓํΛม͑Δ ● ϓϩδΣΫτऴ൫͸ϖʔδ୯ҐͰλεΫ؅ཧ͢Δํ਑ʹ ○ جຊతͳ෦඼͕ἧͬͨঢ়ଶ ■ ϖʔδ୯ҐͰ࡞ۀͯ͠΋িಥ͢ΔՄೳੑ͕௿͘ͳͬͨ ○ ίϯϙʔωϯτ୯ҐͷλεΫ؅ཧ͸ͦΕͳΓʹࠎ͕ંΕΔ

Slide 17

Slide 17 text

ෆ҆Λܰݮ͢Δ ● ίϯϙʔωϯτ͹͔Γ࡞͍ͬͯΔͱ׬੒ܗ͕ݟ͑ͣෆ҆ʹͳΔ ○ ਐḿΛଌΔ্Ͱ෼͔Γ΍͍͢੒Ռ෺͸ϖʔδ ■ ϖʔδʹணख͢Δͷ͸ޙ൒ʹͳͬͯ͠·͏ ● ίϯϙʔωϯτ঺հίʔφʔ ○ िʹ 1 ճனձͷ࣌ؒΛ࢖ͬͯ Storybook ΛோΊΔ ○ id:takuwolog ͕࠷ۙग़དྷͨίϯϙʔωϯτΛ঺հ ● ޙ൒͸ϨϏϡʔձͱ͍͏ܗʹγϑτ ○ ि࣍Ͱ࣌ؒΛઃ͚ͯग़དྷͨϖʔδΛશһͰோΊΔ ■ ͜ͷ৔ͷϑΟʔυόοΫ͕վળʹܨ͕Δ͜ͱ΋

Slide 18

Slide 18 text

݁Ռ ● ࡞ۀͷিಥΛؾʹͤͣԁ׈ʹ։ൃ͕ਐΊΒΕͨ ○ Ұ੾িಥ͠ͳ͘ͳΔΘ͚Ͱ͸ͳ͍͕ۃΊͯك ● ౰ॳͷݟੵ΋Γָ͕؍తͩͬͨ͜ͱ͕໌Β͔ʹͳͬͨ ○ λεΫΛద౓ʹࡉ෼Խͯ͠ݟੵ΋Γͷਫ਼౓্͕͕ͬͨͨΊ ● λεΫཻ౓ΛͲ͏͢Δ͔͸ݕ౼ͷ༨஍͕͋Δ ○ ґଘؔ܎ʹԊͬͯਐΊͨ͜ͱࣗମ͸Α͔ͬͨ ○ 1 λεΫ = 1 ίϯϙʔωϯτ͸ࡉ͔͔͗ͨ͢΋͠Εͳ͍ ■ ࡞ۀऀ΍Ϛωʔδϟʔͷҙࣝ࣍ୈͰ͸͋Δ

Slide 19

Slide 19 text

ίϯϙʔωϯτΛ   Ұׅ࡞੒͢Δ

Slide 20

Slide 20 text

ίϯϙʔωϯτΛ࡞Δίετ ● ϑΝΠϧΛ༻ҙ͢Δ ○ ίϯϙʔωϯτຊମɾελΠϧγʔτ ○ ςετ΍ετʔϦʔ΋͋Δ ● ίʔυΛॻ͘ ○ ͦΕͳΓʹϘΠϥʔϓϨʔτ͕͋Δ

Slide 21

Slide 21 text

Ұׅ࡞੒ ● ίϯϙʔωϯτΛ࡞Γ࢝ΊΔ·ͰʹͦΕͳΓͷख͕͔͔ؒΔ ○ σβΠφʔʹ͸ඍົʹՙ͕ॏ͍ ● id:koudenpa ͷ௽ͷҰ੠ ○ ணख࣌ʹຖճϑΝΠϧ͔Β࡞Δͷ͸ඇޮ཰త ○ ࡞Δ΂͖ίϯϙʔωϯτ͸Ұ௨Γग़ἧ͍ͬͯΔ ■ ༧ΊԼ஍͚ͩ·ͱΊͯ࡞͓͚ͬͯ͹͍͍ͷͰ͸ ● Լ஍ = ϑΝΠϧ + ϘΠϥʔϓϨʔτ

Slide 22

Slide 22 text

Plop ● https://plopjs.com/ ● ίʔυੜ੒πʔϧ ● Handlebars ͱ Inquirer.js ͕ϕʔεʹͳ͍ͬͯΔ

Slide 23

Slide 23 text

Plop ʹΑΔίϯϙʔωϯτੜ੒ (४උ) ● ࣭໰Λ༻ҙ͢Δ ○ ίϯϙʔωϯτͷछྨ͸ʁ ○ ίϯϙʔωϯτͷ໊લ͸ʁ ● ςϯϓϨʔτΛ༻ҙ͢Δ

Slide 24

Slide 24 text

࣭໰Λ༻ҙ͢Δ

Slide 25

Slide 25 text

ςϯϓϨʔτΛ༻ҙ͢Δ

Slide 26

Slide 26 text

Plop ʹΑΔίϯϙʔωϯτੜ੒ (࣮ߦ) ● ΠϯλϥΫςΟϒͳ࣭໰ʹ౴͑Δ͚ͩ ○ ճ౴݁Ռͷσʔλ͕ςϯϓϨʔτͱ߹੒͞ΕΔ ○ ߹੒͞Εͨ݁ՌͷϑΝΠϧ͕ग़ྗ͞ΕΔ ■ ίϯϙʔωϯτͷࠎ૊Έͷग़དྷ্͕Γ ○ ίϚϯυϥΠϯҾ਺Ͱ΋౴͑ΒΕΔ ■ εΫϦϓτΛॻ͘ࡍʹศར

Slide 27

Slide 27 text

࣭໰ʹ౴͑Δ

Slide 28

Slide 28 text

ίʔυ͕ੜ੒͞ΕΔ

Slide 29

Slide 29 text

݁Ռ ● ܁Γฦ͠ͷख͕ؒল͚Δ ○ ਖ΋ੵ΋Ε͹ࢁͱͳΔ ● ࠶ݱՄೳͳܗͰ࢒͢͜ͱ͕Ͱ͖ͨ ○ ޙ͔Β৽نʹίϯϙʔωϯτΛ࡞Δࡍʹ΋࢖͑Δ ○ σβΠφʔʹ΋࢖͍΍͍͢ ● ίϯϙʔωϯτͱͯ͠ͷجຊతͳਫ४Λઃ͚Δ͜ͱ͕Ͱ͖ͨ ○ (඼࣭؍఺Ͱ΋͏·͘ػೳͨ͠ͱ͍͏࿩) ○ ਓʹΑͬͯ࡞Γํɾॻ͖ํʹϒϨ͕ੜ͡ΔͷΛ๷͙ ○ ςετ΍ετʔϦʔͷ࡞੒࿙ΕΛ๷͙

Slide 30

Slide 30 text

4UPSZCPPLΛ׆༻͢Δ

Slide 31

Slide 31 text

Storybook ● https://storybook.js.org/ ● UI ίϯϙʔωϯτͷͨΊͷ։ൃπʔϧ ○ (React ʹݶΒͣ Vue ΍ Angular ʹ΋ରԠ) ● ετʔϦʔͱ͍͏୯ҐͰ؅ཧ ○ ͋Δίϯϙʔωϯτͷಛఆͷঢ়ଶΛදݱ͢Δ΋ͷ ○ 1 ͭͷίϯϙʔωϯτʹରͯ͠ෳ਺ଘࡏ͠͏Δ ● ίϯϙʔωϯτϥΠϒϥϦͱͯ͠ͷػೳ ○ ΧλϩάͷΑ͏ͳ΋ͷ

Slide 32

Slide 32 text

Storybook

Slide 33

Slide 33 text

Storybook ͷࣗಈσϓϩΠ ● id:koudenpa ʹಋೖͯ͠΋Βͬͨ΋ͷ ○ https://koudenpa.hatenablog.com/entry/2021/09/15/005719 ● PR ΍σϑΥϧτϒϥϯνͷ಺༰ΛσϓϩΠ ○ Azure Static Web Apps ○ खݩͰϒϥϯνΛ੾Γସ͑ͨΓ Storybook Λىಈ͠ͳͯ͘ ΋ݟͨ໨Λ֬ೝ͠ʹߦ͚ΔΑ͏ʹ

Slide 34

Slide 34 text

݁Ռ ● σβΠϯίʔσΟϯάͷෛՙΛԼ͛Δ͜ͱ͕Ͱ͖ͨ ○ ཁ͕݅ෳࡶ → UI ͷऔΓ͏Δঢ়ଶ΋ෳࡶ ■ ݸʑͷঢ়ଶʹ͍ͭͯݟͨ໨Λ֬ೝ͢Δͷ͕େม ○ ίϯτϩʔϧ౳Λۦ࢖ͯ͠ૉૣ͘ࢼߦࡨޡͰ͖ΔΑ͏ʹ ● σβΠϯϨϏϡʔͷෛՙΛԼ͛Δ͜ͱ͕Ͱ͖ͨ ○ ෳࡶͳ࠶ݱखॱΛ౿Ή͜ͱͳ͘ݟͨ໨͕֬ೝͰ͖ΔΑ͏ʹ

Slide 35

Slide 35 text

ܧଓతʹ඼࣭Λҙࣝ͢Δ

Slide 36

Slide 36 text

඼࣭ͷॏཁੑ ● ओͳ 2 ͭͷࢹ఺ΛऔΓ্͛Δ ● Ϣʔβʔࢹ఺ ○ Ϣʔβʔ͕৮ΕΔɾ໨ʹݟ͑Δൣғͷ඼࣭ ○ Ϣʔβʔମݧ (UX) ʹ௚݁͢Δ ● ։ൃऀࢹ఺ ○ ίʔυϕʔε΍ٕज़ཁૉʹ܎Δ඼࣭ ○ ։ൃऀମݧ (DX) ʹ௚݁͢Δ

Slide 37

Slide 37 text

Ϣʔβʔࢹ఺ͷ඼࣭ vs ։ൃऀࢹ఺ͷ඼࣭ ● ୯ʹʮ඼࣭ʯͱ͍͏ͱલऀʹҙ͕ࣝ޲͖͕͕ͪͩ݁ہͲͬͪ΋େࣄ ● ೋऀ୒ҰͰ͸ͳ͍ ● Ή͠ΖҰൠʹ͸ਖ਼ͷ૬͕ؔ͋Δ͸ͣ ○ ۩ମతͳσʔλΛग़ͤͱݴΘΕΔͱ͍͕ۤࣗ͠໌ͳ࿩Ͱ͸͋Δ ■ ௿඼࣭ → όάͷԹচʹͳ͍ͬͯΔΑ͏ͳίʔυϕʔε͔Β  ߴ඼࣭ͳ੒Ռ෺͕ੜ·ΕΔΘ͚͕ͳ͍ ○ ։ൃऀମݧ͚ͩΛॏࢹͯ͠Ϣʔβʔࢹ఺ͷ඼࣭Λ㚽Ζʹ  ͍ͯͨ͠Β࿩͸ผ (࿦֎) ● ࠓճ͸։ൃऀࢹ఺دΓͷ࿩ʹͳΔ

Slide 38

Slide 38 text

ະདྷ΁ͷ౤ࢿͰ͋Δͱ͍͏ೝࣝ ● ͳͥ React ҠߦΛ΍Δͷ͔ ○ ੜ࢈ੑΛߴΊΔͨΊͷະདྷ΁ͷ౤ࢿ ● ͳͥੜ࢈ੑ͕௿͔ͬͨͷ͔ ○ େ͖ͳٕज़తෛ࠴Λ๊͍͔͑ͯͨΒ ■ ಛʹٕज़ཁૉ͕ݹͼ͍͔ͯͨΒ ● Ҡߦͨ͠ͱ͜ΖͰ·ͨେ͖ͳෛ࠴Λ๊͑ͯ͠·ͬͯ͸ݩ΋ࢠ΋ͳ͍ ○ Ҡߦ͸ΰʔϧͰ͸ͳ͍ʂ

Slide 39

Slide 39 text

ෛ࠴Λ͜·Ίʹฦ͢ ● ීஈ͔Β૟আ͍ͯ͠Ε͹៉ྷͳঢ়ଶ͸อͨΕΔ͕… ○ ਖ΋ੵ΋Ε͹ࢁͱͳΔ (࠶) ○ ࢁΛย෇͚Δͷ͸૬౰ͳؾ߹͍ɾ࿑ྗɾ͕࣌ؒඞཁ ● ਖ͔Β໨Λഎ͚͟ΔΛಘͳ͍ঢ়ଶ͕ଓ͚͹ͦͷ͏ͪࢁ͕Ͱ͖Δ ○ ࣍ୈʹࢁʹຒ΋Εͯ։ൃɾӡ༻Λଓ͚ΔӋ໨ʹͳΔ ■ ͔ͤͬ͘ےͷ͍͍ٕज़ελοΫʹҠߦͨ͠ͱͯແବࠎ

Slide 40

Slide 40 text

ׂΕ૭ཧ࿦ Ҿ༻ݩ: ׂΕ૭ཧ࿦ - Wikipedia ● ࣏͕҆ѱԽ͢Δ·Ͱʹ͸࣍ͷΑ͏ͳܦաΛͨͲΔɻ 1. ݐ෺ͷ૭͕յΕ͍ͯΔͷΛ์ஔ͢ΔͱɺͦΕ͕ʮ୭΋౰֘஍Ҭʹର͠ ؔ৺Λ෷͍ͬͯͳ͍ʯͱ͍͏αΠϯͱͳΓɺ൜ࡑΛى͜͠΍͍͢؀ڥ Λ࡞Γग़͢ɻ 2. ΰϛͷϙΠࣺͯͳͲͷܰ൜ࡑ͕ى͖ΔΑ͏ʹͳΔɻ 3. ॅຽͷϞϥϧ͕௿Լͯ͠ɺ஍Ҭͷৼڵɺ҆શ֬อʹڠྗ͠ͳ͘ͳΔɻ ͦΕ͕͞Βʹ؀ڥΛѱԽͤ͞Δɻ 4. ڟѱ൜ࡑΛؚΊͨ൜ࡑ͕ଟൃ͢ΔΑ͏ʹͳΔɻ

Slide 41

Slide 41 text

ׂΕ૭ཧ࿦ͱٕज़తෛ࠴ ● ॅຽͷϞϥϧ = ඼࣭΁ͷҙ͕ࣝ௿͘ͳΔ ○ ʮଞ΋͜Μͳײ͔ͩ͡ΒखΛൈ͍͍͍ͯͩΖ͏…ʯ ○ ੵۃతʹ඼࣭Λվળ͠ͳ͘ͳΓѱԽͷҰ్ΛḷΔ ● ཁ͸͜·Ίʹෛ࠴Λฦ͠·͠ΐ͏ͱ͍͏࿩ ○ ෛ࠴Λฦ͠΍͍͢ → ඼࣭ͷߴ͍ঢ়ଶΛҡ࣋͢Δͷ͕ॏཁ

Slide 42

Slide 42 text

Ͳ͏޻෉͔ͨ͠ ● ίϯϙʔωϯτͷཻ౓ ● Storybook ͷ VRT

Slide 43

Slide 43 text

ίϯϙʔωϯτͷཻ౓

Slide 44

Slide 44 text

ίϯϙʔωϯτͷཻ౓ ● աڈͷϓϩδΣΫτͰ͏·͍͔͘ͳ͔ͬͨϙΠϯτ ● શମతʹίϯϙʔωϯτ͕ංେԽ͍ͯ͠Δ ○ 1 ίϯϙʔωϯτ͋ͨΓͷߦ਺͕௕͍ ○ ڽू౓͕௿͍ ■ อकੑɾՄಡੑ͕௿͘ͳΔ

Slide 45

Slide 45 text

Ͳ͏ͯ͜͠͏ͳͬͨ ● ୯ʹཻ౓Λҙࣝ͢Δ༨༟͕ܽ೗͍ͯͨ͠ ○ ༨༟Λ࡞Γ·͠ΐ͏ͱ͍͏࿩ʹ໭Δ ● ʮίϯϙʔωϯτΛ੾ͬͨͱ͜ΖͰଞͷͱ͜ΖͰ࢖͏Θ͚Ͱ΋ ͳ͍ͷͰ੾Δඞཁ͸ͳ͍ͩΖ͏ʯͱ͍͏ҙࣝ ○ ͜Εʹ͍ͭͯ͸ੋਖ਼͢Δඞཁ͕͋Δ

Slide 46

Slide 46 text

ந৅Խͷҙٛ ● ந৅Խ͸࠶ར༻͚͕ͩ໨తͰ͸ͳ͍ ○ ঢ়ଶ؅ཧͳͲͷ੹຿ΛવΔ΂͖ൣғʹด͡ࠐΊΔҙٛ΋େ͍ʹ͋Δ ■ ؔ৺ͷ෼཭ (SoC) ● ίʔυ͸ංେԽ͢Δํ޲ʹ͔͠੒௕͠ͳ͍ ○ ཻ౓͸ૈ͗͢ΔΑΓ͸ࡉ͔͗͢Δํ͕Ϛγ ■ ࡉ͔͗ͨ͢৔߹͸ޙ͔Β݁߹͢Ε͹͍͍ ■ ૈ͗ͨ͢৔߹ʹޙ͔Β෼ׂ͢Δͷ͸େม ○ ෼ׂ͢ΔΑΓ΋݁߹͢Δํ͕؆୯ ■ ҟ࿦͸͋Δ͔΋͠Εͳ͍͕ͦ͏࣮ײ͍ͯ͠Δ

Slide 47

Slide 47 text

ཻ౓ͷײ֮ ● ͋·Γʹࡉ͔͘੾Γ͗͢Δͱݟ௨͕͠ѱ͘ͳΔͷ͸ࣄ࣮ ○ ͜Ε͹͔Γ͸ײ֮Λҭͯ·͠ΐ͏ͱ͔͠ݴ͍Α͏͕ͳ͍ ■ ίʔυϨϏϡʔ, ϖΞϓϩ, etc. ■ ݱࡏਐߦதͷऔΓ૊Έ ● Every Layout ಡॻձ ● ΑΓ޿͘ʮίϯϙʔωϯτͷײ֮ʯΛ͔֬ͳ΋ͷʹ ͢ΔͨΊ

Slide 48

Slide 48 text

4UPSZCPPLͷ735

Slide 49

Slide 49 text

VRT ● Visual Regression Testing ● ݟͨ໨ʹ͍ͭͯͷճؼςετ ○ UI ʹҙਤ͠ͳ͍มߋ͕ՃΘΔ (όά͕ࠞೖ͢Δ) ͷΛ๷͙ ● มߋΛՃ͑ΔલͱޙͷεφοϓγϣοτΛൺֱ͢Δ ○ ࠩ෼͕͋Ε͹ࣦഊ ■ ҙਤͨࠩ͠෼Ͱ͋Ε͹໰୊ͳ͍

Slide 50

Slide 50 text

VRT ͷҙٛ ● ϢʔβʔʹյΕͨ΋ͷΛఏڙͯ͠͠·͏֬཰ΛԼ͛Δ ○ Ϣʔβʔࢹ఺ͷ඼࣭ ● ࣗ৴Λ࣋ͬͯϦϑΝΫλϦϯάͰ͖ΔΑ͏ʹͳΔ ○ վमʹΑͬͯݟͨ໨͕յΕΔෆ҆Λܰݮ͢Δ ○ ։ൃऀࢹ఺ͷ඼࣭

Slide 51

Slide 51 text

ϖʔδ୯Ґͷ VRT ● Ұൠʹ VRT ͱ͍͏ͱϖʔδ୯Ґͷ΋ͷ͕ओྲྀ͔ͱࢥΘΕΔ ● ͋Δఔ౓࢓্͕ͬͨঢ়ଶͰͳ͍ͱ͋·Γҙຯ͕ͳ͍ ○ ։ൃத͸ৗʹյΕ͍ͯΔΑ͏ͳ΋ͷ ● γφϦΦΛॻ͘ͷ͕େม ○ ࡉ͔͍෦඼ͷݟͨ໨Λపఈతʹ͔֬Ί͍ͨ৔߹͸ಛʹ

Slide 52

Slide 52 text

Storybook ͷ VRT ● https://storybook.js.org/docs/react/writing-tests/visual-testing ● Storybook ͷετʔϦʔΛର৅ʹ VRT Λߦ͏࢓૊Έ ○ ৭ʑ͋Δ ● ݸʑͷঢ়ଶʹ͍ͭͯͷݟͨ໨Λςετ͠΍͍͢ ○ ঢ়ଶʹରԠ͢ΔετʔϦʔ͑͞༻ҙ͓͚ͯ͠͹͍͍ͷͰָ ● Storybook ࣗମ͸ओʹޮ཰ԽΛ໨తʹಋೖ͍ͯͨ͠ ○ ͜͜·Ͱ஝͖͑ͯͨࢿ࢈Λͦͷ··׆༻Ͱ͖Δͷ͸ڧ͍

Slide 53

Slide 53 text

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 ͕࣮ݱՄೳ

Slide 54

Slide 54 text

ͳͥ reg-suit + Storycap ͳͷ͔ ● ੈͷதʹ͸ SaaS ιϦϡʔγϣϯ΋͋Δ ○ εφοϓγϣοτ୯Ґͷैྔ՝੍ۚͷ΋ͷ͕ଟ͍… ■ ࢼࢉͨ͠ͱ͜Ζ·͋·͋ͷֹۚʹ ● ൺֱతࣗ༝ʹ࢖͑ΔΠϯϑϥ͕͋Δ ○ ඞཁͳϦιʔε͸ Terraform Ͱखܰʹ࡞੒Ͱ͖Δঢ়ଶ ■ S3 Bucket ͱ IAM Role Λੜ΍͚ͩ͢ ● (ޙऀ͸ GitHub Actions ͔Βͷ AssumeRole ༻) ○ ίετʹ͍ͭͯ΋͋Δఔ౓༥௨͕ޮ͘

Slide 55

Slide 55 text

ྫ

Slide 56

Slide 56 text

ྫ: Ϩϙʔτ

Slide 57

Slide 57 text

ྫ: GitHub ͷίϝϯτʹΑΔ݁Ռ௨஌

Slide 58

Slide 58 text

ࠓޙͷ՝୊ ● Storybook ͷ VRT Ͱ͸࠷ऴతͳݟͨ໨͸ςετͰ͖ͳ͍ ○ ࣮ࡍʹϢʔβʔ͕໨ʹ͢Δݟͨ໨ ○ ίϯϙʔωϯτʹดͨ͡ελΠϦϯάΛҙࣝͯ͠͸͍Δ͕  ׬ᘳ͔ͱ͍͏ͱ… ○ ࠷ऴతͳݟͨ໨͕อূ͞Ε͍ͯΕ͹ΑΓࣗ৴Λ࣋ͬͯվमͰ͖Δ ■ ։ൃ͕མͪண͍ͨϖʔδʹ͍ͭͯ͸ϖʔδ୯Ґͷ  VRT ͷಋೖΛݕ౼

Slide 59

Slide 59 text

·ͱΊ ● ະདྷ΁ͷ౤ࢿͱͯ͠ͷ React Ҡߦ ● ͳͥ౤ࢿΛߦͬͨͷ͔ ○ ٕज़తෛ࠴Λฦ٫ͯ͠ޮ཰తʹ։ൃ͕ߦ͑Δ؀ڥΛ੔͑Δ ■ ͜ͷঢ়ଶΛҡ࣋Ͱ͖ΔΑ͏ʹ ○ ͳʹΑΓ΋ڀۃతʹ͸ྑ͍΋ͷΛܧଓతʹϢʔβʔʹ  ఏڙ͢Δ஍൫ΛݻΊΔͨΊ ● ͻͱ·ͣઅ໨Λܴ͑·͕ͨ͠Ҿ͖ଓ͖ؤுΓ·͢