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

by Yosuke Furukawa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

ٕज़ސ໰Λ਺͍ࣾͯ͠Δ • ϦΞʔΩςΫτʹ͍ͭͯͷ࿩ • ςετͷ΍Γํͷ࿩ • ίʔυϨϏϡʔͷ΍Γํʹ͍ͭͯ • ΞϓϦͷύϑΥʔϚϯεΛ্͍͚͛ͨͲ...

Slide 4

Slide 4 text

ٕज़ސ໰Λ਺͍ࣾͯ͠Δ • ϦΞʔΩςΫτʹ͍ͭͯͷ࿩ • ςετͷ΍Γํͷ࿩ • ίʔυϨϏϡʔͷ΍Γํʹ͍ͭͯ • ΞϓϦͷύϑΥʔϚϯεΛ্͍͚͛ͨͲ... ΍Γ͍ͨ։ൃ͕Ͱ͖͍ͯͳ͍

Slide 5

Slide 5 text

ݪҼ͸༷ʑ • ϝϯόʔͷशख़౓͕଍Γͳ͍ • ϓϩδΣΫτͷ͕࣌ؒ଍Γͳ͍ • ඇػೳཁ݅ͷॏཁੑΛཧղͯ͠΋Β͑ͳ͍ • աڈͷ։ൃϓϩηε͔Βൈ͚ग़ͤͳ͍

Slide 6

Slide 6 text

ͳΜͰ "ͦΕ" ͕͍ͨ͠ͷʁ • ։ൃͷੜ࢈ੑΛ্͍͛ͨ • ͨͩ͜ͷੜ࢈ੑͱ͍͏ݴ༿ࣗମ͕ଟ༷ͳҙຯ ΛؚΜͰ͍Δ • ͕࣌ؒ࣠ଘࡏ͍ͯͯ͠ɺͦ͜ΛͲ͏੾Δ͔ʹ ΑͬͯมΘΔ

Slide 7

Slide 7 text

։ൃͷੜ࢈ੑΛ্͍͛ͨ • ্͛ͯͲ͏͍ͨ͠ʁ • ΋ͬͱΞ΢τϓοτͯ͠Ξ΢τΧϜΛՔ͍͗ͨ • Ծઆ => ݕূͷϓϩηεΛԿ౓΋ճ͍ͨ͠ • ଞʹ͸ʁ • Ϟμϯͳ։ൃΛֶͿ͜ͱͰٕज़ऀͱֶͯ͠ͼΛಘ͍ͨ • ΠέͯΔϑϨʔϜϫʔΫʹ͢Δ͜ͱͰٕज़ϓϨθϯεΛ্͛ͯ ࠾༻ʹߩݙ͍ͨ͠

Slide 8

Slide 8 text

։ൃͷੜ࢈ੑΛ্͍͛ͨ • ্͛ͯͲ͏͍ͨ͠ʁ • ΋ͬͱΞ΢τϓοτͯ͠Ξ΢τΧϜΛՔ͍͗ͨ • Ծઆ => ݕূͷϓϩηεΛԿ౓΋ճ͍ͨ͠ • ଞʹ͸ʁ • Ϟμϯͳ։ൃΛֶͿ͜ͱͰٕज़ऀͱֶͯ͠ͼΛಘ͍ͨ • ΠέͯΔϑϨʔϜϫʔΫʹ͢Δ͜ͱͰٕज़ϓϨθϯεΛ্͛ͯ ࠾༻ʹߩݙ͍ͨ͠ ۩ମతͳՁ஋Λఏڙ͍ͨ͠ ͋Δ΂͖࢟ʹ͍ͨ͠

Slide 9

Slide 9 text

Ձ஋Λఏڙ͢Δ͜ͱΛ value ͔ΒདྷΔͱ͍͏ҙຯͰ valid ͳঢ়ଶΛࢦ͢

Slide 10

Slide 10 text

ਖ਼͋͘͠Δ΂͖࢟ʹ͢Δ͜ͱ ͸ very ͔Β͖͓ͯΓɺ veri fi ed ͳঢ়ଶΛࢦ͢

