Slide 1

Slide 1 text

ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷ NBSLVQMJOUͷϩʔυϚοϓ "DDFTTJCJMJUZ4UFQ7PM

Slide 2

Slide 2 text

©2018 Yusuke Hirao ࣗݾ঺հ ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ גࣜձࣾσΟʔθϩ ϑϩϯτΤϯυΤϯδχΞ #-0(IUUQTOPUFNVZVTVLFIJSBP Yusuke Hirao @cloud10designs

Slide 3

Slide 3 text

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷ NBSLVQMJOUͷϩʔυϚοϓ

Slide 4

Slide 4 text

©2018 Yusuke Hirao ࠓ೔͸ͪΐͬͱϑϩϯτدΓͷ ٕज़Ϊδϡπͨ͠࿩Ͱ͢

Slide 5

Slide 5 text

©2018 Yusuke Hirao NBSLVQMJOU͝ଘ஌ͷํ✋

Slide 6

Slide 6 text

©2018 Yusuke Hirao &4-JOUɾTUZMFMJOU͝ଘ஌ͷํ✋

Slide 7

Slide 7 text

©2018 Yusuke Hirao -JOUFSͱ͸ қ͘͠આ໌͢Δͱ ίʔυΛղੳͯ͠ɺ ϧʔϧʹଇͬͯͳ͍෦෼Λࢦఠ͢ΔπʔϧͰ͢ɻ

Slide 8

Slide 8 text

©2018 Yusuke Hirao )5.-ͷ-JOUFS Φʔϓϯιʔε/PEFKT੡)5.--JOUFS

Slide 9

Slide 9 text

©2018 Yusuke Hirao )5.-ͷ-JOUFS ͖͔͚ͬ IUUQTTQFBLFSEFDLDPNZVTVLFIJSBPLPEPSFCJZVOBOUFTJUFSBSFSVLBUV

Slide 10

Slide 10 text

©2018 Yusuke Hirao )5.-ͷ-JOUFS ͓͔͛͞·Ͱ4UBS௒͑·ͨ͠

Slide 11

Slide 11 text

©2018 Yusuke Hirao ։ൃ్্ ݱࡏW ʹ΋ؔΘΒͣ ஫໨͍͍ͨͩͯຊ౰ʹخ͍͠Ͱ͢

Slide 12

Slide 12 text

©2018 Yusuke Hirao ͱ͍͏Θ͚Ͱ ϩʔυϚοϓ ࠓޙͷ։ൃ༧ఆ ͷ͸ͳ͠

Slide 13

Slide 13 text

©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ ࠓɺͲ͏͍͏ར༻Λ͍ͯ͠Δͷ͔ ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ ΞΫηγϏϦςΟνΣοΫͷࣗಈԽʹ͍ͭͯ

Slide 14

Slide 14 text

©2018 Yusuke Hirao ίʔυ඼࣭νΣοΫ ࣾ಺πʔϧͱͯ͠ ίϚϯυʢλʔϛφϧʣ͔Β ΋͘͠͸ HVMQλεΫ͔Β ࠷ۙ—fixΦϓγϣϯ࣮૷͠·ͨ͠ ࠓɺͲΜͳར༻Λ͍ͯ͠Δͷ͔

Slide 15

Slide 15 text

©2018 Yusuke Hirao ΤσΟλʔͷػೳͱͯ͠ 7JTVBM4UVEJP$PEF "UPN 7JN ʹϓϥάΠϯ͕ఏڙ͞Ε͍ͯΔ ࠓɺͲΜͳར༻Λ͍ͯ͠Δͷ͔

Slide 16

Slide 16 text

©2018 Yusuke Hirao νΣοΫ͍ͯ͠Δ͜ͱ ϑΥʔϚοτɾίʔυελΠϧ Πϯσϯτ εϖʔεɾվߦҐஔ ໋໊نଇ όϦσʔγϣϯ γϯλοΫε ن֨ ඇਪ঑ɾΞϯνύλʔϯ ࠓɺͲΜͳར༻Λ͍ͯ͠Δͷ͔

Slide 17

Slide 17 text

©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ ࠓɺͲ͏͍͏ར༻Λ͍ͯ͠Δͷ͔ ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ ΞΫηγϏϦςΟνΣοΫͷࣗಈԽʹ͍ͭͯ

Slide 18

Slide 18 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ NBSLVQMJOUͷϩʔυϚοϓ ೥݄WBMQIBΞϧϑΝ൛ύϒϦογϡ ೥݄Wਖ਼ࣜ൛ύϒϦογϡ ⾣೿ੜπʔϧల։ͷͨΊͷ"1*࣮૷ ⾣ϓϥάΠϯɾΧελϜϧʔϧͷ"1*࣮૷ ⾣ΠϯσϯτϑΥʔϚοτɾίʔυελΠϧΛ౷Ұ͢ΔϏϧτΠϯϧʔϧ࣮૷ ⾣ཁૉɾଐੑνΣοΫ͕࠷௿ݶՄೳͳϏϧτΠϯϧʔϧ࣮૷ ⾣7JTVBM4UVEJP$PEF֦ுWਖ਼ࣜ൛ύϒϦογϡ ೥݄WϚΠφʔόʔδϣϯΞοϓ ⾣)5.--JWJOHTUBOEBSEͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧ௥Ճ ⾣8$8"*"3*"ͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧ௥Ճ ⾣ϒϥ΢β༻Ϟδϡʔϧ։ൃ ೥݄पลϓϥάΠϯ։ൃ ⾣)5.-JO+4ʢ5FNQMBUFMJUFSBMʣରԠϓϥάΠϯ ⾣QVHରԠϓϥάΠϯ ⾣QIQରԠϓϥάΠϯ

Slide 19

Slide 19 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ NBSLVQMJOUͷϩʔυϚοϓ ೥݄WBMQIBΞϧϑΝ൛ύϒϦογϡ ೥݄Wਖ਼ࣜ൛ύϒϦογϡ ⾣೿ੜπʔϧల։ͷͨΊͷ"1*࣮૷ ⾣ϓϥάΠϯɾΧελϜϧʔϧͷ"1*࣮૷ ⾣ΠϯσϯτϑΥʔϚοτɾίʔυελΠϧΛ౷Ұ͢ΔϏϧτΠϯϧʔϧ࣮૷ ⾣ཁૉɾଐੑνΣοΫ͕࠷௿ݶՄೳͳϏϧτΠϯϧʔϧ࣮૷ ⾣7JTVBM4UVEJP$PEF֦ுWਖ਼ࣜ൛ύϒϦογϡ ೥݄WϚΠφʔόʔδϣϯΞοϓ ⾣)5.--JWJOHTUBOEBSEͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧ௥Ճ ⾣8$8"*"3*"ͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧ௥Ճ ⾣ϒϥ΢β༻Ϟδϡʔϧ։ൃ ೥݄पลϓϥάΠϯ։ൃ ⾣)5.-JO+4ʢ5FNQMBUFMJUFSBMʣରԠϓϥάΠϯ ⾣QVHରԠϓϥάΠϯ ⾣QIQରԠϓϥάΠϯ

Slide 20

Slide 20 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ ೿ੜπʔϧల։ͷͨΊͷ"1*࣮૷ ೿ੜπʔϧ͕࡞ΕΔ࢓૊Έʹ͍ͭͯཁ๬͕͋ͬͨ

Slide 21

Slide 21 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ ೿ੜπʔϧల։ͷͨΊͷ"1*࣮૷ ೿ੜπʔϧ੍࡞ʹऔΓֻ͔ͬͯ͘Ε͍ͯΔํʑ͕͍Δ

Slide 22

Slide 22 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ ೿ੜπʔϧల։ͷͨΊͷ"1*࣮૷ ೿ੜπʔϧͷͨΊͷ"1*ఏڙ ࣮૷த !// ॊೈͰඪ४ͳAPIΛఏڙ͢ΔຊՈ import * as markuplint from 'markuplint'; !// ࣮ߦ؀ڥΛ໰Θͳ͍Universal JavaScriptͰར༻Ͱ͖ΔAPI import { MLCore } from '@markuplint/ml-core'; ˞@textlint/kernelʹӨڹΛड͚͍ͯ·͢ɻ

Slide 23

Slide 23 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ ϑϩϯτΤϯυΤϯδχΞʹ ؾܰʹ ϛχϚϜʹ ΞυϗοΫʹ ར༻ͯ͠΄͍͠ ͳͷͰϥΠηϯε΋.*5Ͱ͢

Slide 24

