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
フロントエンドの開発生産性とは
Search
Yosuke Furukawa
PRO
September 20, 2023
Technology
18
11k
フロントエンドの開発生産性とは
2023/09/21 @ Findy のカンファレンス
Yosuke Furukawa
PRO
September 20, 2023
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.7k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
190
Removing Corepack
yosuke_furukawa
PRO
9
1.4k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.6k
Strip Types と Storage
yosuke_furukawa
PRO
4
370
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.3k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
750
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.7k
Other Decks in Technology
See All in Technology
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
320
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.1k
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
2.3k
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
730
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
16
3.8k
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
250
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.4k
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
210
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
6.2k
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
250
Goで作って学ぶWebSocket
ryuichi1208
0
170
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
240
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Become a Pro
speakerdeck
PRO
26
5.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Gamification - CAS2011
davidbonilla
80
5.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Writing Fast Ruby
sferik
628
61k
Embracing the Ebb and Flow
colly
84
4.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
BBQ
matthewcrist
87
9.5k
Scaling GitHub
holman
459
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Transcript
ϑϩϯτΤϯυͷ։ൃ ੜ࢈ੑͱ 2023/09/21 @ Findy Online Conference
X(Twitter): @yosuke_furukawa Github: yosuke-furukawa
JSConf.jp ticket page is open. ࠓΦϑϥΠϯͱΦϯϥΠϯ ͷϋΠϒϦου։࠵༧ఆ ΦϯϥΠϯ10݄ࠒʹެ։͠· ͢ɻ ઌߦͯ͠དྷͯ͘ΕΔํࠓͷ
ϖʔδ͔Βདྷ͍ͯͩ͘͞ʂ
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϑϩϯτΤϯυͷ։ൃੜ࢈ੑͱʮҠΓมΘ Γ͕ܹ͘͠ɺ͓ͯͳ͠Λେࣄʹ͠ͳ͍ͱ͍ ͚ͳ͍ྖҬͷதͰɺ։ൃऀͷମݧΛྑͯ͘͠ ΞτϓοτͷޮΛߴΊΔ͜ͱʯΛࢦͯ͠ ͍Δʢ͍ʣɻ
։ൃͷੜ࢈ੑͱ
։ൃͷੜ࢈ੑͱ • ͦͦੜ࢈ੑ͏͢Ͱʹ͕ܾࣜ·ͬͯ Δɻ • ੜ࢈ੑ = Ξτϓοτ/Πϯϓοτ
։ൃͷੜ࢈ੑͱ • ΞτϓοτԿͰଌΔͷ͔ʁ • ίʔυͷྔʁ • PRʁը໘ʁίϯϙʔωϯτʁ • ετʔϦʔϙΠϯτʁ •
ސ٬ຬʁ
։ൃͷੜ࢈ੑͱ • ΠϯϓοτԿͰଌΔͷ͔ʁ • ࿑ಇ࣌ؒʁ࿑ಇਓʁ • ։ൃਓ݅අʁ • ૯ࣄۀίετʁ
։ൃͷੜ࢈ੑͱ • ੜ࢈ੑ = Ξτϓοτ/Πϯϓοτ • ࣜ୯७ͦ͏ʹݟ͑Δ͕ɺ࣮ࡍʹΞτ ϓοτͱΠϯϓοτ։ൃ৫ʹΑͬͯଊ͑ ํ͕ҟͳΔɻ •
શʹϒϨͨ··ͩͱఆࣜԽ͠ʹ͍͘ͷͰɺ ͋Δఔݟ͑ΔԽ͠Α͏ͱͨ͠ࢼΈ͋Δɻ
։ൃͷੜ࢈ੑͱ • Lean ͱ DevOps ͷՊֶͷྫ: • 4ͭͷଌఆج४Λஔ͍ͯ։ൃ৫ͷύϑΥʔ ϚϯεΛଌఆ͍ͯ͠Δɻ •
ϦʔυλΠϜɺσϓϩΠස ฏۉम෮࣌ؒɺมߋࣦഊ https://book.impress.co.jp/books/1118101029
։ൃͷੜ࢈ੑͱ • Lean ͱ DevOps ͷՊֶͷྫ: •
։ൃͷੜ࢈ੑͱ • Lean ͱ DevOps ͷՊֶͷྫ: • ੜ࢈ੑ͕ߴ͍ঢ়ଶͱɺσϓϩΠස͕ଟ͘ɺมߋʹ͔͔Δ͕࣌ؒগ ͳ͘ɺमਖ਼͕ඞཁʹͳͬͨͱ͖ૣ͘ɺࣦͦͦഊ͕গͳ͍ঢ়ଶ
։ൃͷੜ࢈ੑͱ • Lean ͱ DevOps ͷՊֶͷྫ: • ͞Βʹ໘ന͍ͷ͜͏͍ͬͨΞτϓοτ͕ ੑͷߴ͍৫จԽͷܗैۀһຬʹ ؔ࿈͢Δͱ͍͏͕هࡌ͞Ε͍ͯΔ
• ։ൃͷੜ࢈ੑʹ։ൃऀ͕ಇ͖͢͞৫ ࣗମͷจԽ͕ؔΘ͍ͬͯΔͱ͍͏͕ग़ͯ͘Δ
։ൃͷੜ࢈ੑͱ • SPACE ͷྫ (2021ͷจ): https://dl.acm.org/doi/10.1145/3454122.3454124
։ൃͷੜ࢈ੑͱ • SPACE ͷྫ (2021ͷจ): • Ξτϓοτͷྔ͚ͩʹ͢ΔͷͰ ͳ͘ɺଞʹ͍͔ͭ͘ͷࢦඪʹͯͦ͠ͷ ࢦඪΛ৫نʹԠͯ͡બΔΑ͏ʹ͠Α ͏ͱ͍͏ߟ͑ํ
։ൃͷੜ࢈ੑͱ • SPACE ͷྫ (2021ͷจ): • Satisfaction & Well-Being:
։ൃऀ͕ͲΕ͚͔ͩͤɹʢྫɿඞཁͳπʔϧΛબ͍ͯΔ͔ɺνʔϜͷNPSͲ͏͔ͳͲʣ • Performance: ॻ͍ͨίʔυ͕ͲΕ͚ͩͪΌΜͱϫʔΫ͔ͨ͠ɹʢྫɿόάൃੜ݅ɺސ٬ຬɺαʔϏεՔ ಇͳͲʣ • Activity: ΞτϓοτͷɹʢྫɿɹPRϚʔδɺίϛοτɺσϓϩΠසͳͲʣ • Communication & Collaboration: ίϛϡχέʔγϣϯͱڠྗʢྫɿΦϯϘʔσΟϯάͷ࣌ؒମݧɺίʔυϨϏϡʔͷ࣭ͱମݧɺ PRͷϚʔδ͞ΕΔ·Ͱͷ࣌ؒͳͲʣ • Ef fi ciency & Flow: ޮͱ࡞ۀϑϩʔʢྫɿίʔυϨϏϡʔλΠϛϯάɺׂΓࠐΈλεΫͷগͳ͞ʣ
։ൃͷੜ࢈ੑͱ • SPACE ͷྫ (2021ͷจ): • GitHub Copilot ಋೖͷධՁSPACEͰߦΘΕͨྫ͕͋Δ •
ͪͳΈʹͦͷ࣌ͷධՁͪ͜Βɻ https://github.blog/2022-09-07-research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/
։ൃͷੜ࢈ੑͱ • Ξτϓοτ / Πϯϓοτͱ͍͏Ұݟ୯७ͳࣜͰද͞Ε͍ͯΔ ͕ɺ࣮ࡍʹ͔ͳΓ։ൃ৫ґଘ • ͏গ͠۩ମԽͨ͠ྫͱͯ͠LeanͱDevOpsͷՊֶ SPACEϑ ϨʔϜϫʔΫͱ͍ͬͨऔΓΈ͕͋Δ
• ͜ΕΒͷऔΓΈͷதͰ୯ͳΔΞτϓοτʹண͍ͯ͠ͳ ͍ɻ • ಛʹ։ൃऀͷຬίϛϡχέʔγϣϯɺจԽͱ͍ͬͨपล ͷঢ়گʹ͍ͯ͠Δ
։ൃͷੜ࢈ੑͱ • ࠷ۙ͏͢ͰʹΞτϓοτ/Πϯϓοτͷ୯ ७ͳࣜͷ͜ͱΛࢦ͍ͯ͠ͳ͍ • ͦΕΒΛऔΓר͘पลͷڥɺจԽɺ৫ɺݖݶ ͳͲͷෳ߹తͳཁૉΛΈ߹Θͤͯදݱ͍ͯ͠Δ • ͜ΕΒΛؙͬͱͻͬ͘ΔΊͯɺ։ൃऀମݧ ʢDeveloper
ExperienceʣͱݴͬͨΓ͢Δ
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ։ൃͷੜ࢈ੑٴͼ։ൃऀମݧͱ͍͏؍Ͱݴ͑ ಛʹϑϩϯτΤϯυόοΫΤϯυؔ ͳ͍ • ͨͩϑϩϯτΤϯυ։ൃπʔϧɺϕετϓϥΫ ςΟεΞʔΩςΫνϟͷҠΓมΘΓ͕ܹ͍͠ • ͦΕʹͬͯຬӨڹΛड͚͍͢
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ։ൃϥΠϒϥϦฤ • ίϯϙʔωϯτϥΠϒϥϦͷมભʢBackbone, Angular, Vue, Reactʣ
• ঢ়ଶཧϥΠϒϥϦͷมભʢRedux, fl ux, Recoil, Jotaiʣ • CSS पลϥΠϒϥϦɾπʔϧͷมભʢSass, CSS Modules, vanilla- extract, Tailwind etcʣ • ϝλϑϨʔϜϫʔΫͷมભʢNuxt.js, Next.js, Remix)
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ඇػೳཁٻฤ • ύϑΥʔϚϯε • Core Web
VitalsʢLCP, CLS, INP, TTIʣ • A11y (WCAG 2.0, 2.1, 2.2) • ςετʢVRT, E2E, Testing pyramid)
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ΞʔΩςΫνϟฤ • CDN ೖΕΔ / ೖΕͳ͍
• BFF ೖΕΔ / ೖΕͳ͍ • GraphQL ೖΕΔ / ೖΕͳ͍
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϑϩϯτΤϯυ͢ͰʹͨͩͷݟͨΛ࡞Δ ͱ͍͏࡞ۀʹཹ·͍ͬͯͳ͍ • Ϣʔβʔͱͷ͓ͯͳ͠ͷ෦Ͱ͋ΓɺϢʔ βʔͱͷឺΛ࡞Δ෦Λ୲͍ͬͯΔ • System of
Engagement (SoE) ͱݴ͏
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϑϩϯτΤϯυͷ։ൃੜ࢈ੑͱʮҠΓมΘ Γ͕ܹ͘͠ɺ͓ͯͳ͠Λେࣄʹ͠ͳ͍ͱ͍ ͚ͳ͍ྖҬͷதͰɺ։ൃऀͷମݧΛྑͯ͘͠ ΞτϓοτͷޮΛߴΊΔ͜ͱʯΛࢦͯ͠ ͍Δʢ͍ʣɻ
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓ͕ܹ͍͠தͰͲ͏ͬͯੜ࢈ੑΛอͭͷ ͔ • ͜͜ʹΞϓϩʔν͕͍͔ͭ͋͘Δ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ϘτϜΞοϓʹΔํ๏
• τοϓμϯʹΔํ๏
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ͕ࣗͨͪҰ൪ྑ͍ͱࢥ͍ͬͯΔํ๏ΛҰ؏ͯ͠Γൈ ͘ • पғͷมߋ͋ΕͲɺҰܾΊͨํ๏Λม͑ͯ͠·͏ ͱɺνʔϜશମʹҭڭҭίετ͕͔͔Δ •
ҰԠཧʹ͔ͳ͍ͬͯΔɺνʔϜͷ։ൃϓϩηεͷशख़ ্͕͕ΔͷͰ͋ΕɺͦΕʹ߹Θͤͯੜ࢈ੑ্͕Δ
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ແཧʹ৽͍͠ํ๏ʹมߋ͢Δඞཁͳ͍ɺݹ͍ΓํͰ͕ࣗͨͪੜ࢈తͩ ͱײ͡ΔͳΒͦΕͰྑ͍ • ҭίετͱ৽͍͠ํ๏ʹมΘͬͨࣄͰͷੜ࢈ੑվળΛఱṝʹ͔͚ͯͬͨํ ͕͍͍͔அͯ͠ཉ͍͠ •
ͨͩ͠ɺมΘΒͳ͍͜ͱΛͣͬͱଓ͚͍ͯΔͱɺ͍͔ͭ୭։ൃΛܧଓͰ͖ͳ ͘ͳΔՄೳੑ͋Δ • ։ൃτϨϯυ͕มΘͬͯ͠·͍ɺ৽͍͠ਓ͕࠾༻Ͱ͖ͳ͍ • ͍ͬͯΔϥΠϒϥϦͷEoL͕Ε͍ͯͯɺηΩϡϦςΟ͕͋Δͷʹܧ ଓ͠ͳ͍ͱ͍͚ͳ͍ϦεΫΛ๊͑Δ
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϘτϜΞοϓʹΔํ๏ • ݱͷϨϕϧͰݟΛͨΊ্͍ͯ͛ͯ͘ • ษڧձͩͬͨΓϋοΧιϯͩͬͨΓ༗ޮ • ڭ͑ͯ͘ΕΔਓΛั·͑ͯڭ͑ͯ͏ํ ๏͋Δ
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϘτϜΞοϓʹΔํ๏ • جຊ͜ͷํ๏͕ͩɺݶք͋Δ • ਓ͕ͦΜͳʹ͍ͳ͍ͱ͔ΩϟονΞοϓΑΓ ʑͷλεΫʹΘΕͯ͠·͍ɺֶͼΛಘΒΕΔػ ձ͕গͳ͍ͱ͔ •
τοϓμϯʹΔํ๏ͳͲΛऔΓೖΕ͍͖ͯɺෳ ͷΞϓϩʔνΛซ༻͍ͨ͠
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • τοϓμϯʹΔํ๏ • ࢦͱͳΔͷΛܾΊ͔ͯͦ͜Β͓Ζ͍͖͍ͯͨ͠ • ϑϩϯτΤϯυͷઃܭʹࢦΛͨͤΒΕ͍ͯͳ͍͔Βํ͕ϒϨΔ • ઃܭͦͷͷΞϓϦέʔγϣϯಛੑʹدͬͯมΘΔ͕ɺઃܭΛ͢ΔͨΊ ͷํͳΒ͋ΔఔدͤूΊͨݟΛݩʹ࡞ΕͰ͖ΔͷͰͳ͍
͔ɾɾɾʁ • ϑϩϯτΤϯυͷࢦΛ࡞Εͳ͍͔ɾɾɾʁ • Ͱ͖ͨΒɺνΣοΫϘοΫεܗࣜͰճͰ͖͕ͯࣗͨͪͲΕ͘Β͍ੜ࢈ ੑʹߩݙͰ͖͍ͯΔ͔ଌΕͦ͏ͳɺɺɺDX Criteria Έ͍ͨͳɻɻɻ
ͱ͍͏Θ͚Ͱɺຊ ϑϩϯτΤϯυͷ DX Criteria Λ࡞͍ͬͯΔ
DX Criteria ͱ • ։ൃੜ࢈ੑͱσδλϧτϥϯεϑΥʔϝʔ γϣϯͷ྆ํΛ͔͚ͯԾઆݕূαΠΫϧΛ͏ ·͘ճͤΔΑ͏ʹݕ౼ͨ͠ͷ https://dxcriteria.cto-a.org/
ϑϩϯτΤϯυ൛DX Criteria • ຊՈ DX Criteria ߴͳԾઆݕূΛճͯ͠৫ͷૉૣ͍ݕ ূͱࣦഊͱֶͼΛ࠷େԽ͠Α͏ͱ͢ΔͨΊͷํͰ࡞ΒΕͨ ౕ •
ͦͷΤοηϯε෦ͭͭ͠ɺϑϩϯτΤϯυྖҬʹಛԽ͢ Δ • ຊՈձࣾͷଟ͍͕ɺϑϩϯτΤϯυͱ͍͏ྖҬʹด͡ ΔͷͰɺձࣾͷগͳΊ • ҰํͰσβΠϯͱͷڠۀؔ࿈෦ॺͱͷଟΊ
ϑϩϯτΤϯυ൛ DX Criteria • ࡞ऀ • yosuke_furukawa • ahomu •
ϨϏϡʔ • hirokidaichi
DX CriteriaϙϦγʔ • ໌ੑɿ Yes/NoͰஅ͘͢͠ͳ͍ͬͯΔ͔ • ମੑɿূڌ͕ͳ͘ͱ࣮ࡍʹݱͰධՁ͞Ε͍ͯΔ͔Ͳ ͏͔ • ಉ࣌ੑɿ࣌Λөͨ͠ΞοϓσʔτΛఆظతʹΔ͜
ͱ • Մ؍ଌੑɿ؍ଌͰ͖Δߦಈͷ෦ͰධՁ͢Δ͜ͱ • ඇݶఆੑɿखஈΛݶఆ͗͢͠ͳ͍͜ͱ
ϑϩϯτΤϯυ൛ DX Criteria • େςʔϚ͕5ͭ • ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕज़ελοΫ • ϢʔβʔମݧΛࢧ͑Δඇػೳཁٻ •
ՁͷσϦόϦʔΛߦ͏ϓϩηε • γεςϜɾΞϓϦέʔγϣϯӡ༻ʢΞʔΩςΫνϟʣ • νʔϜϏϧσΟϯά
ͪͳΈʹ·ͩ ຏ͖ࠐΈதͰ͢ʂʂʂ
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δ ٕज़ελοΫ
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੜ࢈ੑΛ্͛ΔͨΊʹٕज़໘ͰϥΠϒϥϦπʔ ϧΛͬͯରॲ͢Δ • ͨͩٯʹ͜ΕΓա͗ҙ • ΫϥΠΞϯταΠυͷར༻ڥɺUIͷϕετϓϥ ΫςΟεͷมԽɺϥΠϒϥϦͷΞοϓσʔτͳ
Ͳɺͱʹ͔͘มߋमਖ਼͕ଟ͍ՕॴͰ͋Γɺͦ͜ ʹରͯ͠Ͳ͏औΓΉ͔ͱ͍͏ςʔϚ
ྫΛڍ͛Δ
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • ίʔυ͕ܧଓͯ͠ӡ༻Ͱ͖ΔΑ͏ʹͳ͍ͬͯ Δ͔Ͳ͏͔ • ಡΈ͢͞ɺॻ͖͢͞ɺνʔϜशख़ͳͲ ͷ؍͔Βٕज़બఆ͍ͯ͠Δ͔ͳͲ
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • (ֶशͱվળ) ੩తܕ͚ݴޠίʔυϑΥʔϚολʔΛ ಋೖͯ͠ɺίʔυϕʔεͷಡΈ͢͞ͱอकੑΛ্ͤ͞ ͍ͯΔ͔ •
(ϝτϦΫεͷܭଌ) όάͷൃੜɺίʔυϨϏϡʔͷ࣌ ؒͳͲɺίʔυϕʔεͷอकੑʹؔ࿈͢ΔϝτϦΫεΛ ຖ݄͠ɺ࢛ظ͝ͱʹվળͷͨΊͷΞΫγϣϯΛܭ ըɾ࣮ࢪ͍ͯ͠Δ͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • (ϓϥΫςΟε) ܕใΛAPIϨϕϧͰڞ༗͢ΔͨΊͷπʔϧ ʢྫ: GraphQLɺTypeScriptͳͲʣΛ׆༻͠ɺ݄ʹ1ճҎ্ ͷසͰܕͷໃ६ΤϥʔΛνΣοΫͯ͠ɺίʔυϕʔεશ
ମͷܕ҆શੑΛ֬อ͍ͯ͠Δ͔ • (Ξϯνύλʔϯ) ੩తܕ੍Λ݄ʹ1ճҎ্ͷසͰνΣο Ϋ͍ͯ͠ͳ͍͔ɺܕͷໃ६Τϥʔ͕์ஔ͞Ε͍ͯΔ͔ɺ· ͨɺܕ੍Λແࢹͯ͠ͷਐḿใࠂ͕සൟʹߦΘΕ͍ͯΔ͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ • πʔϧʹΑΔޮੑͷΞοϓ͕Ͳ͜·ͰͰ͖ ͍ͯΔ͔ • ྫ͑ build
πʔϧ͕͗ͨ͢Γ͠ͳ͍͔ • Mock ͱ͔Λదʹͬͯ։ൃޮ্͛ͯΔ͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ • ʢֶशͱվળʣओཁͳΤσΟλʢྫ: VSCode, IntelliJͳͲʣɺϑΥʔϚολʔɺϦϯλʔ Λʹ1ճҎ্ͷසͰߋ৽ɾݕ౼͠ɺ։ൃޮͷ্Λਤ͍ͬͯΔ͔ •
ʢϝτϦΫεʣϏϧυ࣌ؒɺςετ࣮ߦ࣌ؒɺσϓϩΠ࣌ؒͳͲͷϝτϦΫεΛຖि ͠ɺ݄͝ͱʹπʔϧνΣΠϯͷޮੑͷͨΊͷΞΫγϣϯΛܭըɾ࣮ࢪ͍ͯ͠Δ͔ • ʢϓϥΫςΟεʣCI/CDύΠϓϥΠϯΛదʹઃఆ͠ɺܧଓతΠϯςάϨʔγϣϯΛࣗ ಈԽ͍ͯ͠Δ͔ɻ·ͨɺϩʔΧϧ։ൃڥʹϞοΫαʔόʔAPIͷςετڥΛ උ͠ɺޮతͳ։ൃ͕Մೳ͔ • ʢΞϯνύλʔϯʣπʔϧͷબఆ͕νʔϜͰΒΒͰ͋ΓɺෆඞཁͳΧελϚΠζ ͕૿͑ɺ։ൃޮ͕Լ͍ͯ͠ͳ͍͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • ٕज़τϨϯυʹৼΓճ͞Ε͍ͯͳ͍͔ • ΞϓϦέʔγϣϯͷಛੑཧղ͍ͯ͠Δͷ͔ • ࣄۀઢͰϥΠϒϥϦϑϨʔϜϫʔΫΛબ
ఆ͍ͯ͠Δ͔
։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • (ֶशͱվળ) ٕज़τϨϯυΛ͠ɺ৽ͨͳπʔϧϥΠϒϥ ϦͷධՁΛఆظతʹߦ͍ͬͯΔ͔ • ʢϝτϦΫεʣ
طଘͷ༻ٕज़ͷΞοϓσʔτසɺٕज़ε λοΫͷෳࡶ͞ɺηΩϡϦςΟࣄͳͲΛධՁɾվળ͍ͯ͠Δ ͔ • ʢΞϯνύλʔϯʣྲྀߦΓͷٕज़࠷৽ϥΠϒϥϦΛແཧʹऔ ΓೖΕɺٕज़ελοΫ͕աʹෳࡶԽͯ͠͠·͍ͬͯͳ͍͔
ϢʔβʔମݧΛࢧ͑Δ ඇػೳཁٻ
ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ඇػೳཁٻΛΨϯແࢹͯ͠ਐΊΔͱ݁ہग़དྷ্ ͕ͬͨͷ͕͍ʹ͘͘ͳΔ • ͲͷඇػೳཁٻʹͲͷఔԠ͑Δ͖ͰɺͲ͏ର ॲ͢Δ͔Λఆٛͯ͠ɺݕ౼ࡐྉʹͯ͠Β͍͍ͨ • ϑϩϯτΤϯυͰݴ͑ύϑΥʔϚϯεɺΞΫη
γϏϦςΟɺϝϯςφϯαϏϦςΟɺσβΠϯɺ ͳͲͳͲͨ͘͞Μඇػೳཁٻ͕͋Δ
ྫΛڍ͛Δ
ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ϨΠςϯγʔͱεϧʔϓοτͷ֓೦Λཧղ͠ɺԿ͕Կ Ͱ ʮ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)
ՁͷσϦόϦʔΛߦ͏ϓϩη ε (CI/CD) • CI/CDͳͲܧଓͯ͠σϦόϦʔΛߦ͏ࡍʹʮߴ ʹԾઆݕূ͢ΔʯΈ͕ඞཁʹͳΔ • ϑϩϯτΤϯυྫ֎Ͱͳ͘ɺಛʹA/Bςετ ͳͲͰ࡞ΓΛҧ͑ΔͱʹͳΓ͍͢ •
ଞʹΤϥʔোൃੜ࣌ʹΠϯϑϥʹ͖ͤΓ ʹ͢ΔͳͲͷରԠ͕औΒΕͯ͠·͏ͱʹͳΔ
ྫΛڍ͛Δ
ՁͷσϦόϦʔΛߦ͏ϓϩη ε • ςετ • ʢֶशͱվળʣΨΠυϥΠϯςετΧόϨοδͷج४Λఆظతʹݟ ͠ɺνʔϜશମͷεΩϧηοτͱχʔζʹ߹Θͤͯߋ৽͍ͯ͠Δ͔ɻ • ʢϝτϦΫεʣςετΧόϨοδͷπʔϧΛఆظతʹߋ৽͠ɺະΧόʔͷ ྖҬ͕͋Δ߹ɺదͳςετέʔεΛՃͯ͠ΧόϨοδΛ্ͤ͞
ΔऔΓΈΛߦ͍ͬͯΔ͔ • ʢϝτϦΫεʣςετ͕30Λ͑Δ߹ɺςετͷׂฒྻ࣮ߦΛݕ ౼͠ɺಛఆͷςετ͕ಛʹ͕͔͔࣌ؒΔ߹ɺͦͷςετͷ࠷దԽΛݕ ౼͢Δɻ·ͨɺසൟʹࣦഊ͢ΔςετϑϨʔΩʔͳςετ͕ଘࡏ͢Δ ߹ɺͦͷݪҼΛಛఆͯ҆͠ఆੑΛ্ͤ͞ΔऔΓΈΛߦ͍ͬͯΔ͔ɻ
ՁͷσϦόϦʔΛߦ͏ϓϩη ε • σϓϩΠ • ʢֶशͱվળʣa/b test, feature fl ag,
canary releaseͳͲͷࢼ࣮ͯ͠ફͨ͠ ޙͰมߋ͍͢͠σϓϩΠΛߦ͍ͬͯΔ͔ • ʢϝτϦΫεͷܭଌʣ σϓϩΠͷසϦʔυλΠϜΛՄࢹԽ͢ΔͨΊͷ μογϡϘʔυΛ࡞ɾඋ͍ͯ͠Δ͔ɻ͜ΕʹΑΓɺ։ൃ͔Βຊ൪ڥ ͷมߋ͕ͲΕ͚ͩਝʹద༻͞Ε͍ͯΔ͔ΛνʔϜશһͰڞ༗͠ɺܧଓ తͳվળΛߦ͏ͨΊͷࢦඪͱ͢Δɻ۩ମతʹɺมߋͷϦʔυλΠϜɺσ ϓϩΠͷසɺมߋ࣌ͷࣦഊɺ෮چ࣌ؒͳͲΛμογϡϘʔυͰҰͰ ֬ೝͰ͖ΔΑ͏ʹ͢Δɻ • ʢΞϯνύλʔϯʣσϓϩΠҰճʹରͯ͠1࣌ؒҎ্ͷ͕͔͔࣌ؒΔ
γεςϜɺΞϓϦέʔγϣϯ ӡ༻ʢΞʔΩςΫνϟʣ
ྫΛڍ͛Δ
γεςϜɺΞϓϦέʔγϣϯӡ ༻ • BFFɺAPIઃܭ • ʢϓϥΫςΟεʣϑϩϯτΤϯυΤϯδχΞଆ͔ ΒAPIઃܭΛఏҊͰ͖Δڥʹͳ͍ͬͯΔ͔ • ʢΞϯνύλʔϯʣόοΫΤϯυΤϯδχΞ͚ͩ ͕ओಋͯ͠APIΛઃܭ͓ͯ͠ΓɺϑϩϯτΤϯυ
ΤϯδχΞ͕ར༻͠ʹ͍͘ઃܭʹͳ͍ͬͯͳ͍͔
γεςϜɺΞϓϦέʔγϣϯӡ ༻ • Πϯϑϥ • ʢϓϥΫςΟεʣϑϩϯτΤϯυ୲ऀ Web ʹؔΘΔΠϯϑϥͷߏΛѲͰ͖͍ͯ ͯɺোରԠʹࢀըͰ͖Δ •
ʢΞϯνύλʔϯʣϓϩμΫτͷಛੑΛؑΈͳ ͍ըҰతʹ༻ҙ͞Εͨߏ͕ڧ੍͞Εͯ͠·͏
νʔϜɺ৫
νʔϜɺ৫ • ઐ৫ͷӡ༻ • ྲྀΕͷૣ͍ϑϩϯτΤϯυྖҬʹରԠ͢ΔͨΊʹ ͓͍ͬͯͨ΄͏͕͍͍͜ͱ • ྫ͑ઐ৫Λஔ͠ɺԣஅతʹؔΘΕΔΑ͏ʹ ͢ΔɺͳͲ •
͍ΘΏΔΠωʔϒϦϯάνʔϜͷΑ͏ͳӡ༻Λ ఆ
νʔϜɺ৫ • ୲ɺ৬είʔϓͷఆٛ • ϑϩϯτΤϯυΤϯδχΞίϛϡχέʔγϣϯͷϋϒʹͳΓ͍͢ • ҰํͰྡ৫ͷࣄ͞Ε͍͢ • ྫ) σΟϨΫγϣϯۀΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔ
• ྫ) ϚʔέςΟϯά৫ଆͰඞཁͳGAͷௐࠪઃఆΛϑϩϯτΤ ϯυΤϯδχΞ͕ߦ͍ͬͯΔͳͲ • ϝϯόʔ͕ຊདྷൃش͖͢όϦϡʔΛ્ͯ͠͠·͏Α͏ͳέʔε͕ ͳ͍Α͏ʹ͍ͨ͠
νʔϜɺ৫ • ࣾ֎ͷൃ৴ • (ֶशͱվળ) ఆظతʹ෦ͷϫʔΫγϣοϓηϛφʔΛ։ ࠵͠ɺΤϯδχΞಉ࢜Ͱใͷཪ͚࣮ࡍͷίʔυಈ࡞ͷ ڞ༗Λߦ͏ɻ·ͨɺൃ৴લʹϐΞϨϏϡʔΛߦ͍ɺ༰ͷ ਖ਼֬ੑ࣭Λ֬อ͢Δɻ •
(ϝτϦΫεͷܭଌ) νʔϜશମͰൃ৴ͷKPIΛఆΊɺͦΕʹ ج͍ͮͯఆظతʹΛϞχλϦϯά͢Δɻ·ͨɺࣾͰͷ ڞ༗ϛʔςΟϯάΛઃ͚ɺޭࣄྫվળΛڞ༗͢Δɻ
ਐḿͱͯ͠ɾɾɾ 11݄த०ʹୈҰϦϦʔε͕ Ͱ͖Δͱ͍͍ͳͱࢥͬͯ·͢
͜Μͳײ͡ͰӶҙ࡞தͰ͢
ͨͩ͜ͷج४͋͘·Ͱ ج४Ͱ͋ͬͯʮ͜Ε͕ୡͰ ͖͍ͯͳ͍͔Βବͳ։ൃʯ ͱ͍͏෩ʹଊ͑ͯ΄͘͠ͳ͍ Ͱ͢ɻ
ຊͷҙຯͰڧ͍৫ըҰ తʹج४ʹै͏৫Ͱͳ ͘ɺج४Λॊೈʹଊ͑ͯࣗ ͨͪʹΧελϚΠζͰ͖Δ ৫ͩͱࢥ͍ͬͯ·͢ɻ
͕ࣗݟ͖ͯͨ։ൃͷதͰ ࠔͬͯΔਓͨͪΛࠓޙগ͠Ͱ ॿ͚ʹͳΕͱࢥ͍·͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