Slide 11

Slide 11 text

Ձ஋ͷఏڙͱ͋Δ΂͖࢟ͷ௥ٻ • ͜ΕΒ͸ͲͪΒ͔͕͚͍ܽͯͯ΋໰୊ɺͲͪ Β΋ୡ੒͍ͯ͘͠ඞཁ͕͋Δ • ΋ͪΖΜϏδωεͱ͍͏ҙຯͰ͸Ձ஋ͷఏڙ ͷํʹॏ఺͕ஔ͔ΕΔ • ҰํͰ͋Δ΂͖࢟Ͱ͸ͳ͍ͱঃʑʹ΋ͷͮ͘ Γ͔Βݱ৔ͷϝϯόʔ͕཭Εͯߦͬͯ͠·͏

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

2ͭͷΞϓϩʔνͰ ղܾ͍͖͍ͯͨ͠

Slide 14

Slide 14 text

1. ϘτϜΞοϓ

Slide 15

Slide 15 text

ϘτϜΞοϓͷΞϓϩʔν • ݱ৔ͷϨϕϧͰ஌ݟΛͨΊ্͍ͯ͛ͯ͘ • ษڧձͩͬͨΓϋοΧιϯͩͬͨΓ΋༗ޮ • ڭ͑ͯ͘ΕΔਓΛั·͑ͯ௚઀ڭ͑ͯ໯͏ํ๏ ΋͋Δ

Slide 16

Slide 16 text

2. τοϓμ΢ϯ

Slide 17

Slide 17 text

τοϓμ΢ϯͷΞϓϩʔν • ࢦ਑ͱͳΔ΋ͷΛܾΊ͔ͯͦ͜Β͓Ζ͍͖͍ͯͨ͠ • ϑϩϯτΤϯυͷઃܭʹࢦ਑Λ΋ͨͤΒΕ͍ͯͳ͍͔ Βํ਑͕ϒϨΔ • ઃܭͦͷ΋ͷ͸ΞϓϦέʔγϣϯಛੑʹدͬͯมΘΔ ͕ɺઃܭΛ͢ΔͨΊͷํ਑ͳΒ͋Δఔ౓دͤूΊͨ஌ ݟΛݩʹ࡞Ε͹Ͱ͖ΔͷͰ͸ͳ͍͔ɾɾɾʁ • ϑϩϯτΤϯυͷࢦ਑Λ࡞Εͳ͍͔ɾɾɾʁ

Slide 18

Slide 18 text

ͦΜͳંʹग़ձͬͨͷ͕ ͪ͜Β DX CriteriaͱͻΖ͖͍ͩͪͱ ͷύωϧτʔΫ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

͜͜Ͱͷ࿩͠߹͍ͷ಺༰ • ըҰతͳΞϓϩʔνͰ͸ͳ͘ɺͦͷ৔ͦͷ৔ʹ Ԡͨ͡Ξϓϩʔν͕औΕΔ૊৫͕ͦ͜ڧ͍૊৫ • ڧ͍૊৫ʹͳͬͯ։ൃΛ͢Δࡍͷώϯτͱͯ͠ DX Criteria ͷΑ͏ͳࢦ਑Λ༻ҙ͍ͨ͠ • Ͱ͖Ε͹ϑϩϯτΤϯυʹಛԽͨ͠ DX Criteria ͱ͔Λݕ౼ͯ͠Έ͍ͨ

Slide 21

Slide 21 text

͜͜Ͱͷ࿩͠߹͍ͷ಺༰ • ըҰతͳΞϓϩʔνͰ͸ͳ͘ɺͦͷ৔ͦͷ৔ʹ Ԡͨ͡Ξϓϩʔν͕औΕΔ૊৫͕ͦ͜ڧ͍૊৫ • ڧ͍૊৫ʹͳͬͯ։ൃΛ͢Δࡍͷώϯτͱͯ͠ DX Criteria ͷΑ͏ͳࢦ਑Λ༻ҙ͍ͨ͠ • Ͱ͖Ε͹ϑϩϯτΤϯυʹಛԽͨ͠ DX Criteria ͱ͔Λݕ౼ͯ͠Έ͍ͨ ͡Ό͋΍ͬͯΈΕ͹͍͍ Μ͡Όͳ͍Ͱ͔͢ʁ

