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

by Yosuke Furukawa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

X(Twitter): @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

JSConf.jp ticket page is open. ࠓ೥͸ΦϑϥΠϯͱΦϯϥΠϯ ͷϋΠϒϦου։࠵༧ఆ ΦϯϥΠϯ͸10݄ࠒʹެ։͠· ͢ɻ ઌߦͯ͠དྷͯ͘ΕΔํ͸ࠓͷ ϖʔδ͔Βདྷ͍ͯͩ͘͞ʂ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

։ൃͷੜ࢈ੑͱ͸

Slide 6

Slide 6 text

։ൃͷੜ࢈ੑͱ͸ • ͦ΋ͦ΋ੜ࢈ੑ͸΋͏͢Ͱʹ͕ܾࣜ·ͬͯ Δɻ • ੜ࢈ੑ = Ξ΢τϓοτ/Πϯϓοτ

Slide 7

Slide 7 text

։ൃͷੜ࢈ੑͱ͸ • Ξ΢τϓοτ͸ԿͰଌΔͷ͔ʁ • ίʔυͷྔʁ • PR਺ʁը໘਺ʁίϯϙʔωϯτ਺ʁ • ετʔϦʔϙΠϯτʁ • ސ٬ຬ଍౓ʁ

Slide 8

Slide 8 text

։ൃͷੜ࢈ੑͱ͸ • Πϯϓοτ͸ԿͰଌΔͷ͔ʁ • ࿑ಇ࣌ؒʁ࿑ಇਓ਺ʁ • ։ൃਓ݅අʁ • ૯ࣄۀίετʁ

Slide 9

Slide 9 text

։ൃͷੜ࢈ੑͱ͸ • ੜ࢈ੑ = Ξ΢τϓοτ/Πϯϓοτ • ࣜ͸୯७ͦ͏ʹݟ͑Δ͕ɺ࣮ࡍʹ͸Ξ΢τ ϓοτͱΠϯϓοτ͸։ൃ૊৫ʹΑͬͯଊ͑ ํ͕ҟͳΔɻ • ׬શʹϒϨͨ··ͩͱఆࣜԽ͠ʹ͍͘ͷͰɺ ͋Δఔ౓ݟ͑ΔԽ͠Α͏ͱͨ͠ࢼΈ΋͋Δɻ

Slide 10

Slide 10 text

։ൃͷੜ࢈ੑͱ͸ • Lean ͱ DevOps ͷՊֶͷྫ: • 4ͭͷଌఆج४Λஔ͍ͯ։ൃ૊৫ͷύϑΥʔ ϚϯεΛଌఆ͍ͯ͠Δɻ • ϦʔυλΠϜɺσϓϩΠස౓   ฏۉम෮࣌ؒɺมߋࣦഊ཰ https://book.impress.co.jp/books/1118101029

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

։ൃͷੜ࢈ੑͱ͸ • Lean ͱ DevOps ͷՊֶͷྫ: • ੜ࢈ੑ͕ߴ͍ঢ়ଶͱ͸ɺσϓϩΠස౓͕ଟ͘ɺมߋʹ͔͔Δ͕࣌ؒগ ͳ͘ɺमਖ਼͕ඞཁʹͳͬͨͱ͖΋ૣ͘ɺͦ΋ͦ΋ࣦഊ͕গͳ͍ঢ়ଶ

Slide 13

Slide 13 text

։ൃͷੜ࢈ੑͱ͸ • Lean ͱ DevOps ͷՊֶͷྫ: • ͞Βʹ໘ന͍ͷ͸͜͏͍ͬͨΞ΢τϓοτ͕૑ ଄ੑͷߴ͍૊৫จԽͷܗ੒΍ैۀһຬ଍౓ʹ ΋ؔ࿈͢Δͱ͍͏࿩͕هࡌ͞Ε͍ͯΔ఺ • ։ൃͷੜ࢈ੑʹ͸։ൃऀ͕ಇ͖΍͢͞΍૊৫ ࣗମͷจԽ͕ؔΘ͍ͬͯΔͱ͍͏࿩͕ग़ͯ͘Δ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

։ൃͷੜ࢈ੑͱ͸ • SPACE ͷྫ (2021೥ͷ࿦จ): • Ξ΢τϓοτͷྔ΍਺͚ͩʹ஫໨͢ΔͷͰ͸ ͳ͘ɺଞʹ΋͍͔ͭ͘ͷࢦඪʹ஫໨ͯͦ͠ͷ ࢦඪΛ૊৫ن໛ʹԠͯ͡બ΂ΔΑ͏ʹ͠Α ͏ͱ͍͏ߟ͑ํ

Slide 16

Slide 16 text

