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
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.8k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.4k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
AndroidデバイスにFTPサーバを建立する
e10dokup
0
250
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
130
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
0
120
プロセス改善による品質向上事例
tomasagi
2
2.5k
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
130
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.3k
Culture Deck
optfit
0
410
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
390
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Unsuck your backbone
ammeep
669
57k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Why Our Code Smells
bkeepers
PRO
336
57k
Faster Mobile Websites
deanohume
306
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Designing for humans not robots
tammielis
250
25k
Gamification - CAS2011
davidbonilla
80
5.1k
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݄த०ʹୈҰϦϦʔε͕ Ͱ͖Δͱ͍͍ͳͱࢥͬͯ·͢
͜Μͳײ͡ͰӶҙ࡞தͰ͢
ͨͩ͜ͷج४͋͘·Ͱ ج४Ͱ͋ͬͯʮ͜Ε͕ୡͰ ͖͍ͯͳ͍͔Βବͳ։ൃʯ ͱ͍͏෩ʹଊ͑ͯ΄͘͠ͳ͍ Ͱ͢ɻ
ຊͷҙຯͰڧ͍৫ըҰ తʹج४ʹै͏৫Ͱͳ ͘ɺج४Λॊೈʹଊ͑ͯࣗ ͨͪʹΧελϚΠζͰ͖Δ ৫ͩͱࢥ͍ͬͯ·͢ɻ
͕ࣗݟ͖ͯͨ։ൃͷதͰ ࠔͬͯΔਓͨͪΛࠓޙগ͠Ͱ ॿ͚ʹͳΕͱࢥ͍·͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