Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドのDXと今後
Search
Yosuke Furukawa
PRO
June 15, 2023
Programming
6
4.9k
フロントエンドのDXと今後
2023/6/15 に発表したフロントエンドのDXと今後についての発表です。
Yosuke Furukawa
PRO
June 15, 2023
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
160
Removing Corepack
yosuke_furukawa
PRO
9
1.3k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.5k
Strip Types と Storage
yosuke_furukawa
PRO
4
340
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.2k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
720
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.4k
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
1.3k
.NET 9アプリをCGIとして レンタルサーバーで動かす
mayuki
1
770
TypeScript でバックもやるって実際どう? 実運用で困ったこと3選
yuichiro_serita
17
7.7k
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
180
事業成長を爆速で進めてきたプロダクトエンジニアたちの成功談・失敗談
nealle
3
1.4k
Java 23の概要とJava Web Frameworkの現状 / Java 23 and Java web framework
kishida
2
400
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4k
MCP with Cloudflare Workers
yusukebe
2
200
HTTP compression in PHP and Symfony apps
dunglas
2
1.6k
CSC305 Lecture 25
javiergs
PRO
0
130
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
420
AWS認定資格を勉強した先に何があったか
satoshi256kbyte
2
210
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
430
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Raft: Consensus for Rubyists
vanstee
136
6.7k
How to Think Like a Performance Engineer
csswizardry
21
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Embracing the Ebb and Flow
colly
84
4.5k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Designing Experiences People Love
moore
138
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
800
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
ϑϩϯτΤϯυͷDX ͱࠓޙ 6/15 @ Developer Experience Day 2023
Twitter: @yosuke_furukawa Github: yosuke-furukawa
ٕज़ސΛ͍ࣾͯ͠Δ • ϦΞʔΩςΫτʹ͍ͭͯͷ • ςετͷΓํͷ • ίʔυϨϏϡʔͷΓํʹ͍ͭͯ • ΞϓϦͷύϑΥʔϚϯεΛ্͍͚͛ͨͲ...
ٕज़ސΛ͍ࣾͯ͠Δ • ϦΞʔΩςΫτʹ͍ͭͯͷ • ςετͷΓํͷ • ίʔυϨϏϡʔͷΓํʹ͍ͭͯ • ΞϓϦͷύϑΥʔϚϯεΛ্͍͚͛ͨͲ... Γ͍ͨ։ൃ͕Ͱ͖͍ͯͳ͍
ݪҼ༷ʑ • ϝϯόʔͷशख़͕Γͳ͍ • ϓϩδΣΫτͷ͕࣌ؒΓͳ͍ • ඇػೳཁ݅ͷॏཁੑΛཧղͯ͠Β͑ͳ͍ • աڈͷ։ൃϓϩηε͔Βൈ͚ग़ͤͳ͍
ͳΜͰ "ͦΕ" ͕͍ͨ͠ͷʁ • ։ൃͷੜ࢈ੑΛ্͍͛ͨ • ͨͩ͜ͷੜ࢈ੑͱ͍͏ݴ༿ࣗମ͕ଟ༷ͳҙຯ ΛؚΜͰ͍Δ • ͕࣌ؒ࣠ଘࡏ͍ͯͯ͠ɺͦ͜ΛͲ͏Δ͔ʹ
ΑͬͯมΘΔ
։ൃͷੜ࢈ੑΛ্͍͛ͨ • ্͛ͯͲ͏͍ͨ͠ʁ • ͬͱΞτϓοτͯ͠ΞτΧϜΛՔ͍͗ͨ • Ծઆ => ݕূͷϓϩηεΛԿճ͍ͨ͠ •
ଞʹʁ • Ϟμϯͳ։ൃΛֶͿ͜ͱͰٕज़ऀͱֶͯ͠ͼΛಘ͍ͨ • ΠέͯΔϑϨʔϜϫʔΫʹ͢Δ͜ͱͰٕज़ϓϨθϯεΛ্͛ͯ ࠾༻ʹߩݙ͍ͨ͠
։ൃͷੜ࢈ੑΛ্͍͛ͨ • ্͛ͯͲ͏͍ͨ͠ʁ • ͬͱΞτϓοτͯ͠ΞτΧϜΛՔ͍͗ͨ • Ծઆ => ݕূͷϓϩηεΛԿճ͍ͨ͠ •
ଞʹʁ • Ϟμϯͳ։ൃΛֶͿ͜ͱͰٕज़ऀͱֶͯ͠ͼΛಘ͍ͨ • ΠέͯΔϑϨʔϜϫʔΫʹ͢Δ͜ͱͰٕज़ϓϨθϯεΛ্͛ͯ ࠾༻ʹߩݙ͍ͨ͠ ۩ମతͳՁΛఏڙ͍ͨ͠ ͋Δ͖࢟ʹ͍ͨ͠
ՁΛఏڙ͢Δ͜ͱΛ value ͔ΒདྷΔͱ͍͏ҙຯͰ valid ͳঢ়ଶΛࢦ͢
ਖ਼͋͘͠Δ͖࢟ʹ͢Δ͜ͱ very ͔Β͖͓ͯΓɺ veri fi ed ͳঢ়ଶΛࢦ͢
Ձͷఏڙͱ͋Δ͖࢟ͷٻ • ͜ΕΒͲͪΒ͔͕͚͍ܽͯͯɺͲͪ Βୡ͍ͯ͘͠ඞཁ͕͋Δ • ͪΖΜϏδωεͱ͍͏ҙຯͰՁͷఏڙ ͷํʹॏ͕ஔ͔ΕΔ • ҰํͰ͋Δ͖࢟Ͱͳ͍ͱঃʑʹͷͮ͘ Γ͔Βݱͷϝϯόʔ͕Εͯߦͬͯ͠·͏
͜ͷόϥϯεΛͲ͏อ͔ͭ ͬͺΓ͍͠
2ͭͷΞϓϩʔνͰ ղܾ͍͖͍ͯͨ͠
1. ϘτϜΞοϓ
ϘτϜΞοϓͷΞϓϩʔν • ݱͷϨϕϧͰݟΛͨΊ্͍ͯ͛ͯ͘ • ษڧձͩͬͨΓϋοΧιϯͩͬͨΓ༗ޮ • ڭ͑ͯ͘ΕΔਓΛั·͑ͯڭ͑ͯ͏ํ๏ ͋Δ
2. τοϓμϯ
τοϓμϯͷΞϓϩʔν • ࢦͱͳΔͷΛܾΊ͔ͯͦ͜Β͓Ζ͍͖͍ͯͨ͠ • ϑϩϯτΤϯυͷઃܭʹࢦΛͨͤΒΕ͍ͯͳ͍͔ Βํ͕ϒϨΔ • ઃܭͦͷͷΞϓϦέʔγϣϯಛੑʹدͬͯมΘΔ ͕ɺઃܭΛ͢ΔͨΊͷํͳΒ͋ΔఔدͤूΊͨ ݟΛݩʹ࡞ΕͰ͖ΔͷͰͳ͍͔ɾɾɾʁ
• ϑϩϯτΤϯυͷࢦΛ࡞Εͳ͍͔ɾɾɾʁ
ͦΜͳંʹग़ձͬͨͷ͕ ͪ͜Β DX CriteriaͱͻΖ͖͍ͩͪͱ ͷύωϧτʔΫ
ύωϧτʔΫ • ϑϩϯτΤϯυͷ৫ͷ(postdev) https://blog.nijibox.jp/article/postdev1/
͜͜Ͱͷ͠߹͍ͷ༰ • ըҰతͳΞϓϩʔνͰͳ͘ɺͦͷͦͷʹ Ԡͨ͡Ξϓϩʔν͕औΕΔ৫͕ͦ͜ڧ͍৫ • ڧ͍৫ʹͳͬͯ։ൃΛ͢Δࡍͷώϯτͱͯ͠ DX Criteria ͷΑ͏ͳࢦΛ༻ҙ͍ͨ͠ •
Ͱ͖ΕϑϩϯτΤϯυʹಛԽͨ͠ DX Criteria ͱ͔Λݕ౼ͯ͠Έ͍ͨ
͜͜Ͱͷ͠߹͍ͷ༰ • ըҰతͳΞϓϩʔνͰͳ͘ɺͦͷͦͷʹ Ԡͨ͡Ξϓϩʔν͕औΕΔ৫͕ͦ͜ڧ͍৫ • ڧ͍৫ʹͳͬͯ։ൃΛ͢Δࡍͷώϯτͱͯ͠ DX Criteria ͷΑ͏ͳࢦΛ༻ҙ͍ͨ͠ •
Ͱ͖ΕϑϩϯτΤϯυʹಛԽͨ͠ DX Criteria ͱ͔Λݕ౼ͯ͠Έ͍ͨ ͡Ό͋ͬͯΈΕ͍͍ Μ͡Όͳ͍Ͱ͔͢ʁ
ͱͷ͜ͱͰ
ຊ: ϑϩϯτΤϯυʹ͓͚Δ DX Criteria Λ࡞ͬͨ࡞Ζ͏ͱ ͍ͯ͠Δ
ϑϩϯτΤϯυ൛DX Criteria • ຊՈ DX Criteria ߴͳԾઆݕূΛճͯ͠৫ͷૉૣ͍ݕ ূͱࣦഊͱֶͼΛ࠷େԽ͠Α͏ͱ͢ΔͨΊͷํͰ࡞ΒΕͨ ౕ •
ͦͷΤοηϯε෦ͭͭ͠ɺϑϩϯτΤϯυྖҬʹಛԽ ͢Δ • ຊՈձࣾͷଟ͍͕ɺϑϩϯτΤϯυͱ͍͏ྖҬʹด͡ ΔͷͰɺձࣾͷগͳΊ • ҰํͰσβΠϯͱͷڠۀؔ࿈෦ॺͱͷଟΊ
ϑϩϯτΤϯυ൛ DX Criteria • ࡞ऀ • yosuke_furukawa • ahomu •
ϨϏϡʔ • hirokidaichi
ϑϩϯτΤϯυ൛ DX Criteria • ओཁ5߲ • ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕज़ελοΫ • ϢʔβʔମݧΛࢧ͑Δඇػೳཁٻ •
ՁͷσϦόϦʔΛߦ͏ϓϩηε • γεςϜɾΞϓϦέʔγϣϯӡ༻ʢΞʔΩςΫνϟʣ • νʔϜϏϧσΟϯά
ͪͳΈʹ·ͩ ຏ͖ࠐΈதͰ͢ʂʂʂ
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δ ٕज़ελοΫ
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੜ࢈ੑΛ্͛ΔͨΊʹٕज़໘ͰϥΠϒϥϦπʔ ϧΛͬͯରॲ͢Δ • ͨͩٯʹ͜ΕΓա͗ҙ • ΫϥΠΞϯταΠυͷར༻ڥɺUIͷϕετϓϥ ΫςΟεͷมԽɺϥΠϒϥϦͷΞοϓσʔτͳ
Ͳɺͱʹ͔͘มߋमਖ਼͕ଟ͍ՕॴͰ͋Γɺͦ͜ ʹରͯ͠Ͳ͏औΓΉ͔ͱ͍͏ςʔϚ
ྫΛڍ͛Δ
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੩తݕࠪͱܕ͚ • Linter, formatter, editor, Ռͯ TypeScript
ͰͬͯΔ ͔ɺɺɺͳͲɻ • TSΛ࠷ॳ͔Βج४ʹೖΕΔ͔໎͕ͬͨɺ͏ຆͲͷ ։ൃऀ͕͍ͬͯΔͷͱͯ͠બఆ • ։ൃͷπʔϧΛ͏ͷྑ͍͕ɺৼΓճ͞Εͳ͍Α͏ ʹ͍ͨ͠ΑͶɺͱ͍͏ࢥ͍ΛࠐΊ͍ͯΔɻ
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੩తݕࠪͱܕ͚ • ʢֶशͱվળʣ੩తܕ͚ݴޠίʔυϑΥʔϚολʔΛ༻͍ͯίʔυ ϕʔεͷಡΈ͢͞ͱอकੑΛ্͍ͤͯ͞Δ͔ • ʢϝτϦΫεʣόΫͷൃੜɺίʔυϨϏϡʔͷ࣌ؒͳͲͷϝτϦΫεΛ औಘ͠ɺ׆༻͍ͯ͠Δ͔
• ʢϓϥΫςΟεʣܕใΛAPIϨϕϧͰڞ༗͢ΔͨΊͷπʔϧΛ׆༻ͯ͠ ͍Δ͔ • ʢΞϯνύλʔϯʣ ੩తܕ੍Λదʹ༻ͯ͠ɺະવʹόάΛ͙͜ͱ Λ༏ઌ͍ͯ͠Δ͔ɺ͋Δ͍ܕ੍Λແࢹͯ͠ਐḿΛٸ͙͕ͳ͍͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ • πʔϧʹΑΔޮੑͷΞοϓ͕Ͳ͜·ͰͰ͖ͯ ͍Δ͔ • ྫ͑ build
πʔϧ͕͗ͨ͢Γ͠ͳ͍͔ • Mock ͱ͔Λదʹͬͯ։ൃޮ্͛ͯΔ͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ • ʢֶशͱվળʣLinter, formatter ͳͲπʔϧηοτΛڞ௨ Խ͍ͯ͠Δ͔ •
ʢϝτϦΫεʣπʔϧͷ࣮ߦ࣌ؒΛܭଌ͠ɺޮੑΛఆ ظతʹܭଌͰ͖͍ͯΔ͔ • ʢΞϯνύλʔϯʣҰ؏ੑͷͳ͍πʔϧબఆաͳΧε λϚΠζʹΑΓɺ։ൃޮ͕Լͯ͠͠·͍ͬͯͳ͍͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • ٕज़τϨϯυʹৼΓճ͞Ε͍ͯͳ͍͔ • ΞϓϦέʔγϣϯͷಛੑཧղ͍ͯ͠Δͷ͔ • ࣄۀઢͰϥΠϒϥϦϑϨʔϜϫʔΫΛબ
ఆ͍ͯ͠Δ͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • (ֶशͱվળ) ٕज़τϨϯυΛ͠ɺ৽ͨͳπʔϧϥΠϒϥ ϦͷධՁΛఆظతʹߦ͍ͬͯΔ͔ • ʢϝτϦΫεʣ
طଘͷ༻ٕज़ͷΞοϓσʔτසɺٕज़ε λοΫͷෳࡶ͞ɺηΩϡϦςΟࣄͳͲΛධՁɾվળ͍ͯ͠Δ ͔ • ʢΞϯνύλʔϯʣྲྀߦΓͷٕज़࠷৽ϥΠϒϥϦΛແཧʹऔ ΓೖΕɺٕज़ελοΫ͕աʹෳࡶԽͯ͠͠·͍ͬͯͳ͍͔
ϢʔβʔମݧΛࢧ͑Δ ඇػೳཁٻ
ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ඇػೳཁٻΛΨϯແࢹͯ͠ਐΊΔͱ݁ہग़དྷ্ ͕ͬͨͷ͕͍ʹ͘͘ͳΔ • ͲͷඇػೳཁٻʹͲͷఔԠ͑Δ͖ͰɺͲ͏ର ॲ͢Δ͔Λఆٛͯ͠ɺݕ౼ࡐྉʹͯ͠Β͍͍ͨ • ϑϩϯτΤϯυͰݴ͑ύϑΥʔϚϯεɺΞΫη
γϏϦςΟɺϝϯςφϯαϏϦςΟɺσβΠϯɺ ͳͲͳͲͨ͘͞Μඇػೳཁٻ͕͋Δ
ྫΛڍ͛Δ
ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ϨΠςϯγʔͱεϧʔϓοτͷ֓೦Λཧղ͠ɺԿ͕Կ Ͱ ʮLighthouse 100ͩʂʯͱ͔ʹͳ͍ͬͯͳ͍ ͜ͱ
• దٓύϑΥʔϚϯενϡʔχϯάίϯςετͳͲͰֶ ΔλΠϛϯάΛ࡞ͬͯཉ͍͠ • ݱঢ়ੳͱඪઃఆ͕Ͱ͖Δࡐྉ͕ἧ͍ͬͯͯ΄͍͠
ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ʢֶशͱվળʣCPUϝϞϦɺωοτϫʔΫͱݴͬͨجຊతͳ߲ʹ͍ͭ ͯͷϓϩϑΝΠϧΛऔΕɺݟํʹֶ͍ͭͯश͍ͯ͠Δ͔ • ʢϝτϦΫεʣJavaScriptCSSɺը૾ͱ͍ͬͨ੩తΞηοτͷσʔλα ΠζΛܭଌ͠ɺύϑΥʔϚϯεόδΣοτͱͯ͠༧ࢉཧ͕Ͱ͖͍ͯΔ͔
• ʢΞϯνύλʔϯʣ͕ࣗͨͪ৴͍ͯ͠ΔΣϒΞϓϦέʔγϣϯ͕Ͳ Ε͘Β͍ͷϑΝΠϧαΠζΛ৴͍ͯ͠Δ͔ΛѲ͍ͯ͠ͳ͍ • ʢΞϯνύλʔϯʣඪΛ࣋ͨͣʹܭଌ͠ɺࡍݶͳ͘νϡʔχϯάΛ͠Α ͏ͱ͍ͯ͠Δ
ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ΞΫηγϏϦςΟ • ׂΓͱ·ͩಋೖͰ͖͍ͯΔ։ൃ͕গͳ͍ྖҬ • ಛʹ։ൃ໘Ͱπʔϧग़͖͍ͯͯΔͷ ͷɺຊདྷతͳҙຯͰͷΞΫηγϒϧͳΞϓϦ έʔγϣϯͷ։ൃ·ͩτϥΠΞϧΛ͍ͯ͠
Δ৫͕ଟ͍ͱ͍͏ҹ
ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ΞΫηγϏϦςΟ • ʢϝτϦΫεʣΞΫηγϏϦςΟͷ੩తղੳΛߦ͏πʔϧΛ༻͍ͯɺఆظతʹܭଌΛߦͬͯ ͍Δ͔ • ʢϓϥΫςΟεʣ࣮νΣοΫϦετΛ࡞͠ɺ४ڌ͍ͯ͠Δ͜ͱΛ֬ೝ͍ͯ͠Δ͔ •
ࢀߟ: https://waic.jp/docs/jis2016/test-guidelines/202012/ • https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/ • ʢΞϯνύλʔϯʣHTMLͷηϚϯςΟΫεΛແࢹ࣮ͨ͠ʹͳ͍ͬͯΔ • ʢΞϯνύλʔϯʣλονύουϙΠϯςΟϯάσόΠεͰͷΈ੍ޚͰ͖ΔUIʹͳͬͯ͠ ·͍ͬͯΔ • ʢΞϯνύλʔϯʣνΣοΫπʔϧ͚ͩʹཔΓɺςετ࣮ࢪऀʹΑΔ֬ೝ͕ߦΘΕ͍ͯͳ͍
ՁͷσϦόϦʔΛߦ͏ ϓϩηε
ՁͷσϦόϦʔΛߦ͏ϓϩη ε • CI/CDͳͲܧଓͯ͠σϦόϦʔΛߦ͏ࡍʹʮߴ ʹԾઆݕূ͢ΔʯΈ͕ඞཁʹͳΔ • ϑϩϯτΤϯυྫ֎Ͱͳ͘ɺಛʹA/Bςετ ͳͲͰ࡞ΓΛҧ͑ΔͱʹͳΓ͍͢ • ଞʹΤϥʔোൃੜ࣌ʹΠϯϑϥʹ͖ͤΓ
ʹ͢ΔͳͲͷରԠ͕औΒΕͯ͠·͏ͱʹͳΔ
ྫΛڍ͛Δ
ՁͷσϦόϦʔΛߦ͏ϓϩη ε • ςετ • ʢֶशͱվળʣςετΧόϨοδج४ࣗಈςετΛ༻ҙ͠ɺ͜ΕΒΛܧଓతʹվળ͢ΔͨΊ ͷ͕νʔϜͰऔΒΕ͍ͯΔ͔ • ʢϝτϦΫεʣΧόϨοδΛՃͯ͠ςετ͕Ͳ͜Λ௨ա͍ͯ͠Δͷ͔֬ೝͰ͖͍ͯΔ •
ʢϝτϦΫεʣͯ͢ͷςετ͕PR͝ͱʹ30ҎͰऴΘΔ͜ͱΛ֬ೝ͍ͯ͠Δ • ʢϓϥΫςΟεʣPR͝ͱʹճ͢ςετͳͷ͔ͦΕͱఆظ࣮ߦ͢Δςετͳͷ͔Λఆ͍ٛͯ͠ Δ • ʢϓϥΫςΟεʣunit ςετ, integration ςετ, e2e ςετ, Visual Regression ςετͳͲͷ ֤छςετͷಛੑΛཧղ͠ɺదʹӡ༻Ͱ͖͍ͯΔ • ʢΞϯνύλʔϯʣҰ෦ͷਓ͚͕ͩςετΛॻ͖ɺҰ෦ͷਓςετΛॻ͔ͳ͍ͱ͍ͬͨΑ͏ ʹࣗಈςετΛݸʑਓͷྗඪͳͲʹͳ͍ͬͯΔɻ
ՁͷσϦόϦʔΛߦ͏ϓϩη ε • σϓϩΠ • ʢϓϥΫςΟεʣa/b test, feature fl ag,
canary releaseͳͲ ͷࢼ࣮ͯ͠ફͨ͠ޙͰมߋ͍͢͠σϓϩΠΛߦ͍ͬͯΔ͔ • ʢϓϥΫςΟεʣҟৗ࣌ʹ͙͢ʹΓͤΔΑ͏ʹ Blue Green Deploy ͳͲͷΈ͕͋Δ͔ • ʢΞϯνύλʔϯʣσϓϩΠҰճʹରͯ͠1࣌ؒҎ্ͷ࣌ؒ ͕͔͔Δ
γεςϜɺΞϓϦέʔγϣϯ ӡ༻ʢΞʔΩςΫνϟʣ
ྫΛڍ͛Δ
γεςϜɺΞϓϦέʔγϣϯӡ ༻ • BFFɺAPIઃܭ • ʢϓϥΫςΟεʣϑϩϯτΤϯυΤϯδχΞଆ͔ ΒAPIઃܭΛఏҊͰ͖Δڥʹͳ͍ͬͯΔ͔ • ʢΞϯνύλʔϯʣόοΫΤϯυΤϯδχΞ͚ͩ ͕ओಋͯ͠APIΛઃܭ͓ͯ͠ΓɺϑϩϯτΤϯυ
ΤϯδχΞ͕ར༻͠ʹ͍͘ઃܭʹͳ͍ͬͯͳ͍͔
γεςϜɺΞϓϦέʔγϣϯӡ ༻ • Πϯϑϥ • ʢϓϥΫςΟεʣϑϩϯτΤϯυ୲ऀ Web ʹؔΘΔΠϯϑϥͷߏΛѲͰ͖͍ͯ ͯɺোରԠʹࢀըͰ͖Δ •
ʢΞϯνύλʔϯʣϓϩμΫτͷಛੑΛؑΈͳ ͍ըҰతʹ༻ҙ͞Εͨߏ͕ڧ੍͞Εͯ͠·͏
νʔϜɺ৫
νʔϜɺ৫ • ઐ৫ͷӡ༻ • ྲྀΕͷૣ͍ϑϩϯτΤϯυྖҬʹରԠ͢ΔͨΊʹ ͓͍ͬͯͨ΄͏͕͍͍͜ͱ • ྫ͑ઐ৫Λஔ͠ɺԣஅతʹؔΘΕΔΑ͏ʹ ͢ΔɺͳͲ •
͍ΘΏΔΠωʔϒϦϯάνʔϜͷΑ͏ͳӡ༻Λ ఆ
νʔϜɺ৫ • ୲ɺ৬είʔϓͷఆٛ • ϑϩϯτΤϯυΤϯδχΞίϛϡχέʔγϣϯͷϋϒʹͳΓ͍͢ • ҰํͰྡ৫ͷࣄ͞Ε͍͢ • ྫ) σΟϨΫγϣϯۀΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔ
• ྫ) ϚʔέςΟϯά৫ଆͰඞཁͳGAͷௐࠪઃఆΛϑϩϯτΤϯ υΤϯδχΞ͕ߦ͍ͬͯΔͳͲ • ϝϯόʔ͕ຊདྷൃش͖͢όϦϡʔΛ્ͯ͠͠·͏Α͏ͳέʔε͕ ͳ͍Α͏ʹ͍ͨ͠
ྫ·ͩͳ͠ɾɾɾ Ӷҙ࡞தʂ
͜Μͳײ͡ͰӶҙ࡞தͰ͢
ࠓޙͳΜͱ͔͘Β͍ʹ ୈҰग़ͤΔΑ͏ʹ͠·͢
ͨͩ͜ͷج४͋͘·Ͱ ج४Ͱ͋ͬͯʮ͜Ε͕ୡͰ ͖͍ͯͳ͍͔Βବͳ։ൃʯ ͱ͍͏෩ʹଊ͑ͯ΄͘͠ͳ͍ Ͱ͢ɻ
ຊͷҙຯͰڧ͍৫ըҰ తʹج४ʹै͏৫Ͱͳ ͘ɺج४Λॊೈʹଊ͑ͯࣗ ͨͪʹΧελϚΠζͰ͖Δ ৫ͩͱࢥ͍ͬͯ·͢ɻ
͕ࣗݟ͖ͯͨ։ൃͷதͰ ࠔͬͯΔਓͨͪΛࠓޙগ͠Ͱ ॿ͚ʹͳΕͱࢥ͍·͢ɻ
ࠓޙ
ࣗͷ؍ଌൣғͰͲΜͲΜ ϦΞʔΩςΫτͳͲ͕ٻΊΒ Ε͍ͯΔ͕ɺਖ਼ͦ͜·Ͱຖ ճඞཁͳͷ͔ʁͱࢥͬͨΓ͠ ·͢ɻ
ϑϩϯτΤϯυͷϥΠϒϥϦ ϑϨʔϜϫʔΫͷߋ৽͕େ มͰɾɾɾ ͱ͍͏ͷΛΑ͘ฉ͖·͢ɻ
Xxx ͕Φϫίϯ͔ͩΒɺ৽͠ ͍yyyʹΖ͏ɻͰͳ͘ɺ ͦͦϦΞʔΩ͕ඞཁͳͷ ͔Λߟ͑ΒΕΔΑ͏ͳ৫ ϝϯόʔΛ࡞͍͖͍ͬͯͨͳ ͱࢥ͍ͬͯ·͢ɻ
ͦ͏͡Όͳ͍ͱ ϑϩϯτΤϯυ։ൃͦͷͷ ͕ࣗॏͰ௵ΕΔΜ͡Όͳ͍͔ ͱݒ೦͍ͯ͠·͢ɻ
৭ΜͳΞϓϩʔνΛऔͬͯগ ͠Ͱྑ͍͖͍ͯͨ͘͠ͱ ࢥ͍ͬͯ·͢ɻ
·ͱΊ
·ͱΊ • ৭Μͳ։ൃ৫Λݟ͖͕ͯͨɺ·ͩΓ͍ͨ͜ͱ͕Ͱ͖͍ͯΔͱ͍͏৫গͳ͍ • ͦͷݪҼ༷ʑ͕ͩɺϏδωεͱ։ൃͷ͋Δ͖࢟ͷΪϟοϓͰࠔ͍ͬͯΔΑ͏ʹ ݟ͑Δ • ͜ΜͳҰͭͷιϦϡʔγϣϯͰͳΜͱ͔͢ΔΑ͏ͳ͡Όͳ͍ • ϘτϜΞοϓʹϝϯόʔҰਓͻͱΓ͕͢Δํ๏ͱτοϓμϯʹͦͷํΛࣔ
͢ํ๏͕ඞཁ • τοϓμϯʹ͍ͬͯ͘ํ๏ͱͯ͠ϑϩϯτΤϯυ൛ͷDX CriteriaΛ࡞͍ͬͯΔ • ͍͔ͭ͘հͨ͠ͷͰɺؤுͬͯ͜Ε͔Βଓ͚͍͖ͯ·͢ɻϑΟʔυόοΫ͕͋ Εڭ͍͑ͯͩ͘͞