։ൃͷੜ࢈ੑͱ͸ • SPACE ͷྫ (2021೥ͷ࿦จ): • Satisfaction & Well-Being:   ։ൃऀ͕ͲΕ͚ͩ޾͔ͤɹʢྫɿඞཁͳπʔϧΛબ΂͍ͯΔ͔ɺνʔϜͷNPS͸Ͳ͏͔ͳͲʣ • Performance:   ॻ͍ͨίʔυ͕ͲΕ͚ͩͪΌΜͱϫʔΫ͔ͨ͠ɹʢྫɿόάൃੜ݅਺ɺސ٬ຬ଍౓ɺαʔϏεՔ ಇ཰ͳͲʣ • Activity: Ξ΢τϓοτͷ਺ɹʢྫɿɹPRϚʔδ਺ɺίϛοτ਺ɺσϓϩΠස౓ͳͲʣ • Communication & Collaboration:   ίϛϡχέʔγϣϯͱڠྗʢྫɿΦϯϘʔσΟϯάͷ࣌ؒ΍ମݧɺίʔυϨϏϡʔͷ࣭ͱମݧɺ PRͷϚʔδ͞ΕΔ·Ͱͷ࣌ؒͳͲʣ • Ef fi ciency & Flow: ޮ཰ͱ࡞ۀϑϩʔʢྫɿίʔυϨϏϡʔλΠϛϯάɺׂΓࠐΈλεΫͷগͳ͞ʣ

Slide 17

Slide 17 text

։ൃͷੜ࢈ੑͱ͸ • SPACE ͷྫ (2021೥ͷ࿦จ): • GitHub Copilot ಋೖͷධՁ΋SPACEͰߦΘΕͨྫ͕͋Δ • ͪͳΈʹͦͷ࣌ͷධՁ͸ͪ͜Βɻ https://github.blog/2022-09-07-research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/

Slide 18

Slide 18 text

։ൃͷੜ࢈ੑͱ͸ • Ξ΢τϓοτ / Πϯϓοτͱ͍͏Ұݟ୯७ͳࣜͰද͞Ε͍ͯΔ ͕ɺ࣮ࡍʹ͸͔ͳΓ։ൃ૊৫ґଘ • ΋͏গ͠۩ମԽͨ͠ྫͱͯ͠LeanͱDevOpsͷՊֶ΍ SPACEϑ ϨʔϜϫʔΫͱ͍ͬͨऔΓ૊Έ͕͋Δ • ͜ΕΒͷऔΓ૊ΈͷதͰ͸୯ͳΔΞ΢τϓοτʹண໨͍ͯ͠ͳ ͍ɻ • ಛʹ։ൃऀͷຬ଍౓΍ίϛϡχέʔγϣϯɺจԽͱ͍ͬͨपล ͷঢ়گʹ஫໨͍ͯ͠Δ

Slide 19

Slide 19 text

։ൃͷੜ࢈ੑͱ͸ • ࠷ۙ͸΋͏͢ͰʹΞ΢τϓοτ/Πϯϓοτͷ୯ ७ͳࣜͷ͜ͱΛࢦ͍ͯ͠ͳ͍ • ͦΕΒΛऔΓר͘पลͷ؀ڥɺจԽɺ૊৫ɺݖݶ ͳͲͷෳ߹తͳཁૉΛ૊Έ߹Θͤͯදݱ͍ͯ͠Δ • ͜ΕΒΛؙͬͱͻͬ͘ΔΊͯɺ։ൃऀମݧ ʢDeveloper ExperienceʣͱݴͬͨΓ͢Δ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ։ൃͷੜ࢈ੑٴͼ։ൃऀମݧͱ͍͏؍఺Ͱݴ͑ ͹ಛʹϑϩϯτΤϯυ΋όοΫΤϯυ΋ؔ܎͸ ͳ͍ • ͨͩϑϩϯτΤϯυ͸։ൃπʔϧɺϕετϓϥΫ ςΟε΍ΞʔΩςΫνϟͷҠΓมΘΓ͕ܹ͍͠ • ͦΕʹ൐ͬͯຬ଍౓΋ӨڹΛड͚΍͍͢

Slide 22

Slide 22 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ։ൃϥΠϒϥϦฤ • ίϯϙʔωϯτϥΠϒϥϦͷมભʢBackbone, Angular, Vue, Reactʣ • ঢ়ଶ؅ཧϥΠϒϥϦͷมભʢRedux, fl ux, Recoil, Jotaiʣ • CSS पลϥΠϒϥϦɾπʔϧͷมભʢSass, CSS Modules, vanilla- extract, Tailwind etcʣ • ϝλϑϨʔϜϫʔΫͷมભʢNuxt.js, Next.js, Remix)

Slide 23

