Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

mfzy
March 30, 2022

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

mfzy

March 30, 2022
Tweet

More Decks by mfzy

Other Decks in Programming

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