Slide 22

Slide 22 text

ͱͷ͜ͱͰ

Slide 23

Slide 23 text

ຊ୊: ϑϩϯτΤϯυʹ͓͚Δ DX Criteria Λ࡞ͬͨ࡞Ζ͏ͱ ͍ͯ͠Δ࿩

Slide 24

Slide 24 text

ϑϩϯτΤϯυ൛DX Criteria • ຊՈ DX Criteria ͸ߴ଎ͳԾઆݕূΛճͯ͠૊৫಺ͷૉૣ͍ݕ ূͱࣦഊͱֶͼΛ࠷େԽ͠Α͏ͱ͢ΔͨΊͷํ਑Ͱ࡞ΒΕͨ ౕ • ͦͷΤοηϯε෦෼͸࢒ͭͭ͠ɺϑϩϯτΤϯυྖҬʹಛԽ ͢Δ • ຊՈ͸ձࣾͷ࿩΋ଟ͍͕ɺϑϩϯτΤϯυͱ͍͏ྖҬʹด͡ ΔͷͰɺձࣾͷ࿩͸গͳΊ • ҰํͰσβΠϯͱͷڠۀ΍ؔ࿈෦ॺͱͷ࿩͸ଟΊ

Slide 25

Slide 25 text

ϑϩϯτΤϯυ൛ DX Criteria • ࡞੒ऀ • yosuke_furukawa • ahomu • ϨϏϡʔ • hirokidaichi

Slide 26

Slide 26 text

ϑϩϯτΤϯυ൛ DX Criteria • ओཁ5߲໨ • ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕज़ελοΫ • ϢʔβʔମݧΛࢧ͑Δඇػೳཁٻ • Ձ஋ͷσϦόϦʔΛߦ͏ϓϩηε • γεςϜɾΞϓϦέʔγϣϯӡ༻ʢΞʔΩςΫνϟʣ • νʔϜϏϧσΟϯά

Slide 27

Slide 27 text

ͪͳΈʹ·ͩ ຏ͖ࠐΈதͰ͢ʂʂʂ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੜ࢈ੑΛ্͛ΔͨΊʹٕज़໘ͰϥΠϒϥϦ΍πʔ ϧΛ࢖ͬͯରॲ͢Δ • ͨͩٯʹ͜Ε΋΍Γա͗͸஫ҙ • ΫϥΠΞϯταΠυͷར༻؀ڥɺUIͷϕετϓϥ ΫςΟεͷมԽɺϥΠϒϥϦͷΞοϓσʔτͳ Ͳɺͱʹ͔͘มߋ΍मਖ਼͕ଟ͍ՕॴͰ͋Γɺͦ͜ ʹରͯ͠Ͳ͏औΓ૊Ή͔ͱ͍͏ςʔϚ

Slide 30

Slide 30 text

ྫΛڍ͛Δ

Slide 31

Slide 31 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੩తݕࠪͱܕ෇͚ • Linter, formatter, editor, Ռͯ͸ TypeScript Ͱ΍ͬͯΔ ͔ɺɺɺͳͲɻ • TSΛ࠷ॳ͔Βج४ʹೖΕΔ͔͸໎͕ͬͨɺ΋͏ຆͲͷ ։ൃऀ͕࢖͍ͬͯΔ΋ͷͱͯ͠બఆ • ։ൃͷπʔϧΛ࢖͏ͷ͸ྑ͍͕ɺৼΓճ͞Εͳ͍Α͏ ʹ͍ͨ͠ΑͶɺͱ͍͏ࢥ͍ΛࠐΊ͍ͯΔɻ

Slide 32