Slide 23 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ඇػೳཁٻฤ • ύϑΥʔϚϯε • Core Web VitalsʢLCP, CLS, INP, TTIʣ • A11y (WCAG 2.0, 2.1, 2.2) • ςετʢVRT, E2E, Testing pyramid)

Slide 24

Slide 24 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓͷܹ͍͠ྫɿ • ΞʔΩςΫνϟฤ • CDN ೖΕΔ / ೖΕͳ͍ • BFF ೖΕΔ / ೖΕͳ͍ • GraphQL ೖΕΔ / ೖΕͳ͍

Slide 25

Slide 25 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϑϩϯτΤϯυ͸͢Ͱʹͨͩͷݟͨ໨Λ࡞Δ ͱ͍͏࡞ۀʹཹ·͍ͬͯͳ͍ • Ϣʔβʔͱͷ͓΋ͯͳ͠ͷ෦෼Ͱ͋ΓɺϢʔ βʔͱͷឺΛ࡞Δ෦෼Λ୲͍ͬͯΔ • System of Engagement (SoE) ͱ΋ݴ͏

Slide 26

Slide 26 text

Slide 27

Slide 27 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓ͕ܹ͍͠தͰͲ͏΍ͬͯੜ࢈ੑΛอͭͷ ͔ • ͜͜ʹΞϓϩʔν͕͍͔ͭ͋͘Δ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ϘτϜΞοϓʹ΍Δํ๏ • τοϓμ΢ϯʹ΍Δํ๏

Slide 28

Slide 28 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ࣗ෼͕ͨͪҰ൪ྑ͍ͱࢥ͍ͬͯΔํ๏ΛҰ؏ͯ͠΍Γൈ ͘ • पғͷมߋ͸͋ΕͲɺҰ౓ܾΊͨํ๏Λม͑ͯ͠·͏ ͱɺνʔϜશମʹҭ੒ڭҭίετ͕͔͔Δ • ҰԠཧʹ͔ͳ͍ͬͯΔɺνʔϜͷ։ൃϓϩηεͷशख़౓ ্͕͕ΔͷͰ͋Ε͹ɺͦΕʹ߹Θͤͯੜ࢈ੑ΋্͕Δ

Slide 29

Slide 29 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ҠΓมΘΓΛؾʹ͠ͳ͍ํ๏ • ແཧʹ৽͍͠ํ๏ʹมߋ͢Δඞཁ͸ͳ͍ɺݹ͍΍ΓํͰ΋ࣗ෼͕ͨͪੜ࢈తͩ ͱײ͡ΔͳΒͦΕͰྑ͍ • ҭ੒ίετͱ৽͍͠ํ๏ʹมΘͬͨࣄͰͷੜ࢈ੑվળΛఱṝʹ͔͚ͯ΍ͬͨํ ͕͍͍͔൑அͯ͠ཉ͍͠ • ͨͩ͠ɺมΘΒͳ͍͜ͱΛͣͬͱଓ͚͍ͯΔͱɺ͍͔ͭ୭΋։ൃΛܧଓͰ͖ͳ ͘ͳΔՄೳੑ͸͋Δ • ։ൃτϨϯυ͕มΘͬͯ͠·͍ɺ৽͍͠ਓ͕࠾༻Ͱ͖ͳ͍ • ࢖͍ͬͯΔϥΠϒϥϦͷEoL͕੾Ε͍ͯͯɺηΩϡϦςΟ໰୊͕͋Δͷʹܧ ଓ͠ͳ͍ͱ͍͚ͳ͍ϦεΫΛ๊͑Δ

Slide 30

Slide 30 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϘτϜΞοϓʹ΍Δํ๏ • ݱ৔ͷϨϕϧͰ஌ݟΛͨΊ্͍ͯ͛ͯ͘ • ษڧձͩͬͨΓϋοΧιϯͩͬͨΓ΋༗ޮ • ڭ͑ͯ͘ΕΔਓΛั·͑ͯ௚઀ڭ͑ͯ໯͏ํ ๏΋͋Δ

Slide 31

Slide 31 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • ϘτϜΞοϓʹ΍Δํ๏ • جຊ͸͜ͷํ๏͕ͩɺݶք͸͋Δ • ਓ਺͕ͦΜͳʹ͍ͳ͍ͱ͔ΩϟονΞοϓΑΓ΋ ೔ʑͷλεΫʹ௥ΘΕͯ͠·͍ɺֶͼΛಘΒΕΔػ ձ͕গͳ͍ͱ͔ • τοϓμ΢ϯʹ΍Δํ๏ͳͲΛऔΓೖΕ͍͖ͯɺෳ ਺ͷΞϓϩʔνΛซ༻͍ͨ͠

Slide 32

Slide 32 text

