フロントエンドの開発生産性とは

2023/09/21 @ Findy のカンファレンス

Transcript

1. ϑϩϯτΤϯυͷ։ൃ ੜ࢈ੑͱ͸ 2023/09/21 @ Findy Online Conference
2. X(Twitter): @yosuke_furukawa Github: yosuke-furukawa
3. JSConf.jp ticket page is open. ࠓ೥͸ΦϑϥΠϯͱΦϯϥΠϯ ͷϋΠϒϦου։࠵༧ఆ ΦϯϥΠϯ͸10݄ࠒʹެ։͠· ͢ɻ ઌߦͯ͠དྷͯ͘ΕΔํ͸ࠓͷ ϖʔδ͔Βདྷ͍ͯͩ͘͞ʂ
4. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϑϩϯτΤϯυͷ։ൃੜ࢈ੑͱ͸ʮҠΓมΘ Γ͕ܹ͘͠ɺ͓΋ͯͳ͠Λେࣄʹ͠ͳ͍ͱ͍ ͚ͳ͍ྖҬͷதͰɺ։ൃऀͷମݧΛྑͯ͘͠ Ξ΢τϓοτͷޮ཰ΛߴΊΔ͜ͱʯΛࢦͯ͠ ͍Δʢ௕͍ʣɻ
5. ։ൃͷੜ࢈ੑͱ͸
6. ։ൃͷੜ࢈ੑͱ͸ • ͦ΋ͦ΋ੜ࢈ੑ͸΋͏͢Ͱʹ͕ܾࣜ·ͬͯ Δɻ • ੜ࢈ੑ = Ξ΢τϓοτ/Πϯϓοτ
7. ։ൃͷੜ࢈ੑͱ͸ • Ξ΢τϓοτ͸ԿͰଌΔͷ͔ʁ • ίʔυͷྔʁ • PR਺ʁը໘਺ʁίϯϙʔωϯτ਺ʁ • ετʔϦʔϙΠϯτʁ • ސ٬ຬ଍౓ʁ
8. ։ൃͷੜ࢈ੑͱ͸ • Πϯϓοτ͸ԿͰଌΔͷ͔ʁ • ࿑ಇ࣌ؒʁ࿑ಇਓ਺ʁ • ։ൃਓ݅අʁ • ૯ࣄۀίετʁ
9. ։ൃͷੜ࢈ੑͱ͸ • ੜ࢈ੑ = Ξ΢τϓοτ/Πϯϓοτ • ࣜ͸୯७ͦ͏ʹݟ͑Δ͕ɺ࣮ࡍʹ͸Ξ΢τ ϓοτͱΠϯϓοτ͸։ൃ૊৫ʹΑͬͯଊ͑ ํ͕ҟͳΔɻ • ׬શʹϒϨͨ··ͩͱఆࣜԽ͠ʹ͍͘ͷͰɺ ͋Δఔ౓ݟ͑ΔԽ͠Α͏ͱͨ͠ࢼΈ΋͋Δɻ
10. ։ൃͷੜ࢈ੑͱ͸ • Lean ͱ DevOps ͷՊֶͷྫ: • 4ͭͷଌఆج४Λஔ͍ͯ։ൃ૊৫ͷύϑΥʔ ϚϯεΛଌఆ͍ͯ͠Δɻ • ϦʔυλΠϜɺσϓϩΠස౓ 
 ฏۉम෮࣌ؒɺมߋࣦഊ཰ https://book.impress.co.jp/books/1118101029