Slide 32 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੩తݕࠪͱܕ෇͚ • ʢֶशͱվળʣ੩తܕ෇͚ݴޠ΍ίʔυϑΥʔϚολʔΛ༻͍ͯίʔυ ϕʔεͷಡΈ΍͢͞ͱอकੑΛ޲্͍ͤͯ͞Δ͔ • ʢϝτϦΫεʣόΫͷൃੜ཰ɺίʔυϨϏϡʔͷ࣌ؒͳͲͷϝτϦΫεΛ औಘ͠ɺ׆༻͍ͯ͠Δ͔ • ʢϓϥΫςΟεʣܕ৘ใΛAPIϨϕϧͰڞ༗͢ΔͨΊͷπʔϧΛ׆༻ͯ͠ ͍Δ͔ • ʢΞϯνύλʔϯʣ ੩తܕ੍໿Λద੾ʹ࢖༻ͯ͠ɺະવʹόάΛ๷͙͜ͱ Λ༏ઌ͍ͯ͠Δ͔ɺ͋Δ͍͸ܕ੍໿Λແࢹͯ͠ਐḿΛٸ͙܏޲͕ͳ͍͔

Slide 33

Slide 33 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ཰ • πʔϧʹΑΔޮ཰ੑͷΞοϓ͕Ͳ͜·ͰͰ͖ͯ ͍Δ͔ • ྫ͑͹ build πʔϧ͕஗͗ͨ͢Γ͠ͳ͍͔ • Mock ͱ͔Λద੾ʹ࢖ͬͯ։ൃޮ཰্͛ͯΔ͔

Slide 34

Slide 34 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ཰ • ʢֶशͱվળʣLinter, formatter ͳͲπʔϧηοτΛڞ௨ Խ͍ͯ͠Δ͔ • ʢϝτϦΫεʣπʔϧͷ࣮ߦ࣌ؒΛܭଌ͠ɺޮ཰ੑΛఆ ظతʹܭଌͰ͖͍ͯΔ͔ • ʢΞϯνύλʔϯʣҰ؏ੑͷͳ͍πʔϧબఆ΍ա৒ͳΧε λϚΠζʹΑΓɺ։ൃޮ཰͕௿Լͯ͠͠·͍ͬͯͳ͍͔

Slide 35

Slide 35 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • ٕज़τϨϯυʹৼΓճ͞Ε͍ͯͳ͍͔ • ΞϓϦέʔγϣϯͷಛੑ͸ཧղ͍ͯ͠Δͷ͔ • ࣄۀ໨ઢͰϥΠϒϥϦ΍ϑϨʔϜϫʔΫΛબ ఆ͍ͯ͠Δ͔

Slide 36

Slide 36 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • (ֶशͱվળ) ٕज़τϨϯυΛ௥੻͠ɺ৽ͨͳπʔϧ΍ϥΠϒϥ ϦͷධՁΛఆظతʹߦ͍ͬͯΔ͔ • ʢϝτϦΫεʣ طଘͷ࢖༻ٕज़ͷΞοϓσʔτස౓ɺٕज़ε λοΫͷෳࡶ͞ɺηΩϡϦςΟࣄ৅ͳͲΛධՁɾվળ͍ͯ͠Δ ͔ • ʢΞϯνύλʔϯʣྲྀߦΓͷٕज़΍࠷৽ϥΠϒϥϦΛແཧʹऔ ΓೖΕɺٕज़ελοΫ͕ա৒ʹෳࡶԽͯ͠͠·͍ͬͯͳ͍͔

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ඇػೳཁٻΛΨϯແࢹͯ͠ਐΊΔͱ݁ہग़དྷ্ ͕ͬͨ΋ͷ͕࢖͍ʹ͘͘ͳΔ • ͲͷඇػೳཁٻʹͲͷఔ౓Ԡ͑Δ΂͖ͰɺͲ͏ର ॲ͢Δ͔Λఆٛͯ͠ɺݕ౼ࡐྉʹͯ͠΋Β͍͍ͨ • ϑϩϯτΤϯυͰݴ͑͹ύϑΥʔϚϯεɺΞΫη γϏϦςΟɺϝϯςφϯαϏϦςΟɺσβΠϯɺ ͳͲͳͲͨ͘͞Μඇػೳཁٻ͕͋Δ

