2023/09/21 @ Findy のカンファレンス
ϑϩϯτΤϯυͷ։ൃੜ࢈ੑͱ2023/09/21 @ Findy Online Conference
View Slide
X(Twitter): @yosuke_furukawaGithub: yosuke-furukawa
JSConf.jp ticketpage 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ͷϚʔδ͞ΕΔ·Ͱͷ࣌ؒͳͲʣ• Efficiency & 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,flux, 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 Έ͍ͨͳɻɻɻ
ͱ͍͏Θ͚ͰɺຊϑϩϯτΤϯυͷ DXCriteria Λ࡞͍ͬͯΔ
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, featureflag, canary releaseͳͲͷࢼ࣮ͯ͠ફͨ͠ޙͰมߋ͍͢͠σϓϩΠΛߦ͍ͬͯΔ͔• ʢϝτϦΫεͷܭଌʣ σϓϩΠͷසϦʔυλΠϜΛՄࢹԽ͢ΔͨΊͷμογϡϘʔυΛ࡞ɾඋ͍ͯ͠Δ͔ɻ͜ΕʹΑΓɺ։ൃ͔Βຊ൪ڥͷมߋ͕ͲΕ͚ͩਝʹద༻͞Ε͍ͯΔ͔ΛνʔϜશһͰڞ༗͠ɺܧଓతͳվળΛߦ͏ͨΊͷࢦඪͱ͢Δɻ۩ମతʹɺมߋͷϦʔυλΠϜɺσϓϩΠͷසɺมߋ࣌ͷࣦഊɺ෮چ࣌ؒͳͲΛμογϡϘʔυͰҰͰ֬ೝͰ͖ΔΑ͏ʹ͢Δɻ• ʢΞϯνύλʔϯʣσϓϩΠҰճʹରͯ͠1࣌ؒҎ্ͷ͕͔͔࣌ؒΔ
γεςϜɺΞϓϦέʔγϣϯӡ༻ʢΞʔΩςΫνϟʣ
γεςϜɺΞϓϦέʔγϣϯӡ༻• BFFɺAPIઃܭ• ʢϓϥΫςΟεʣϑϩϯτΤϯυΤϯδχΞଆ͔ΒAPIઃܭΛఏҊͰ͖Δڥʹͳ͍ͬͯΔ͔• ʢΞϯνύλʔϯʣόοΫΤϯυΤϯδχΞ͚͕ͩओಋͯ͠APIΛઃܭ͓ͯ͠ΓɺϑϩϯτΤϯυΤϯδχΞ͕ར༻͠ʹ͍͘ઃܭʹͳ͍ͬͯͳ͍͔
γεςϜɺΞϓϦέʔγϣϯӡ༻• Πϯϑϥ• ʢϓϥΫςΟεʣϑϩϯτΤϯυ୲ऀWeb ʹؔΘΔΠϯϑϥͷߏΛѲͰ͖͍ͯͯɺোରԠʹࢀըͰ͖Δ• ʢΞϯνύλʔϯʣϓϩμΫτͷಛੑΛؑΈͳ͍ըҰతʹ༻ҙ͞Εͨߏ͕ڧ੍͞Εͯ͠·͏
νʔϜɺ৫
νʔϜɺ৫• ઐ৫ͷӡ༻• ྲྀΕͷૣ͍ϑϩϯτΤϯυྖҬʹରԠ͢ΔͨΊʹ͓͍ͬͯͨ΄͏͕͍͍͜ͱ• ྫ͑ઐ৫Λஔ͠ɺԣஅతʹؔΘΕΔΑ͏ʹ͢ΔɺͳͲ• ͍ΘΏΔΠωʔϒϦϯάνʔϜͷΑ͏ͳӡ༻Λఆ
νʔϜɺ৫• ୲ɺ৬είʔϓͷఆٛ• ϑϩϯτΤϯυΤϯδχΞίϛϡχέʔγϣϯͷϋϒʹͳΓ͍͢• ҰํͰྡ৫ͷࣄ͞Ε͍͢• ྫ) σΟϨΫγϣϯۀΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔ• ྫ) ϚʔέςΟϯά৫ଆͰඞཁͳGAͷௐࠪઃఆΛϑϩϯτΤϯυΤϯδχΞ͕ߦ͍ͬͯΔͳͲ• ϝϯόʔ͕ຊདྷൃش͖͢όϦϡʔΛ્ͯ͠͠·͏Α͏ͳέʔε͕ͳ͍Α͏ʹ͍ͨ͠
νʔϜɺ৫• ࣾ֎ͷൃ৴• (ֶशͱվળ) ఆظతʹ෦ͷϫʔΫγϣοϓηϛφʔΛ։࠵͠ɺΤϯδχΞಉ࢜Ͱใͷཪ͚࣮ࡍͷίʔυಈ࡞ͷڞ༗Λߦ͏ɻ·ͨɺൃ৴લʹϐΞϨϏϡʔΛߦ͍ɺ༰ͷਖ਼֬ੑ࣭Λ֬อ͢Δɻ• (ϝτϦΫεͷܭଌ) νʔϜશମͰൃ৴ͷKPIΛఆΊɺͦΕʹج͍ͮͯఆظతʹΛϞχλϦϯά͢Δɻ·ͨɺࣾͰͷڞ༗ϛʔςΟϯάΛઃ͚ɺޭࣄྫվળΛڞ༗͢Δɻ
ਐḿͱͯ͠ɾɾɾ11݄த०ʹୈҰϦϦʔε͕Ͱ͖Δͱ͍͍ͳͱࢥͬͯ·͢
͜Μͳײ͡ͰӶҙ࡞தͰ͢
ͨͩ͜ͷج४͋͘·Ͱج४Ͱ͋ͬͯʮ͜Ε͕ୡͰ͖͍ͯͳ͍͔Βବͳ։ൃʯͱ͍͏෩ʹଊ͑ͯ΄͘͠ͳ͍Ͱ͢ɻ
ຊͷҙຯͰڧ͍৫ըҰతʹج४ʹै͏৫Ͱͳ͘ɺج४Λॊೈʹଊ͑ͯࣗͨͪʹΧελϚΠζͰ͖Δ৫ͩͱࢥ͍ͬͯ·͢ɻ
͕ࣗݟ͖ͯͨ։ൃͷதͰࠔͬͯΔਓͨͪΛࠓޙগ͠Ͱॿ͚ʹͳΕͱࢥ͍·͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠
yosuke_furukawa
minorun365
onlinesalon
pkshadeck
biwashi
niftycorp
yutoy
karamem0
takasehideki
kosui
akkie76
picardparis
afnizarnur
frogandcode
philhawksworth
revolveconf
soudai
chriscoyier
jcasabona
eileencodes
hannesfritz
jlugia
addyosmani