ϑϩϯτΤϯυͷ։ൃੜ࢈ੑ • τοϓμ΢ϯʹ΍Δํ๏ • ࢦ਑ͱͳΔ΋ͷΛܾΊ͔ͯͦ͜Β͓Ζ͍͖͍ͯͨ͠ • ϑϩϯτΤϯυͷઃܭʹࢦ਑Λ΋ͨͤΒΕ͍ͯͳ͍͔Βํ਑͕ϒϨΔ • ઃܭͦͷ΋ͷ͸ΞϓϦέʔγϣϯಛੑʹدͬͯมΘΔ͕ɺઃܭΛ͢ΔͨΊ ͷํ਑ͳΒ͋Δఔ౓دͤूΊͨ஌ݟΛݩʹ࡞Ε͹Ͱ͖ΔͷͰ͸ͳ͍ ͔ɾɾɾʁ • ϑϩϯτΤϯυͷࢦ਑Λ࡞Εͳ͍͔ɾɾɾʁ • Ͱ͖ͨΒɺνΣοΫϘοΫεܗࣜͰճ౴Ͱ͖ͯࣗ෼͕ͨͪͲΕ͘Β͍ੜ࢈ ੑʹߩݙͰ͖͍ͯΔ͔ଌΕͦ͏ͳɺɺɺDX Criteria Έ͍ͨͳɻɻɻ

Slide 33

Slide 33 text

ͱ͍͏Θ͚Ͱɺຊ୊ ϑϩϯτΤϯυͷ DX Criteria Λ࡞͍ͬͯΔ࿩

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ϑϩϯτΤϯυ൛DX Criteria • ຊՈ DX Criteria ͸ߴ଎ͳԾઆݕূΛճͯ͠૊৫಺ͷૉૣ͍ݕ ূͱࣦഊͱֶͼΛ࠷େԽ͠Α͏ͱ͢ΔͨΊͷํ਑Ͱ࡞ΒΕͨ ౕ • ͦͷΤοηϯε෦෼͸࢒ͭͭ͠ɺϑϩϯτΤϯυྖҬʹಛԽ͢ Δ • ຊՈ͸ձࣾͷ࿩΋ଟ͍͕ɺϑϩϯτΤϯυͱ͍͏ྖҬʹด͡ ΔͷͰɺձࣾͷ࿩͸গͳΊ • ҰํͰσβΠϯͱͷڠۀ΍ؔ࿈෦ॺͱͷ࿩͸ଟΊ

Slide 36

Slide 36 text

ϑϩϯτΤϯυ൛ DX Criteria • ࡞੒ऀ • yosuke_furukawa • ahomu • ϨϏϡʔ • hirokidaichi

Slide 37

Slide 37 text

DX CriteriaϙϦγʔ • ໌᏷ੑɿ Yes/NoͰ൑அ͠΍͘͢ͳ͍ͬͯΔ͔ • ਎ମੑɿূڌ͕ͳ͘ͱ΋࣮ࡍʹݱ৔ͰධՁ͞Ε͍ͯΔ͔Ͳ ͏͔ • ಉ࣌୅ੑɿ࣌୅Λ൓өͨ͠ΞοϓσʔτΛఆظతʹ΍Δ͜ ͱ • Մ؍ଌੑɿ؍ଌͰ͖Δߦಈͷ෦෼ͰධՁ͢Δ͜ͱ • ඇݶఆੑɿखஈΛݶఆ͗͢͠ͳ͍͜ͱ

Slide 38

Slide 38 text

ϑϩϯτΤϯυ൛ DX Criteria • େςʔϚ͕5ͭ • ։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕज़ελοΫ • ϢʔβʔମݧΛࢧ͑Δඇػೳཁٻ • Ձ஋ͷσϦόϦʔΛߦ͏ϓϩηε • γεςϜɾΞϓϦέʔγϣϯӡ༻ʢΞʔΩςΫνϟʣ • νʔϜϏϧσΟϯά

Slide 39

Slide 39 text

ͪͳΈʹ·ͩ ຏ͖ࠐΈதͰ͢ʂʂʂ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ੜ࢈ੑΛ্͛ΔͨΊʹٕज़໘ͰϥΠϒϥϦ΍πʔ ϧΛ࢖ͬͯରॲ͢Δ • ͨͩٯʹ͜Ε΋΍Γա͗͸஫ҙ • ΫϥΠΞϯταΠυͷར༻؀ڥɺUIͷϕετϓϥ ΫςΟεͷมԽɺϥΠϒϥϦͷΞοϓσʔτͳ Ͳɺͱʹ͔͘มߋ΍मਖ਼͕ଟ͍ՕॴͰ͋Γɺͦ͜ ʹରͯ͠Ͳ͏औΓ૊Ή͔ͱ͍͏ςʔϚ

Slide 42

Slide 42 text