Slide 39

Slide 39 text

ྫΛڍ͛Δ

Slide 40

Slide 40 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ϨΠςϯγʔͱεϧʔϓοτͷ֓೦Λཧղ͠ɺԿ͕Կ Ͱ΋ ʮLighthouse 100఺ͩʂʯͱ͔ʹͳ͍ͬͯͳ͍ ͜ͱ • దٓύϑΥʔϚϯενϡʔχϯάίϯςετͳͲͰֶ ΂ΔλΠϛϯάΛ࡞ͬͯཉ͍͠ • ݱঢ়෼ੳͱ໨ඪઃఆ͕Ͱ͖Δࡐྉ͕ἧ͍ͬͯͯ΄͍͠

Slide 41

Slide 41 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ʢֶशͱվળʣCPU΍ϝϞϦɺωοτϫʔΫͱݴͬͨجຊతͳ߲໨ʹ͍ͭ ͯͷϓϩϑΝΠϧΛऔΕɺݟํʹֶ͍ͭͯश͍ͯ͠Δ͔ • ʢϝτϦΫεʣJavaScript΍CSSɺը૾ͱ͍ͬͨ੩తΞηοτͷσʔλα ΠζΛܭଌ͠ɺύϑΥʔϚϯεόδΣοτͱͯ͠༧ࢉ؅ཧ͕Ͱ͖͍ͯΔ͔ • ʢΞϯνύλʔϯʣࣗ෼͕ͨͪ഑৴͍ͯ͠Δ΢ΣϒΞϓϦέʔγϣϯ͕Ͳ Ε͘Β͍ͷϑΝΠϧαΠζΛ഑৴͍ͯ͠Δ͔Λ೺Ѳ͍ͯ͠ͳ͍ • ʢΞϯνύλʔϯʣ໨ඪΛ࣋ͨͣʹܭଌ͠ɺࡍݶͳ͘νϡʔχϯάΛ͠Α ͏ͱ͍ͯ͠Δ

Slide 42

Slide 42 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ΞΫηγϏϦςΟ • ׂΓͱ·ͩಋೖͰ͖͍ͯΔ։ൃ͕গͳ͍ྖҬ • ಛʹ։ൃ໘Ͱ͸πʔϧ͸ग़͖͍ͯͯΔ΋ͷ ͷɺຊདྷతͳҙຯͰͷΞΫηγϒϧͳΞϓϦ έʔγϣϯͷ։ൃ͸·ͩτϥΠΞϧΛ͍ͯ͠ Δ૊৫͕ଟ͍ͱ͍͏ҹ৅

Slide 43

Slide 43 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ΞΫηγϏϦςΟ • ʢϝτϦΫεʣΞΫηγϏϦςΟͷ੩తղੳΛߦ͏πʔϧΛ༻͍ͯɺఆظతʹܭଌΛߦͬͯ ͍Δ͔ • ʢϓϥΫςΟεʣ࣮૷νΣοΫϦετΛ࡞੒͠ɺ४ڌ͍ͯ͠Δ͜ͱΛ֬ೝ͍ͯ͠Δ͔ • ࢀߟ: https://waic.jp/docs/jis2016/test-guidelines/202012/ • https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/ • ʢΞϯνύλʔϯʣHTMLͷηϚϯςΟΫεΛແࢹ࣮ͨ͠૷ʹͳ͍ͬͯΔ • ʢΞϯνύλʔϯʣλονύου΍ϙΠϯςΟϯάσόΠεͰͷΈ੍ޚͰ͖ΔUIʹͳͬͯ͠ ·͍ͬͯΔ • ʢΞϯνύλʔϯʣνΣοΫπʔϧ͚ͩʹཔΓɺςετ࣮ࢪऀʹΑΔ֬ೝ͕ߦΘΕ͍ͯͳ͍

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε • CI/CDͳͲܧଓͯ͠σϦόϦʔΛߦ͏ࡍʹ΋ʮߴ ଎ʹԾઆݕূ͢Δʯ࢓૊Έ͕ඞཁʹͳΔ • ϑϩϯτΤϯυ΋ྫ֎Ͱ͸ͳ͘ɺಛʹA/Bςετ ͳͲͰ࡞ΓΛҧ͑Δͱ໰୊ʹͳΓ΍͍͢ • ଞʹ΋Τϥʔ΍ো֐ൃੜ࣌ʹΠϯϑϥʹ೚͖ͤΓ ʹ͢ΔͳͲͷରԠ͕औΒΕͯ͠·͏ͱ໰୊ʹͳΔ

