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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