11. ։ൃͷੜ࢈ੑͱ͸ • Lean ͱ DevOps ͷՊֶͷྫ: •
12. ։ൃͷੜ࢈ੑͱ͸ • Lean ͱ DevOps ͷՊֶͷྫ: • ੜ࢈ੑ͕ߴ͍ঢ়ଶͱ͸ɺσϓϩΠස౓͕ଟ͘ɺมߋʹ͔͔Δ͕࣌ؒগ ͳ͘ɺमਖ਼͕ඞཁʹͳͬͨͱ͖΋ૣ͘ɺͦ΋ͦ΋ࣦഊ͕গͳ͍ঢ়ଶ
13. ։ൃͷੜ࢈ੑͱ͸ • Lean ͱ DevOps ͷՊֶͷྫ: • ͞Βʹ໘ന͍ͷ͸͜͏͍ͬͨΞ΢τϓοτ͕૑ ଄ੑͷߴ͍૊৫จԽͷܗ੒΍ैۀһຬ଍౓ʹ ΋ؔ࿈͢Δͱ͍͏࿩͕هࡌ͞Ε͍ͯΔ఺ • ։ൃͷੜ࢈ੑʹ͸։ൃऀ͕ಇ͖΍͢͞΍૊৫ ࣗମͷจԽ͕ؔΘ͍ͬͯΔͱ͍͏࿩͕ग़ͯ͘Δ
14. ։ൃͷੜ࢈ੑͱ͸ • SPACE ͷྫ (2021೥ͷ࿦จ): https://dl.acm.org/doi/10.1145/3454122.3454124
15. ։ൃͷੜ࢈ੑͱ͸ • SPACE ͷྫ (2021೥ͷ࿦จ): • Ξ΢τϓοτͷྔ΍਺͚ͩʹ஫໨͢ΔͷͰ͸ ͳ͘ɺଞʹ΋͍͔ͭ͘ͷࢦඪʹ஫໨ͯͦ͠ͷ ࢦඪΛ૊৫ن໛ʹԠͯ͡બ΂ΔΑ͏ʹ͠Α ͏ͱ͍͏ߟ͑ํ
16. ։ൃͷੜ࢈ੑͱ͸ • SPACE ͷྫ (2021೥ͷ࿦จ): • Satisfaction & Well-Being: 
 ։ൃऀ͕ͲΕ͚ͩ޾͔ͤɹʢྫɿඞཁͳπʔϧΛબ΂͍ͯΔ͔ɺνʔϜͷNPS͸Ͳ͏͔ͳͲʣ • Performance: 
 ॻ͍ͨίʔυ͕ͲΕ͚ͩͪΌΜͱϫʔΫ͔ͨ͠ɹʢྫɿόάൃੜ݅਺ɺސ٬ຬ଍౓ɺαʔϏεՔ ಇ཰ͳͲʣ • Activity: Ξ΢τϓοτͷ਺ɹʢྫɿɹPRϚʔδ਺ɺίϛοτ਺ɺσϓϩΠස౓ͳͲʣ • Communication & Collaboration: 
 ίϛϡχέʔγϣϯͱڠྗʢྫɿΦϯϘʔσΟϯάͷ࣌ؒ΍ମݧɺίʔυϨϏϡʔͷ࣭ͱମݧɺ PRͷϚʔδ͞ΕΔ·Ͱͷ࣌ؒͳͲʣ • Ef fi ciency & Flow: ޮ཰ͱ࡞ۀϑϩʔʢྫɿίʔυϨϏϡʔλΠϛϯάɺׂΓࠐΈλεΫͷগͳ͞ʣ