Slide 24 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ NBSLVQMJOUͷϩʔυϚοϓ ೥݄WBMQIBΞϧϑΝ൛ύϒϦογϡ ೥݄Wਖ਼ࣜ൛ύϒϦογϡ ⾣೿ੜπʔϧల։ͷͨΊͷ/PEFKT"1*࣮૷ ⾣ϓϥάΠϯɾΧελϜϧʔϧͷ"1*࣮૷ ⾣ΠϯσϯτϑΥʔϚοτɾίʔυελΠϧΛ౷Ұ͢ΔϏϧτΠϯϧʔϧ࣮૷ ⾣ཁૉɾଐੑνΣοΫ͕࠷௿ݶՄೳͳϏϧτΠϯϧʔϧ࣮૷ ⾣7JTVBM4UVEJP$PEF֦ுWਖ਼ࣜ൛ύϒϦογϡ ೥݄WϚΠφʔόʔδϣϯΞοϓ ⾣)5.--JWJOHTUBOEBSEͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧ௥Ճ ⾣8$8"*"3*"ͷόϦσʔγϣϯ͕Ͱ͖ΔϏϧτΠϯϧʔϧ௥Ճ ⾣ϒϥ΢β༻Ϟδϡʔϧ։ൃ ೥݄पลϓϥάΠϯ։ൃ ⾣)5.-JO+4ʢ5FNQMBUFMJUFSBMʣରԠϓϥάΠϯ ⾣QVHରԠϓϥάΠϯ ⾣QIQରԠϓϥάΠϯ

Slide 25

Slide 25 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ 8$8"*"3*"ͷόϦσʔγϣϯ SPMFଐੑ BSJBଐੑ ࢦఆཁૉͷଥ౰ੑ ଐੑ஋ͷنఆ஋ɾλΠϙνΣοΫ aria-***byଐੑͳͲͱ#idͷ੔߹ੑ aria-labelͷ্ॻ͖໰୊νΣοΫ ͳͲ

Slide 26

Slide 26 text

©2018 Yusuke Hirao ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ 8$8"*"3*"ͷόϦσʔγϣϯ SPMFଐੑ BSJBଐੑ ࢦఆཁૉͷଥ౰ੑ ଐੑ஋ͷنఆ஋ɾλΠϙνΣοΫ aria-***byଐੑͳͲͱ#idͷ੔߹ੑ aria-labelͷ্ॻ͖໰୊νΣοΫ ͳͲ ਓ͕ؒνΣοΫ͢Δͷʹݶք͕͋Δ΍ͭ

Slide 27

Slide 27 text

©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ ࠓɺͲ͏͍͏ར༻Λ͍ͯ͠Δͷ͔ ࠓޙɺͲ͏͍͏ར༻Λ͍͔ͨ͠ɾͯ͠΄͍͔͠ ΞΫηγϏϦςΟνΣοΫͷࣗಈԽʹ͍ͭͯ

Slide 28

Slide 28 text

©2018 Yusuke Hirao Έͳ͞ΜŊ΋ͪΖΜςετॻ͍ͯ·͢ΑͶʁ ʢ౜ಥͳἤΓʣ

Slide 29

Slide 29 text

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ΋͏ͻͱͭར༻͍ͨ͠γʔϯ ίϯϙʔωϯτςετ ✕ ΞΫηγϏϦςΟ 8"*"3*" νΣοΫ ✕ ࣗಈςετπʔϧ

Slide 30

Slide 30 text

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ίϯϙʔωϯτςετ 7VFKTͷྫ import { render } from '@vue/server-test-utils'; import Foo from './Foo.vue'; describe('Foo', () !=> { it('renders a div', () !=> { const wrapper = render(Foo); expect(wrapper.text()).toContain('
!
'); }); }); Ҿ༻IUUQTWVFUFTUVUJMTWVFKTPSHKBBQJSFOEFS

Slide 31

Slide 31 text

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ίϯϙʔωϯτςετʹ8"*"3*"νΣοΫΛಋೖ NBSLVQMJOU͸)5.-ͷஅย %PDVNFOU'SBHNFOU Λѻ͑Δ import { render } from '@vue/server-test-utils'; import * as markuplint from 'markuplint'; import Foo from './Foo.vue'; describe('Foo', () !=> { it('renders a div', () !=> { const wrapper = render(Foo, { propsData: { pressed: true } }); expect( markuplint.verify({ sourceCodes: wrapper.html(), reportType: 'exception', }), ).toBe(true); }); }); ࢀߟIUUQTWVFUFTUVUJMTWVFKTPSHKBBQJSFOEFS

Slide 32

Slide 32 text

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ίϯϙʔωϯτςετʹ8"*"3*"νΣοΫΛಋೖ NBSLVQMJOU͸)5.-ͷஅย %PDVNFOU'SBHNFOU Λѻ͑Δ ࢀߟIUUQTWVFUFTUVUJMTWVFKTPSHKBBQJSFOEFS import { render } from '@vue/server-test-utils'; import * as markuplint from 'markuplint'; import Foo from './Foo.vue'; describe('Foo', () !=> { it('renders a div', () !=> { const wrapper = render(Foo, { propsData: { pressed: true } }); expect( markuplint.verify({ sourceCodes: wrapper.html(), reportType: 'exception', }), ).toBe(true); }); }); ීวతͳଐੑ஋ςετ͸·ͱΊͯ୲͏

Slide 33

Slide 33 text

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ίʔσΟϯά ίϯϙʔωϯτ ςετ ϦϯτνΣοΫ git push ϦϙδτϦ post-receive $*αʔόʔ ϔουϨε ϒϥ΢βʔ test —watch lint —watch ίϯϙʔωϯτ ςετ

Slide 34

Slide 34 text

©2018 Yusuke Hirao ͱ͜ΖͰ NBSLVQMJOU͸ΞΫηγϏϦςΟνΣοΧʔͳͷ͔

Slide 35

Slide 35 text

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ NBSLVQMJOU͸ΞΫηγϏϦςΟνΣοΧʔͳͷ͔ νΣοΧʔͱ໊৐Δͱ͜Ζ·Ͱػೳ࣮૷͢Δͭ΋Γ͸ͳ͍Ͱ͢ɻ ͋͘·ͰNBSLVQMJOU͸ϚʔΫΞοϓϥϯήʔδ༻ͷϦϯλʔͰ͢ɻ ͳͷͰɺཁૉ΍ଐੑΛνΣοΫ͢Δ্Ͱid ΍for΍altɺ ͦͯ͠8"*"3*"΋ର৅ʹ͍ͯ͠Δ͚ͩͰ͢ɻ άϥϑΟΧϧͳ෦෼΍$44࣮૷ʹٴͿͱ͜Ζ·Ͱ͸αϙʔτ͠·ͤΜ͠ɺͰ͖·ͤΜɻ NBSLVQMJOUΛར༻ͯ͠ΞΫηγϏϦςΟνΣοΧʔΛ ։ൃ͍ͯͨͩ͘͠ͷ͸΍Ϳ͔͞Ͱ͸ͳ͍Ͱ͢

Slide 36

Slide 36 text

©2018 Yusuke Hirao ΞΫηγϏϦςΟνΣοΫͷࣗಈԽ ஫໨͍ͯ͠ΔΞΫηγϏϦςΟνΣοΧʔ "ZD 8FC্ͰΞΫηγϏϦςΟνΣοΫ͕ Ͱ͖ΔαʔϏεπʔϧɻ .*5ϥΠηϯεͷΦʔϓϯιʔεͰ 1)1Ͱॻ͔Ε͍ͯΔͷͰ $.4ͳͲʹ૊ΈࠐΈՄೳɻ 8PSE1SFTTϓϥάΠϯ͕഑෍͞Ε͍ͯ·͢ɻ CBTFS$.4ϓϥάΠϯ΋΄͍͠ʜ

Slide 37

Slide 37 text

©2018 Yusuke Hirao ·ͱΊ

Slide 38

Slide 38 text

©2018 Yusuke Hirao ·ͱΊ ؾܰʹɺϛχϚϜʹɺΞυϗοΫʹར༻ͯ͠΄͍͠ ίϯϙʔωϯτςετʹ΋࢖͑Δ ࣗಈςετπʔϧʹ૊ΈࠐΉͷ͕Φεεϝ ΞΫηγϏϦςΟνΣοΫ͸͋͘·Ͱཁૉɾଐੑ͕ର৅

Slide 39

Slide 39 text

ΞΫηγϏϦςΟνΣοΫΛࣗಈԽ͢ΔͨΊͷ NBSLVQMJOUͷϩʔυϚοϓ "DDFTTJCJMJUZ4UFQ7PM