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

フロントエンドのDXと今後

 フロントエンドのDXと今後

2023/6/15 に発表したフロントエンドのDXと今後についての発表です。

Yosuke Furukawa
PRO

June 15, 2023
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. ϑϩϯτΤϯυͷDX
    ͱࠓޙ
    6/15 @ Developer Experience Day 2023

    View Slide

  2. Twitter: @yosuke_furukawa


    Github: yosuke-furukawa

    View Slide

  3. ٕज़ސ໰Λ਺͍ࣾͯ͠Δ
    • ϦΞʔΩςΫτʹ͍ͭͯͷ࿩


    • ςετͷ΍Γํͷ࿩


    • ίʔυϨϏϡʔͷ΍Γํʹ͍ͭͯ


    • ΞϓϦͷύϑΥʔϚϯεΛ্͍͚͛ͨͲ...

    View Slide

  4. ٕज़ސ໰Λ਺͍ࣾͯ͠Δ
    • ϦΞʔΩςΫτʹ͍ͭͯͷ࿩


    • ςετͷ΍Γํͷ࿩


    • ίʔυϨϏϡʔͷ΍Γํʹ͍ͭͯ


    • ΞϓϦͷύϑΥʔϚϯεΛ্͍͚͛ͨͲ...
    ΍Γ͍ͨ։ൃ͕Ͱ͖͍ͯͳ͍

    View Slide

  5. ݪҼ͸༷ʑ
    • ϝϯόʔͷशख़౓͕଍Γͳ͍


    • ϓϩδΣΫτͷ͕࣌ؒ଍Γͳ͍


    • ඇػೳཁ݅ͷॏཁੑΛཧղͯ͠΋Β͑ͳ͍


    • աڈͷ։ൃϓϩηε͔Βൈ͚ग़ͤͳ͍

    View Slide

  6. ͳΜͰ "ͦΕ" ͕͍ͨ͠ͷʁ
    • ։ൃͷੜ࢈ੑΛ্͍͛ͨ


    • ͨͩ͜ͷੜ࢈ੑͱ͍͏ݴ༿ࣗମ͕ଟ༷ͳҙຯ
    ΛؚΜͰ͍Δ


    • ͕࣌ؒ࣠ଘࡏ͍ͯͯ͠ɺͦ͜ΛͲ͏੾Δ͔ʹ
    ΑͬͯมΘΔ

    View Slide

  7. ։ൃͷੜ࢈ੑΛ্͍͛ͨ
    • ্͛ͯͲ͏͍ͨ͠ʁ


    • ΋ͬͱΞ΢τϓοτͯ͠Ξ΢τΧϜΛՔ͍͗ͨ


    • Ծઆ => ݕূͷϓϩηεΛԿ౓΋ճ͍ͨ͠


    • ଞʹ͸ʁ


    • Ϟμϯͳ։ൃΛֶͿ͜ͱͰٕज़ऀͱֶͯ͠ͼΛಘ͍ͨ


    • ΠέͯΔϑϨʔϜϫʔΫʹ͢Δ͜ͱͰٕज़ϓϨθϯεΛ্͛ͯ
    ࠾༻ʹߩݙ͍ͨ͠

    View Slide

  8. ։ൃͷੜ࢈ੑΛ্͍͛ͨ
    • ্͛ͯͲ͏͍ͨ͠ʁ


    • ΋ͬͱΞ΢τϓοτͯ͠Ξ΢τΧϜΛՔ͍͗ͨ


    • Ծઆ => ݕূͷϓϩηεΛԿ౓΋ճ͍ͨ͠


    • ଞʹ͸ʁ


    • Ϟμϯͳ։ൃΛֶͿ͜ͱͰٕज़ऀͱֶͯ͠ͼΛಘ͍ͨ


    • ΠέͯΔϑϨʔϜϫʔΫʹ͢Δ͜ͱͰٕज़ϓϨθϯεΛ্͛ͯ
    ࠾༻ʹߩݙ͍ͨ͠
    ۩ମతͳՁ஋Λఏڙ͍ͨ͠
    ͋Δ΂͖࢟ʹ͍ͨ͠

    View Slide

  9. Ձ஋Λఏڙ͢Δ͜ͱΛ value
    ͔ΒདྷΔͱ͍͏ҙຯͰ valid
    ͳঢ়ଶΛࢦ͢

    View Slide

  10. ਖ਼͋͘͠Δ΂͖࢟ʹ͢Δ͜ͱ
    ͸ very ͔Β͖͓ͯΓɺ
    veri
    fi
    ed ͳঢ়ଶΛࢦ͢

    View Slide

  11. Ձ஋ͷఏڙͱ͋Δ΂͖࢟ͷ௥ٻ
    • ͜ΕΒ͸ͲͪΒ͔͕͚͍ܽͯͯ΋໰୊ɺͲͪ
    Β΋ୡ੒͍ͯ͘͠ඞཁ͕͋Δ


    • ΋ͪΖΜϏδωεͱ͍͏ҙຯͰ͸Ձ஋ͷఏڙ
    ͷํʹॏ఺͕ஔ͔ΕΔ


    • ҰํͰ͋Δ΂͖࢟Ͱ͸ͳ͍ͱঃʑʹ΋ͷͮ͘
    Γ͔Βݱ৔ͷϝϯόʔ͕཭Εͯߦͬͯ͠·͏

    View Slide

  12. ͜ͷόϥϯεΛͲ͏อ͔ͭ͸
    ΍ͬͺΓ೉͍͠

    View Slide

  13. 2ͭͷΞϓϩʔνͰ


    ղܾ͍͖͍ͯͨ͠

    View Slide

  14. 1. ϘτϜΞοϓ

    View Slide

  15. ϘτϜΞοϓͷΞϓϩʔν
    • ݱ৔ͷϨϕϧͰ஌ݟΛͨΊ্͍ͯ͛ͯ͘


    • ษڧձͩͬͨΓϋοΧιϯͩͬͨΓ΋༗ޮ


    • ڭ͑ͯ͘ΕΔਓΛั·͑ͯ௚઀ڭ͑ͯ໯͏ํ๏
    ΋͋Δ

    View Slide

  16. 2. τοϓμ΢ϯ

    View Slide

  17. τοϓμ΢ϯͷΞϓϩʔν
    • ࢦ਑ͱͳΔ΋ͷΛܾΊ͔ͯͦ͜Β͓Ζ͍͖͍ͯͨ͠


    • ϑϩϯτΤϯυͷઃܭʹࢦ਑Λ΋ͨͤΒΕ͍ͯͳ͍͔
    Βํ਑͕ϒϨΔ


    • ઃܭͦͷ΋ͷ͸ΞϓϦέʔγϣϯಛੑʹدͬͯมΘΔ
    ͕ɺઃܭΛ͢ΔͨΊͷํ਑ͳΒ͋Δఔ౓دͤूΊͨ஌
    ݟΛݩʹ࡞Ε͹Ͱ͖ΔͷͰ͸ͳ͍͔ɾɾɾʁ


    • ϑϩϯτΤϯυͷࢦ਑Λ࡞Εͳ͍͔ɾɾɾʁ

    View Slide

  18. ͦΜͳંʹग़ձͬͨͷ͕


    ͪ͜Β


    DX CriteriaͱͻΖ͖͍ͩͪͱ
    ͷύωϧτʔΫ

    View Slide

  19. ύωϧτʔΫ
    • ϑϩϯτΤϯυͷ૊৫࿦ͷ࿩(postdev)
    https://blog.nijibox.jp/article/postdev1/

    View Slide

  20. ͜͜Ͱͷ࿩͠߹͍ͷ಺༰
    • ըҰతͳΞϓϩʔνͰ͸ͳ͘ɺͦͷ৔ͦͷ৔ʹ
    Ԡͨ͡Ξϓϩʔν͕औΕΔ૊৫͕ͦ͜ڧ͍૊৫


    • ڧ͍૊৫ʹͳͬͯ։ൃΛ͢Δࡍͷώϯτͱͯ͠
    DX Criteria ͷΑ͏ͳࢦ਑Λ༻ҙ͍ͨ͠


    • Ͱ͖Ε͹ϑϩϯτΤϯυʹಛԽͨ͠ DX Criteria
    ͱ͔Λݕ౼ͯ͠Έ͍ͨ

    View Slide

  21. ͜͜Ͱͷ࿩͠߹͍ͷ಺༰
    • ըҰతͳΞϓϩʔνͰ͸ͳ͘ɺͦͷ৔ͦͷ৔ʹ
    Ԡͨ͡Ξϓϩʔν͕औΕΔ૊৫͕ͦ͜ڧ͍૊৫


    • ڧ͍૊৫ʹͳͬͯ։ൃΛ͢Δࡍͷώϯτͱͯ͠
    DX Criteria ͷΑ͏ͳࢦ਑Λ༻ҙ͍ͨ͠


    • Ͱ͖Ε͹ϑϩϯτΤϯυʹಛԽͨ͠ DX Criteria
    ͱ͔Λݕ౼ͯ͠Έ͍ͨ
    ͡Ό͋΍ͬͯΈΕ͹͍͍
    Μ͡Όͳ͍Ͱ͔͢ʁ

    View Slide

  22. ͱͷ͜ͱͰ

    View Slide

  23. ຊ୊:


    ϑϩϯτΤϯυʹ͓͚Δ


    DX Criteria Λ࡞ͬͨ࡞Ζ͏ͱ
    ͍ͯ͠Δ࿩

    View Slide

  24. ϑϩϯτΤϯυ൛DX Criteria
    • ຊՈ DX Criteria ͸ߴ଎ͳԾઆݕূΛճͯ͠૊৫಺ͷૉૣ͍ݕ
    ূͱࣦഊͱֶͼΛ࠷େԽ͠Α͏ͱ͢ΔͨΊͷํ਑Ͱ࡞ΒΕͨ



    • ͦͷΤοηϯε෦෼͸࢒ͭͭ͠ɺϑϩϯτΤϯυྖҬʹಛԽ
    ͢Δ


    • ຊՈ͸ձࣾͷ࿩΋ଟ͍͕ɺϑϩϯτΤϯυͱ͍͏ྖҬʹด͡
    ΔͷͰɺձࣾͷ࿩͸গͳΊ


    • ҰํͰσβΠϯͱͷڠۀ΍ؔ࿈෦ॺͱͷ࿩͸ଟΊ

    View Slide

  25. ϑϩϯτΤϯυ൛ DX Criteria
    • ࡞੒ऀ


    • yosuke_furukawa


    • ahomu


    • ϨϏϡʔ


    • hirokidaichi

    View Slide

  26. ϑϩϯτΤϯυ൛ DX Criteria
    • ओཁ5߲໨


    • ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕज़ελοΫ


    • ϢʔβʔମݧΛࢧ͑Δඇػೳཁٻ


    • Ձ஋ͷσϦόϦʔΛߦ͏ϓϩηε


    • γεςϜɾΞϓϦέʔγϣϯӡ༻ʢΞʔΩςΫνϟʣ


    • νʔϜϏϧσΟϯά

    View Slide

  27. ͪͳΈʹ·ͩ


    ຏ͖ࠐΈதͰ͢ʂʂʂ

    View Slide

  28. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δ
    ٕज़ελοΫ

    View Slide

  29. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ੜ࢈ੑΛ্͛ΔͨΊʹٕज़໘ͰϥΠϒϥϦ΍πʔ
    ϧΛ࢖ͬͯରॲ͢Δ


    • ͨͩٯʹ͜Ε΋΍Γա͗͸஫ҙ


    • ΫϥΠΞϯταΠυͷར༻؀ڥɺUIͷϕετϓϥ
    ΫςΟεͷมԽɺϥΠϒϥϦͷΞοϓσʔτͳ
    Ͳɺͱʹ͔͘มߋ΍मਖ਼͕ଟ͍ՕॴͰ͋Γɺͦ͜
    ʹରͯ͠Ͳ͏औΓ૊Ή͔ͱ͍͏ςʔϚ

    View Slide

  30. ྫΛڍ͛Δ

    View Slide

  31. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ੩తݕࠪͱܕ෇͚


    • Linter, formatter, editor, Ռͯ͸ TypeScript Ͱ΍ͬͯΔ
    ͔ɺɺɺͳͲɻ


    • TSΛ࠷ॳ͔Βج४ʹೖΕΔ͔͸໎͕ͬͨɺ΋͏ຆͲͷ
    ։ൃऀ͕࢖͍ͬͯΔ΋ͷͱͯ͠બఆ


    • ։ൃͷπʔϧΛ࢖͏ͷ͸ྑ͍͕ɺৼΓճ͞Εͳ͍Α͏
    ʹ͍ͨ͠ΑͶɺͱ͍͏ࢥ͍ΛࠐΊ͍ͯΔɻ

    View Slide

  32. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ੩తݕࠪͱܕ෇͚


    • ʢֶशͱվળʣ੩తܕ෇͚ݴޠ΍ίʔυϑΥʔϚολʔΛ༻͍ͯίʔυ
    ϕʔεͷಡΈ΍͢͞ͱอकੑΛ޲্͍ͤͯ͞Δ͔


    • ʢϝτϦΫεʣόΫͷൃੜ཰ɺίʔυϨϏϡʔͷ࣌ؒͳͲͷϝτϦΫεΛ
    औಘ͠ɺ׆༻͍ͯ͠Δ͔


    • ʢϓϥΫςΟεʣܕ৘ใΛAPIϨϕϧͰڞ༗͢ΔͨΊͷπʔϧΛ׆༻ͯ͠
    ͍Δ͔


    • ʢΞϯνύλʔϯʣ ੩తܕ੍໿Λద੾ʹ࢖༻ͯ͠ɺະવʹόάΛ๷͙͜ͱ
    Λ༏ઌ͍ͯ͠Δ͔ɺ͋Δ͍͸ܕ੍໿Λແࢹͯ͠ਐḿΛٸ͙܏޲͕ͳ͍͔

    View Slide

  33. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • πʔϧνΣΠϯͱ։ൃޮ཰


    • πʔϧʹΑΔޮ཰ੑͷΞοϓ͕Ͳ͜·ͰͰ͖ͯ
    ͍Δ͔


    • ྫ͑͹ build πʔϧ͕஗͗ͨ͢Γ͠ͳ͍͔


    • Mock ͱ͔Λద੾ʹ࢖ͬͯ։ൃޮ཰্͛ͯΔ͔

    View Slide

  34. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • πʔϧνΣΠϯͱ։ൃޮ཰


    • ʢֶशͱվળʣLinter, formatter ͳͲπʔϧηοτΛڞ௨
    Խ͍ͯ͠Δ͔


    • ʢϝτϦΫεʣπʔϧͷ࣮ߦ࣌ؒΛܭଌ͠ɺޮ཰ੑΛఆ
    ظతʹܭଌͰ͖͍ͯΔ͔


    • ʢΞϯνύλʔϯʣҰ؏ੑͷͳ͍πʔϧબఆ΍ա৒ͳΧε
    λϚΠζʹΑΓɺ։ൃޮ཰͕௿Լͯ͠͠·͍ͬͯͳ͍͔

    View Slide

  35. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ


    • ٕज़τϨϯυʹৼΓճ͞Ε͍ͯͳ͍͔


    • ΞϓϦέʔγϣϯͷಛੑ͸ཧղ͍ͯ͠Δͷ͔


    • ࣄۀ໨ઢͰϥΠϒϥϦ΍ϑϨʔϜϫʔΫΛબ
    ఆ͍ͯ͠Δ͔

    View Slide

  36. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ


    • (ֶशͱվળ) ٕज़τϨϯυΛ௥੻͠ɺ৽ͨͳπʔϧ΍ϥΠϒϥ
    ϦͷධՁΛఆظతʹߦ͍ͬͯΔ͔


    • ʢϝτϦΫεʣ طଘͷ࢖༻ٕज़ͷΞοϓσʔτස౓ɺٕज़ε
    λοΫͷෳࡶ͞ɺηΩϡϦςΟࣄ৅ͳͲΛධՁɾվળ͍ͯ͠Δ
    ͔


    • ʢΞϯνύλʔϯʣྲྀߦΓͷٕज़΍࠷৽ϥΠϒϥϦΛແཧʹऔ
    ΓೖΕɺٕज़ελοΫ͕ա৒ʹෳࡶԽͯ͠͠·͍ͬͯͳ͍͔

    View Slide

  37. ϢʔβʔମݧΛࢧ͑Δ


    ඇػೳཁٻ

    View Slide

  38. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ඇػೳཁٻΛΨϯແࢹͯ͠ਐΊΔͱ݁ہग़དྷ্
    ͕ͬͨ΋ͷ͕࢖͍ʹ͘͘ͳΔ


    • ͲͷඇػೳཁٻʹͲͷఔ౓Ԡ͑Δ΂͖ͰɺͲ͏ର
    ॲ͢Δ͔Λఆٛͯ͠ɺݕ౼ࡐྉʹͯ͠΋Β͍͍ͨ


    • ϑϩϯτΤϯυͰݴ͑͹ύϑΥʔϚϯεɺΞΫη
    γϏϦςΟɺϝϯςφϯαϏϦςΟɺσβΠϯɺ
    ͳͲͳͲͨ͘͞Μඇػೳཁٻ͕͋Δ

    View Slide

  39. ྫΛڍ͛Δ

    View Slide

  40. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ύϑΥʔϚϯε


    • ϨΠςϯγʔͱεϧʔϓοτͷ֓೦Λཧղ͠ɺԿ͕Կ
    Ͱ΋ ʮLighthouse 100఺ͩʂʯͱ͔ʹͳ͍ͬͯͳ͍
    ͜ͱ


    • దٓύϑΥʔϚϯενϡʔχϯάίϯςετͳͲͰֶ
    ΂ΔλΠϛϯάΛ࡞ͬͯཉ͍͠


    • ݱঢ়෼ੳͱ໨ඪઃఆ͕Ͱ͖Δࡐྉ͕ἧ͍ͬͯͯ΄͍͠

    View Slide

  41. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ύϑΥʔϚϯε


    • ʢֶशͱվળʣCPU΍ϝϞϦɺωοτϫʔΫͱݴͬͨجຊతͳ߲໨ʹ͍ͭ
    ͯͷϓϩϑΝΠϧΛऔΕɺݟํʹֶ͍ͭͯश͍ͯ͠Δ͔


    • ʢϝτϦΫεʣJavaScript΍CSSɺը૾ͱ͍ͬͨ੩తΞηοτͷσʔλα
    ΠζΛܭଌ͠ɺύϑΥʔϚϯεόδΣοτͱͯ͠༧ࢉ؅ཧ͕Ͱ͖͍ͯΔ͔


    • ʢΞϯνύλʔϯʣࣗ෼͕ͨͪ഑৴͍ͯ͠Δ΢ΣϒΞϓϦέʔγϣϯ͕Ͳ
    Ε͘Β͍ͷϑΝΠϧαΠζΛ഑৴͍ͯ͠Δ͔Λ೺Ѳ͍ͯ͠ͳ͍


    • ʢΞϯνύλʔϯʣ໨ඪΛ࣋ͨͣʹܭଌ͠ɺࡍݶͳ͘νϡʔχϯάΛ͠Α
    ͏ͱ͍ͯ͠Δ

    View Slide

  42. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ΞΫηγϏϦςΟ


    • ׂΓͱ·ͩಋೖͰ͖͍ͯΔ։ൃ͕গͳ͍ྖҬ


    • ಛʹ։ൃ໘Ͱ͸πʔϧ͸ग़͖͍ͯͯΔ΋ͷ
    ͷɺຊདྷతͳҙຯͰͷΞΫηγϒϧͳΞϓϦ
    έʔγϣϯͷ։ൃ͸·ͩτϥΠΞϧΛ͍ͯ͠
    Δ૊৫͕ଟ͍ͱ͍͏ҹ৅

    View Slide

  43. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ΞΫηγϏϦςΟ


    • ʢϝτϦΫεʣΞΫηγϏϦςΟͷ੩తղੳΛߦ͏πʔϧΛ༻͍ͯɺఆظతʹܭଌΛߦͬͯ
    ͍Δ͔


    • ʢϓϥΫςΟεʣ࣮૷νΣοΫϦετΛ࡞੒͠ɺ४ڌ͍ͯ͠Δ͜ͱΛ֬ೝ͍ͯ͠Δ͔


    • ࢀߟ: https://waic.jp/docs/jis2016/test-guidelines/202012/


    • https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/


    • ʢΞϯνύλʔϯʣHTMLͷηϚϯςΟΫεΛແࢹ࣮ͨ͠૷ʹͳ͍ͬͯΔ


    • ʢΞϯνύλʔϯʣλονύου΍ϙΠϯςΟϯάσόΠεͰͷΈ੍ޚͰ͖ΔUIʹͳͬͯ͠
    ·͍ͬͯΔ


    • ʢΞϯνύλʔϯʣνΣοΫπʔϧ͚ͩʹཔΓɺςετ࣮ࢪऀʹΑΔ֬ೝ͕ߦΘΕ͍ͯͳ͍

    View Slide

  44. Ձ஋ͷσϦόϦʔΛߦ͏


    ϓϩηε

    View Slide

  45. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη
    ε
    • CI/CDͳͲܧଓͯ͠σϦόϦʔΛߦ͏ࡍʹ΋ʮߴ
    ଎ʹԾઆݕূ͢Δʯ࢓૊Έ͕ඞཁʹͳΔ


    • ϑϩϯτΤϯυ΋ྫ֎Ͱ͸ͳ͘ɺಛʹA/Bςετ
    ͳͲͰ࡞ΓΛҧ͑Δͱ໰୊ʹͳΓ΍͍͢


    • ଞʹ΋Τϥʔ΍ো֐ൃੜ࣌ʹΠϯϑϥʹ೚͖ͤΓ
    ʹ͢ΔͳͲͷରԠ͕औΒΕͯ͠·͏ͱ໰୊ʹͳΔ

    View Slide

  46. ྫΛڍ͛Δ

    View Slide

  47. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη
    ε
    • ςετ


    • ʢֶशͱվળʣςετΧόϨοδج४΍ࣗಈςετΛ༻ҙ͠ɺ͜ΕΒΛܧଓతʹվળ͢ΔͨΊ
    ͷ޻਺͕νʔϜͰऔΒΕ͍ͯΔ͔


    • ʢϝτϦΫεʣΧόϨοδΛ௥Ճͯ͠ςετ͕Ͳ͜Λ௨ա͍ͯ͠Δͷ͔֬ೝͰ͖͍ͯΔ


    • ʢϝτϦΫεʣ͢΂ͯͷςετ͕PR͝ͱʹ30෼Ҏ಺ͰऴΘΔ͜ͱΛ֬ೝ͍ͯ͠Δ


    • ʢϓϥΫςΟεʣPR͝ͱʹճ͢ςετͳͷ͔ͦΕͱ΋ఆظ࣮ߦ͢Δςετͳͷ͔Λఆ͍ٛͯ͠
    Δ


    • ʢϓϥΫςΟεʣunit ςετ, integration ςετ, e2e ςετ, Visual Regression ςετͳͲͷ
    ֤छςετͷಛੑΛཧղ͠ɺద੾ʹӡ༻Ͱ͖͍ͯΔ


    • ʢΞϯνύλʔϯʣҰ෦ͷਓ͚͕ͩςετΛॻ͖ɺҰ෦ͷਓ͸ςετΛॻ͔ͳ͍ͱ͍ͬͨΑ͏
    ʹࣗಈςετΛݸʑਓͷ౒ྗ໨ඪͳͲʹͳ͍ͬͯΔɻ

    View Slide

  48. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη
    ε
    • σϓϩΠ


    • ʢϓϥΫςΟεʣa/b test, feature
    fl
    ag, canary releaseͳͲ
    ͷࢼ࣮ͯ͠ફͨ͠ޙͰมߋ͠΍͍͢σϓϩΠΛߦ͍ͬͯΔ͔


    • ʢϓϥΫςΟεʣҟৗ࣌ʹ͙͢ʹ੾Γ໭ͤΔΑ͏ʹ Blue
    Green Deploy ͳͲͷ࢓૊Έ͕͋Δ͔


    • ʢΞϯνύλʔϯʣσϓϩΠҰճʹରͯ͠1࣌ؒҎ্ͷ࣌ؒ
    ͕͔͔Δ

    View Slide

  49. γεςϜɺΞϓϦέʔγϣϯ
    ӡ༻ʢΞʔΩςΫνϟʣ

    View Slide

  50. ྫΛڍ͛Δ

    View Slide

  51. γεςϜɺΞϓϦέʔγϣϯӡ

    • BFFɺAPIઃܭ


    • ʢϓϥΫςΟεʣϑϩϯτΤϯυΤϯδχΞଆ͔
    Β΋APIઃܭΛఏҊͰ͖Δ؀ڥʹͳ͍ͬͯΔ͔


    • ʢΞϯνύλʔϯʣόοΫΤϯυΤϯδχΞ͚ͩ
    ͕ओಋͯ͠APIΛઃܭ͓ͯ͠ΓɺϑϩϯτΤϯυ
    ΤϯδχΞ͕ར༻͠ʹ͍͘ઃܭʹͳ͍ͬͯͳ͍͔

    View Slide

  52. γεςϜɺΞϓϦέʔγϣϯӡ

    • Πϯϑϥ


    • ʢϓϥΫςΟεʣϑϩϯτΤϯυ୲౰ऀ΋
    Web ʹؔΘΔΠϯϑϥͷߏ੒Λ೺ѲͰ͖͍ͯ
    ͯɺো֐ରԠʹࢀըͰ͖Δ


    • ʢΞϯνύλʔϯʣϓϩμΫτͷಛੑΛؑΈͳ
    ͍ըҰతʹ༻ҙ͞Εͨߏ੒͕ڧ੍͞Εͯ͠·͏

    View Slide

  53. νʔϜɺ૊৫

    View Slide

  54. νʔϜɺ૊৫
    • ઐ໳૊৫ͷӡ༻


    • ྲྀΕͷૣ͍ϑϩϯτΤϯυྖҬʹରԠ͢ΔͨΊʹ
    ΍͓͍ͬͯͨ΄͏͕͍͍͜ͱ


    • ྫ͑͹ઐ໳૊৫Λ഑ஔ͠ɺԣஅతʹؔΘΕΔΑ͏ʹ
    ͢ΔɺͳͲ


    • ͍ΘΏΔΠωʔϒϦϯάνʔϜͷΑ͏ͳӡ༻Λ૝

    View Slide

  55. νʔϜɺ૊৫
    • ෼୲ɺ৬຿είʔϓͷఆٛ


    • ϑϩϯτΤϯυΤϯδχΞ͸ίϛϡχέʔγϣϯͷϋϒʹͳΓ΍͍͢


    • ҰํͰྡ઀૊৫ͷ࢓ࣄ΋೚͞Ε΍͍͢


    • ྫ) σΟϨΫγϣϯۀ຿ΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔ


    • ྫ) ϚʔέςΟϯά૊৫ଆͰඞཁͳGAͷௐࠪ΍ઃఆΛϑϩϯτΤϯ
    υΤϯδχΞ͕ߦ͍ͬͯΔͳͲ


    • ϝϯόʔ͕ຊདྷൃش͢΂͖όϦϡʔΛ્֐ͯ͠͠·͏Α͏ͳέʔε͕
    ͳ͍Α͏ʹ͍ͨ͠

    View Slide

  56. ྫ͸·ͩͳ͠ɾɾɾ


    Ӷҙ࡞੒தʂ

    View Slide

  57. ͜Μͳײ͡ͰӶҙ࡞੒தͰ͢

    View Slide

  58. ࠓޙͳΜͱ͔೥಺͘Β͍ʹ


    ୈҰ஄ग़ͤΔΑ͏ʹ͠·͢

    View Slide

  59. ͨͩ͜ͷج४͸͋͘·Ͱ


    ج४Ͱ͋ͬͯʮ͜Ε͕ୡ੒Ͱ
    ͖͍ͯͳ͍͔Βବ໨ͳ։ൃʯ
    ͱ͍͏෩ʹଊ͑ͯ΄͘͠ͳ͍
    Ͱ͢ɻ

    View Slide

  60. ຊ౰ͷҙຯͰڧ͍૊৫͸ըҰ
    తʹج४ʹै͏૊৫Ͱ͸ͳ
    ͘ɺج४Λॊೈʹଊ͑ͯࣗ෼
    ͨͪʹΧελϚΠζͰ͖Δ૊
    ৫ͩͱࢥ͍ͬͯ·͢ɻ

    View Slide

  61. ࣗ෼͕ݟ͖ͯͨ։ൃͷதͰ
    ࠔͬͯΔਓͨͪΛࠓޙগ͠Ͱ
    ΋ॿ͚ʹͳΕ͹ͱࢥ͍·͢ɻ

    View Slide

  62. ࠓޙ

    View Slide

  63. ࣗ෼ͷ؍ଌൣғͰ͸ͲΜͲΜ
    ϦΞʔΩςΫτͳͲ͕ٻΊΒ
    Ε͍ͯΔ͕ɺਖ਼௚ͦ͜·Ͱຖ
    ճඞཁͳͷ͔ʁͱࢥͬͨΓ͠
    ·͢ɻ

    View Slide

  64. ϑϩϯτΤϯυͷϥΠϒϥϦ
    ΍ϑϨʔϜϫʔΫͷߋ৽͕େ
    มͰɾɾɾ


    ͱ͍͏ͷΛΑ͘ฉ͖·͢ɻ

    View Slide

  65. Xxx ͕Φϫίϯ͔ͩΒɺ৽͠
    ͍yyyʹ৐Ζ͏ɻͰ͸ͳ͘ɺ
    ͦ΋ͦ΋ϦΞʔΩ͕ඞཁͳͷ
    ͔Λߟ͑ΒΕΔΑ͏ͳ૊৫΍
    ϝϯόʔΛ࡞͍͖͍ͬͯͨͳ
    ͱࢥ͍ͬͯ·͢ɻ

    View Slide

  66. ͦ͏͡Όͳ͍ͱ


    ϑϩϯτΤϯυ։ൃͦͷ΋ͷ
    ͕ࣗॏͰ௵ΕΔΜ͡Όͳ͍͔
    ͱݒ೦͍ͯ͠·͢ɻ

    View Slide

  67. ৭ΜͳΞϓϩʔνΛऔͬͯগ
    ͠Ͱ΋ྑ͍͖͍ͯͨ͘͠ͱ
    ࢥ͍ͬͯ·͢ɻ

    View Slide

  68. ·ͱΊ

    View Slide

  69. ·ͱΊ
    • ৭Μͳ։ൃ૊৫Λݟ͖͕ͯͨɺ·ͩ΍Γ͍ͨ͜ͱ͕Ͱ͖͍ͯΔͱ͍͏૊৫͸গͳ͍


    • ͦͷݪҼ͸༷ʑ͕ͩɺϏδωεͱ։ൃͷ͋Δ΂͖࢟ͷΪϟοϓͰࠔ͍ͬͯΔΑ͏ʹ
    ݟ͑Δ


    • ͜Μͳ໰୊͸ҰͭͷιϦϡʔγϣϯͰͳΜͱ͔͢ΔΑ͏ͳ໰୊͡Όͳ͍


    • ϘτϜΞοϓʹϝϯόʔҰਓͻͱΓ͕੒௕͢Δํ๏ͱτοϓμ΢ϯʹͦͷํ޲Λࣔ
    ͢ํ๏͕ඞཁ


    • τοϓμ΢ϯʹ΍͍ͬͯ͘ํ๏ͱͯ͠ϑϩϯτΤϯυ൛ͷDX CriteriaΛ࡞͍ͬͯΔ


    • ͍͔ͭ͘঺հͨ͠ͷͰɺؤுͬͯ͜Ε͔Βଓ͚͍͖ͯ·͢ɻϑΟʔυόοΫ౳͕͋
    Ε͹ڭ͍͑ͯͩ͘͞

    View Slide