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
3.8k
フロントエンドのDXと今後
2023/6/15 に発表したフロントエンドのDXと今後についての発表です。
Yosuke Furukawa
PRO
June 15, 2023
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
AppRouter Panel Talk
yosuke_furukawa
PRO
1
440
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.2k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
2.9k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.1k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.7k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.3k
Deep Dive International Conference
yosuke_furukawa
PRO
0
100
フロントエンドリアーキテクトの話
yosuke_furukawa
PRO
18
8.9k
Other Decks in Programming
See All in Programming
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
100
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
850
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
VS Code をプロダクトにどう取り込むか
onomax
1
630
Goのエラースタックトレースの歴史と今後
sonatard
9
1.7k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
490
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
400
Ruby Function Composition
bkuhlmann
1
340
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
320
Featured
See All Featured
Embracing the Ebb and Flow
colly
80
4.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Clear Off the Table
cherdarchuk
85
310k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Web Components: a chance to create the future
zenorocha
306
41k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
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Λ࡞͍ͬͯΔ • ͍͔ͭ͘հͨ͠ͷͰɺؤுͬͯ͜Ε͔Βଓ͚͍͖ͯ·͢ɻϑΟʔυόοΫ͕͋ Εڭ͍͑ͯͩ͘͞