$30 off During Our Annual Pro Sale. View Details »

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

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

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

Yosuke Furukawa
PRO

September 20, 2023
Tweet

More Decks by Yosuke Furukawa

Other Decks in Technology

Transcript

  1. ϑϩϯτΤϯυͷ։ൃ
    ੜ࢈ੑͱ͸
    2023/09/21 @ Findy Online Conference

    View Slide

  2. X(Twitter): @yosuke_furukawa


    Github: yosuke-furukawa

    View Slide

  3. JSConf.jp ticket
    page is open.
    ࠓ೥͸ΦϑϥΠϯͱΦϯϥΠϯ
    ͷϋΠϒϦου։࠵༧ఆ


    ΦϯϥΠϯ͸10݄ࠒʹެ։͠·
    ͢ɻ


    ઌߦͯ͠དྷͯ͘ΕΔํ͸ࠓͷ
    ϖʔδ͔Βདྷ͍ͯͩ͘͞ʂ

    View Slide

  4. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ϑϩϯτΤϯυͷ։ൃੜ࢈ੑͱ͸ʮҠΓมΘ
    Γ͕ܹ͘͠ɺ͓΋ͯͳ͠Λେࣄʹ͠ͳ͍ͱ͍
    ͚ͳ͍ྖҬͷதͰɺ։ൃऀͷମݧΛྑͯ͘͠
    Ξ΢τϓοτͷޮ཰ΛߴΊΔ͜ͱʯΛࢦͯ͠
    ͍Δʢ௕͍ʣɻ

    View Slide

  5. ։ൃͷੜ࢈ੑͱ͸

    View Slide

  6. ։ൃͷੜ࢈ੑͱ͸
    • ͦ΋ͦ΋ੜ࢈ੑ͸΋͏͢Ͱʹ͕ܾࣜ·ͬͯ
    Δɻ


    • ੜ࢈ੑ = Ξ΢τϓοτ/Πϯϓοτ

    View Slide

  7. ։ൃͷੜ࢈ੑͱ͸
    • Ξ΢τϓοτ͸ԿͰଌΔͷ͔ʁ


    • ίʔυͷྔʁ


    • PR਺ʁը໘਺ʁίϯϙʔωϯτ਺ʁ


    • ετʔϦʔϙΠϯτʁ


    • ސ٬ຬ଍౓ʁ

    View Slide

  8. ։ൃͷੜ࢈ੑͱ͸
    • Πϯϓοτ͸ԿͰଌΔͷ͔ʁ


    • ࿑ಇ࣌ؒʁ࿑ಇਓ਺ʁ


    • ։ൃਓ݅අʁ


    • ૯ࣄۀίετʁ

    View Slide

  9. ։ൃͷੜ࢈ੑͱ͸
    • ੜ࢈ੑ = Ξ΢τϓοτ/Πϯϓοτ


    • ࣜ͸୯७ͦ͏ʹݟ͑Δ͕ɺ࣮ࡍʹ͸Ξ΢τ
    ϓοτͱΠϯϓοτ͸։ൃ૊৫ʹΑͬͯଊ͑
    ํ͕ҟͳΔɻ


    • ׬શʹϒϨͨ··ͩͱఆࣜԽ͠ʹ͍͘ͷͰɺ
    ͋Δఔ౓ݟ͑ΔԽ͠Α͏ͱͨ͠ࢼΈ΋͋Δɻ

    View Slide

  10. ։ൃͷੜ࢈ੑͱ͸
    • Lean ͱ DevOps ͷՊֶͷྫ:


    • 4ͭͷଌఆج४Λஔ͍ͯ։ൃ૊৫ͷύϑΥʔ
    ϚϯεΛଌఆ͍ͯ͠Δɻ


    • ϦʔυλΠϜɺσϓϩΠස౓

    ฏۉम෮࣌ؒɺมߋࣦഊ཰
    https://book.impress.co.jp/books/1118101029

    View Slide

  11. ։ൃͷੜ࢈ੑͱ͸
    • Lean ͱ DevOps ͷՊֶͷྫ:



    View Slide

  12. ։ൃͷੜ࢈ੑͱ͸
    • Lean ͱ DevOps ͷՊֶͷྫ:



    ੜ࢈ੑ͕ߴ͍ঢ়ଶͱ͸ɺσϓϩΠස౓͕ଟ͘ɺมߋʹ͔͔Δ͕࣌ؒগ
    ͳ͘ɺमਖ਼͕ඞཁʹͳͬͨͱ͖΋ૣ͘ɺͦ΋ͦ΋ࣦഊ͕গͳ͍ঢ়ଶ

    View Slide

  13. ։ൃͷੜ࢈ੑͱ͸
    • Lean ͱ DevOps ͷՊֶͷྫ:


    • ͞Βʹ໘ന͍ͷ͸͜͏͍ͬͨΞ΢τϓοτ͕૑
    ଄ੑͷߴ͍૊৫จԽͷܗ੒΍ैۀһຬ଍౓ʹ
    ΋ؔ࿈͢Δͱ͍͏࿩͕هࡌ͞Ε͍ͯΔ఺


    • ։ൃͷੜ࢈ੑʹ͸։ൃऀ͕ಇ͖΍͢͞΍૊৫
    ࣗମͷจԽ͕ؔΘ͍ͬͯΔͱ͍͏࿩͕ग़ͯ͘Δ

    View Slide

  14. ։ൃͷੜ࢈ੑͱ͸
    • SPACE ͷྫ (2021೥ͷ࿦จ):
    https://dl.acm.org/doi/10.1145/3454122.3454124

    View Slide

  15. ։ൃͷੜ࢈ੑͱ͸
    • SPACE ͷྫ (2021೥ͷ࿦จ):


    • Ξ΢τϓοτͷྔ΍਺͚ͩʹ஫໨͢ΔͷͰ͸
    ͳ͘ɺଞʹ΋͍͔ͭ͘ͷࢦඪʹ஫໨ͯͦ͠ͷ
    ࢦඪΛ૊৫ن໛ʹԠͯ͡બ΂ΔΑ͏ʹ͠Α
    ͏ͱ͍͏ߟ͑ํ

    View Slide

  16. ։ൃͷੜ࢈ੑͱ͸
    • SPACE ͷྫ (2021೥ͷ࿦จ):


    • Satisfaction & Well-Being:

    ։ൃऀ͕ͲΕ͚ͩ޾͔ͤɹʢྫɿඞཁͳπʔϧΛબ΂͍ͯΔ͔ɺνʔϜͷNPS͸Ͳ͏͔ͳͲʣ


    • Performance:

    ॻ͍ͨίʔυ͕ͲΕ͚ͩͪΌΜͱϫʔΫ͔ͨ͠ɹʢྫɿόάൃੜ݅਺ɺސ٬ຬ଍౓ɺαʔϏεՔ
    ಇ཰ͳͲʣ


    • Activity: Ξ΢τϓοτͷ਺ɹʢྫɿɹPRϚʔδ਺ɺίϛοτ਺ɺσϓϩΠස౓ͳͲʣ


    • Communication & Collaboration:

    ίϛϡχέʔγϣϯͱڠྗʢྫɿΦϯϘʔσΟϯάͷ࣌ؒ΍ମݧɺίʔυϨϏϡʔͷ࣭ͱମݧɺ
    PRͷϚʔδ͞ΕΔ·Ͱͷ࣌ؒͳͲʣ


    • Ef
    fi
    ciency & Flow: ޮ཰ͱ࡞ۀϑϩʔʢྫɿίʔυϨϏϡʔλΠϛϯάɺׂΓࠐΈλεΫͷগͳ͞ʣ

    View Slide

  17. ։ൃͷੜ࢈ੑͱ͸
    • SPACE ͷྫ (2021೥ͷ࿦จ):


    • GitHub Copilot ಋೖͷධՁ΋SPACEͰߦΘΕͨྫ͕͋Δ


    • ͪͳΈʹͦͷ࣌ͷධՁ͸ͪ͜Βɻ
    https://github.blog/2022-09-07-research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/

    View Slide

  18. ։ൃͷੜ࢈ੑͱ͸
    • Ξ΢τϓοτ / Πϯϓοτͱ͍͏Ұݟ୯७ͳࣜͰද͞Ε͍ͯΔ
    ͕ɺ࣮ࡍʹ͸͔ͳΓ։ൃ૊৫ґଘ


    • ΋͏গ͠۩ମԽͨ͠ྫͱͯ͠LeanͱDevOpsͷՊֶ΍ SPACEϑ
    ϨʔϜϫʔΫͱ͍ͬͨऔΓ૊Έ͕͋Δ


    • ͜ΕΒͷऔΓ૊ΈͷதͰ͸୯ͳΔΞ΢τϓοτʹண໨͍ͯ͠ͳ
    ͍ɻ


    • ಛʹ։ൃऀͷຬ଍౓΍ίϛϡχέʔγϣϯɺจԽͱ͍ͬͨपล
    ͷঢ়گʹ஫໨͍ͯ͠Δ

    View Slide

  19. ։ൃͷੜ࢈ੑͱ͸
    • ࠷ۙ͸΋͏͢ͰʹΞ΢τϓοτ/Πϯϓοτͷ୯
    ७ͳࣜͷ͜ͱΛࢦ͍ͯ͠ͳ͍


    • ͦΕΒΛऔΓר͘पลͷ؀ڥɺจԽɺ૊৫ɺݖݶ
    ͳͲͷෳ߹తͳཁૉΛ૊Έ߹Θͤͯදݱ͍ͯ͠Δ


    • ͜ΕΒΛؙͬͱͻͬ͘ΔΊͯɺ։ൃऀମݧ
    ʢDeveloper ExperienceʣͱݴͬͨΓ͢Δ

    View Slide

  20. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ

    View Slide

  21. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ։ൃͷੜ࢈ੑٴͼ։ൃऀମݧͱ͍͏؍఺Ͱݴ͑
    ͹ಛʹϑϩϯτΤϯυ΋όοΫΤϯυ΋ؔ܎͸
    ͳ͍


    • ͨͩϑϩϯτΤϯυ͸։ൃπʔϧɺϕετϓϥΫ
    ςΟε΍ΞʔΩςΫνϟͷҠΓมΘΓ͕ܹ͍͠


    • ͦΕʹ൐ͬͯຬ଍౓΋ӨڹΛड͚΍͍͢

    View Slide

  22. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ҠΓมΘΓͷܹ͍͠ྫɿ


    • ։ൃϥΠϒϥϦฤ


    • ίϯϙʔωϯτϥΠϒϥϦͷมભʢBackbone, Angular, Vue, Reactʣ


    • ঢ়ଶ؅ཧϥΠϒϥϦͷมભʢRedux,
    fl
    ux, Recoil, Jotaiʣ


    • CSS पลϥΠϒϥϦɾπʔϧͷมભʢSass, CSS Modules, vanilla-
    extract, Tailwind etcʣ


    • ϝλϑϨʔϜϫʔΫͷมભʢNuxt.js, Next.js, Remix)

    View Slide

  23. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ҠΓมΘΓͷܹ͍͠ྫɿ


    • ඇػೳཁٻฤ


    • ύϑΥʔϚϯε


    • Core Web VitalsʢLCP, CLS, INP, TTIʣ


    • A11y (WCAG 2.0, 2.1, 2.2)


    • ςετʢVRT, E2E, Testing pyramid)

    View Slide

  24. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ҠΓมΘΓͷܹ͍͠ྫɿ


    • ΞʔΩςΫνϟฤ


    • CDN ೖΕΔ / ೖΕͳ͍


    • BFF ೖΕΔ / ೖΕͳ͍


    • GraphQL ೖΕΔ / ೖΕͳ͍

    View Slide

  25. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ϑϩϯτΤϯυ͸͢Ͱʹͨͩͷݟͨ໨Λ࡞Δ
    ͱ͍͏࡞ۀʹཹ·͍ͬͯͳ͍


    • Ϣʔβʔͱͷ͓΋ͯͳ͠ͷ෦෼Ͱ͋ΓɺϢʔ
    βʔͱͷឺΛ࡞Δ෦෼Λ୲͍ͬͯΔ


    • System of Engagement (SoE) ͱ΋ݴ͏

    View Slide

  26. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ϑϩϯτΤϯυͷ։ൃੜ࢈ੑͱ͸ʮҠΓมΘ
    Γ͕ܹ͘͠ɺ͓΋ͯͳ͠Λେࣄʹ͠ͳ͍ͱ͍
    ͚ͳ͍ྖҬͷதͰɺ։ൃऀͷମݧΛྑͯ͘͠
    Ξ΢τϓοτͷޮ཰ΛߴΊΔ͜ͱʯΛࢦͯ͠
    ͍Δʢ௕͍ʣɻ

    View Slide

  27. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ҠΓมΘΓ͕ܹ͍͠தͰͲ͏΍ͬͯੜ࢈ੑΛอͭͷ
    ͔


    • ͜͜ʹΞϓϩʔν͕͍͔ͭ͋͘Δ


    • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏


    • ϘτϜΞοϓʹ΍Δํ๏


    • τοϓμ΢ϯʹ΍Δํ๏

    View Slide

  28. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏


    • ࣗ෼͕ͨͪҰ൪ྑ͍ͱࢥ͍ͬͯΔํ๏ΛҰ؏ͯ͠΍Γൈ
    ͘


    • पғͷมߋ͸͋ΕͲɺҰ౓ܾΊͨํ๏Λม͑ͯ͠·͏
    ͱɺνʔϜશମʹҭ੒ڭҭίετ͕͔͔Δ


    • ҰԠཧʹ͔ͳ͍ͬͯΔɺνʔϜͷ։ൃϓϩηεͷशख़౓
    ্͕͕ΔͷͰ͋Ε͹ɺͦΕʹ߹Θͤͯੜ࢈ੑ΋্͕Δ

    View Slide

  29. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏


    • ແཧʹ৽͍͠ํ๏ʹมߋ͢Δඞཁ͸ͳ͍ɺݹ͍΍ΓํͰ΋ࣗ෼͕ͨͪੜ࢈తͩ
    ͱײ͡ΔͳΒͦΕͰྑ͍


    • ҭ੒ίετͱ৽͍͠ํ๏ʹมΘͬͨࣄͰͷੜ࢈ੑվળΛఱṝʹ͔͚ͯ΍ͬͨํ
    ͕͍͍͔൑அͯ͠ཉ͍͠


    • ͨͩ͠ɺมΘΒͳ͍͜ͱΛͣͬͱଓ͚͍ͯΔͱɺ͍͔ͭ୭΋։ൃΛܧଓͰ͖ͳ
    ͘ͳΔՄೳੑ͸͋Δ


    • ։ൃτϨϯυ͕มΘͬͯ͠·͍ɺ৽͍͠ਓ͕࠾༻Ͱ͖ͳ͍


    • ࢖͍ͬͯΔϥΠϒϥϦͷEoL͕੾Ε͍ͯͯɺηΩϡϦςΟ໰୊͕͋Δͷʹܧ
    ଓ͠ͳ͍ͱ͍͚ͳ͍ϦεΫΛ๊͑Δ

    View Slide

  30. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ϘτϜΞοϓʹ΍Δํ๏


    • ݱ৔ͷϨϕϧͰ஌ݟΛͨΊ্͍ͯ͛ͯ͘


    • ษڧձͩͬͨΓϋοΧιϯͩͬͨΓ΋༗ޮ


    • ڭ͑ͯ͘ΕΔਓΛั·͑ͯ௚઀ڭ͑ͯ໯͏ํ
    ๏΋͋Δ

    View Slide

  31. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • ϘτϜΞοϓʹ΍Δํ๏


    • جຊ͸͜ͷํ๏͕ͩɺݶք͸͋Δ


    • ਓ਺͕ͦΜͳʹ͍ͳ͍ͱ͔ΩϟονΞοϓΑΓ΋
    ೔ʑͷλεΫʹ௥ΘΕͯ͠·͍ɺֶͼΛಘΒΕΔػ
    ձ͕গͳ͍ͱ͔


    • τοϓμ΢ϯʹ΍Δํ๏ͳͲΛऔΓೖΕ͍͖ͯɺෳ
    ਺ͷΞϓϩʔνΛซ༻͍ͨ͠

    View Slide

  32. ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ
    • τοϓμ΢ϯʹ΍Δํ๏


    • ࢦ਑ͱͳΔ΋ͷΛܾΊ͔ͯͦ͜Β͓Ζ͍͖͍ͯͨ͠


    • ϑϩϯτΤϯυͷઃܭʹࢦ਑Λ΋ͨͤΒΕ͍ͯͳ͍͔Βํ਑͕ϒϨΔ


    • ઃܭͦͷ΋ͷ͸ΞϓϦέʔγϣϯಛੑʹدͬͯมΘΔ͕ɺઃܭΛ͢ΔͨΊ
    ͷํ਑ͳΒ͋Δఔ౓دͤूΊͨ஌ݟΛݩʹ࡞Ε͹Ͱ͖ΔͷͰ͸ͳ͍
    ͔ɾɾɾʁ


    • ϑϩϯτΤϯυͷࢦ਑Λ࡞Εͳ͍͔ɾɾɾʁ


    • Ͱ͖ͨΒɺνΣοΫϘοΫεܗࣜͰճ౴Ͱ͖ͯࣗ෼͕ͨͪͲΕ͘Β͍ੜ࢈
    ੑʹߩݙͰ͖͍ͯΔ͔ଌΕͦ͏ͳɺɺɺDX Criteria Έ͍ͨͳɻɻɻ

    View Slide

  33. ͱ͍͏Θ͚Ͱɺຊ୊


    ϑϩϯτΤϯυͷ DX
    Criteria Λ࡞͍ͬͯΔ࿩

    View Slide

  34. DX Criteria ͱ͸
    • ։ൃੜ࢈ੑͱσδλϧτϥϯεϑΥʔϝʔ
    γϣϯͷ྆ํΛ͔͚ͯԾઆݕূαΠΫϧΛ͏
    ·͘ճͤΔΑ͏ʹݕ౼ͨ͠΋ͷ
    https://dxcriteria.cto-a.org/

    View Slide

  35. ϑϩϯτΤϯυ൛DX Criteria
    • ຊՈ DX Criteria ͸ߴ଎ͳԾઆݕূΛճͯ͠૊৫಺ͷૉૣ͍ݕ
    ূͱࣦഊͱֶͼΛ࠷େԽ͠Α͏ͱ͢ΔͨΊͷํ਑Ͱ࡞ΒΕͨ



    • ͦͷΤοηϯε෦෼͸࢒ͭͭ͠ɺϑϩϯτΤϯυྖҬʹಛԽ͢
    Δ


    • ຊՈ͸ձࣾͷ࿩΋ଟ͍͕ɺϑϩϯτΤϯυͱ͍͏ྖҬʹด͡
    ΔͷͰɺձࣾͷ࿩͸গͳΊ


    • ҰํͰσβΠϯͱͷڠۀ΍ؔ࿈෦ॺͱͷ࿩͸ଟΊ

    View Slide

  36. ϑϩϯτΤϯυ൛ DX Criteria
    • ࡞੒ऀ


    • yosuke_furukawa


    • ahomu


    • ϨϏϡʔ


    • hirokidaichi

    View Slide

  37. DX CriteriaϙϦγʔ
    • ໌᏷ੑɿ Yes/NoͰ൑அ͠΍͘͢ͳ͍ͬͯΔ͔


    • ਎ମੑɿূڌ͕ͳ͘ͱ΋࣮ࡍʹݱ৔ͰධՁ͞Ε͍ͯΔ͔Ͳ
    ͏͔


    • ಉ࣌୅ੑɿ࣌୅Λ൓өͨ͠ΞοϓσʔτΛఆظతʹ΍Δ͜
    ͱ


    • Մ؍ଌੑɿ؍ଌͰ͖Δߦಈͷ෦෼ͰධՁ͢Δ͜ͱ


    • ඇݶఆੑɿखஈΛݶఆ͗͢͠ͳ͍͜ͱ

    View Slide

  38. ϑϩϯτΤϯυ൛ DX Criteria
    • େςʔϚ͕5ͭ


    • ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕज़ελοΫ


    • ϢʔβʔମݧΛࢧ͑Δඇػೳཁٻ


    • Ձ஋ͷσϦόϦʔΛߦ͏ϓϩηε


    • γεςϜɾΞϓϦέʔγϣϯӡ༻ʢΞʔΩςΫνϟʣ


    • νʔϜϏϧσΟϯά

    View Slide

  39. ͪͳΈʹ·ͩ


    ຏ͖ࠐΈதͰ͢ʂʂʂ

    View Slide

  40. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δ
    ٕज़ελοΫ

    View Slide

  41. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ੜ࢈ੑΛ্͛ΔͨΊʹٕज़໘ͰϥΠϒϥϦ΍πʔ
    ϧΛ࢖ͬͯରॲ͢Δ


    • ͨͩٯʹ͜Ε΋΍Γա͗͸஫ҙ


    • ΫϥΠΞϯταΠυͷར༻؀ڥɺUIͷϕετϓϥ
    ΫςΟεͷมԽɺϥΠϒϥϦͷΞοϓσʔτͳ
    Ͳɺͱʹ͔͘มߋ΍मਖ਼͕ଟ͍ՕॴͰ͋Γɺͦ͜
    ʹରͯ͠Ͳ͏औΓ૊Ή͔ͱ͍͏ςʔϚ

    View Slide

  42. ྫΛڍ͛Δ

    View Slide

  43. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ίʔυͷอकੑ


    • ίʔυ͕ܧଓͯ͠ӡ༻Ͱ͖ΔΑ͏ʹͳ͍ͬͯ
    Δ͔Ͳ͏͔


    • ಡΈ΍͢͞ɺॻ͖΍͢͞ɺνʔϜशख़౓ͳͲ
    ͷ؍఺͔Βٕज़બఆ͍ͯ͠Δ͔ͳͲ

    View Slide

  44. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ίʔυͷอकੑ


    • (ֶशͱվળ) ੩తܕ෇͚ݴޠ΍ίʔυϑΥʔϚολʔΛ
    ಋೖͯ͠ɺίʔυϕʔεͷಡΈ΍͢͞ͱอकੑΛ޲্ͤ͞
    ͍ͯΔ͔


    • (ϝτϦΫεͷܭଌ) όάͷൃੜ཰ɺίʔυϨϏϡʔͷ࣌
    ؒͳͲɺίʔυϕʔεͷอकੑʹؔ࿈͢ΔϝτϦΫεΛ
    ຖ݄௥੻͠ɺ࢛൒ظ͝ͱʹվળͷͨΊͷΞΫγϣϯΛܭ
    ըɾ࣮ࢪ͍ͯ͠Δ͔

    View Slide

  45. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ίʔυͷอकੑ


    • (ϓϥΫςΟε) ܕ৘ใΛAPIϨϕϧͰڞ༗͢ΔͨΊͷπʔϧ
    ʢྫ: GraphQLɺTypeScriptͳͲʣΛ׆༻͠ɺ݄ʹ1ճҎ্
    ͷස౓Ͱܕͷໃ६΍ΤϥʔΛνΣοΫͯ͠ɺίʔυϕʔεશ
    ମͷܕ҆શੑΛ֬อ͍ͯ͠Δ͔


    • (Ξϯνύλʔϯ) ੩తܕ੍໿Λ݄ʹ1ճҎ্ͷස౓ͰνΣο
    Ϋ͍ͯ͠ͳ͍͔ɺܕͷໃ६΍Τϥʔ͕์ஔ͞Ε͍ͯΔ͔ɺ·
    ͨɺܕ੍໿Λແࢹͯ͠ͷਐḿใࠂ͕සൟʹߦΘΕ͍ͯΔ͔

    View Slide

  46. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • πʔϧνΣΠϯͱ։ൃޮ཰


    • πʔϧʹΑΔޮ཰ੑͷΞοϓ͕Ͳ͜·ͰͰ͖
    ͍ͯΔ͔


    • ྫ͑͹ build πʔϧ͕஗͗ͨ͢Γ͠ͳ͍͔


    • Mock ͱ͔Λద੾ʹ࢖ͬͯ։ൃޮ཰্͛ͯΔ͔

    View Slide

  47. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • πʔϧνΣΠϯͱ։ൃޮ཰


    • ʢֶशͱվળʣओཁͳΤσΟλʢྫ: VSCode, IntelliJͳͲʣɺϑΥʔϚολʔɺϦϯλʔ
    Λ൒೥ʹ1ճҎ্ͷස౓Ͱߋ৽ɾݕ౼͠ɺ։ൃޮ཰ͷ޲্Λਤ͍ͬͯΔ͔


    • ʢϝτϦΫεʣϏϧυ࣌ؒɺςετ࣮ߦ࣌ؒɺσϓϩΠ࣌ؒͳͲͷϝτϦΫεΛຖि௥
    ੻͠ɺ݄͝ͱʹπʔϧνΣΠϯͷޮ཰ੑͷͨΊͷΞΫγϣϯΛܭըɾ࣮ࢪ͍ͯ͠Δ͔


    • ʢϓϥΫςΟεʣCI/CDύΠϓϥΠϯΛద੾ʹઃఆ͠ɺܧଓతΠϯςάϨʔγϣϯΛࣗ
    ಈԽ͍ͯ͠Δ͔ɻ·ͨɺϩʔΧϧ։ൃ؀ڥʹ͸ϞοΫαʔόʔ΍APIͷςετ؀ڥΛ੔
    උ͠ɺޮ཰తͳ։ൃ͕Մೳ͔


    • ʢΞϯνύλʔϯʣπʔϧͷબఆ͕νʔϜ಺Ͱ͹Β͹ΒͰ͋ΓɺෆඞཁͳΧελϚΠζ
    ͕૿͑ɺ։ൃޮ཰͕௿Լ͍ͯ͠ͳ͍͔

    View Slide

  48. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ


    • ٕज़τϨϯυʹৼΓճ͞Ε͍ͯͳ͍͔


    • ΞϓϦέʔγϣϯͷಛੑ͸ཧղ͍ͯ͠Δͷ͔


    • ࣄۀ໨ઢͰϥΠϒϥϦ΍ϑϨʔϜϫʔΫΛબ
    ఆ͍ͯ͠Δ͔

    View Slide

  49. ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ
    ज़ελοΫ
    • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ


    • (ֶशͱվળ) ٕज़τϨϯυΛ௥੻͠ɺ৽ͨͳπʔϧ΍ϥΠϒϥ
    ϦͷධՁΛఆظతʹߦ͍ͬͯΔ͔


    • ʢϝτϦΫεʣ طଘͷ࢖༻ٕज़ͷΞοϓσʔτස౓ɺٕज़ε
    λοΫͷෳࡶ͞ɺηΩϡϦςΟࣄ৅ͳͲΛධՁɾվળ͍ͯ͠Δ
    ͔


    • ʢΞϯνύλʔϯʣྲྀߦΓͷٕज़΍࠷৽ϥΠϒϥϦΛແཧʹऔ
    ΓೖΕɺٕज़ελοΫ͕ա৒ʹෳࡶԽͯ͠͠·͍ͬͯͳ͍͔

    View Slide

  50. ϢʔβʔମݧΛࢧ͑Δ


    ඇػೳཁٻ

    View Slide

  51. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ඇػೳཁٻΛΨϯແࢹͯ͠ਐΊΔͱ݁ہग़དྷ্
    ͕ͬͨ΋ͷ͕࢖͍ʹ͘͘ͳΔ


    • ͲͷඇػೳཁٻʹͲͷఔ౓Ԡ͑Δ΂͖ͰɺͲ͏ର
    ॲ͢Δ͔Λఆٛͯ͠ɺݕ౼ࡐྉʹͯ͠΋Β͍͍ͨ


    • ϑϩϯτΤϯυͰݴ͑͹ύϑΥʔϚϯεɺΞΫη
    γϏϦςΟɺϝϯςφϯαϏϦςΟɺσβΠϯɺ
    ͳͲͳͲͨ͘͞Μඇػೳཁٻ͕͋Δ

    View Slide

  52. ྫΛڍ͛Δ

    View Slide

  53. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ύϑΥʔϚϯε


    • ϨΠςϯγʔͱεϧʔϓοτͷ֓೦Λཧղ͠ɺԿ͕Կ
    Ͱ΋ ʮLighthouse 100఺ͩʂʯͱ͔ʹͳ͍ͬͯͳ͍
    ͜ͱ


    • దٓύϑΥʔϚϯενϡʔχϯάίϯςετͳͲͰֶ
    ΂ΔλΠϛϯάΛ࡞ͬͯཉ͍͠


    • ݱঢ়෼ੳͱ໨ඪઃఆ͕Ͱ͖Δࡐྉ͕ἧ͍ͬͯͯ΄͍͠

    View Slide

  54. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ύϑΥʔϚϯε


    • ʢֶशͱվળʣCPU΍ϝϞϦɺωοτϫʔΫͱݴͬͨجຊతͳ߲໨ʹ͍ͭ
    ͯͷϓϩϑΝΠϧΛऔΕɺݟํʹֶ͍ͭͯश͍ͯ͠Δ͔


    • ʢϝτϦΫεʣJavaScript΍CSSɺը૾ͱ͍ͬͨ੩తΞηοτͷσʔλα
    ΠζΛܭଌ͠ɺύϑΥʔϚϯεόδΣοτͱͯ͠༧ࢉ؅ཧ͕Ͱ͖͍ͯΔ͔


    • ʢΞϯνύλʔϯʣࣗ෼͕ͨͪ഑৴͍ͯ͠Δ΢ΣϒΞϓϦέʔγϣϯ͕Ͳ
    Ε͘Β͍ͷϑΝΠϧαΠζΛ഑৴͍ͯ͠Δ͔Λ೺Ѳ͍ͯ͠ͳ͍


    • ʢΞϯνύλʔϯʣ໨ඪΛ࣋ͨͣʹܭଌ͠ɺࡍݶͳ͘νϡʔχϯάΛ͠Α
    ͏ͱ͍ͯ͠Δ

    View Slide

  55. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ΞΫηγϏϦςΟ


    • ׂΓͱ·ͩಋೖͰ͖͍ͯΔ։ൃ͕গͳ͍ྖҬ


    • ಛʹ։ൃ໘Ͱ͸πʔϧ͸ग़͖͍ͯͯΔ΋ͷ
    ͷɺຊདྷతͳҙຯͰͷΞΫηγϒϧͳΞϓϦ
    έʔγϣϯͷ։ൃ͸·ͩτϥΠΞϧΛ͍ͯ͠
    Δ૊৫͕ଟ͍ͱ͍͏ҹ৅

    View Slide

  56. ϢʔβʔମݧΛࢧ͑Δඇػೳཁ
    ٻ
    • ΞΫηγϏϦςΟ


    • ʢϝτϦΫεʣΞΫηγϏϦςΟͷ੩తղੳΛߦ͏πʔϧΛ༻͍ͯɺఆظతʹܭଌΛߦͬͯ
    ͍Δ͔


    • ʢϓϥΫςΟεʣ࣮૷νΣοΫϦετΛ࡞੒͠ɺ४ڌ͍ͯ͠Δ͜ͱΛ֬ೝ͍ͯ͠Δ͔


    • ࢀߟ: https://waic.jp/docs/jis2016/test-guidelines/202012/


    • https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/


    • ʢΞϯνύλʔϯʣHTMLͷηϚϯςΟΫεΛແࢹ࣮ͨ͠૷ʹͳ͍ͬͯΔ


    • ʢΞϯνύλʔϯʣλονύου΍ϙΠϯςΟϯάσόΠεͰͷΈ੍ޚͰ͖ΔUIʹͳͬͯ͠
    ·͍ͬͯΔ


    • ʢΞϯνύλʔϯʣνΣοΫπʔϧ͚ͩʹཔΓɺςετ࣮ࢪऀʹΑΔ֬ೝ͕ߦΘΕ͍ͯͳ͍

    View Slide

  57. Ձ஋ͷσϦόϦʔΛߦ͏


    ϓϩηε (CI/CD)

    View Slide

  58. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη
    ε (CI/CD)
    • CI/CDͳͲܧଓͯ͠σϦόϦʔΛߦ͏ࡍʹ΋ʮߴ
    ଎ʹԾઆݕূ͢Δʯ࢓૊Έ͕ඞཁʹͳΔ


    • ϑϩϯτΤϯυ΋ྫ֎Ͱ͸ͳ͘ɺಛʹA/Bςετ
    ͳͲͰ࡞ΓΛҧ͑Δͱ໰୊ʹͳΓ΍͍͢


    • ଞʹ΋Τϥʔ΍ো֐ൃੜ࣌ʹΠϯϑϥʹ೚͖ͤΓ
    ʹ͢ΔͳͲͷରԠ͕औΒΕͯ͠·͏ͱ໰୊ʹͳΔ

    View Slide

  59. ྫΛڍ͛Δ

    View Slide

  60. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη
    ε
    • ςετ


    • ʢֶशͱվળʣΨΠυϥΠϯ΍ςετΧόϨοδͷج४Λఆظతʹݟ௚
    ͠ɺνʔϜશମͷεΩϧηοτͱχʔζʹ߹Θͤͯߋ৽͍ͯ͠Δ͔ɻ


    • ʢϝτϦΫεʣςετΧόϨοδͷπʔϧΛఆظతʹߋ৽͠ɺະΧόʔͷ
    ྖҬ͕͋Δ৔߹͸ɺద੾ͳςετέʔεΛ௥Ճͯ͠ΧόϨοδΛ޲্ͤ͞
    ΔऔΓ૊ΈΛߦ͍ͬͯΔ͔


    • ʢϝτϦΫεʣςετ͕30෼Λ௒͑Δ৔߹ɺςετͷ෼ׂ΍ฒྻ࣮ߦΛݕ
    ౼͠ɺಛఆͷςετ͕ಛʹ͕͔͔࣌ؒΔ৔߹͸ɺͦͷςετͷ࠷దԽΛݕ
    ౼͢Δɻ·ͨɺසൟʹࣦഊ͢Δςετ΍ϑϨʔΩʔͳςετ͕ଘࡏ͢Δ৔
    ߹͸ɺͦͷݪҼΛಛఆͯ҆͠ఆੑΛ޲্ͤ͞ΔऔΓ૊ΈΛߦ͍ͬͯΔ͔ɻ

    View Slide

  61. Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη
    ε
    • σϓϩΠ


    • ʢֶशͱվળʣa/b test, feature
    fl
    ag, canary releaseͳͲͷࢼ࣮ͯ͠ફͨ͠
    ޙͰมߋ͠΍͍͢σϓϩΠΛߦ͍ͬͯΔ͔


    • ʢϝτϦΫεͷܭଌʣ σϓϩΠͷස౓΍ϦʔυλΠϜΛՄࢹԽ͢ΔͨΊͷ
    μογϡϘʔυΛ࡞੒ɾ੔උ͍ͯ͠Δ͔ɻ͜ΕʹΑΓɺ։ൃ͔Βຊ൪؀ڥ
    ΁ͷมߋ͕ͲΕ͚ͩਝ଎ʹద༻͞Ε͍ͯΔ͔ΛνʔϜશһͰڞ༗͠ɺܧଓ
    తͳվળΛߦ͏ͨΊͷࢦඪͱ͢Δɻ۩ମతʹ͸ɺมߋͷϦʔυλΠϜɺσ
    ϓϩΠͷස౓ɺมߋ࣌ͷࣦഊ཰ɺ෮چ࣌ؒͳͲΛμογϡϘʔυͰҰ໨Ͱ
    ֬ೝͰ͖ΔΑ͏ʹ͢Δɻ


    • ʢΞϯνύλʔϯʣσϓϩΠҰճʹରͯ͠1࣌ؒҎ্ͷ͕͔͔࣌ؒΔ

    View Slide

  62. γεςϜɺΞϓϦέʔγϣϯ
    ӡ༻ʢΞʔΩςΫνϟʣ

    View Slide

  63. ྫΛڍ͛Δ

    View Slide

  64. γεςϜɺΞϓϦέʔγϣϯӡ

    • BFFɺAPIઃܭ


    • ʢϓϥΫςΟεʣϑϩϯτΤϯυΤϯδχΞଆ͔
    Β΋APIઃܭΛఏҊͰ͖Δ؀ڥʹͳ͍ͬͯΔ͔


    • ʢΞϯνύλʔϯʣόοΫΤϯυΤϯδχΞ͚ͩ
    ͕ओಋͯ͠APIΛઃܭ͓ͯ͠ΓɺϑϩϯτΤϯυ
    ΤϯδχΞ͕ར༻͠ʹ͍͘ઃܭʹͳ͍ͬͯͳ͍͔

    View Slide

  65. γεςϜɺΞϓϦέʔγϣϯӡ

    • Πϯϑϥ


    • ʢϓϥΫςΟεʣϑϩϯτΤϯυ୲౰ऀ΋
    Web ʹؔΘΔΠϯϑϥͷߏ੒Λ೺ѲͰ͖͍ͯ
    ͯɺো֐ରԠʹࢀըͰ͖Δ


    • ʢΞϯνύλʔϯʣϓϩμΫτͷಛੑΛؑΈͳ
    ͍ըҰతʹ༻ҙ͞Εͨߏ੒͕ڧ੍͞Εͯ͠·͏

    View Slide

  66. νʔϜɺ૊৫

    View Slide

  67. νʔϜɺ૊৫
    • ઐ໳૊৫ͷӡ༻


    • ྲྀΕͷૣ͍ϑϩϯτΤϯυྖҬʹରԠ͢ΔͨΊʹ
    ΍͓͍ͬͯͨ΄͏͕͍͍͜ͱ


    • ྫ͑͹ઐ໳૊৫Λ഑ஔ͠ɺԣஅతʹؔΘΕΔΑ͏ʹ
    ͢ΔɺͳͲ


    • ͍ΘΏΔΠωʔϒϦϯάνʔϜͷΑ͏ͳӡ༻Λ૝

    View Slide

  68. νʔϜɺ૊৫
    • ෼୲ɺ৬຿είʔϓͷఆٛ


    • ϑϩϯτΤϯυΤϯδχΞ͸ίϛϡχέʔγϣϯͷϋϒʹͳΓ΍͍͢


    • ҰํͰྡ઀૊৫ͷ࢓ࣄ΋೚͞Ε΍͍͢


    • ྫ) σΟϨΫγϣϯۀ຿ΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔ


    • ྫ) ϚʔέςΟϯά૊৫ଆͰඞཁͳGAͷௐࠪ΍ઃఆΛϑϩϯτΤ
    ϯυΤϯδχΞ͕ߦ͍ͬͯΔͳͲ


    • ϝϯόʔ͕ຊདྷൃش͢΂͖όϦϡʔΛ્֐ͯ͠͠·͏Α͏ͳέʔε͕
    ͳ͍Α͏ʹ͍ͨ͠

    View Slide

  69. νʔϜɺ૊৫
    • ࣾ಺֎ͷൃ৴


    • (ֶशͱվળ) ఆظతʹ಺෦ͷϫʔΫγϣοϓ΍ηϛφʔΛ։
    ࠵͠ɺΤϯδχΞಉ࢜Ͱ৘ใͷཪ෇͚΍࣮ࡍͷίʔυಈ࡞ͷ
    ڞ༗Λߦ͏ɻ·ͨɺൃ৴લʹ͸ϐΞϨϏϡʔΛߦ͍ɺ಺༰ͷ
    ਖ਼֬ੑ΍࣭Λ֬อ͢Δɻ


    • (ϝτϦΫεͷܭଌ) νʔϜશମͰൃ৴ͷKPIΛఆΊɺͦΕʹ
    ج͍ͮͯఆظతʹ਺஋ΛϞχλϦϯά͢Δɻ·ͨɺࣾ಺Ͱͷ
    ڞ༗ϛʔςΟϯάΛઃ͚ɺ੒ޭࣄྫ΍վળ఺Λڞ༗͢Δɻ

    View Slide

  70. ਐḿͱͯ͠͸ɾɾɾ


    11݄த०ʹୈҰ஄ϦϦʔε͕
    Ͱ͖Δͱ͍͍ͳͱࢥͬͯ·͢

    View Slide

  71. ͜Μͳײ͡ͰӶҙ࡞੒தͰ͢

    View Slide

  72. ͨͩ͜ͷج४͸͋͘·Ͱ


    ج४Ͱ͋ͬͯʮ͜Ε͕ୡ੒Ͱ
    ͖͍ͯͳ͍͔Βବ໨ͳ։ൃʯ
    ͱ͍͏෩ʹଊ͑ͯ΄͘͠ͳ͍
    Ͱ͢ɻ

    View Slide

  73. ຊ౰ͷҙຯͰڧ͍૊৫͸ըҰ
    తʹج४ʹै͏૊৫Ͱ͸ͳ
    ͘ɺج४Λॊೈʹଊ͑ͯࣗ෼
    ͨͪʹΧελϚΠζͰ͖Δ૊
    ৫ͩͱࢥ͍ͬͯ·͢ɻ

    View Slide

  74. ࣗ෼͕ݟ͖ͯͨ։ൃͷதͰ
    ࠔͬͯΔਓͨͪΛࠓޙগ͠Ͱ
    ΋ॿ͚ʹͳΕ͹ͱࢥ͍·͢ɻ

    View Slide

  75. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide