VRT in Action

About VRT(Visual Regression Testing)

Transcript

1. VISUAL REGRESSION TESTING IN ACTION Frontend Conference Fukuoka '19
2. About me w ૔ݟ
   ༸ี
   ʢ!2VSBNZʣ
   w ແ৬
   w ։ൃิॿπʔϧΛ࡞Δͷ͕झຯ
3. Agenda w #BDLHSPVOE
   w 5PPMT
   GPS
   735
   w 735
   JO
   SFBM
   XPSME
   w 4VNNBSZ
4. BACKGROUND
5. Viewͷςετɺॻ͍ͯ·͔͢ʁ
6. How to test views? w ͜ͷ6*ͷςετΛॻ͍ͯΈΑ͏ʂ <template> <div v-if="user"> <span class="user-name">{{user.name}}</span> <img :src="user.avatarUrl" /> </div> <div v-else> <button>Signup</button> </div> </template>
7. How to test views? w ͜ͷ6*ͷςετΛॻ͍ͯΈΑ͏ʂ <template> <div v-if="user"> <span class="user-name">{{user.name}}</span> <img :src="user.avatarUrl" /> </div> <div v-else> <button>Signup</button> </div> </template> DMBTT͕VTFSOBNFͰ͋Δ͜ͱ VTFS໊͕಺ૠ͞Ε͍ͯΔ͜ͱ 63-͕όΠϯυ͞Ε͍ͯΔ͜ͱ
8. How to test views? w ͜ͷ6*ͷςετΛॻ͍ͯΈΑ͏ʂ <template> <div v-if="user"> <span class="user-name">{{user.name}}</span> <img :src="user.avatarUrl" /> </div> <div v-else> <button>Signup</button> </div> </template> DMBTT͕VTFSOBNFͰ͋Δ͜ͱ VTFS໊͕಺ૠ͞Ε͍ͯΔ͜ͱ 63-͕όΠϯυ͞Ε͍ͯΔ͜ͱ VTFS͕OVMMͷͱ͖ɺCVUUPO
   λά͕ඳը͞Ε͍ͯΔ͜ͱ JNHλάͰ͋Δ͜ͱ EJWλάͰ͋Δ͜ͱ TQBO
   λάͰ͋Δ͜ͱ ΩϦ͕ແ͍ʂ
9. Problems w Ͳ͜·ͰΞαʔγϣϯ͢Ε͹͍͍ͷʁ
   w UFYU
   OPEF
   ཁૉ໊
   $44
   DMBTT໊΍ଐੑ஋
   FUD
   w ΞαʔγϣϯΛॆ࣮ͤ͞Δͱ
   w ը໘࢓༷͕มΘͬͨΒΞαʔγϣϯ͕յΕͯϝϯς͠ΜͲ͍ ʮ7JFXͷࣗಈςετ͸ίεύѱ͍͔Βը໘ͷςετ͸ਓྗͰʂʯ
   ͱͳΔͱ࠷ѱ
10. Snapshot testing w ࠓճͷςετͰಘΒΕͨ%0.จࣈྻΛɺ࣍ճͷFYQFDUFEͱͯ͠ར༻͢Δख๏
 ॳճ΍ࠩ෼ൃੜ࣌͸TOBQTIPUϑΝΠϧΛϨϏϡʔ͢Δ͜ͱͰ୲อ͢Δ The latest snapshot(DOM string) The actual snapshot(DOM string) Update if snapshot is accepted Assertion
11. Pros/Cons w 1SPT
    w ಋೖ͕༰қɻ+FTUͳͲʹ͸ඪ४૷උ͞Ε͍ͯΔ
    w $POT
    w จࣈྻͰςετ͢Δ͜ͱʹҙຯ͕ͲΕ͚ͩ͋Δͷ͔ʁ
    w ͦ΋ͦ΋ΤϯυϢʔβʔ͸$44
    DMBTT໊ʹڵຯ͕͋Δ༁Ͱ͸ͳ͍
    w ϑϩϯτΤϯυͷ੹຿͸6*ͷఏڙͷ͸ͣͳͷʹɺݟͨ໨Λςετ͠ͳͯ͘Α͍ͷ͔ʁ