ྫΛڍ͛Δ

Slide 43

Slide 43 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • ίʔυ͕ܧଓͯ͠ӡ༻Ͱ͖ΔΑ͏ʹͳ͍ͬͯ Δ͔Ͳ͏͔ • ಡΈ΍͢͞ɺॻ͖΍͢͞ɺνʔϜशख़౓ͳͲ ͷ؍఺͔Βٕज़બఆ͍ͯ͠Δ͔ͳͲ

Slide 44

Slide 44 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • (ֶशͱվળ) ੩తܕ෇͚ݴޠ΍ίʔυϑΥʔϚολʔΛ ಋೖͯ͠ɺίʔυϕʔεͷಡΈ΍͢͞ͱอकੑΛ޲্ͤ͞ ͍ͯΔ͔ • (ϝτϦΫεͷܭଌ) όάͷൃੜ཰ɺίʔυϨϏϡʔͷ࣌ ؒͳͲɺίʔυϕʔεͷอकੑʹؔ࿈͢ΔϝτϦΫεΛ ຖ݄௥੻͠ɺ࢛൒ظ͝ͱʹվળͷͨΊͷΞΫγϣϯΛܭ ըɾ࣮ࢪ͍ͯ͠Δ͔

Slide 45

Slide 45 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ίʔυͷอकੑ • (ϓϥΫςΟε) ܕ৘ใΛAPIϨϕϧͰڞ༗͢ΔͨΊͷπʔϧ ʢྫ: GraphQLɺTypeScriptͳͲʣΛ׆༻͠ɺ݄ʹ1ճҎ্ ͷස౓Ͱܕͷໃ६΍ΤϥʔΛνΣοΫͯ͠ɺίʔυϕʔεશ ମͷܕ҆શੑΛ֬อ͍ͯ͠Δ͔ • (Ξϯνύλʔϯ) ੩తܕ੍໿Λ݄ʹ1ճҎ্ͷස౓ͰνΣο Ϋ͍ͯ͠ͳ͍͔ɺܕͷໃ६΍Τϥʔ͕์ஔ͞Ε͍ͯΔ͔ɺ· ͨɺܕ੍໿Λແࢹͯ͠ͷਐḿใࠂ͕සൟʹߦΘΕ͍ͯΔ͔

Slide 46

Slide 46 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ཰ • πʔϧʹΑΔޮ཰ੑͷΞοϓ͕Ͳ͜·ͰͰ͖ ͍ͯΔ͔ • ྫ͑͹ build πʔϧ͕஗͗ͨ͢Γ͠ͳ͍͔ • Mock ͱ͔Λద੾ʹ࢖ͬͯ։ൃޮ཰্͛ͯΔ͔

Slide 47

Slide 47 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • πʔϧνΣΠϯͱ։ൃޮ཰ • ʢֶशͱվળʣओཁͳΤσΟλʢྫ: VSCode, IntelliJͳͲʣɺϑΥʔϚολʔɺϦϯλʔ Λ൒೥ʹ1ճҎ্ͷස౓Ͱߋ৽ɾݕ౼͠ɺ։ൃޮ཰ͷ޲্Λਤ͍ͬͯΔ͔ • ʢϝτϦΫεʣϏϧυ࣌ؒɺςετ࣮ߦ࣌ؒɺσϓϩΠ࣌ؒͳͲͷϝτϦΫεΛຖि௥ ੻͠ɺ݄͝ͱʹπʔϧνΣΠϯͷޮ཰ੑͷͨΊͷΞΫγϣϯΛܭըɾ࣮ࢪ͍ͯ͠Δ͔ • ʢϓϥΫςΟεʣCI/CDύΠϓϥΠϯΛద੾ʹઃఆ͠ɺܧଓతΠϯςάϨʔγϣϯΛࣗ ಈԽ͍ͯ͠Δ͔ɻ·ͨɺϩʔΧϧ։ൃ؀ڥʹ͸ϞοΫαʔόʔ΍APIͷςετ؀ڥΛ੔ උ͠ɺޮ཰తͳ։ൃ͕Մೳ͔ • ʢΞϯνύλʔϯʣπʔϧͷબఆ͕νʔϜ಺Ͱ͹Β͹ΒͰ͋ΓɺෆඞཁͳΧελϚΠζ ͕૿͑ɺ։ൃޮ཰͕௿Լ͍ͯ͠ͳ͍͔

Slide 48

Slide 48 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • ٕज़τϨϯυʹৼΓճ͞Ε͍ͯͳ͍͔ • ΞϓϦέʔγϣϯͷಛੑ͸ཧղ͍ͯ͠Δͷ͔ • ࣄۀ໨ઢͰϥΠϒϥϦ΍ϑϨʔϜϫʔΫΛબ ఆ͍ͯ͠Δ͔

