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

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

Avatar for mfzy mfzy
March 30, 2022

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

Avatar for mfzy

mfzy

March 30, 2022
Tweet

More Decks by mfzy

Other Decks in Programming

Transcript

  1. ͸͡Ίʹ • ϓϩτλΠϓޙͷ࣮ફͷ࿩Λ͠·͢ ◦ ࣮ࡍʹͲ͏΍ͬͯ React ҠߦΛਐΊ͔ͨ ◦ ͦͷࡍʹԿΛߟ͑ͯͲ͏޻෉͔ͨ͠ ◦

    ϑϩϯτΤϯυʹয఺Λ౰͍ͯͯ·͢ • ٕज़ΑΓ͸ख๏ɾ޻෉ʹدͬͨ࿩ʹͳΓ·͢ ◦ ݸʑͷٕज़ཁૉʹ͍ͭͯਂ͘͸৮Ε·ͤΜ • (ࢀߟ) ϑϩϯτΤϯυͷओཁͳٕज़ཁૉ ◦ Next.js (React) ◦ GraphQL
  2. ͳͥޮ཰తɾ҆ఆతʹਐΊΔඞཁ͕͋Δͷ͔ • ظݶʹؒʹ߹ΘͤΔ ◦ ΋ͬͱݴ͑͹ແཧͤͣʹؒʹ߹ΘͤΒΕΔͱخ͍͠ ▪ ա౓ͳ࢒ۀ΍ٳ೔ग़ۈΛආ͚ΒΕΔΑ͏ʹ • ෆ҆ɾϦεΫΛܰݮ͢Δ ◦

    ޮ཰͕ѱ͚Ε͹ͦΕ͚ͩͰετϨε ◦ ҆ఆͯ͠੒ՌΛڍ͛ΒΕͳ͚Ε͹Ϟνϕʔγϣϯͷ௿Լʹܨ͕Δ • ୯ʹ࡞ۀΛ͜ͳ͢Ҏ্ͷ༨༟Λ࡞Δ ◦ εέδϡʔϧɾਫ਼ਆ্ͷ༨༟ ◦ ͜͜Λ۷ΓԼ͛Δ
  3. ༨༟Λ࡞Δͱ͍͏͜ͱ • ༨༟͕ͳ͘ͳΔͱେ఍͸ਅͬઌʹ඼࣭͕٘ਜ਼ʹͳΔ ◦ (୅ΘΓʹείʔϓΛ٘ਜ਼ʹͰ͖ΔͳΒͦͷํ͕๬·͍͠) ◦ Ͱ͸ͳͥ඼࣭͕ॏཁͳͷ͔…͸ޙड़ • ༧ΊόοϑΝ (≒

    εέδϡʔϧ্ͷ༨༟) Λઃ͚͓ͯ͘ͷ͸େલఏ ◦ ԟʑʹͯ͠ཁ݅௥Ճɾมߋ΁ͷରԠ΍όάमਖ਼ʹ௥ΘΕΔ͜ͱʹͳΔ ▪ ͜ΕΒʹׂ͘޻਺Λ༧ΊόοϑΝͱͯ͠ݟੵ΋͓ͬͯ͘ • ͜ΕͰΑ͏΍͘ʮͳΜͱ͔ؒʹ߹ΘͤΒΕΔʯঢ়ଶ ◦ ͔͜͜ΒͲ͏ʹ͔ͯ͠඼࣭ʹҙࣝΛ޲͚Δ༨༟Λ೧ग़͢Δඞཁ͕͋Δ ▪ ޮ཰తɾ҆ఆతʹਐΊͯ༨༟Λ࡞Δ΄͔ͳ͍
  4. ίϯϙʔωϯτ෼ׂ • ίϯϙʔωϯτΛ૊Έ߹ΘͤͯϖʔδΛܗ࡞Δ ◦ (ϖʔδࣗମ΋ίϯϙʔωϯτ) ◦ ύʔπͱͳΔίϯϙʔωϯτ͕ͳ͍͜ͱʹ͸࢝·Βͳ͍ • σβΠϯϞοΫ͸ϖʔδ୯ҐͰ࡞ΒΕ͍ͯͨ ◦

    ͔ͭίϯϙʔωϯτͰදݱ͞Ε͍ͯͳ͔ͬͨ ▪ ۩ମతʹԿΛ࡞Δͷ͔͕ᐆດͳঢ়ଶ • ·ͣίϯϙʔωϯτʹ෼ׂ͍ͯ͘͠ͱ͜Ζ͔Β ◦ ۩ମతʹͲ͏෼ׂΛਐΊ͔ͨʹ͍ͭͯ͸σβΠϯฤͰ
  5. • σβΠϯ࣌఺Ͱ͋Δఔ౓ίϯϙʔωϯτ͸ҙࣝ͞Ε͍ͯΔ͸ͣ ◦ վΊͯ෼ׂ͢Δͷ͸ೋ౓खؒͷΑ͏ʹݟ͑Δ ◦ πʔϧͷదੑͷ໰୊ͩͬͨ • ͔͜͜Β Figma Ҡߦ΁ͷைྲྀ͕Ͱ͖ͨ

    ◦ ϓϩδΣΫτͷޙ൒ʹ͸ૣ଎׆༻͞Εͨ ◦ ݁Ռͱͯ͠खؒΛݮΒͤͨ ▪ ޮ཰্͕͕ͬͯαΫηε ίϯϙʔωϯτͱσβΠϯπʔϧ
  6. λεΫ؅ཧ্ͷ໰୊఺ • ࡞ۀ͕සൟʹিಥ͢Δ ◦ ෳ਺ਓͰ࡞ۀ͢ΔҎ্ආ͚ΒΕͳ͍໰୊ ▪ ಛʹࠓճ͸σβΠφʔͷਓ਺͕૿͑ͨͷ͕େ͖͍ ◦ ಉ͡ίϯϙʔωϯτʹґଘ͢ΔϖʔδΛಉ࣌ʹ࡞ͬͯ͠·͏ͱ… ▪

    ಉ͡ίϯϙʔωϯτΛผʑʹ࡞ͬͯ͠·͏ ▪ ͋Δ͍͸Ұํͷ࡞ۀʹϒϩοΫ͞Εͯ͠·͏ • ݟੵ΋Γͷਫ਼౓͕௿͍ ◦ ཻ౓͕ૈ͍΄ͲϒϨ͕େ͖͘ͳΔ ▪ ࠓճ͸ָ؍తʹݟੵ΋ΒΕ͍ͯͨ͜ͱ͕ޙʹൃ֮͢Δ
  7. ίϯϙʔωϯτͱλεΫ • ίϯϙʔωϯτϕʔεͷ։ൃ ◦ ίϯϙʔωϯτ୯ҐͰย෇͚͍ͯ͘ͷ͕ૉ௚ • ίϯϙʔωϯτʹ͸ґଘؔ܎͕͋Δ ◦ େ͖͍΋ͷ΄Ͳখ͍͞΋ͷͷدͤूΊʹͳΔ ▪

    খ͍͞΋ͷΛઌʹย෇͚Δඞཁ͕͋Δ • ͍ͬͦίϯϙʔωϯτ୯ҐͰλεΫΛ੾ͬͯ؅ཧ͢Δ ◦ ίϯϙʔωϯτͷґଘؔ܎ = λεΫͷґଘؔ܎ ◦ িಥʹک͑ͳ͕Β࡞ۀ͢Δඞཁ͕ͳ͘ͳΔ
  8. ෆ҆Λܰݮ͢Δ • ίϯϙʔωϯτ͹͔Γ࡞͍ͬͯΔͱ׬੒ܗ͕ݟ͑ͣෆ҆ʹͳΔ ◦ ਐḿΛଌΔ্Ͱ෼͔Γ΍͍͢੒Ռ෺͸ϖʔδ ▪ ϖʔδʹணख͢Δͷ͸ޙ൒ʹͳͬͯ͠·͏ • ίϯϙʔωϯτ঺հίʔφʔ ◦

    िʹ 1 ճனձͷ࣌ؒΛ࢖ͬͯ Storybook ΛோΊΔ ◦ id:takuwolog ͕࠷ۙग़དྷͨίϯϙʔωϯτΛ঺հ • ޙ൒͸ϨϏϡʔձͱ͍͏ܗʹγϑτ ◦ ि࣍Ͱ࣌ؒΛઃ͚ͯग़དྷͨϖʔδΛશһͰோΊΔ ▪ ͜ͷ৔ͷϑΟʔυόοΫ͕վળʹܨ͕Δ͜ͱ΋
  9. ݁Ռ • ࡞ۀͷিಥΛؾʹͤͣԁ׈ʹ։ൃ͕ਐΊΒΕͨ ◦ Ұ੾িಥ͠ͳ͘ͳΔΘ͚Ͱ͸ͳ͍͕ۃΊͯك • ౰ॳͷݟੵ΋Γָ͕؍తͩͬͨ͜ͱ͕໌Β͔ʹͳͬͨ ◦ λεΫΛద౓ʹࡉ෼Խͯ͠ݟੵ΋Γͷਫ਼౓্͕͕ͬͨͨΊ •

    λεΫཻ౓ΛͲ͏͢Δ͔͸ݕ౼ͷ༨஍͕͋Δ ◦ ґଘؔ܎ʹԊͬͯਐΊͨ͜ͱࣗମ͸Α͔ͬͨ ◦ 1 λεΫ = 1 ίϯϙʔωϯτ͸ࡉ͔͔͗ͨ͢΋͠Εͳ͍ ▪ ࡞ۀऀ΍Ϛωʔδϟʔͷҙࣝ࣍ୈͰ͸͋Δ
  10. Ұׅ࡞੒ • ίϯϙʔωϯτΛ࡞Γ࢝ΊΔ·ͰʹͦΕͳΓͷख͕͔͔ؒΔ ◦ σβΠφʔʹ͸ඍົʹՙ͕ॏ͍ • id:koudenpa ͷ௽ͷҰ੠ ◦ ணख࣌ʹຖճϑΝΠϧ͔Β࡞Δͷ͸ඇޮ཰త

    ◦ ࡞Δ΂͖ίϯϙʔωϯτ͸Ұ௨Γग़ἧ͍ͬͯΔ ▪ ༧ΊԼ஍͚ͩ·ͱΊͯ࡞͓͚ͬͯ͹͍͍ͷͰ͸ • Լ஍ = ϑΝΠϧ + ϘΠϥʔϓϨʔτ
  11. ݁Ռ • ܁Γฦ͠ͷख͕ؒল͚Δ ◦ ਖ΋ੵ΋Ε͹ࢁͱͳΔ • ࠶ݱՄೳͳܗͰ࢒͢͜ͱ͕Ͱ͖ͨ ◦ ޙ͔Β৽نʹίϯϙʔωϯτΛ࡞Δࡍʹ΋࢖͑Δ ◦

    σβΠφʔʹ΋࢖͍΍͍͢ • ίϯϙʔωϯτͱͯ͠ͷجຊతͳਫ४Λઃ͚Δ͜ͱ͕Ͱ͖ͨ ◦ (඼࣭؍఺Ͱ΋͏·͘ػೳͨ͠ͱ͍͏࿩) ◦ ਓʹΑͬͯ࡞Γํɾॻ͖ํʹϒϨ͕ੜ͡ΔͷΛ๷͙ ◦ ςετ΍ετʔϦʔͷ࡞੒࿙ΕΛ๷͙
  12. Storybook • https://storybook.js.org/ • UI ίϯϙʔωϯτͷͨΊͷ։ൃπʔϧ ◦ (React ʹݶΒͣ Vue

    ΍ Angular ʹ΋ରԠ) • ετʔϦʔͱ͍͏୯ҐͰ؅ཧ ◦ ͋Δίϯϙʔωϯτͷಛఆͷঢ়ଶΛදݱ͢Δ΋ͷ ◦ 1 ͭͷίϯϙʔωϯτʹରͯ͠ෳ਺ଘࡏ͠͏Δ • ίϯϙʔωϯτϥΠϒϥϦͱͯ͠ͷػೳ ◦ ΧλϩάͷΑ͏ͳ΋ͷ
  13. Storybook ͷࣗಈσϓϩΠ • id:koudenpa ʹಋೖͯ͠΋Βͬͨ΋ͷ ◦ https://koudenpa.hatenablog.com/entry/2021/09/15/005719 • PR ΍σϑΥϧτϒϥϯνͷ಺༰ΛσϓϩΠ

    ◦ Azure Static Web Apps ◦ खݩͰϒϥϯνΛ੾Γସ͑ͨΓ Storybook Λىಈ͠ͳͯ͘ ΋ݟͨ໨Λ֬ೝ͠ʹߦ͚ΔΑ͏ʹ
  14. ݁Ռ • σβΠϯίʔσΟϯάͷෛՙΛԼ͛Δ͜ͱ͕Ͱ͖ͨ ◦ ཁ͕݅ෳࡶ → UI ͷऔΓ͏Δঢ়ଶ΋ෳࡶ ▪ ݸʑͷঢ়ଶʹ͍ͭͯݟͨ໨Λ֬ೝ͢Δͷ͕େม

    ◦ ίϯτϩʔϧ౳Λۦ࢖ͯ͠ૉૣ͘ࢼߦࡨޡͰ͖ΔΑ͏ʹ • σβΠϯϨϏϡʔͷෛՙΛԼ͛Δ͜ͱ͕Ͱ͖ͨ ◦ ෳࡶͳ࠶ݱखॱΛ౿Ή͜ͱͳ͘ݟͨ໨͕֬ೝͰ͖ΔΑ͏ʹ
  15. ඼࣭ͷॏཁੑ • ओͳ 2 ͭͷࢹ఺ΛऔΓ্͛Δ • Ϣʔβʔࢹ఺ ◦ Ϣʔβʔ͕৮ΕΔɾ໨ʹݟ͑Δൣғͷ඼࣭ ◦

    Ϣʔβʔମݧ (UX) ʹ௚݁͢Δ • ։ൃऀࢹ఺ ◦ ίʔυϕʔε΍ٕज़ཁૉʹ܎Δ඼࣭ ◦ ։ൃऀମݧ (DX) ʹ௚݁͢Δ
  16. Ϣʔβʔࢹ఺ͷ඼࣭ vs ։ൃऀࢹ఺ͷ඼࣭ • ୯ʹʮ඼࣭ʯͱ͍͏ͱલऀʹҙ͕ࣝ޲͖͕͕ͪͩ݁ہͲͬͪ΋େࣄ • ೋऀ୒ҰͰ͸ͳ͍ • Ή͠ΖҰൠʹ͸ਖ਼ͷ૬͕ؔ͋Δ͸ͣ ◦

    ۩ମతͳσʔλΛग़ͤͱݴΘΕΔͱ͍͕ۤࣗ͠໌ͳ࿩Ͱ͸͋Δ ▪ ௿඼࣭ → όάͷԹচʹͳ͍ͬͯΔΑ͏ͳίʔυϕʔε͔Β
 ߴ඼࣭ͳ੒Ռ෺͕ੜ·ΕΔΘ͚͕ͳ͍ ◦ ։ൃऀମݧ͚ͩΛॏࢹͯ͠Ϣʔβʔࢹ఺ͷ඼࣭Λ㚽Ζʹ
 ͍ͯͨ͠Β࿩͸ผ (࿦֎) • ࠓճ͸։ൃऀࢹ఺دΓͷ࿩ʹͳΔ
  17. ະདྷ΁ͷ౤ࢿͰ͋Δͱ͍͏ೝࣝ • ͳͥ React ҠߦΛ΍Δͷ͔ ◦ ੜ࢈ੑΛߴΊΔͨΊͷະདྷ΁ͷ౤ࢿ • ͳͥੜ࢈ੑ͕௿͔ͬͨͷ͔ ◦

    େ͖ͳٕज़తෛ࠴Λ๊͍͔͑ͯͨΒ ▪ ಛʹٕज़ཁૉ͕ݹͼ͍͔ͯͨΒ • Ҡߦͨ͠ͱ͜ΖͰ·ͨେ͖ͳෛ࠴Λ๊͑ͯ͠·ͬͯ͸ݩ΋ࢠ΋ͳ͍ ◦ Ҡߦ͸ΰʔϧͰ͸ͳ͍ʂ
  18. ׂΕ૭ཧ࿦ Ҿ༻ݩ: ׂΕ૭ཧ࿦ - Wikipedia • ࣏͕҆ѱԽ͢Δ·Ͱʹ͸࣍ͷΑ͏ͳܦաΛͨͲΔɻ 1. ݐ෺ͷ૭͕յΕ͍ͯΔͷΛ์ஔ͢ΔͱɺͦΕ͕ʮ୭΋౰֘஍Ҭʹର͠ ؔ৺Λ෷͍ͬͯͳ͍ʯͱ͍͏αΠϯͱͳΓɺ൜ࡑΛى͜͠΍͍͢؀ڥ

    Λ࡞Γग़͢ɻ 2. ΰϛͷϙΠࣺͯͳͲͷܰ൜ࡑ͕ى͖ΔΑ͏ʹͳΔɻ 3. ॅຽͷϞϥϧ͕௿Լͯ͠ɺ஍Ҭͷৼڵɺ҆શ֬อʹڠྗ͠ͳ͘ͳΔɻ ͦΕ͕͞Βʹ؀ڥΛѱԽͤ͞Δɻ 4. ڟѱ൜ࡑΛؚΊͨ൜ࡑ͕ଟൃ͢ΔΑ͏ʹͳΔɻ
  19. ந৅Խͷҙٛ • ந৅Խ͸࠶ར༻͚͕ͩ໨తͰ͸ͳ͍ ◦ ঢ়ଶ؅ཧͳͲͷ੹຿ΛવΔ΂͖ൣғʹด͡ࠐΊΔҙٛ΋େ͍ʹ͋Δ ▪ ؔ৺ͷ෼཭ (SoC) • ίʔυ͸ංେԽ͢Δํ޲ʹ͔͠੒௕͠ͳ͍

    ◦ ཻ౓͸ૈ͗͢ΔΑΓ͸ࡉ͔͗͢Δํ͕Ϛγ ▪ ࡉ͔͗ͨ͢৔߹͸ޙ͔Β݁߹͢Ε͹͍͍ ▪ ૈ͗ͨ͢৔߹ʹޙ͔Β෼ׂ͢Δͷ͸େม ◦ ෼ׂ͢ΔΑΓ΋݁߹͢Δํ͕؆୯ ▪ ҟ࿦͸͋Δ͔΋͠Εͳ͍͕ͦ͏࣮ײ͍ͯ͠Δ
  20. ཻ౓ͷײ֮ • ͋·Γʹࡉ͔͘੾Γ͗͢Δͱݟ௨͕͠ѱ͘ͳΔͷ͸ࣄ࣮ ◦ ͜Ε͹͔Γ͸ײ֮Λҭͯ·͠ΐ͏ͱ͔͠ݴ͍Α͏͕ͳ͍ ▪ ίʔυϨϏϡʔ, ϖΞϓϩ, etc. ▪

    ݱࡏਐߦதͷऔΓ૊Έ • Every Layout ಡॻձ • ΑΓ޿͘ʮίϯϙʔωϯτͷײ֮ʯΛ͔֬ͳ΋ͷʹ ͢ΔͨΊ
  21. VRT • Visual Regression Testing • ݟͨ໨ʹ͍ͭͯͷճؼςετ ◦ UI ʹҙਤ͠ͳ͍มߋ͕ՃΘΔ

    (όά͕ࠞೖ͢Δ) ͷΛ๷͙ • มߋΛՃ͑ΔલͱޙͷεφοϓγϣοτΛൺֱ͢Δ ◦ ࠩ෼͕͋Ε͹ࣦഊ ▪ ҙਤͨࠩ͠෼Ͱ͋Ε͹໰୊ͳ͍
  22. Storybook ͷ VRT • https://storybook.js.org/docs/react/writing-tests/visual-testing • Storybook ͷετʔϦʔΛର৅ʹ VRT Λߦ͏࢓૊Έ

    ◦ ৭ʑ͋Δ • ݸʑͷঢ়ଶʹ͍ͭͯͷݟͨ໨Λςετ͠΍͍͢ ◦ ঢ়ଶʹରԠ͢ΔετʔϦʔ͑͞༻ҙ͓͚ͯ͠͹͍͍ͷͰָ • Storybook ࣗମ͸ओʹޮ཰ԽΛ໨తʹಋೖ͍ͯͨ͠ ◦ ͜͜·Ͱ஝͖͑ͯͨࢿ࢈Λͦͷ··׆༻Ͱ͖Δͷ͸ڧ͍
  23. 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 ͕࣮ݱՄೳ
  24. ͳͥ reg-suit + Storycap ͳͷ͔ • ੈͷதʹ͸ SaaS ιϦϡʔγϣϯ΋͋Δ ◦

    εφοϓγϣοτ୯Ґͷैྔ՝੍ۚͷ΋ͷ͕ଟ͍… ▪ ࢼࢉͨ͠ͱ͜Ζ·͋·͋ͷֹۚʹ • ൺֱతࣗ༝ʹ࢖͑ΔΠϯϑϥ͕͋Δ ◦ ඞཁͳϦιʔε͸ Terraform Ͱखܰʹ࡞੒Ͱ͖Δঢ়ଶ ▪ S3 Bucket ͱ IAM Role Λੜ΍͚ͩ͢ • (ޙऀ͸ GitHub Actions ͔Βͷ AssumeRole ༻) ◦ ίετʹ͍ͭͯ΋͋Δఔ౓༥௨͕ޮ͘
  25. ࠓޙͷ՝୊ • Storybook ͷ VRT Ͱ͸࠷ऴతͳݟͨ໨͸ςετͰ͖ͳ͍ ◦ ࣮ࡍʹϢʔβʔ͕໨ʹ͢Δݟͨ໨ ◦ ίϯϙʔωϯτʹดͨ͡ελΠϦϯάΛҙࣝͯ͠͸͍Δ͕


    ׬ᘳ͔ͱ͍͏ͱ… ◦ ࠷ऴతͳݟͨ໨͕อূ͞Ε͍ͯΕ͹ΑΓࣗ৴Λ࣋ͬͯվमͰ͖Δ ▪ ։ൃ͕མͪண͍ͨϖʔδʹ͍ͭͯ͸ϖʔδ୯Ґͷ
 VRT ͷಋೖΛݕ౼
  26. ·ͱΊ • ະདྷ΁ͷ౤ࢿͱͯ͠ͷ React Ҡߦ • ͳͥ౤ࢿΛߦͬͨͷ͔ ◦ ٕज़తෛ࠴Λฦ٫ͯ͠ޮ཰తʹ։ൃ͕ߦ͑Δ؀ڥΛ੔͑Δ ▪

    ͜ͷঢ়ଶΛҡ࣋Ͱ͖ΔΑ͏ʹ ◦ ͳʹΑΓ΋ڀۃతʹ͸ྑ͍΋ͷΛܧଓతʹϢʔβʔʹ
 ఏڙ͢Δ஍൫ΛݻΊΔͨΊ • ͻͱ·ͣઅ໨Λܴ͑·͕ͨ͠Ҿ͖ଓ͖ؤுΓ·͢