12. Visual regression testing w จࣈྻͰ͸ͳ͘ɺඳը͞Εͨը૾ͦͷ΋ͷΛεφοϓγϣοτʹ͢Ε͹ɺʮݟͨ໨ʯ΋ ؚΊͯςετͰ͖ΔͷͰ͸ 5IF
    MBUFTU
    TOBQTIPU
    1/(
    *NBHF 5IF
    BDUVBM
    TOBQTIPU
    1/(
    *NBHF 6QEBUF
    JG
    TOBQTIPU
    JT
    BDDFQUFE Assertion
13. Other motivations w 6*ίϯϙʔωϯτͷ୯ମςετҎ֎ͷ༻్ʹ΋ɿ
    w ΞϓϦέʔγϣϯશମͰ$44͕յΕ͍ͯͳ͍͔ݕূΛߦ͍͍ͨ
    w 4$44͔Βଞͷ$44
    QSFQSPDFTTPS΁҆શʹҠߦ͍ͨ͠
    w FUD
14. TOOLS FOR VRT
15. What should I do? w ెखۭݓͰ735ʹऔΓ૊Ήͷ͸݁ߏେมɻɻɻ
    w ͦ΋ͦ΋ࡢࠓͷϑϩϯτͷελοΫ͕ෳࡶ
    w 6*ϥΠϒϥϦ
    3FBDU
    "OHVMBS
    7VFKT
    FUD
    w ςεςΟϯάϥΠϒϥϦ
    4FMFOJVN
    $ZQSFTTJP
    ,BSNB
    +FTU
    "WB
    +BTNJOF
    .PDIB
    FUD
    w $*
    5SBWJT$*
    $JSDMF
    $*
    8FSDLFS
    $*
    (JU)VC
    "DUJPOT
    (JUMBC
    $*
    FUD
    
    w 735ݕ౼࣌ɺࣗ෼ͨͪͷ։ൃελοΫʹ޲͍ͨπʔϧ͕ແ͔ͬͨͨΊɺࣗ࡞͢Δ͜ͱʹ
16. reg-viz w 735ʹऔΓ૊ΉաఔͰ࡞ͬͨπʔϧୡ͸
    IUUQTHJUIVCDPNSFHWJ[
    Ͱެ։த
17. Separation of concern w Ұؾʹશ෦ղܾ͠Α͏ͱ͢Δͱਏ͍
    w ΤϯδχΞͷجຊʮ໰୊Λখ͘͞෼͚ΔʯʹཱͪฦΔ
    w 735ඞཁͳཁૉ
    w ςετίʔυ͔Βը૾Λग़ྗ͢Δ
    w ग़ྗ͞Εͨը૾Λൺֱ͢Δ
18. ʮը૾ͷग़ྗʯฤ
19. Weapon of choice w େ͖͘෼͚ͯ௨Γ
    w ࣮ΞϓϦέʔγϣϯΛΩϟϓνϟ͢Δύλʔϯ
    w 4FMFOJVN΍$ZQSFTTJPɺ#SPXTFS4UBDLͳͲͰࣗಈԽεΫϦϓτΛ༻ҙʢ&&ʣ
    
    w ը໘ͷύʔπຖʹΩϟϓνϟ͍ͯ͘͠ύλʔϯ
    w 1VQQFUFFS΍,BSNBɺ/JHIUNBSF
    ͱ֤ςεςΟϯάϥΠϒϥϦΛ૊Έ߹Θ͍ͤͯ͘
    w 4UPSZCPPL
20. Why Storybook? w 4UPSZCPPLͷར఺
    w 3FBDU
    7VFKT
    "OHVMBS
    3/ͳͲɺओཁͳϑϨʔϜϫʔΫ͕αϙʔτ͞Ε͍ͯΔ
    w 4UPSZTIPUTʢ4UPSZCPPLʹ͓͚Δ%0.จࣈྻϕʔεͷεφοϓγϣοτςετπʔϧʣ ͱͷซ༻΋Մೳ
    w ςετҎ֎Ͱ໾ʹཱͭγʔϯ͕ଟ͍
    
    ಋೖͷ߹ҙΛಘ΍͍͢
    w ը໘ͷΧλϩάͱͯ͠ར༻Մೳ
    w ).3͕ޮ͘ͷͰɺ6*։ൃͦΕࣗମʹ΋ศར
21. Storycap w IUUQTHJUIVCDPNSFHWJ[TUPSZDBQ
    w 4UPSZCPPL͔Β֤TUPSZΛ1/(ը૾Խ͢Δ$-*
    w )FBEMFTT
    $ISPNFϥούͰ͋Δ1VQQFUFFSΛར༻
    w TUPSZCPPLDISPNFTDSFFOTIPU
    
    [JTVJ
    ͱ͍͏ͪΐͬͱ΍΍͍͜͠ܦྺ
22. Storycap: Demo npx storycap https://storybookjs-next.now.sh/vue-kitchen-sink/
23. Storycap features w 4UPSZCPPL
    WWW
    Λαϙʔτ
    w 6*
    'SBNFXPSLʢ3FBDU΍7VFKTʣʹґଘ͠ͳ͍
    w 4UPSZCPPLͷ63-͑͞஌͍ͬͯΕ͹ಈ͔ͤΔɻ͍ΘΏΔ[FSP
    DPOpHVSBUJPO
    w 4UPSZCPPL
    BEEPOͱͯ͠ར༻͢Δ͜ͱͰΩϟϓνϟઃఆͷΧελϚΠζ΋Մೳ
    w ݁ߏ଎͍ʢͱࢥͬͯΔʣ
    w ؀ڥ΍ΞϓϦʹґଘ͢Δ͕ɺd TUPSJFTʹରͯ͠໿ඵͰΩϟϓνϟ׬ྃ
24. Suppress false positive w 'BMTF
    QPTJUJWFʢِཅੑޡݕग़ʣͱ͸
    w ຊདྷਖ਼͍͠΋ͷΛؒҧ͍ͱͯ͠ѻͬͯ͠·͏͜ͱɻཁ͸ΦΦΧϛগ೥
    w ʮιʔείʔυΛม͍͑ͯͳ͍ͷʹΩϟϓνϟը૾ͷൺֱ࣌ʹࠩ෼͕ݕग़͞Εͯ͠·͏ʯ Λແ͘͞ͳͯ͘͸ͳΒͳ͍
    w จࣈྻϕʔεͷ4OBQTIPUςετͱൺֱͨ͠ͱ͖ʹɺ࣮ϒϥ΢βΛ࢖͏735ͷ೉қ౓͕ߴ ͘ͳͬͯ͠·͏ཧ༝ͷͭ
    w 4UPSZDBQͰ͸1VQQFUFFSͷ"1*Λ࢖ͬͯɺGBMTF
    QPTJUJWFΛ๷͙࢓૊ΈΛೖΕ͍ͯΔ
25. 1. Turn off animation w $44Ξχϝʔγϣϯ͸ڧ੍ఀࢭ
    w +4ʹΑΔΞχϝʔγϣϯʢFH
    IJHIDIBSUT
    3PUUJFͳͲʣ͸ϢʔβʔଆͰ੾Γସ͑ͯ΋Β ͏͔͠ͳ͍ /* animation-off.css */ *, *::before, *::after { transition: none !important; animation: none !important; } page.addStyleTags({ path: 'animation-off.css' });
26. 2. Wait for assets loaded w ը૾΍ϑΥϯτͳͲͷϦιʔεಡΈࠐΈ׬ྃલ
 ʹΩϟϓνϟͯ͠͠·͏ͱɺGBMTF
    QPTJUJWFʹͳͬͯ͠·͏
    w page.on('request')
    Λ؂ࢹ
    w request.resourceType()
    Ͱ$ISPNF͕൑ผͨ͠Ϧιʔεछผ͕ࣄલʹΘ͔Δ
    w ಛఆͷϦιʔελΠϓʢJNBHFͳͲʣʹ͍ͭͯɺͦͷϦΫΤετ͕׬͔ྃͨ͠Ͳ͏͔Λݕ ূ͔ͯ͠ΒɺTDSFFOTIPUΛ࣮ߦ͢ΔΑ͏ʹ͍ͯ͠Δ
    w ϦιʔελΠϓΛݟ͓͔ͯͳ͍ͱɺTFSWFS
    TFOU
    FWFOUTʢFH
    4UPSZCPPLͷ).3ʣ ͳͲɺʮ׬ྃ͠ͳ͍ʯϦΫΤετΛ؂ࢹ͠ଓ͚Δ͜ͱʹͳΔ
27. 3. Wait til metrics stabled w .FUSJDT
    "1*ΛͰ$ISPNF
    SFOEFSJOH
    QJQFMJOFʹ͓͚Δॲཧ࣮ߦճ਺͕ܭଌ
    w ௚ۙͷϑϨʔϜͱଌఆ஋Λൺֱͯࠩ͠෼͕ແ͘ͳ͔ͬͯΒTDSFFOTIPUΛ࣮ߦ͢ΔΑ͏ʹ ͍ͯ͠Δ
 ʢ྘৭ͷ෦෼͕ఆৗ͔Ͳ͏͔Λ஌Δज़͕ͳ͍ͨΊɺͪΐͬͱෆ׬શʣ const { Nodes, RecalcStyleCount, LayoutCount } = await page.metrics();
28. ʮը૾ͷൺֱʯฤ
29. reg-cli w IUUQTHJUIVCDPNSFHWJ[SFHDMJ
    w SFHWJ[ͷதͰ࠷΋ݹ͍ύοέʔδ
    w ը૾ΛؚΜͩσΟϨΫτϦಉ࢜ΛҾ਺ʹͱΓɺಉ໊ը૾ϑΝΠϧͷࠩ෼ൺֱΛߦ͏$-*
    w ʮඞཁͳͷ͸ࣄલͱࣄޙͷը૾܈͚ͩʯͱ͍͏γϯϓϧ͕͞ಛ௃ npx reg-cli actural-img-dir expected-img-dir diff-img-dir
30. Report UI w -R ΦϓγϣϯΛ෇͚͓ͯ͘ͱɺൺֱ݁ՌΛϨϙʔτͱͯ͠ࢀরՄೳ
31. Various ways to visualize diff w 1JYFM
    EJ⒎Ҏ֎ʹ΋ɺ4XJQF
    VQ
    0OJPO
    TLJOOJOHͳͲ༷ʑͳൺֱํ๏Λఏڙ
32. reg-suit w IUUQTHJUIVCDPNSFHWJ[SFHTVJU
    w SFHDMJΛճؼςετͷϫʔΫϑϩʔʹ૊ΈࠐΉͨΊͷϥούʔπʔϧ
    w ۀ຿ͰॳΊͯSFHDMJΛ࢖ͬͨͱ͖ɺपลͷγΣϧεΫϦϓτ͕ංେԽ͖ͯͯ͠Ϡόͦ ͏ͩͬͨͷͰɺϦϑΝΫλϦϯάΛ݉Ͷͯ044Խͨ͠΋ͷ
    w ʮ$*΍4$.ʹґଘͤͣɺ൚༻తʹ࢖͑ΔʯΛϞοτʔʹ࡞੒
    w ࣮αʔϏεʢ(JU)VCͳͲʣͱ࿈ܞ͢Δ෦෼͸QMVHJOͱͯࠩ͠͠ࠐΊΔΑ͏ʹͯ͋͠Δ
33. Automation via reg-suit
34. Publishing images w 735ʹऔΓ૊Μͩ౰ॳɺ+FTUͳͲͱಉ͘͡ը૾ϑΝΠϧࣗମ΋DPNNJUʹؚΊ͍͕ͯͨɺ ςετ࣮ߦऀͷ୺຤ࠩҟͰେྔʹEJ⒎͕ੜ͡Δͱ͍͏ਏΈ͕͋ͬͨ
    w $*Ͱੜ੒͞Εͨը૾ΛΫϥ΢υʹอଘ͓͖ͯ͠ɺ࣍ճςετ࣌ʹμ΢ϯϩʔυ͢ΔΑ͏ʹ ઃܭ
    w Ϋϥ΢υલఏʹͨ͜͠ͱʹΑΓɺࠩ෼༗ແʹؔΘΒͣϩʔΧϧͰը૾औಘΛճ͢ඞཁ͕ ແ͘ͳΔͱ͍͏ϝϦοτ͕෭࡞༻తʹಘΒΕͨ
    w ݱঢ়ɺ"84
    4
    
    ($4Λอଘઌͱ͢ΔͨΊͷQMVHJOΛެ։த
    w தʹ͸$JSDMF$*ͷBSUJGBDUTͱͯ͠อଘ͢Δ0SCΛ࡞੒͍ͯ͠Δ໠ऀ΋
35. Workflow w ࣮ߦ࣌ʹൺֱର৅ͷDPNNJUΛಛఆ͠ɺετϨʔδ͔ΒFYQFDUFEը૾Λμ΢ϯϩʔυ
36. GitHub integration w SFHTVJUͷࠩ෼ൺֱ׬ྃ࣌ʹɺ(JU)VCͷ13ίϝϯτͱͯ͠௨஌Λߦ͏ػೳ
37. GitHub integration w ίϝϯτͷ
    ˔˔˔˔˔
    ͸ࠩ෼ͷ಺༰ʢ੺ɿࠩ෼༗ɺ੨ɿࠩ෼ͳ͠ɺനɿ৽نϑΝΠϧʣ
    w ྫ͑͹ɺ੺ؙݸ͸ʮϑΝΠϧͰࠩ෼͕ੜ͍ͯ͡Δʯͱ͍͏ҙຯ
    w നؙ͚ͩ૿͍͑ͯΔ৔߹ɺͨͩςετέʔε͕૿͚͑ͨͩͳͷͰتΜͰྑ͍
    w ٯʹݸ͘Β͍੺ؙ͕͋Δͱʮ͜Ε͸৺ͯ͠ϨϏϡʔ͠ͳ͍ͱʯͱ֮ޛΛܾΊͨΓ
38. GitHub integration w ͭͰ΋ࠩ෼ϑΝΠϧ͕͋Ε͹ςετࣦഊͷՄೳੑ͕͋ΔͨΊɺ$PNNJU
    4UBUVTΛGBJMFE ͱ͍ͤͯ͞Δ
    w ϨϏϡΞ͕13Λঝೝ͢Δͱɺ$PNNJU
    4UBUVTΛ4VDDFFEFEʹมߋ
    w εφοϓγϣοτςετͰ͋Γɺʮҙਤతͳࠩ෼ʯ͔Ͳ͏͔͸ϨϏϡʔ͕ඞཁ
    w (JU)VC
    13ʹࠩ෼༗ແΛ௨஌͢Δ͜ͱͰɺ։ൃϑϩʔʹࣗવͳܗͰεφοϓγϣοτϨ ϏϡʔΛࠩ͠ࠐΊΔ
39. Review with images w SFHDMJͷϨϙʔτը໘ʹ13ίϝϯτ͔ΒભҠՄೳͱ͍͏͜ͱ͸ʮϨϏϡΞ͕μΠϨΫτ ʹը૾Λ֬ೝͰ͖Δʯͱ͍͏͜ͱ
    w ʮͲͷΑ͏ͳݟͨ໨ͷมߋͳͷ͔ʯ͕ՄࢹԽ͞ΕΔͨΊɺϨϏϡʔͷෛՙ͕ܰݮ͞ΕΔ
    w WJFXͷΈͷमਖ਼Ͱ͋Ε͹ɺϩʔΧϧͰىಈ֬ೝ͢Δ·Ͱ΋ແ͘ͳΔɻͳΜͳΒ௨ۈதʹ ిं಺ͰϨϏϡʔ׬ྃ͢Δ͜ͱ͢Β͋Δ
40. About us
41. Maintainers w SFHWJ[ͷϝϯόʔͱओͳ୲౰ൣғ
    w
    
    
    
    !2VSBNZ
    SFHTVJU
    4UPSZDBQ
    WͳͲ
    w
    
    
    
    !CPLVXFC
    SFHDMJͷॳ൛
    SFHTVJU
    ͷFYQFDUFE
    DPNNJU
    ݕग़෦෼ͳͲ
    w
    
    
    
    !XBEBDLFM
    4UPSZDBQͷॳ൛
    SFHDMJͷϨϙʔτ6*
    SFHWJ[શମͷσβΠϯͳͲ
    w 13ͳͲ͸͍ͭͰ΋΢ΣϧΧϜͰ͢ʂ
42. Other tools w IUUQTHJUIVCDPNSFHWJ[OPEFYDC
    w $ISPNFΛIFBEMFTTͰಈ࡞ͤ͞ΔͨΊʹඞཁͳMJCYDCͳͲΛࣄલʹম͖෇͚ͨ %PDLFSpMFɻ$*ͷCBTFΠϝʔδʹ͢Δͱศར
    w IUUQTHJUIVCDPNSFHWJ[JNHEJ⒎KT
    w /PEFKT͚ͩͰ׬݁ͯ͠ը૾ͷEJ⒎ੜ੒͕ߦ͑ΔϥΠϒϥϦɻSFHDJM͕಺ଆͰ͜ΕΛୟ ͍͍ͯΔ
    w ࠷ॳظɺSFHDMJ͕JNBHFNBHJDLͷDPNQBSFίϚϯυʹґଘ͓ͯ͠Γɺ͜ΕΛണ͕͢ ͨΊʹ࣮૷
43. Other tools w IUUQTHJUIVCDPNSFHWJ[YJNHEJ⒎KT
    w ࠩ෼ϨϙʔτͰ༻͍͍ͯΔࠩ෼ՕॴͷϚʔΩϯά༻ͷϥΠϒϥϦɻ0QFO$7ͷہॴಛ ௃ྔͰը૾಺෦ͷύʔπͷҐஔมಈΛநग़͍ͯ͠Δ
    w KTͱॻ͍͍ͯΔ͚Ͳɺ࣮ࡍ͸0QFO$7$ ΛFNTDSJQUFOͰXBTNԽͨ͠୅෺
    w ਪఆ͕؁͘ɺΘ͚Θ͔ΒΜදࣔʹͳΔ͜ͱ΋݁ߏଟ͍
44. VRT IN REAL WORLD
45. Users
46. Users of reg-viz tools w SFHWJ[ͷπʔϧΛಋೖͯ͘͠Ε͍ͯΔاۀʢΞϧϑΝϕοτॱɺࠓճܝࡌڐՄ໯ͬͨͱ͜ͷΈʣ
    w 4NBSU)3ࣾ͸QVCMJD
    SFQPӡ༻Ͱεΰ͍
    w IUUQTHJUIVCDPNLVGVTNBSUISVJQVMM
47. Users of reg-suit w SFHTVJU
    ͕
    (JU)VC
    ΁ίϝϯτͨ͠ճ਺Λաڈϲ݄෼άϥϑԽ
    w dສճ
    
    ݄
    
    ສճ
    
    ݄
48. How many images tested w ҰճͷςετͰฏۉ
    d
    ຕఔ౓ɻࡉ͔͍ϩάͰΈΔͱ ຕҎ্ͷϢʔβʔ΋ ԜΜͰΔͷ͸౔೔ɻ΍͸Γ࢓ࣄͰ࢖ΘΕΔέʔε͕ѹ౗తͬΆ͍
49. Performance
50. Performance w ۀ຿Ͱ͸ճͷ13Ͱݕূର৅ͷը૾͕ ຕΛ௒͑Δ͜ͱ΋
    w ʮ735ͷ͍ͤͰ$*͕஗͍ʯͱͳΓ͕ͪ
    w ࣗಈςετͰར༻͞ΕΔπʔϧ܈ͷͨΊɺ$*Ͱͷ࣮ߦ࣌ؒ͸ۃྗ୹͍ͨ͘͠
    w ֤πʔϧͦΕͧΕͰɺߴ଎Խͷ޻෉Λ࣮ࢪ͍ͯ͠Δ
51. Tuning: Storycap w  ຕͷੈքͰ͸ʮը૾ͷൺֱʯΑΓ΋ʮը૾ͷੜ੒ʯ͕ࢧ഑త
    w 1VQQFUFFSͷϓϩηεΛฒྻՔಇͤͯ͞$16Λ༡͹ͤͳ͍
    w খωλ
    1VQQFUFFSͰ͸1BHFΛෳ਺࡞ͬͯ΋5$1ίωΫγϣϯ੍ݶͷ౎߹্ɺMPBE
    BWFSBHF͕Ք͛ͳ͍ɻ#SPXTFSຖฒྻԽ͢Δํ͕݁Ռͱͯ͠ޮ཰త
    w 4UPSZͷ੾Γସ͑͸JGSBNFʹ௚઀QPTU
    NFTTBHF͢Δ
    w 4UPSZCPPLͷXFCQBDLʹCVOEMF͞Εͨ+BWB4DSJQUͷධՁ͕Ұ౓͚ͩʹͳΔ
52. CVOEMF͞ΕͨKTͷධՁ͚ͩͰNTFDҎ্͍͔࣋ͬͯΕΔ
53. Tuning: reg-cli w $-*ຊମ
    w ը૾ͷNEϋογϡ͕Ұகͨ͠৔߹ɺϐΫηϧൺֱΛߦΘͳ͍Α͏ʹ͍ͯ͠Δ
    w 3FQPSU
    6*΋ ຕͰ΋αΫαΫݟΕΔΑ͏ʹ޻෉
    w ը૾ͷ஗Ԇϩʔυʢ*OUFSTFDUJPO0CTFSWFS
    
    MPBEJOHMB[Z
    
    w 4΍($4΁ͷը૾(&5ճ਺͕࠷খԽ͞ΕΔͷͰɺ͓ࡒ෍ʹ΋༏͍͠
    w Ծ૝εΫϩʔϧʢࣗલ࣮૷ʣ
55. Your responsibilities
56. Your responsibilities w 4UPSZDBQ
    SFHDMJSFHTVJU
    Λಋೖ͢Ε͹ɺ735Λ࣮ݱ͢Δ͜ͱ͸Ͱ͖Δ
    w ʢ735ʹݶͬͨ࿩Ͱ͸ແ͍͚ΕͲʣπʔϧΛಋೖ͓ͯ͠ऴ͍ɺͱ͍͏༁͡Όͳ͍
    w Ή͠ΖΑ͏΍͘ελʔτ஍఺ʹཱ͚ͬͨͩ ʮͪΌΜͱςετΛճ͍ͯ͘͠ʯͷ͸։ൃνʔϜͷ੹຿
57. Scaffolding w εφοϓγϣοτςετͰ͋ͬͯ΋ɺςετίʔυΛॻ͔Ͷ͹Կ΋࢝·Βͳ͍
    w ίϯϙʔωϯτ࡞੒࣌ʹରͱͳΔςετίʔυʢ4UPSZCPPLʣͷ਽ܗ΋ੜ੒͢ΔΑ͏ʹ ؀ڥΛ੔͓͑ͯ͘ͱΑ͍
    w TDB⒎PMEJOHʹ࢖͑Δ/1.
    QBDLBHFT
    w !BOHVMBSEFWLJUTDIFNBUJDT
    IUUQTHJUIVCDPNBOHVMBSBOHVMBSDMJCMPC NBTUFSQBDLBHFTBOHVMBS@EFWLJUTDIFNBUJDT
    w TDB⒎EPH
    IUUQTHJUIVCDPNDBUTPTTTDB⒎EPH
58. Scaffolding w TDIFNBUJDTͰͷTUPSJFTUTYͷྫɿ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import <%= classify(name) %>, { Props } from './<%= classify(name) %>'; const stories = storiesOf('<%= target %>/components/<%= classify(name) %>', module); const props: Props = { }; stories.add('<%= classify(name) %>', () => <<%= classify(name) %> {...props} />);
59. Separate presentation w WJFXͷঢ়ଶ͸ςετίʔυ͔Β੍ޚͰ͖ΔΑ͏ʹ͓ͯ͘͠΂͠
    w MPDBM
    TUBUFʢ3FBDUͰ͍͏ͱ͜ΖͷVTF4UBUFʣʹཔΓ͗͢ͳ͍ɻଞͷ6*ϑϨʔϜϫʔ ΫͰ΋$PNQPOFOU
    QSJWBUFͳϑΟʔϧυΛ࢖͑Δ͕ɺ͜ΕΒͷѻ͍͸৻ॏʹ
    w ίϯϙʔωϯτͷݟͨ໨͸QSPQTͰมߋͰ͖ΔΑ͏ʹ͓ͯ͘͠
    w TUBUF͸3FEVYʢPS
    /H3Y
    7VFYʣͷTUPSFʹ੾Γग़ͯ͠ɺςετ࣌͸ϞοΫΛ%*Ͱ͖ ΔΑ͏ʹ͓ͯ͘͠
    w 4UPSZCPPLͰ͋Ε͹ɺ%FDPSBUPSΛ༻ҙͯ͠1SPWJEFSΛט·͓ͤͯ͘ɺͳͲ
60. No side effect
61. No new Date() ! ˞
    !OPCVIJLPTBXBJ
    ʹڐՄ໯ͬͯܝࡌ ͓Θ͔ΓͩΖ͏͔
    
62. Keep your view testable w ςελϏϦςΟͷҡ͕࣋։ൃऀͷ੹຿Ͱ͋Δͷ͸735΋Ұॹ
    w ʮݱࡏ࣌ࠁ͕ؔΘΔϢχοτςετ͔Βɺςετ༰қੑઃܭΛֶͿʯ
 IUUQTUXBEBIBUFOBCMPHKQFOUSZEFTJHOGPSUFTUBCJMJUZ
    w ίϯϙʔωϯτͷςετʹ͖ͪΜͱ޲͖߹͏͜ͱ͸ɺΞϓϦέʔγϣϯͷઃܭʹ΋ͪΌ Μͱ޲͖߹͏ͷͱಉٛ
63. SUMMARY
64. Summary w 735ͪΌΜͱճ͢ͱελΠϧ·ͰݕূͰ͖Δ
    w 4UPSZCPPL͔ͭͬͯΔͷͰ͋Ε͹ɺ4UPSZDBQ࢖͏ͱ͍͍ͱࢥ͏
    w SFHTVJU
    SFHDMJ
    ͸ը૾ͷൺֱʹಛԽͨ͠πʔϧ
    w 7JFXͷςετΛ͠΍͍͢Α͏ʹ౒ྗ͸ଵΒͣʹʂ
    w ςετʹ޲͖߹͏͜ͱ͸ઃܭ΍%9ͷ޲্ʹͭͳ͕Δ
65. Thank you !