Slide 49

Slide 49 text

։ൃɾӡ༻ͷੜ࢈ੑΛࢧ͑Δٕ ज़ελοΫ • ࣋ଓՄೳͳӡ༻ͷͨΊͷٕज़બఆ • (ֶशͱվળ) ٕज़τϨϯυΛ௥੻͠ɺ৽ͨͳπʔϧ΍ϥΠϒϥ ϦͷධՁΛఆظతʹߦ͍ͬͯΔ͔ • ʢϝτϦΫεʣ طଘͷ࢖༻ٕज़ͷΞοϓσʔτස౓ɺٕज़ε λοΫͷෳࡶ͞ɺηΩϡϦςΟࣄ৅ͳͲΛධՁɾվળ͍ͯ͠Δ ͔ • ʢΞϯνύλʔϯʣྲྀߦΓͷٕज़΍࠷৽ϥΠϒϥϦΛແཧʹऔ ΓೖΕɺٕज़ελοΫ͕ա৒ʹෳࡶԽͯ͠͠·͍ͬͯͳ͍͔

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ඇػೳཁٻΛΨϯແࢹͯ͠ਐΊΔͱ݁ہग़དྷ্ ͕ͬͨ΋ͷ͕࢖͍ʹ͘͘ͳΔ • ͲͷඇػೳཁٻʹͲͷఔ౓Ԡ͑Δ΂͖ͰɺͲ͏ର ॲ͢Δ͔Λఆٛͯ͠ɺݕ౼ࡐྉʹͯ͠΋Β͍͍ͨ • ϑϩϯτΤϯυͰݴ͑͹ύϑΥʔϚϯεɺΞΫη γϏϦςΟɺϝϯςφϯαϏϦςΟɺσβΠϯɺ ͳͲͳͲͨ͘͞Μඇػೳཁٻ͕͋Δ

Slide 52

Slide 52 text

ྫΛڍ͛Δ

Slide 53

Slide 53 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ϨΠςϯγʔͱεϧʔϓοτͷ֓೦Λཧղ͠ɺԿ͕Կ Ͱ΋ ʮLighthouse 100఺ͩʂʯͱ͔ʹͳ͍ͬͯͳ͍ ͜ͱ • దٓύϑΥʔϚϯενϡʔχϯάίϯςετͳͲͰֶ ΂ΔλΠϛϯάΛ࡞ͬͯཉ͍͠ • ݱঢ়෼ੳͱ໨ඪઃఆ͕Ͱ͖Δࡐྉ͕ἧ͍ͬͯͯ΄͍͠

Slide 54

Slide 54 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ύϑΥʔϚϯε • ʢֶशͱվળʣCPU΍ϝϞϦɺωοτϫʔΫͱݴͬͨجຊతͳ߲໨ʹ͍ͭ ͯͷϓϩϑΝΠϧΛऔΕɺݟํʹֶ͍ͭͯश͍ͯ͠Δ͔ • ʢϝτϦΫεʣJavaScript΍CSSɺը૾ͱ͍ͬͨ੩తΞηοτͷσʔλα ΠζΛܭଌ͠ɺύϑΥʔϚϯεόδΣοτͱͯ͠༧ࢉ؅ཧ͕Ͱ͖͍ͯΔ͔ • ʢΞϯνύλʔϯʣࣗ෼͕ͨͪ഑৴͍ͯ͠Δ΢ΣϒΞϓϦέʔγϣϯ͕Ͳ Ε͘Β͍ͷϑΝΠϧαΠζΛ഑৴͍ͯ͠Δ͔Λ೺Ѳ͍ͯ͠ͳ͍ • ʢΞϯνύλʔϯʣ໨ඪΛ࣋ͨͣʹܭଌ͠ɺࡍݶͳ͘νϡʔχϯάΛ͠Α ͏ͱ͍ͯ͠Δ

Slide 55

Slide 55 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ΞΫηγϏϦςΟ • ׂΓͱ·ͩಋೖͰ͖͍ͯΔ։ൃ͕গͳ͍ྖҬ • ಛʹ։ൃ໘Ͱ͸πʔϧ͸ग़͖͍ͯͯΔ΋ͷ ͷɺຊདྷతͳҙຯͰͷΞΫηγϒϧͳΞϓϦ έʔγϣϯͷ։ൃ͸·ͩτϥΠΞϧΛ͍ͯ͠ Δ૊৫͕ଟ͍ͱ͍͏ҹ৅

Slide 56

Slide 56 text