17. ։ൃͷੜ࢈ੑͱ͸ • SPACE ͷྫ (2021೥ͷ࿦จ): • GitHub Copilot ಋೖͷධՁ΋SPACEͰߦΘΕͨྫ͕͋Δ • ͪͳΈʹͦͷ࣌ͷධՁ͸ͪ͜Βɻ https://github.blog/2022-09-07-research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/
18. ։ൃͷੜ࢈ੑͱ͸ • Ξ΢τϓοτ / Πϯϓοτͱ͍͏Ұݟ୯७ͳࣜͰද͞Ε͍ͯΔ ͕ɺ࣮ࡍʹ͸͔ͳΓ։ൃ૊৫ґଘ • ΋͏গ͠۩ମԽͨ͠ྫͱͯ͠LeanͱDevOpsͷՊֶ΍ SPACEϑ ϨʔϜϫʔΫͱ͍ͬͨऔΓ૊Έ͕͋Δ • ͜ΕΒͷऔΓ૊ΈͷதͰ͸୯ͳΔΞ΢τϓοτʹண໨͍ͯ͠ͳ ͍ɻ • ಛʹ։ൃऀͷຬ଍౓΍ίϛϡχέʔγϣϯɺจԽͱ͍ͬͨपล ͷঢ়گʹ஫໨͍ͯ͠Δ
19. ։ൃͷੜ࢈ੑͱ͸ • ࠷ۙ͸΋͏͢ͰʹΞ΢τϓοτ/Πϯϓοτͷ୯ ७ͳࣜͷ͜ͱΛࢦ͍ͯ͠ͳ͍ • ͦΕΒΛऔΓר͘पลͷ؀ڥɺจԽɺ૊৫ɺݖݶ ͳͲͷෳ߹తͳཁૉΛ૊Έ߹Θͤͯදݱ͍ͯ͠Δ • ͜ΕΒΛؙͬͱͻͬ͘ΔΊͯɺ։ൃऀମݧ ʢDeveloper ExperienceʣͱݴͬͨΓ͢Δ
20. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
21. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ։ൃͷੜ࢈ੑٴͼ։ൃऀମݧͱ͍͏؍఺Ͱݴ͑ ͹ಛʹϑϩϯτΤϯυ΋όοΫΤϯυ΋ؔ܎͸ ͳ͍ • ͨͩϑϩϯτΤϯυ͸։ൃπʔϧɺϕετϓϥΫ ςΟε΍ΞʔΩςΫνϟͷҠΓมΘΓ͕ܹ͍͠ • ͦΕʹ൐ͬͯຬ଍౓΋ӨڹΛड͚΍͍͢
22. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ։ൃϥΠϒϥϦฤ • ίϯϙʔωϯτϥΠϒϥϦͷมભʢBackbone, Angular, Vue, Reactʣ • ঢ়ଶ؅ཧϥΠϒϥϦͷมભʢRedux, fl ux, Recoil, Jotaiʣ • CSS पลϥΠϒϥϦɾπʔϧͷมભʢSass, CSS Modules, vanilla- extract, Tailwind etcʣ • ϝλϑϨʔϜϫʔΫͷมભʢNuxt.js, Next.js, Remix)
23. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ඇػೳཁٻฤ • ύϑΥʔϚϯε • Core Web VitalsʢLCP, CLS, INP, TTIʣ • A11y (WCAG 2.0, 2.1, 2.2) • ςετʢVRT, E2E, Testing pyramid)
24. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ΞʔΩςΫνϟฤ • CDN ೖΕΔ / ೖΕͳ͍ • BFF ೖΕΔ / ೖΕͳ͍ • GraphQL ೖΕΔ / ೖΕͳ͍
25. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϑϩϯτΤϯυ͸͢Ͱʹͨͩͷݟͨ໨Λ࡞Δ ͱ͍͏࡞ۀʹཹ·͍ͬͯͳ͍ • Ϣʔβʔͱͷ͓΋ͯͳ͠ͷ෦෼Ͱ͋ΓɺϢʔ βʔͱͷឺΛ࡞Δ෦෼Λ୲͍ͬͯΔ • System of Engagement (SoE) ͱ΋ݴ͏
26. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϑϩϯτΤϯυͷ։ൃੜ࢈ੑͱ͸ʮҠΓมΘ Γ͕ܹ͘͠ɺ͓΋ͯͳ͠Λେࣄʹ͠ͳ͍ͱ͍ ͚ͳ͍ྖҬͷதͰɺ։ൃऀͷମݧΛྑͯ͘͠ Ξ΢τϓοτͷޮ཰ΛߴΊΔ͜ͱʯΛࢦͯ͠ ͍Δʢ௕͍ʣɻ
27. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓ͕ܹ͍͠தͰͲ͏΍ͬͯੜ࢈ੑΛอͭͷ ͔ • ͜͜ʹΞϓϩʔν͕͍͔ͭ͋͘Δ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ϘτϜΞοϓʹ΍Δํ๏ • τοϓμ΢ϯʹ΍Δํ๏
28. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ࣗ෼͕ͨͪҰ൪ྑ͍ͱࢥ͍ͬͯΔํ๏ΛҰ؏ͯ͠΍Γൈ ͘ • पғͷมߋ͸͋ΕͲɺҰ౓ܾΊͨํ๏Λม͑ͯ͠·͏ ͱɺνʔϜશମʹҭ੒ڭҭίετ͕͔͔Δ • ҰԠཧʹ͔ͳ͍ͬͯΔɺνʔϜͷ։ൃϓϩηεͷशख़౓ ্͕͕ΔͷͰ͋Ε͹ɺͦΕʹ߹Θͤͯੜ࢈ੑ΋্͕Δ
29. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ແཧʹ৽͍͠ํ๏ʹมߋ͢Δඞཁ͸ͳ͍ɺݹ͍΍ΓํͰ΋ࣗ෼͕ͨͪੜ࢈తͩ ͱײ͡ΔͳΒͦΕͰྑ͍ • ҭ੒ίετͱ৽͍͠ํ๏ʹมΘͬͨࣄͰͷੜ࢈ੑվળΛఱṝʹ͔͚ͯ΍ͬͨํ ͕͍͍͔൑அͯ͠ཉ͍͠ • ͨͩ͠ɺมΘΒͳ͍͜ͱΛͣͬͱଓ͚͍ͯΔͱɺ͍͔ͭ୭΋։ൃΛܧଓͰ͖ͳ ͘ͳΔՄೳੑ͸͋Δ • ։ൃτϨϯυ͕มΘͬͯ͠·͍ɺ৽͍͠ਓ͕࠾༻Ͱ͖ͳ͍ • ࢖͍ͬͯΔϥΠϒϥϦͷEoL͕੾Ε͍ͯͯɺηΩϡϦςΟ໰୊͕͋Δͷʹܧ ଓ͠ͳ͍ͱ͍͚ͳ͍ϦεΫΛ๊͑Δ
30. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϘτϜΞοϓʹ΍Δํ๏ • ݱ৔ͷϨϕϧͰ஌ݟΛͨΊ্͍ͯ͛ͯ͘ • ษڧձͩͬͨΓϋοΧιϯͩͬͨΓ΋༗ޮ • ڭ͑ͯ͘ΕΔਓΛั·͑ͯ௚઀ڭ͑ͯ໯͏ํ ๏΋͋Δ
31. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϘτϜΞοϓʹ΍Δํ๏ • جຊ͸͜ͷํ๏͕ͩɺݶք͸͋Δ • ਓ਺͕ͦΜͳʹ͍ͳ͍ͱ͔ΩϟονΞοϓΑΓ΋ ೔ʑͷλεΫʹ௥ΘΕͯ͠·͍ɺֶͼΛಘΒΕΔػ ձ͕গͳ͍ͱ͔ • τοϓμ΢ϯʹ΍Δํ๏ͳͲΛऔΓೖΕ͍͖ͯɺෳ ਺ͷΞϓϩʔνΛซ༻͍ͨ͠
32. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • τοϓμ΢ϯʹ΍Δํ๏ • ࢦ਑ͱͳΔ΋ͷΛܾΊ͔ͯͦ͜Β͓Ζ͍͖͍ͯͨ͠ • ϑϩϯτΤϯυͷઃܭʹࢦ਑Λ΋ͨͤΒΕ͍ͯͳ͍͔Βํ਑͕ϒϨΔ • ઃܭͦͷ΋ͷ͸ΞϓϦέʔγϣϯಛੑʹدͬͯมΘΔ͕ɺઃܭΛ͢ΔͨΊ ͷํ਑ͳΒ͋Δఔ౓دͤूΊͨ஌ݟΛݩʹ࡞Ε͹Ͱ͖ΔͷͰ͸ͳ͍ ͔ɾɾɾʁ • ϑϩϯτΤϯυͷࢦ਑Λ࡞Εͳ͍͔ɾɾɾʁ • Ͱ͖ͨΒɺνΣοΫϘοΫεܗࣜͰճ౴Ͱ͖ͯࣗ෼͕ͨͪͲΕ͘Β͍ੜ࢈ ੑʹߩݙͰ͖͍ͯΔ͔ଌΕͦ͏ͳɺɺɺDX Criteria Έ͍ͨͳɻɻɻ
33. ͱ͍͏Θ͚Ͱɺຊ୊ ϑϩϯτΤϯυͷ DX Criteria Λ࡞͍ͬͯΔ࿩
34. DX Criteria ͱ͸ • ։ൃੜ࢈ੑͱσδλϧτϥϯεϑΥʔϝʔ γϣϯͷ྆ํΛ͔͚ͯԾઆݕূαΠΫϧΛ͏ ·͘ճͤΔΑ͏ʹݕ౼ͨ͠΋ͷ https://dxcriteria.cto-a.org/
35. ϑϩϯτΤϯυ൛DX Criteria • ຊՈ DX Criteria ͸ߴ଎ͳԾઆݕূΛճͯ͠૊৫಺ͷૉૣ͍ݕ ূͱࣦഊͱֶͼΛ࠷େԽ͠Α͏ͱ͢ΔͨΊͷํ਑Ͱ࡞ΒΕͨ ౕ • ͦͷΤοηϯε෦෼͸࢒ͭͭ͠ɺϑϩϯτΤϯυྖҬʹಛԽ͢ Δ • ຊՈ͸ձࣾͷ࿩΋ଟ͍͕ɺϑϩϯτΤϯυͱ͍͏ྖҬʹด͡ ΔͷͰɺձࣾͷ࿩͸গͳΊ • ҰํͰσβΠϯͱͷڠۀ΍ؔ࿈෦ॺͱͷ࿩͸ଟΊ
36. ϑϩϯτΤϯυ൛ DX Criteria • ࡞੒ऀ • yosuke_furukawa • ahomu • ϨϏϡʔ • hirokidaichi
37. DX CriteriaϙϦγʔ • ໌᏷ੑɿ Yes/NoͰ൑அ͠΍͘͢ͳ͍ͬͯΔ͔ • ਎ମੑɿূڌ͕ͳ͘ͱ΋࣮ࡍʹݱ৔ͰධՁ͞Ε͍ͯΔ͔Ͳ ͏͔ • ಉ࣌୅ੑɿ࣌୅Λ൓өͨ͠ΞοϓσʔτΛఆظతʹ΍Δ͜ ͱ • Մ؍ଌੑɿ؍ଌͰ͖Δߦಈͷ෦෼ͰධՁ͢Δ͜ͱ • ඇݶఆੑɿखஈΛݶఆ͗͢͠ͳ͍͜ͱ
38. ϑϩϯτΤϯυ൛ DX Criteria • େςʔϚ͕5ͭ • ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕज़ελοΫ • ϢʔβʔମݧΛࢧ͑Δඇػೳཁٻ • Ձ஋ͷσϦόϦʔΛߦ͏ϓϩηε • γεςϜɾΞϓϦέʔγϣϯӡ༻ʢΞʔΩςΫνϟʣ • νʔϜϏϧσΟϯά
39. ͪͳΈʹ·ͩ ຏ͖ࠐΈதͰ͢ʂʂʂ
40. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δ ٕज़ελοΫ
41. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੜ࢈ੑΛ্͛ΔͨΊʹٕज़໘ͰϥΠϒϥϦ΍πʔ ϧΛ࢖ͬͯରॲ͢Δ • ͨͩٯʹ͜Ε΋΍Γա͗͸஫ҙ • ΫϥΠΞϯταΠυͷར༻؀ڥɺUIͷϕετϓϥ ΫςΟεͷมԽɺϥΠϒϥϦͷΞοϓσʔτͳ Ͳɺͱʹ͔͘มߋ΍मਖ਼͕ଟ͍ՕॴͰ͋Γɺͦ͜ ʹରͯ͠Ͳ͏औΓ૊Ή͔ͱ͍͏ςʔϚ
42. ྫΛڍ͛Δ
43. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • ίʔυ͕ܧଓͯ͠ӡ༻Ͱ͖ΔΑ͏ʹͳ͍ͬͯ Δ͔Ͳ͏͔ • ಡΈ΍͢͞ɺॻ͖΍͢͞ɺνʔϜशख़౓ͳͲ ͷ؍఺͔Βٕज़બఆ͍ͯ͠Δ͔ͳͲ
44. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • (ֶशͱվળ) ੩తܕ෇͚ݴޠ΍ίʔυϑΥʔϚολʔΛ ಋೖͯ͠ɺίʔυϕʔεͷಡΈ΍͢͞ͱอकੑΛ޲্ͤ͞ ͍ͯΔ͔ • (ϝτϦΫεͷܭଌ) όάͷൃੜ཰ɺίʔυϨϏϡʔͷ࣌ ؒͳͲɺίʔυϕʔεͷอकੑʹؔ࿈͢ΔϝτϦΫεΛ ຖ݄௥੻͠ɺ࢛൒ظ͝ͱʹվળͷͨΊͷΞΫγϣϯΛܭ ըɾ࣮ࢪ͍ͯ͠Δ͔
45. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • (ϓϥΫςΟε) ܕ৘ใΛAPIϨϕϧͰڞ༗͢ΔͨΊͷπʔϧ ʢྫ: GraphQLɺTypeScriptͳͲʣΛ׆༻͠ɺ݄ʹ1ճҎ্ ͷස౓Ͱܕͷໃ६΍ΤϥʔΛνΣοΫͯ͠ɺίʔυϕʔεશ ମͷܕ҆શੑΛ֬อ͍ͯ͠Δ͔ • (Ξϯνύλʔϯ) ੩తܕ੍໿Λ݄ʹ1ճҎ্ͷස౓ͰνΣο Ϋ͍ͯ͠ͳ͍͔ɺܕͷໃ६΍Τϥʔ͕์ஔ͞Ε͍ͯΔ͔ɺ· ͨɺܕ੍໿Λແࢹͯ͠ͷਐḿใࠂ͕සൟʹߦΘΕ͍ͯΔ͔
46. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ཰ • πʔϧʹΑΔޮ཰ੑͷΞοϓ͕Ͳ͜·ͰͰ͖ ͍ͯΔ͔ • ྫ͑͹ build πʔϧ͕஗͗ͨ͢Γ͠ͳ͍͔ • Mock ͱ͔Λద੾ʹ࢖ͬͯ։ൃޮ཰্͛ͯΔ͔
47. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ཰ • ʢֶशͱվળʣओཁͳΤσΟλʢྫ: VSCode, IntelliJͳͲʣɺϑΥʔϚολʔɺϦϯλʔ Λ൒೥ʹ1ճҎ্ͷස౓Ͱߋ৽ɾݕ౼͠ɺ։ൃޮ཰ͷ޲্Λਤ͍ͬͯΔ͔ • ʢϝτϦΫεʣϏϧυ࣌ؒɺςετ࣮ߦ࣌ؒɺσϓϩΠ࣌ؒͳͲͷϝτϦΫεΛຖि௥ ੻͠ɺ݄͝ͱʹπʔϧνΣΠϯͷޮ཰ੑͷͨΊͷΞΫγϣϯΛܭըɾ࣮ࢪ͍ͯ͠Δ͔ • ʢϓϥΫςΟεʣCI/CDύΠϓϥΠϯΛద੾ʹઃఆ͠ɺܧଓతΠϯςάϨʔγϣϯΛࣗ ಈԽ͍ͯ͠Δ͔ɻ·ͨɺϩʔΧϧ։ൃ؀ڥʹ͸ϞοΫαʔόʔ΍APIͷςετ؀ڥΛ੔ උ͠ɺޮ཰తͳ։ൃ͕Մೳ͔ • ʢΞϯνύλʔϯʣπʔϧͷબఆ͕νʔϜ಺Ͱ͹Β͹ΒͰ͋ΓɺෆඞཁͳΧελϚΠζ ͕૿͑ɺ։ൃޮ཰͕௿Լ͍ͯ͠ͳ͍͔
48. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • ٕज़τϨϯυʹৼΓճ͞Ε͍ͯͳ͍͔ • ΞϓϦέʔγϣϯͷಛੑ͸ཧղ͍ͯ͠Δͷ͔ • ࣄۀ໨ઢͰϥΠϒϥϦ΍ϑϨʔϜϫʔΫΛબ ఆ͍ͯ͠Δ͔
49. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • (ֶशͱվળ) ٕज़τϨϯυΛ௥੻͠ɺ৽ͨͳπʔϧ΍ϥΠϒϥ ϦͷධՁΛఆظతʹߦ͍ͬͯΔ͔ • ʢϝτϦΫεʣ طଘͷ࢖༻ٕज़ͷΞοϓσʔτස౓ɺٕज़ε λοΫͷෳࡶ͞ɺηΩϡϦςΟࣄ৅ͳͲΛධՁɾվળ͍ͯ͠Δ ͔ • ʢΞϯνύλʔϯʣྲྀߦΓͷٕज़΍࠷৽ϥΠϒϥϦΛແཧʹऔ ΓೖΕɺٕज़ελοΫ͕ա৒ʹෳࡶԽͯ͠͠·͍ͬͯͳ͍͔
50. ϢʔβʔମݧΛࢧ͑Δ ඇػೳཁٻ
51. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ඇػೳཁٻΛΨϯແࢹͯ͠ਐΊΔͱ݁ہग़དྷ্ ͕ͬͨ΋ͷ͕࢖͍ʹ͘͘ͳΔ • ͲͷඇػೳཁٻʹͲͷఔ౓Ԡ͑Δ΂͖ͰɺͲ͏ର ॲ͢Δ͔Λఆٛͯ͠ɺݕ౼ࡐྉʹͯ͠΋Β͍͍ͨ • ϑϩϯτΤϯυͰݴ͑͹ύϑΥʔϚϯεɺΞΫη γϏϦςΟɺϝϯςφϯαϏϦςΟɺσβΠϯɺ ͳͲͳͲͨ͘͞Μඇػೳཁٻ͕͋Δ
52. ྫΛڍ͛Δ
53. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ϨΠςϯγʔͱεϧʔϓοτͷ֓೦Λཧղ͠ɺԿ͕Կ Ͱ΋ ʮLighthouse 100఺ͩʂʯͱ͔ʹͳ͍ͬͯͳ͍ ͜ͱ • దٓύϑΥʔϚϯενϡʔχϯάίϯςετͳͲͰֶ ΂ΔλΠϛϯάΛ࡞ͬͯཉ͍͠ • ݱঢ়෼ੳͱ໨ඪઃఆ͕Ͱ͖Δࡐྉ͕ἧ͍ͬͯͯ΄͍͠
54. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ʢֶशͱվળʣCPU΍ϝϞϦɺωοτϫʔΫͱݴͬͨجຊతͳ߲໨ʹ͍ͭ ͯͷϓϩϑΝΠϧΛऔΕɺݟํʹֶ͍ͭͯश͍ͯ͠Δ͔ • ʢϝτϦΫεʣJavaScript΍CSSɺը૾ͱ͍ͬͨ੩తΞηοτͷσʔλα ΠζΛܭଌ͠ɺύϑΥʔϚϯεόδΣοτͱͯ͠༧ࢉ؅ཧ͕Ͱ͖͍ͯΔ͔ • ʢΞϯνύλʔϯʣࣗ෼͕ͨͪ഑৴͍ͯ͠Δ΢ΣϒΞϓϦέʔγϣϯ͕Ͳ Ε͘Β͍ͷϑΝΠϧαΠζΛ഑৴͍ͯ͠Δ͔Λ೺Ѳ͍ͯ͠ͳ͍ • ʢΞϯνύλʔϯʣ໨ඪΛ࣋ͨͣʹܭଌ͠ɺࡍݶͳ͘νϡʔχϯάΛ͠Α ͏ͱ͍ͯ͠Δ
55. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ΞΫηγϏϦςΟ • ׂΓͱ·ͩಋೖͰ͖͍ͯΔ։ൃ͕গͳ͍ྖҬ • ಛʹ։ൃ໘Ͱ͸πʔϧ͸ग़͖͍ͯͯΔ΋ͷ ͷɺຊདྷతͳҙຯͰͷΞΫηγϒϧͳΞϓϦ έʔγϣϯͷ։ൃ͸·ͩτϥΠΞϧΛ͍ͯ͠ Δ૊৫͕ଟ͍ͱ͍͏ҹ৅
56. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ΞΫηγϏϦςΟ • ʢϝτϦΫεʣΞΫηγϏϦςΟͷ੩తղੳΛߦ͏πʔϧΛ༻͍ͯɺఆظతʹܭଌΛߦͬͯ ͍Δ͔ • ʢϓϥΫςΟεʣ࣮૷νΣοΫϦετΛ࡞੒͠ɺ४ڌ͍ͯ͠Δ͜ͱΛ֬ೝ͍ͯ͠Δ͔ • ࢀߟ: https://waic.jp/docs/jis2016/test-guidelines/202012/ • https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/ • ʢΞϯνύλʔϯʣHTMLͷηϚϯςΟΫεΛແࢹ࣮ͨ͠૷ʹͳ͍ͬͯΔ • ʢΞϯνύλʔϯʣλονύου΍ϙΠϯςΟϯάσόΠεͰͷΈ੍ޚͰ͖ΔUIʹͳͬͯ͠ ·͍ͬͯΔ • ʢΞϯνύλʔϯʣνΣοΫπʔϧ͚ͩʹཔΓɺςετ࣮ࢪऀʹΑΔ֬ೝ͕ߦΘΕ͍ͯͳ͍
57. Ձ஋ͷσϦόϦʔΛߦ͏ ϓϩηε (CI/CD)
58. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε (CI/CD) • CI/CDͳͲܧଓͯ͠σϦόϦʔΛߦ͏ࡍʹ΋ʮߴ ଎ʹԾઆݕূ͢Δʯ࢓૊Έ͕ඞཁʹͳΔ • ϑϩϯτΤϯυ΋ྫ֎Ͱ͸ͳ͘ɺಛʹA/Bςετ ͳͲͰ࡞ΓΛҧ͑Δͱ໰୊ʹͳΓ΍͍͢ • ଞʹ΋Τϥʔ΍ো֐ൃੜ࣌ʹΠϯϑϥʹ೚͖ͤΓ ʹ͢ΔͳͲͷରԠ͕औΒΕͯ͠·͏ͱ໰୊ʹͳΔ
59. ྫΛڍ͛Δ
60. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε • ςετ • ʢֶशͱվળʣΨΠυϥΠϯ΍ςετΧόϨοδͷج४Λఆظతʹݟ௚ ͠ɺνʔϜશମͷεΩϧηοτͱχʔζʹ߹Θͤͯߋ৽͍ͯ͠Δ͔ɻ • ʢϝτϦΫεʣςετΧόϨοδͷπʔϧΛఆظతʹߋ৽͠ɺະΧόʔͷ ྖҬ͕͋Δ৔߹͸ɺద੾ͳςετέʔεΛ௥Ճͯ͠ΧόϨοδΛ޲্ͤ͞ ΔऔΓ૊ΈΛߦ͍ͬͯΔ͔ • ʢϝτϦΫεʣςετ͕30෼Λ௒͑Δ৔߹ɺςετͷ෼ׂ΍ฒྻ࣮ߦΛݕ ౼͠ɺಛఆͷςετ͕ಛʹ͕͔͔࣌ؒΔ৔߹͸ɺͦͷςετͷ࠷దԽΛݕ ౼͢Δɻ·ͨɺසൟʹࣦഊ͢Δςετ΍ϑϨʔΩʔͳςετ͕ଘࡏ͢Δ৔ ߹͸ɺͦͷݪҼΛಛఆͯ҆͠ఆੑΛ޲্ͤ͞ΔऔΓ૊ΈΛߦ͍ͬͯΔ͔ɻ
61. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε • σϓϩΠ • ʢֶशͱվળʣa/b test, feature fl ag, canary releaseͳͲͷࢼ࣮ͯ͠ફͨ͠ ޙͰมߋ͠΍͍͢σϓϩΠΛߦ͍ͬͯΔ͔ • ʢϝτϦΫεͷܭଌʣ σϓϩΠͷස౓΍ϦʔυλΠϜΛՄࢹԽ͢ΔͨΊͷ μογϡϘʔυΛ࡞੒ɾ੔උ͍ͯ͠Δ͔ɻ͜ΕʹΑΓɺ։ൃ͔Βຊ൪؀ڥ ΁ͷมߋ͕ͲΕ͚ͩਝ଎ʹద༻͞Ε͍ͯΔ͔ΛνʔϜશһͰڞ༗͠ɺܧଓ తͳվળΛߦ͏ͨΊͷࢦඪͱ͢Δɻ۩ମతʹ͸ɺมߋͷϦʔυλΠϜɺσ ϓϩΠͷස౓ɺมߋ࣌ͷࣦഊ཰ɺ෮چ࣌ؒͳͲΛμογϡϘʔυͰҰ໨Ͱ ֬ೝͰ͖ΔΑ͏ʹ͢Δɻ • ʢΞϯνύλʔϯʣσϓϩΠҰճʹରͯ͠1࣌ؒҎ্ͷ͕͔͔࣌ؒΔ
62. γεςϜɺΞϓϦέʔγϣϯ ӡ༻ʢΞʔΩςΫνϟʣ
63. ྫΛڍ͛Δ
64. γεςϜɺΞϓϦέʔγϣϯӡ ༻ • BFFɺAPIઃܭ • ʢϓϥΫςΟεʣϑϩϯτΤϯυΤϯδχΞଆ͔ Β΋APIઃܭΛఏҊͰ͖Δ؀ڥʹͳ͍ͬͯΔ͔ • ʢΞϯνύλʔϯʣόοΫΤϯυΤϯδχΞ͚ͩ ͕ओಋͯ͠APIΛઃܭ͓ͯ͠ΓɺϑϩϯτΤϯυ ΤϯδχΞ͕ར༻͠ʹ͍͘ઃܭʹͳ͍ͬͯͳ͍͔
65. γεςϜɺΞϓϦέʔγϣϯӡ ༻ • Πϯϑϥ • ʢϓϥΫςΟεʣϑϩϯτΤϯυ୲౰ऀ΋ Web ʹؔΘΔΠϯϑϥͷߏ੒Λ೺ѲͰ͖͍ͯ ͯɺো֐ରԠʹࢀըͰ͖Δ • ʢΞϯνύλʔϯʣϓϩμΫτͷಛੑΛؑΈͳ ͍ըҰతʹ༻ҙ͞Εͨߏ੒͕ڧ੍͞Εͯ͠·͏
66. νʔϜɺ૊৫
67. νʔϜɺ૊৫ • ઐ໳૊৫ͷӡ༻ • ྲྀΕͷૣ͍ϑϩϯτΤϯυྖҬʹରԠ͢ΔͨΊʹ ΍͓͍ͬͯͨ΄͏͕͍͍͜ͱ • ྫ͑͹ઐ໳૊৫Λ഑ஔ͠ɺԣஅతʹؔΘΕΔΑ͏ʹ ͢ΔɺͳͲ • ͍ΘΏΔΠωʔϒϦϯάνʔϜͷΑ͏ͳӡ༻Λ૝ ఆ
68. νʔϜɺ૊৫ • ෼୲ɺ৬຿είʔϓͷఆٛ • ϑϩϯτΤϯυΤϯδχΞ͸ίϛϡχέʔγϣϯͷϋϒʹͳΓ΍͍͢ • ҰํͰྡ઀૊৫ͷ࢓ࣄ΋೚͞Ε΍͍͢ • ྫ) σΟϨΫγϣϯۀ຿ΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔ • ྫ) ϚʔέςΟϯά૊৫ଆͰඞཁͳGAͷௐࠪ΍ઃఆΛϑϩϯτΤ ϯυΤϯδχΞ͕ߦ͍ͬͯΔͳͲ • ϝϯόʔ͕ຊདྷൃش͢΂͖όϦϡʔΛ્֐ͯ͠͠·͏Α͏ͳέʔε͕ ͳ͍Α͏ʹ͍ͨ͠
69. νʔϜɺ૊৫ • ࣾ಺֎ͷൃ৴ • (ֶशͱվળ) ఆظతʹ಺෦ͷϫʔΫγϣοϓ΍ηϛφʔΛ։ ࠵͠ɺΤϯδχΞಉ࢜Ͱ৘ใͷཪ෇͚΍࣮ࡍͷίʔυಈ࡞ͷ ڞ༗Λߦ͏ɻ·ͨɺൃ৴લʹ͸ϐΞϨϏϡʔΛߦ͍ɺ಺༰ͷ ਖ਼֬ੑ΍࣭Λ֬อ͢Δɻ • (ϝτϦΫεͷܭଌ) νʔϜશମͰൃ৴ͷKPIΛఆΊɺͦΕʹ ج͍ͮͯఆظతʹ਺஋ΛϞχλϦϯά͢Δɻ·ͨɺࣾ಺Ͱͷ ڞ༗ϛʔςΟϯάΛઃ͚ɺ੒ޭࣄྫ΍վળ఺Λڞ༗͢Δɻ
70. ਐḿͱͯ͠͸ɾɾɾ 11݄த०ʹୈҰ஄ϦϦʔε͕ Ͱ͖Δͱ͍͍ͳͱࢥͬͯ·͢
71. ͜Μͳײ͡ͰӶҙ࡞੒தͰ͢
72. ͨͩ͜ͷج४͸͋͘·Ͱ ج४Ͱ͋ͬͯʮ͜Ε͕ୡ੒Ͱ ͖͍ͯͳ͍͔Βବ໨ͳ։ൃʯ ͱ͍͏෩ʹଊ͑ͯ΄͘͠ͳ͍ Ͱ͢ɻ
73. ຊ౰ͷҙຯͰڧ͍૊৫͸ըҰ తʹج४ʹै͏૊৫Ͱ͸ͳ ͘ɺج४Λॊೈʹଊ͑ͯࣗ෼ ͨͪʹΧελϚΠζͰ͖Δ૊ ৫ͩͱࢥ͍ͬͯ·͢ɻ
74. ࣗ෼͕ݟ͖ͯͨ։ൃͷதͰ ࠔͬͯΔਓͨͪΛࠓޙগ͠Ͱ ΋ॿ͚ʹͳΕ͹ͱࢥ͍·͢ɻ
75. ͋Γ͕ͱ͏͍͟͝·ͨ͠