$30 off During Our Annual Pro Sale. View Details »

エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例

Nokogiri
October 31, 2023

 エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例

Nokogiri

October 31, 2023
Tweet

More Decks by Nokogiri

Other Decks in Technology

Transcript

  1. ΤϯδχΞͱ2"ͰίϥϘ͢Δ
    ϑϩϯτΤϯυϦΞʔΩςΫνϟͷ։ൃࣄྫ
    #"3ϑϩϯτ͑ΜͲ͏ʮϑϩϯτΤϯυϦΞʔΩςΫτʯ
    /PLPHJSJ !OLHSOLHS
    ϑϩϯτΤϯυΤϯδχΞ!DZCP[V

    View Slide

  2. /PLPHJSJ !OLHSOLHS

    w αΠϘ΢ζגࣜձࣾcϑϩϯτΤϯυΤϯδχΞ
    w ೥ೖࣾɻLJOUPOFͷ৽نػೳ։ൃνʔϜΛܦ
    ͯ೥͔ΒLJOUPOFͷϑϩϯτΤϯυͷج൫࡮
    ৽ϓϩδΣΫτʢϑϩϦΞʣͷ্ཱͪ͛ظ͔Βࢀ
    ըɻݱࡏ͸ϓϩδΣΫτΛਪਐཱ৔
    w ϙέϞϯରઓΨν੎ʢϙέιϧͷμϝܭࢉπʔϧͷ։ൃʣɺೋࣇͷ෕

    View Slide

  3. LJOUPOFʹ͍ͭͯ
    w ۀ຿γεςϜΛࣗ༝ʹ࡞ΕΔΫϥ΢υϓϥοτ
    ϑΥʔϜ
    w ϦϦʔεͯ͠໿೥
    w άϩʔόϧల։த
    w ϓϥάΠϯͳͲΛ࡞੒͢Δύʔτφʔձ͕ࣾଟ਺
    ଘࡏ

    View Slide

  4. ࠓ೔ͷΰʔϧ
    w ϑϩϦΞͷ׆ಈʹ͍ͭͯ
    w ΤϯδχΞͱ2"͸ಉ͡νʔϜͰ։ൃͰ͖Δ
    w ৬ೳͰઢΛҾ͔ͣʹาΈدΓͳ͕Β։ൃͰ͖Δ
    ҎԼʹ͍ͭͯ஌ͬͯ΋Β͑Δ

    View Slide

  5. ͸ͳ͢͜ͱ
    w LJOUPOFͷϑϩϯτΤϯυϦΞʔΩςΫτϓϩδΣ
    ΫτʢϑϩϦΞʣͱ͸
    w ։ൃͷྲྀΕ
    w ΤϯδχΞ㱻2"ͷίϥϘϨʔγϣϯࣄྫ
    w ৬ೳΛލ͍ͩίϥϘϨʔγϣϯͷͨΊʹ

    View Slide

  6. ϑϩϦΞͱ͸

    View Slide

  7. ϑϩϦΞͱ͸
    w LJOUPOFͷϑϩϯτΤϯυΛϦΞʔΩςΫτ͢ΔϓϩδΣΫτ
    w LJOUPOFͷϑϩϯτΤϯυ͸$MPTVSF5PPMTͱ͍͏ϥΠϒϥϦͰॻ͔Ε
    ͓ͯΓɺ͜ΕΛ3FBDUʹஔ͖׵͍͑ͯ͘
    w ͨͩͷϦϥΠτͰ͸ͳ͘ɺܧଓతʹLJOUPOFͷϑϩϯτΤϯυͷվળ
    ͕Ͱ͖ΔΑ͏ͳج൫࡞Γ΋ؚΊͯߦ͏

    View Slide

  8. ϓϩδΣΫτͷΰʔϧ
    w ʮLJOUPOFશͯͷϖʔδ͕3FBDUʹΑͬͯදࣔ͞Ε͍ͯΔʯ
    w ʮϑϩϯτΤϯυ͕ػೳ΍ίϯϙʔωϯτ୯ҐͰ෼ׂ͞ΕɺͦΕΛ؅
    ཧ͢Δ֤νʔϜ͕ಠཱͯ͠ϥΠϒϥϦߋ৽΍ٕज़બఆΛߦ͑Δঢ়ଶʹ
    ͳ͍ͬͯΔʯ
    w ʮఆৗతͳϢʔβʔମݧʹؔ͢Δࢦඪʢ8FCύϑΥʔϚϯεɺΞΫ
    ηγϏϦςΟͳͲʣͷܭଌ͕ߦΘΕɺνʔϜͷؔ৺ࣄʹͳ͍ͬͯΔʯ

    View Slide

  9. ࣮ࡍʹ࡮৽͍ͯ͠Δը໘ͷྫ

    View Slide

  10. ओͳϝϯόʔͱ৬ೳ
    w ϓϩμΫτΦʔφʔɺΤϯδχΞɺ2"ɺεΫϥϜϚελʔ͕̍νʔϜ
    ʹॴଐ͠։ൃΛ͍ͯ͠Δ
    w σβΠφʔɺBZΤΩεύʔτɺϩʔΧϥΠζ୲౰ͳͲ͸νʔϜ֎Ͱ
    దٓίϛϡχέʔγϣϯΛͱΓͳ͕Β։ൃ͍ͯ͠Δ
    w ͦΕͧΕͷओͳ໾ׂ͸͋Δ͕ɺ৬ೳΛΫϩεΦʔόʔ͠ͳ͕Β࡮৽Λ
    ਐΊ͍ͯΔ

    View Slide

  11. αΠϘ΢ζͷ2"ͬͯͲΜͳ࢓ࣄʁ
    w ϓϩμΫτͷ඼࣭ʹ੹೚Λ࣋ͭϩʔϧ
    w ։ൃ͞Εͨػೳʹ͍ͨͯ͠ͲͷΑ͏ͳςετ͕ඞཁ͔ܭը
    w ςετΛ࣮ࢪ͢Δ
    w ࣗಈςετΛॻ͘ϝϯόʔ΋͍Δ
    w ಛʹϑϩϯτΤϯυͷ2"ϝϯόʔ͸Ϛ΢εૢ࡞ͳͲ͚ͩͰͳ͘Ωʔ
    Ϙʔυૢ࡞ͳͲBZपΓͷࢼݧΛߦ͏͜ͱ΋͋Δ

    View Slide

  12. ։ൃͷྲྀΕ

    View Slide

  13. ࡮৽ͷखॱ
    w ը໘΍ػೳ୯ҐͰͷ࡮৽ͯ͠ϦϦʔε
    w جຊతʹطଘͷ࢓༷࠶ݱ͢ΔΑ͏ʹॻ͖׵͑Λߦ͏ɻ
    w ׬શʹݱߦػೳอূ͢ΔΘ͚Ͱ͸ͳ͍
    w σβΠϯ࡮৽ͱηοτͰϦϦʔε͢Δ͜ͱ΋͋Γ·͢
    ৽ػೳ։ൃͱ͸લఏ͕গ͠ҟͳΔ

    View Slide

  14. εϓϦϯτͷྲྀΕ
    w ࣮૷͢΂͖ػೳͷચ͍ग़͠
    w ࢼݧ؍఺ͷચ͍ग़͠
    w εϓϦϯτܭը
    w ࣮૷ ςετʢࣗಈɾखಈʣ
    w 13Ϛʔδ

    View Slide

  15. ΤϯδχΞ㱻2"ͷ
    ίϥϘϨʔγϣϯࣄྫ

    View Slide

  16. ࣮૷͢΂͖ػೳͷચ͍ग़͠
    w ΤϯδχΞͱ2"Ͱ࢓༷ॻɺڍಈΛ֬ೝ͠ͳ͕Β࡞Δ΂͖ػೳΛચ
    ͍ग़͢
    w 2"͸طଘ࢓༷΁ͷཧղ͕ਂ͍ͷͰʮ࣮͸࢓༷ॻʹ͔͔Ε͍ͯͳ͍
    ػೳ͕͋Δʯʮ͜͜͸ෆ۩߹͕͋ΔʯͳͲॿݴΛ͢Δͱ͕Ͱ͖Δ
    w طଘ࢓༷Λ࠶ݱ͢ΔϓϩδΣΫτ͔ͩΒͦ͜2"ͷ஌ݟ͕༗༻
    w ΤϯδχΞ͸طଘͷίʔυΛݟͯΑΓৄࡉͳৼΔ෣͍Λ֬ೝͰ͖
    Δ

    View Slide

  17. 2"ͱΤϯδχΞͰ૬ஊ͠ͳ͕Β࡞͍ͬͯ͘

    View Slide

  18. ࢼݧ؍఺ͷચ͍ग़͠
    w ओʹ2"͕։ൃ͢Δػೳʹରͯ͠ඞཁͳࢼݧͷચ͍ग़͠Λߦ͏
    w ΤϯδχΞࢹ఺Ͱ΋ಛʹ࣮૷໘͔ΒؾʹͳΔͱ͜ΖͳͲΛ఻͑Δ
    w ΤϯδχΞͱ2"Ͱ૬ஊ͠ͳ͕Βςετͷ࣮ࢪํ๏ΛܾΊ͍ͯ͘

    View Slide

  19. ςετͷ࣮ࢪํ๏
    આ໌ ิ଍
    Ϣχοτ KFTUΛ࢖ͬͨςετ
    ؔ਺ͷ*Oͱ0VUΛݕࠪ͢Δ
    ΤϯδχΞ͕؅ཧɺ2"͸؅ཧ͠ͳ
    ͍
    ΠϯςάϨʔγϣϯ 3FBDU5FTUJOH-JCSBSZΛ࢖ͬͨςετ
    ը໘΍ػೳ୯ҐͷৼΔ෣͍Λݕࠪ͢Δ
    ϒϥ΢βςετ 4UPSZCPPLͱQMBZXSJHIUΛ࢖ͬͨςετ
    ओʹυϥοάΞϯυυϩοϓ͕ൃੜ͢ΔৼΔ෣͍Λݕࠪ͢Δ
    735 4UPSZCPPLͱ$ISPNBUJDΛ࢖ͬͨςετ
    ϥΠϒϥϦΞοϓσʔτͳͲͰ૝ఆ֎ͷݟͨ໨ͷࠩ෼͕ͳ͍͜ͱΛݕࠪ͢Δ
    && 4FMFOJVNΛ࢖ͬͨςετ
    αʔόʔαΠυͱͷ݁߹෦෼Λݕࠪ͢Δ
    جຊతʹ͸ϋοϐʔύεͰ̍ը໘਺
    έʔε
    खಈ ্هςετͰ୲อͮ͠Β͍Օॴ΍ɺ2"ͷܦݧ্ո͍͠ͱ͜ΖͳͲΛݟΔͨ
    ΊͷςετɻΫϩεϒϥ΢βςετͳͲ

    View Slide

  20. ࣮ࡍͷςετͱछྨͷ۠෼͚

    View Slide

  21. εϓϦϯτܭը
    w εϓϦϯτΛΤϯδχΞͱ2"ͰͲ͏ա͔͋͢͝Δఔ౓ܭը͢Δ
    w ܭըʹແཧ͕ͳ͍͔ॱௐ͔ͳͲΛேձͰνΣοΫ͢Δ

    View Slide

  22. εϓϦϯτܭըͷྫ

    View Slide

  23. ࣮૷ ςετʢࣗಈɾखಈʣ
    w ࣮૷͸ΤϯδχΞͰߦ͍ɺίʔυϨϏϡʔɺςετࣗಈԽ·Ͱ׬ྃ͠
    ͨΒ2"ʹखಈࢼݧΛґཔ͢Δ
    w ରԠ͢ΔػೳʹΑͬͯ͸ΤϯδχΞ͕ಈ࡞֬ೝͷΈͰ0,ͱ͢Δ΋͋
    Δ
    w 2"ͷखಈࢼݧ͕ؒʹ߹Θͳ͍৔߹͸ΤϯδχΞ͕ख఻͏͜ͱ΋͋Δ

    View Slide

  24. ࣮૷ ςετʢࣗಈɾखಈʣ
    w 2"͕ࣗಈࢼݧͷίʔυΛϨϏϡʔ͢Δ͜ͱ΋͋Δ
    w ͦͷͨΊʹࣗಈࢼݧͷίʔυʹࢼݧखॱΛίϝϯτͱͯ͠هड़͢Δ
    ͜ͱ΋͋Δ
    w 2"͕ςετࣗಈԽʹνϟϨϯδ͢Δ͜ͱ΋͋ΓɺΤϯδχΞ͕ςε
    τͷ਽ܗ΍.PDLͷ࢓૊ΈΛ࡞੒ͯ͠2"͕ςετΛॻ͘͜ͱ΋͋Δ
    2"ͱΤϯδχΞͰ͓ޓ͍ʹͰ͖Δ͜ͱΛ૿΍͍ͯ͘͠

    View Slide

  25. ৬ೳΛލ͍ͩ
    ίϥϘϨʔγϣϯͷͨΊʹ

    View Slide

  26. ৬ೳΛ௒͑ͯίϥϘ͢ΔͨΊʹͰ͖Δ͜ͱ
    w ڞ௨ͷνʔϜͷ໨ඪΛઃఆ͢Δ
    w εϓϦϯτͷ׬ྃ৚݅ʹࢼݧ׬ྃΛೖΕΔ
    w ϓϩδΣΫτͷ໨ඪɺΫΦʔλʔͷ໨ඪɺεϓϦϯτͷ໨ඪ
    w ීஈ͔Βίϛϡχέʔγϣϯ͕औΕΔؔ܎ੑΛ࡞Δ
    w ຖ೔ேձͰձ࿩͢Δ
    w ෺ཧతʹձͬͯؔ܎ੑΛߏங͢Δ

    View Slide

  27. ৬ೳΛ௒͑ͯίϥϘ͢ΔͨΊʹͰ͖Δ͜ͱ
    w ৬ೳͰ࢓ࣄΛ۠੾Β͓ͣޓ͍ͷ࢓ࣄΛ΍ͬͯΈΔ
    w ΤϯδχΞ͕ࢼݧઃܭɺ2"͕ςετࣗಈԽͳͲ
    w ڞ௨ͷ໨ඪୡ੒ͷͨΊʹྖҬΛΫϩεΦʔόʔ͍ͯ͘͠

    View Slide

  28. View Slide

  29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    8&"3&)*3*/(

    View Slide