ϢʔβʔମݧΛࢧ͑Δඇػೳཁ ٻ • ΞΫηγϏϦςΟ • ʢϝτϦΫεʣΞΫηγϏϦςΟͷ੩తղੳΛߦ͏πʔϧΛ༻͍ͯɺఆظతʹܭଌΛߦͬͯ ͍Δ͔ • ʢϓϥΫςΟεʣ࣮૷νΣοΫϦετΛ࡞੒͠ɺ४ڌ͍ͯ͠Δ͜ͱΛ֬ೝ͍ͯ͠Δ͔ • ࢀߟ: https://waic.jp/docs/jis2016/test-guidelines/202012/ • https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/ • ʢΞϯνύλʔϯʣHTMLͷηϚϯςΟΫεΛແࢹ࣮ͨ͠૷ʹͳ͍ͬͯΔ • ʢΞϯνύλʔϯʣλονύου΍ϙΠϯςΟϯάσόΠεͰͷΈ੍ޚͰ͖ΔUIʹͳͬͯ͠ ·͍ͬͯΔ • ʢΞϯνύλʔϯʣνΣοΫπʔϧ͚ͩʹཔΓɺςετ࣮ࢪऀʹΑΔ֬ೝ͕ߦΘΕ͍ͯͳ͍

Slide 57

Slide 57 text

Ձ஋ͷσϦόϦʔΛߦ͏ ϓϩηε (CI/CD)

Slide 58

Slide 58 text

Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε (CI/CD) • CI/CDͳͲܧଓͯ͠σϦόϦʔΛߦ͏ࡍʹ΋ʮߴ ଎ʹԾઆݕূ͢Δʯ࢓૊Έ͕ඞཁʹͳΔ • ϑϩϯτΤϯυ΋ྫ֎Ͱ͸ͳ͘ɺಛʹA/Bςετ ͳͲͰ࡞ΓΛҧ͑Δͱ໰୊ʹͳΓ΍͍͢ • ଞʹ΋Τϥʔ΍ো֐ൃੜ࣌ʹΠϯϑϥʹ೚͖ͤΓ ʹ͢ΔͳͲͷରԠ͕औΒΕͯ͠·͏ͱ໰୊ʹͳΔ

Slide 59

Slide 59 text

ྫΛڍ͛Δ

Slide 60

Slide 60 text

Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε • ςετ • ʢֶशͱվળʣΨΠυϥΠϯ΍ςετΧόϨοδͷج४Λఆظతʹݟ௚ ͠ɺνʔϜશମͷεΩϧηοτͱχʔζʹ߹Θͤͯߋ৽͍ͯ͠Δ͔ɻ • ʢϝτϦΫεʣςετΧόϨοδͷπʔϧΛఆظతʹߋ৽͠ɺະΧόʔͷ ྖҬ͕͋Δ৔߹͸ɺద੾ͳςετέʔεΛ௥Ճͯ͠ΧόϨοδΛ޲্ͤ͞ ΔऔΓ૊ΈΛߦ͍ͬͯΔ͔ • ʢϝτϦΫεʣςετ͕30෼Λ௒͑Δ৔߹ɺςετͷ෼ׂ΍ฒྻ࣮ߦΛݕ ౼͠ɺಛఆͷςετ͕ಛʹ͕͔͔࣌ؒΔ৔߹͸ɺͦͷςετͷ࠷దԽΛݕ ౼͢Δɻ·ͨɺසൟʹࣦഊ͢Δςετ΍ϑϨʔΩʔͳςετ͕ଘࡏ͢Δ৔ ߹͸ɺͦͷݪҼΛಛఆͯ҆͠ఆੑΛ޲্ͤ͞ΔऔΓ૊ΈΛߦ͍ͬͯΔ͔ɻ

Slide 61

Slide 61 text

Ձ஋ͷσϦόϦʔΛߦ͏ϓϩη ε • σϓϩΠ • ʢֶशͱվળʣa/b test, feature fl ag, canary releaseͳͲͷࢼ࣮ͯ͠ફͨ͠ ޙͰมߋ͠΍͍͢σϓϩΠΛߦ͍ͬͯΔ͔ • ʢϝτϦΫεͷܭଌʣ σϓϩΠͷස౓΍ϦʔυλΠϜΛՄࢹԽ͢ΔͨΊͷ μογϡϘʔυΛ࡞੒ɾ੔උ͍ͯ͠Δ͔ɻ͜ΕʹΑΓɺ։ൃ͔Βຊ൪؀ڥ ΁ͷมߋ͕ͲΕ͚ͩਝ଎ʹద༻͞Ε͍ͯΔ͔ΛνʔϜશһͰڞ༗͠ɺܧଓ తͳվળΛߦ͏ͨΊͷࢦඪͱ͢Δɻ۩ମతʹ͸ɺมߋͷϦʔυλΠϜɺσ ϓϩΠͷස౓ɺมߋ࣌ͷࣦഊ཰ɺ෮چ࣌ؒͳͲΛμογϡϘʔυͰҰ໨Ͱ ֬ೝͰ͖ΔΑ͏ʹ͢Δɻ • ʢΞϯνύλʔϯʣσϓϩΠҰճʹରͯ͠1࣌ؒҎ্ͷ͕͔͔࣌ؒΔ

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

