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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. ޮ཰తɾ҆ఆతʹਐΊΔ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. ίϯϙʔωϯτΛ෼ׂͯ͠
   

   ґଘؔ܎Λચ͍ग़͢
   

   View Slide

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

    View Slide

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

    View Slide

12. ։ൃͷྲྀΕ
    ● ౰ॳ͸ϖʔδ୯ҐͰλεΫΛ੾ͬͯਐΊΔྲྀΕ
    ○ ґଘؔ܎΋ݫີʹ͸ҙࣝ͞Εͣയવͱͨ͠ΠϝʔδͰ

    ഑ஔ͞Ε͍ͯͨ
    ○ աڈͷϓϩδΣΫτͰ͸ͦΕͰԿͱ͔ͳͬͨͱ͍͏ܦҢ
    ● ਐΊΔʹͭΕͯ՝୊͕ݟ͖͑ͯͨͷͰ໰୊ఏىͨ͠
    ○ Կ͕ෆຯ͍ͷ͔
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. ίϯϙʔωϯτΛ
    

    Ұׅ࡞੒͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. ࣭໰Λ༻ҙ͢Δ
    

    View Slide

25. ςϯϓϨʔτΛ༻ҙ͢Δ
    

    View Slide

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

    View Slide

27. ࣭໰ʹ౴͑Δ
    

    View Slide

28. ίʔυ͕ੜ੒͞ΕΔ
    

    View Slide

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

    View Slide

30. 4UPSZCPPLΛ׆༻͢Δ
    

    View Slide

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

    View Slide

32. Storybook
    

    View Slide

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

    View Slide

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

    View Slide

35. ܧଓతʹ඼࣭Λҙࣝ͢Δ
    

    View Slide

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

    View Slide

37. Ϣʔβʔࢹ఺ͷ඼࣭ vs ։ൃऀࢹ఺ͷ඼࣭
    ● ୯ʹʮ඼࣭ʯͱ͍͏ͱલऀʹҙ͕ࣝ޲͖͕͕ͪͩ݁ہͲͬͪ΋େࣄ
    ● ೋऀ୒ҰͰ͸ͳ͍
    ● Ή͠ΖҰൠʹ͸ਖ਼ͷ૬͕ؔ͋Δ͸ͣ
    ○ ۩ମతͳσʔλΛग़ͤͱݴΘΕΔͱ͍͕ۤࣗ͠໌ͳ࿩Ͱ͸͋Δ
    ■ ௿඼࣭ → όάͷԹচʹͳ͍ͬͯΔΑ͏ͳίʔυϕʔε͔Β

    ߴ඼࣭ͳ੒Ռ෺͕ੜ·ΕΔΘ͚͕ͳ͍
    ○ ։ൃऀମݧ͚ͩΛॏࢹͯ͠Ϣʔβʔࢹ఺ͷ඼࣭Λ㚽Ζʹ

    ͍ͯͨ͠Β࿩͸ผ (࿦֎)
    ● ࠓճ͸։ൃऀࢹ఺دΓͷ࿩ʹͳΔ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. ίϯϙʔωϯτͷཻ౓
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. 4UPSZCPPLͷ735
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. ྫ
    

    View Slide

56. ྫ: Ϩϙʔτ
    

    View Slide

57. ྫ: GitHub ͷίϝϯτʹΑΔ݁Ռ௨஌
    

    View Slide

58. ࠓޙͷ՝୊
    ● Storybook ͷ VRT Ͱ͸࠷ऴతͳݟͨ໨͸ςετͰ͖ͳ͍
    ○ ࣮ࡍʹϢʔβʔ͕໨ʹ͢Δݟͨ໨
    ○ ίϯϙʔωϯτʹดͨ͡ελΠϦϯάΛҙࣝͯ͠͸͍Δ͕

    ׬ᘳ͔ͱ͍͏ͱ…
    ○ ࠷ऴతͳݟͨ໨͕อূ͞Ε͍ͯΕ͹ΑΓࣗ৴Λ࣋ͬͯվमͰ͖Δ
    ■ ։ൃ͕མͪண͍ͨϖʔδʹ͍ͭͯ͸ϖʔδ୯Ґͷ

    VRT ͷಋೖΛݕ౼
    

    View Slide

59. ·ͱΊ
    ● ະདྷ΁ͷ౤ࢿͱͯ͠ͷ React Ҡߦ
    ● ͳͥ౤ࢿΛߦͬͨͷ͔
    ○ ٕज़తෛ࠴Λฦ٫ͯ͠ޮ཰తʹ։ൃ͕ߦ͑Δ؀ڥΛ੔͑Δ
    ■ ͜ͷঢ়ଶΛҡ࣋Ͱ͖ΔΑ͏ʹ
    ○ ͳʹΑΓ΋ڀۃతʹ͸ྑ͍΋ͷΛܧଓతʹϢʔβʔʹ

    ఏڙ͢Δ஍൫ΛݻΊΔͨΊ
    ● ͻͱ·ͣઅ໨Λܴ͑·͕ͨ͠Ҿ͖ଓ͖ؤுΓ·͢
    

    View Slide