Pros/Cons w 1SPT w ಋೖ͕༰қɻ+FTUͳͲʹඪ४උ͞Ε͍ͯΔ w $POT w จࣈྻͰςετ͢Δ͜ͱʹҙຯ͕ͲΕ͚ͩ͋Δͷ͔ʁ w ͦͦΤϯυϢʔβʔ$44DMBTT໊ʹڵຯ͕͋Δ༁Ͱͳ͍ w ϑϩϯτΤϯυͷ6*ͷఏڙͷͣͳͷʹɺݟͨΛςετ͠ͳͯ͘Α͍ͷ͔ʁ
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ݕ౼࣌ɺࣗͨͪͷ։ൃελοΫʹ͍ͨπʔϧ͕ແ͔ͬͨͨΊɺࣗ࡞͢Δ͜ͱʹ
Weapon of choice w େ͖͚ͯ͘௨Γ w ࣮ΞϓϦέʔγϣϯΛΩϟϓνϟ͢Δύλʔϯ w 4FMFOJVN$ZQSFTTJPɺ#SPXTFS4UBDLͳͲͰࣗಈԽεΫϦϓτΛ༻ҙʢ&&ʣ w ը໘ͷύʔπຖʹΩϟϓνϟ͍ͯ͘͠ύλʔϯ w 1VQQFUFFS,BSNBɺ/JHIUNBSFͱ֤ςεςΟϯάϥΠϒϥϦΛΈ߹Θ͍ͤͯ͘ w 4UPSZCPPL
Why Storybook? w 4UPSZCPPLͷར w 3FBDU
7VFKT
"OHVMBS
3/ͳͲɺओཁͳϑϨʔϜϫʔΫ͕αϙʔτ͞Ε͍ͯΔ w 4UPSZTIPUTʢ4UPSZCPPLʹ͓͚Δ%0.จࣈྻϕʔεͷεφοϓγϣοτςετπʔϧʣ ͱͷซ༻Մೳ w ςετҎ֎Ͱʹཱͭγʔϯ͕ଟ͍ಋೖͷ߹ҙΛಘ͍͢ w ը໘ͷΧλϩάͱͯ͠ར༻Մೳ w ).3͕ޮ͘ͷͰɺ6*։ൃͦΕࣗମʹศར
Storycap w IUUQTHJUIVCDPNSFHWJ[TUPSZDBQ w 4UPSZCPPL͔Β֤TUPSZΛ1/(ը૾Խ͢Δ$-* w )FBEMFTT$ISPNFϥούͰ͋Δ1VQQFUFFSΛར༻ w TUPSZCPPLDISPNFTDSFFOTIPU[JTVJͱ͍͏ͪΐͬͱ͍͜͠ܦྺ
Storycap features w 4UPSZCPPLWWWΛαϙʔτ w 6*'SBNFXPSLʢ3FBDU7VFKTʣʹґଘ͠ͳ͍ w 4UPSZCPPLͷ63-͍͑ͬͯ͞Εಈ͔ͤΔɻ͍ΘΏΔ[FSPDPOpHVSBUJPO w 4UPSZCPPLBEEPOͱͯ͠ར༻͢Δ͜ͱͰΩϟϓνϟઃఆͷΧελϚΠζՄೳ w ݁ߏ͍ʢͱࢥͬͯΔʣ w ڥΞϓϦʹґଘ͢Δ͕ɺd
TUPSJFTʹରͯ͠ඵͰΩϟϓνϟྃ
Suppress false positive w 'BMTFQPTJUJWFʢِཅੑޡݕग़ʣͱ w ຊདྷਖ਼͍͠ͷΛؒҧ͍ͱͯ͠ѻͬͯ͠·͏͜ͱɻཁΦΦΧϛগ w ʮιʔείʔυΛม͍͑ͯͳ͍ͷʹΩϟϓνϟը૾ͷൺֱ࣌ʹ͕ࠩݕग़͞Εͯ͠·͏ʯ Λແ͘͞ͳͯ͘ͳΒͳ͍ w จࣈྻϕʔεͷ4OBQTIPUςετͱൺֱͨ͠ͱ͖ʹɺ࣮ϒϥβΛ͏735ͷқ͕ߴ ͘ͳͬͯ͠·͏ཧ༝ͷͭ w 4UPSZDBQͰ1VQQFUFFSͷ"1*ΛͬͯɺGBMTFQPTJUJWFΛ͙ΈΛೖΕ͍ͯΔ
2. Wait for assets loaded w ը૾ϑΥϯτͳͲͷϦιʔεಡΈࠐΈྃલ ʹΩϟϓνϟͯ͠͠·͏ͱɺGBMTFQPTJUJWFʹͳͬͯ͠·͏ w page.on('request')Λࢹ w request.resourceType()Ͱ$ISPNF͕ผͨ͠Ϧιʔεछผ͕ࣄલʹΘ͔Δ w ಛఆͷϦιʔελΠϓʢJNBHFͳͲʣʹ͍ͭͯɺͦͷϦΫΤετ͕͔ྃͨ͠Ͳ͏͔Λݕ ূ͔ͯ͠ΒɺTDSFFOTIPUΛ࣮ߦ͢ΔΑ͏ʹ͍ͯ͠Δ w ϦιʔελΠϓΛݟ͓͔ͯͳ͍ͱɺTFSWFSTFOUFWFOUTʢFH4UPSZCPPLͷ).3ʣ ͳͲɺʮྃ͠ͳ͍ʯϦΫΤετΛࢹ͠ଓ͚Δ͜ͱʹͳΔ
reg-cli w IUUQTHJUIVCDPNSFHWJ[SFHDMJ w SFHWJ[ͷதͰ࠷ݹ͍ύοέʔδ w ը૾ΛؚΜͩσΟϨΫτϦಉ࢜ΛҾʹͱΓɺಉ໊ը૾ϑΝΠϧͷࠩൺֱΛߦ͏$-* w ʮඞཁͳͷࣄલͱࣄޙͷը૾܈͚ͩʯͱ͍͏γϯϓϧ͕͞ಛ npx reg-cli actural-img-dir expected-img-dir diff-img-dir
reg-suit w IUUQTHJUIVCDPNSFHWJ[SFHTVJU w SFHDMJΛճؼςετͷϫʔΫϑϩʔʹΈࠐΉͨΊͷϥούʔπʔϧ w ۀͰॳΊͯSFHDMJΛͬͨͱ͖ɺपลͷγΣϧεΫϦϓτ͕ංେԽ͖ͯͯ͠Ϡόͦ ͏ͩͬͨͷͰɺϦϑΝΫλϦϯάΛ݉Ͷͯ044Խͨ͠ͷ w ʮ$*4$.ʹґଘͤͣɺ൚༻తʹ͑ΔʯΛϞοτʔʹ࡞ w ࣮αʔϏεʢ(JU)VCͳͲʣͱ࿈ܞ͢Δ෦QMVHJOͱͯࠩ͠͠ࠐΊΔΑ͏ʹͯ͋͠Δ
Publishing images w 735ʹऔΓΜͩॳɺ+FTUͳͲͱಉ͘͡ը૾ϑΝΠϧࣗମDPNNJUʹؚΊ͍͕ͯͨɺ ςετ࣮ߦऀͷࠩҟͰେྔʹEJ⒎͕ੜ͡Δͱ͍͏ਏΈ͕͋ͬͨ w $*Ͱੜ͞Εͨը૾ΛΫϥυʹอଘ͓͖ͯ͠ɺ࣍ճςετ࣌ʹμϯϩʔυ͢ΔΑ͏ʹ ઃܭ w Ϋϥυલఏʹͨ͜͠ͱʹΑΓɺࠩ༗ແʹؔΘΒͣϩʔΧϧͰը૾औಘΛճ͢ඞཁ͕ ແ͘ͳΔͱ͍͏ϝϦοτ͕෭࡞༻తʹಘΒΕͨ w ݱঢ়ɺ"844($4Λอଘઌͱ͢ΔͨΊͷQMVHJOΛެ։த w தʹ$JSDMF$*ͷBSUJGBDUTͱͯ͠อଘ͢Δ0SCΛ࡞͍ͯ͠Δऀ
GitHub integration w ίϝϯτͷ˔˔˔˔˔ࠩͷ༰ʢɿࠩ༗ɺ੨ɿࠩͳ͠ɺനɿ৽نϑΝΠϧʣ w ྫ͑ɺؙݸʮϑΝΠϧͰ͕ࠩੜ͍ͯ͡Δʯͱ͍͏ҙຯ w നؙ͚ͩ૿͍͑ͯΔ߹ɺͨͩςετέʔε͕૿͚͑ͨͩͳͷͰتΜͰྑ͍ w ٯʹݸ͘Βؙ͍͕͋Δͱʮ͜Ε৺ͯ͠ϨϏϡʔ͠ͳ͍ͱʯͱ֮ޛΛܾΊͨΓ
GitHub integration w ͭͰࠩϑΝΠϧ͕͋ΕςετࣦഊͷՄೳੑ͕͋ΔͨΊɺ$PNNJU4UBUVTΛGBJMFE ͱ͍ͤͯ͞Δ w ϨϏϡΞ͕13Λঝೝ͢Δͱɺ$PNNJU4UBUVTΛ4VDDFFEFEʹมߋ w εφοϓγϣοτςετͰ͋Γɺʮҙਤతͳࠩʯ͔Ͳ͏͔ϨϏϡʔ͕ඞཁ w (JU)VC13ʹࠩ༗ແΛ௨͢Δ͜ͱͰɺ։ൃϑϩʔʹࣗવͳܗͰεφοϓγϣοτϨ ϏϡʔΛࠩ͠ࠐΊΔ
Review with images w SFHDMJͷϨϙʔτը໘ʹ13ίϝϯτ͔ΒભҠՄೳͱ͍͏͜ͱʮϨϏϡΞ͕μΠϨΫτ ʹը૾Λ֬ೝͰ͖Δʯͱ͍͏͜ͱ w ʮͲͷΑ͏ͳݟͨͷมߋͳͷ͔ʯ͕ՄࢹԽ͞ΕΔͨΊɺϨϏϡʔͷෛՙ͕ܰݮ͞ΕΔ w WJFXͷΈͷमਖ਼Ͱ͋ΕɺϩʔΧϧͰىಈ֬ೝ͢Δ·Ͱແ͘ͳΔɻͳΜͳΒ௨ۈதʹ ిंͰϨϏϡʔྃ͢Δ͜ͱ͢Β͋Δ
Maintainers w SFHWJ[ͷϝϯόʔͱओͳ୲ൣғ w !2VSBNZSFHTVJU
4UPSZDBQWͳͲ w !CPLVXFCSFHDMJͷॳ൛
SFHTVJUͷFYQFDUFEDPNNJUݕग़෦ͳͲ w !XBEBDLFM4UPSZDBQͷॳ൛
SFHDMJͷϨϙʔτ6*
SFHWJ[શମͷσβΠϯͳͲ w 13ͳͲ͍ͭͰΣϧΧϜͰ͢ʂ
Other tools w IUUQTHJUIVCDPNSFHWJ[OPEFYDC w $ISPNFΛIFBEMFTTͰಈ࡞ͤ͞ΔͨΊʹඞཁͳMJCYDCͳͲΛࣄલʹম͖͚ͨ %PDLFSpMFɻ$*ͷCBTFΠϝʔδʹ͢Δͱศར w IUUQTHJUIVCDPNSFHWJ[JNHEJ⒎KT w /PEFKT͚ͩͰ݁ͯ͠ը૾ͷEJ⒎ੜ͕ߦ͑ΔϥΠϒϥϦɻSFHDJM͕ଆͰ͜ΕΛୟ ͍͍ͯΔ w ࠷ॳظɺSFHDMJ͕JNBHFNBHJDLͷDPNQBSFίϚϯυʹґଘ͓ͯ͠Γɺ͜ΕΛണ͕͢ ͨΊʹ࣮
Other tools w IUUQTHJUIVCDPNSFHWJ[YJNHEJ⒎KT w ࠩϨϙʔτͰ༻͍͍ͯΔࠩՕॴͷϚʔΩϯά༻ͷϥΠϒϥϦɻ0QFO$7ͷہॴಛ ྔͰը૾෦ͷύʔπͷҐஔมಈΛநग़͍ͯ͠Δ w KTͱॻ͍͍ͯΔ͚Ͳɺ࣮ࡍ0QFO$7$ΛFNTDSJQUFOͰXBTNԽͨ͠ w ਪఆ͕͘ɺΘ͚Θ͔ΒΜදࣔʹͳΔ͜ͱ݁ߏଟ͍
Tuning: Storycap w
ຕͷੈքͰʮը૾ͷൺֱʯΑΓʮը૾ͷੜʯ͕ࢧత w 1VQQFUFFSͷϓϩηεΛฒྻՔಇͤͯ͞$16Λ༡ͤͳ͍ w খωλ 1VQQFUFFSͰ1BHFΛෳ࡞ͬͯ5$1ίωΫγϣϯ੍ݶͷ߹্ɺMPBE BWFSBHF͕Ք͛ͳ͍ɻ#SPXTFSຖฒྻԽ͢Δํ͕݁Ռͱͯ͠ޮత w 4UPSZͷΓସ͑JGSBNFʹQPTUNFTTBHF͢Δ w 4UPSZCPPLͷXFCQBDLʹCVOEMF͞Εͨ+BWB4DSJQUͷධՁ͕Ұ͚ͩʹͳΔ
Your responsibilities w 4UPSZDBQ
SFHDMJSFHTVJUΛಋೖ͢Εɺ735Λ࣮ݱ͢Δ͜ͱͰ͖Δ w ʢ735ʹݶͬͨͰແ͍͚ΕͲʣπʔϧΛಋೖ͓ͯ͠ऴ͍ɺͱ͍͏༁͡Όͳ͍ w Ή͠ΖΑ͏͘ελʔτʹཱ͚ͬͨͩ ʮͪΌΜͱςετΛճ͍ͯ͘͠ʯͷ։ൃνʔϜͷ
Scaffolding w εφοϓγϣοτςετͰ͋ͬͯɺςετίʔυΛॻ͔ͶԿ࢝·Βͳ͍ w ίϯϙʔωϯτ࡞࣌ʹରͱͳΔςετίʔυʢ4UPSZCPPLʣͷܗੜ͢ΔΑ͏ʹ ڥΛ͓͑ͯ͘ͱΑ͍ w TDB⒎PMEJOHʹ͑Δ/1.QBDLBHFT w !BOHVMBSEFWLJUTDIFNBUJDTIUUQTHJUIVCDPNBOHVMBSBOHVMBSDMJCMPC NBTUFSQBDLBHFTBOHVMBS@EFWLJUTDIFNBUJDT w TDB⒎EPHIUUQTHJUIVCDPNDBUTPTTTDB⒎EPH
Separate presentation w WJFXͷঢ়ଶςετίʔυ͔Β੍ޚͰ͖ΔΑ͏ʹ͓ͯ͘͠͠ w MPDBMTUBUFʢ3FBDUͰ͍͏ͱ͜ΖͷVTF4UBUFʣʹཔΓ͗͢ͳ͍ɻଞͷ6*ϑϨʔϜϫʔ ΫͰ$PNQPOFOUQSJWBUFͳϑΟʔϧυΛ͑Δ͕ɺ͜ΕΒͷѻ͍৻ॏʹ w ίϯϙʔωϯτͷݟͨQSPQTͰมߋͰ͖ΔΑ͏ʹ͓ͯ͘͠ w TUBUF3FEVYʢPS/H3Y
7VFYʣͷTUPSFʹΓग़ͯ͠ɺςετ࣌ϞοΫΛ%*Ͱ͖ ΔΑ͏ʹ͓ͯ͘͠ w 4UPSZCPPLͰ͋Εɺ%FDPSBUPSΛ༻ҙͯ͠1SPWJEFSΛט·͓ͤͯ͘ɺͳͲ
Keep your view testable w ςελϏϦςΟͷҡ͕࣋։ൃऀͷͰ͋Δͷ735Ұॹ w ʮݱࡏ࣌ࠁ͕ؔΘΔϢχοτςετ͔Βɺςετ༰қੑઃܭΛֶͿʯ IUUQTUXBEBIBUFOBCMPHKQFOUSZEFTJHOGPSUFTUBCJMJUZ w ίϯϙʔωϯτͷςετʹ͖ͪΜͱ͖߹͏͜ͱɺΞϓϦέʔγϣϯͷઃܭʹͪΌ Μͱ͖߹͏ͷͱಉٛ
Summary w 735ͪΌΜͱճ͢ͱελΠϧ·ͰݕূͰ͖Δ w 4UPSZCPPL͔ͭͬͯΔͷͰ͋Εɺ4UPSZDBQ͏ͱ͍͍ͱࢥ͏ w SFHTVJU SFHDMJ ը૾ͷൺֱʹಛԽͨ͠πʔϧ w 7JFXͷςετΛ͍͢͠Α͏ʹྗଵΒͣʹʂ w ςετʹ͖߹͏͜ͱઃܭ%9ͷ্ʹͭͳ͕Δ