ྫΛڍ͛Δ

Slide 64

Slide 64 text

γεςϜɺΞϓϦέʔγϣϯӡ ༻ • BFFɺAPIઃܭ • ʢϓϥΫςΟεʣϑϩϯτΤϯυΤϯδχΞଆ͔ Β΋APIઃܭΛఏҊͰ͖Δ؀ڥʹͳ͍ͬͯΔ͔ • ʢΞϯνύλʔϯʣόοΫΤϯυΤϯδχΞ͚ͩ ͕ओಋͯ͠APIΛઃܭ͓ͯ͠ΓɺϑϩϯτΤϯυ ΤϯδχΞ͕ར༻͠ʹ͍͘ઃܭʹͳ͍ͬͯͳ͍͔

Slide 65

Slide 65 text

γεςϜɺΞϓϦέʔγϣϯӡ ༻ • Πϯϑϥ • ʢϓϥΫςΟεʣϑϩϯτΤϯυ୲౰ऀ΋ Web ʹؔΘΔΠϯϑϥͷߏ੒Λ೺ѲͰ͖͍ͯ ͯɺো֐ରԠʹࢀըͰ͖Δ • ʢΞϯνύλʔϯʣϓϩμΫτͷಛੑΛؑΈͳ ͍ըҰతʹ༻ҙ͞Εͨߏ੒͕ڧ੍͞Εͯ͠·͏

Slide 66

Slide 66 text

νʔϜɺ૊৫

Slide 67

Slide 67 text

νʔϜɺ૊৫ • ઐ໳૊৫ͷӡ༻ • ྲྀΕͷૣ͍ϑϩϯτΤϯυྖҬʹରԠ͢ΔͨΊʹ ΍͓͍ͬͯͨ΄͏͕͍͍͜ͱ • ྫ͑͹ઐ໳૊৫Λ഑ஔ͠ɺԣஅతʹؔΘΕΔΑ͏ʹ ͢ΔɺͳͲ • ͍ΘΏΔΠωʔϒϦϯάνʔϜͷΑ͏ͳӡ༻Λ૝ ఆ

Slide 68

Slide 68 text

νʔϜɺ૊৫ • ෼୲ɺ৬຿είʔϓͷఆٛ • ϑϩϯτΤϯυΤϯδχΞ͸ίϛϡχέʔγϣϯͷϋϒʹͳΓ΍͍͢ • ҰํͰྡ઀૊৫ͷ࢓ࣄ΋೚͞Ε΍͍͢ • ྫ) σΟϨΫγϣϯۀ຿ΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔ • ྫ) ϚʔέςΟϯά૊৫ଆͰඞཁͳGAͷௐࠪ΍ઃఆΛϑϩϯτΤ ϯυΤϯδχΞ͕ߦ͍ͬͯΔͳͲ • ϝϯόʔ͕ຊདྷൃش͢΂͖όϦϡʔΛ્֐ͯ͠͠·͏Α͏ͳέʔε͕ ͳ͍Α͏ʹ͍ͨ͠

Slide 69

Slide 69 text

νʔϜɺ૊৫ • ࣾ಺֎ͷൃ৴ • (ֶशͱվળ) ఆظతʹ಺෦ͷϫʔΫγϣοϓ΍ηϛφʔΛ։ ࠵͠ɺΤϯδχΞಉ࢜Ͱ৘ใͷཪ෇͚΍࣮ࡍͷίʔυಈ࡞ͷ ڞ༗Λߦ͏ɻ·ͨɺൃ৴લʹ͸ϐΞϨϏϡʔΛߦ͍ɺ಺༰ͷ ਖ਼֬ੑ΍࣭Λ֬อ͢Δɻ • (ϝτϦΫεͷܭଌ) νʔϜશମͰൃ৴ͷKPIΛఆΊɺͦΕʹ ج͍ͮͯఆظతʹ਺஋ΛϞχλϦϯά͢Δɻ·ͨɺࣾ಺Ͱͷ ڞ༗ϛʔςΟϯάΛઃ͚ɺ੒ޭࣄྫ΍վળ఺Λڞ༗͢Δɻ

Slide 70

Slide 70 text

ਐḿͱͯ͠͸ɾɾɾ 11݄த०ʹୈҰ஄ϦϦʔε͕ Ͱ͖Δͱ͍͍ͳͱࢥͬͯ·͢

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

͋Γ͕ͱ͏͍͟͝·ͨ͠