Slide 46

Slide 46 text

ྫΛڍ͛Δ

Slide 47

Slide 47 text

Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε • ςετ • ʢֶशͱվળʣςετΧόϨοδج४΍ࣗಈςετΛ༻ҙ͠ɺ͜ΕΒΛܧଓతʹվળ͢ΔͨΊ ͷ޻਺͕νʔϜͰऔΒΕ͍ͯΔ͔ • ʢϝτϦΫεʣΧόϨοδΛ௥Ճͯ͠ςετ͕Ͳ͜Λ௨ա͍ͯ͠Δͷ͔֬ೝͰ͖͍ͯΔ • ʢϝτϦΫεʣ͢΂ͯͷςετ͕PR͝ͱʹ30෼Ҏ಺ͰऴΘΔ͜ͱΛ֬ೝ͍ͯ͠Δ • ʢϓϥΫςΟεʣPR͝ͱʹճ͢ςετͳͷ͔ͦΕͱ΋ఆظ࣮ߦ͢Δςετͳͷ͔Λఆ͍ٛͯ͠ Δ • ʢϓϥΫςΟεʣunit ςετ, integration ςετ, e2e ςετ, Visual Regression ςετͳͲͷ ֤छςετͷಛੑΛཧղ͠ɺద੾ʹӡ༻Ͱ͖͍ͯΔ • ʢΞϯνύλʔϯʣҰ෦ͷਓ͚͕ͩςετΛॻ͖ɺҰ෦ͷਓ͸ςετΛॻ͔ͳ͍ͱ͍ͬͨΑ͏ ʹࣗಈςετΛݸʑਓͷ౒ྗ໨ඪͳͲʹͳ͍ͬͯΔɻ

Slide 48

Slide 48 text

Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε • σϓϩΠ • ʢϓϥΫςΟεʣa/b test, feature fl ag, canary releaseͳͲ ͷࢼ࣮ͯ͠ફͨ͠ޙͰมߋ͠΍͍͢σϓϩΠΛߦ͍ͬͯΔ͔ • ʢϓϥΫςΟεʣҟৗ࣌ʹ͙͢ʹ੾Γ໭ͤΔΑ͏ʹ Blue Green Deploy ͳͲͷ࢓૊Έ͕͋Δ͔ • ʢΞϯνύλʔϯʣσϓϩΠҰճʹରͯ͠1࣌ؒҎ্ͷ࣌ؒ ͕͔͔Δ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

ྫΛڍ͛Δ

Slide 51

Slide 51 text

γεςϜɺΞϓϦέʔγϣϯӡ ༻ • BFFɺAPIઃܭ • ʢϓϥΫςΟεʣϑϩϯτΤϯυΤϯδχΞଆ͔ Β΋APIઃܭΛఏҊͰ͖Δ؀ڥʹͳ͍ͬͯΔ͔ • ʢΞϯνύλʔϯʣόοΫΤϯυΤϯδχΞ͚ͩ ͕ओಋͯ͠APIΛઃܭ͓ͯ͠ΓɺϑϩϯτΤϯυ ΤϯδχΞ͕ར༻͠ʹ͍͘ઃܭʹͳ͍ͬͯͳ͍͔

Slide 52

Slide 52 text

γεςϜɺΞϓϦέʔγϣϯӡ ༻ • Πϯϑϥ • ʢϓϥΫςΟεʣϑϩϯτΤϯυ୲౰ऀ΋ Web ʹؔΘΔΠϯϑϥͷߏ੒Λ೺ѲͰ͖͍ͯ ͯɺো֐ରԠʹࢀըͰ͖Δ • ʢΞϯνύλʔϯʣϓϩμΫτͷಛੑΛؑΈͳ ͍ըҰతʹ༻ҙ͞Εͨߏ੒͕ڧ੍͞Εͯ͠·͏

Slide 53

Slide 53 text

νʔϜɺ૊৫

Slide 54

Slide 54 text

νʔϜɺ૊৫ • ઐ໳૊৫ͷӡ༻ • ྲྀΕͷૣ͍ϑϩϯτΤϯυྖҬʹରԠ͢ΔͨΊʹ ΍͓͍ͬͯͨ΄͏͕͍͍͜ͱ • ྫ͑͹ઐ໳૊৫Λ഑ஔ͠ɺԣஅతʹؔΘΕΔΑ͏ʹ ͢ΔɺͳͲ • ͍ΘΏΔΠωʔϒϦϯάνʔϜͷΑ͏ͳӡ༻Λ૝ ఆ

Slide 55

Slide 55 text

νʔϜɺ૊৫ • ෼୲ɺ৬຿είʔϓͷఆٛ • ϑϩϯτΤϯυΤϯδχΞ͸ίϛϡχέʔγϣϯͷϋϒʹͳΓ΍͍͢ • ҰํͰྡ઀૊৫ͷ࢓ࣄ΋೚͞Ε΍͍͢ • ྫ) σΟϨΫγϣϯۀ຿ΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔ • ྫ) ϚʔέςΟϯά૊৫ଆͰඞཁͳGAͷௐࠪ΍ઃఆΛϑϩϯτΤϯ υΤϯδχΞ͕ߦ͍ͬͯΔͳͲ • ϝϯόʔ͕ຊདྷൃش͢΂͖όϦϡʔΛ્֐ͯ͠͠·͏Α͏ͳέʔε͕ ͳ͍Α͏ʹ͍ͨ͠

Slide 56

Slide 56 text

ྫ͸·ͩͳ͠ɾɾɾ Ӷҙ࡞੒தʂ

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

ࠓޙͳΜͱ͔೥಺͘Β͍ʹ ୈҰ஄ग़ͤΔΑ͏ʹ͠·͢

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

ࠓޙ

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

ϑϩϯτΤϯυͷϥΠϒϥϦ ΍ϑϨʔϜϫʔΫͷߋ৽͕େ มͰɾɾɾ ͱ͍͏ͷΛΑ͘ฉ͖·͢ɻ

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

·ͱΊ

Slide 69

Slide 69 text

·ͱΊ • ৭Μͳ։ൃ૊৫Λݟ͖͕ͯͨɺ·ͩ΍Γ͍ͨ͜ͱ͕Ͱ͖͍ͯΔͱ͍͏૊৫͸গͳ͍ • ͦͷݪҼ͸༷ʑ͕ͩɺϏδωεͱ։ൃͷ͋Δ΂͖࢟ͷΪϟοϓͰࠔ͍ͬͯΔΑ͏ʹ ݟ͑Δ • ͜Μͳ໰୊͸ҰͭͷιϦϡʔγϣϯͰͳΜͱ͔͢ΔΑ͏ͳ໰୊͡Όͳ͍ • ϘτϜΞοϓʹϝϯόʔҰਓͻͱΓ͕੒௕͢Δํ๏ͱτοϓμ΢ϯʹͦͷํ޲Λࣔ ͢ํ๏͕ඞཁ • τοϓμ΢ϯʹ΍͍ͬͯ͘ํ๏ͱͯ͠ϑϩϯτΤϯυ൛ͷDX CriteriaΛ࡞͍ͬͯΔ • ͍͔ͭ͘঺հͨ͠ͷͰɺؤுͬͯ͜Ε͔Βଓ͚͍͖ͯ·͢ɻϑΟʔυόοΫ౳͕͋ Ε͹ڭ͍͑ͯͩ͘͞