Slide 1

Slide 1 text

*OUSPEVDJOH4UPSZCPPL &OIBODJOH%FWFMPQNFOUJOl1BZ1BZ (BUFXBZz -:$PSQPSBUJPO $PNNFSDF$PNQBOZ $PNNFSDF.BSLFUJOH4PMVUJPOT (SPVQ $PNNFSDF*OGSBTUSVDUVSF%JWJTJPO 5FSBPLB+VO

Slide 2

Slide 2 text

#JPHSBQIZ  +PJOFE:BIPP+BQBO$PSQPSBUJPO BTBOFXHSBEVBUFJO  *OWPMWFEJOUIFEFWFMPQNFOUPG1BZ1BZ(8 TJODFKPJOJOHUIFDPNQBOZ *OUFSFTUT 8FC'SPOUFOE (FOFSBUJWF"* $VSSFOU1BTTJPO 7JCF$PEJOH XJUI$MBVEF$PEF 4FMG*OUSPEVDUJPO 5FSBPLB+VOࣉԬ७ KUFSBPLB

Slide 3

Slide 3 text

4FTTJPO0WFSWJFX ⎯ *OUSPEVDUJPOUP4UPSZCPPL BMFBEJOHPQFO TPVSDFUPPMGPSGSPOUFOEEFWFMPQNFOU ⎯ 0WFSWJFXPGQSBDUJDBMVTFDBTFTBOE CFOFpUT 4FTTJPO0WFSWJFX "HFOEB ⎯ 8IBUJT1BZ1BZ(BUFXBZ ⎯ 8IBUJT4UPSZCPPL ⎯ ,FZ#FOFGJUT ⎯ $PNNPO$PODFSO

Slide 4

Slide 4 text

5BSHFU"VEJFODF 8IPJTUIJTUBMLGPS ⎯ "OZPOFXIPXBOUTUPMFBSOXIBU4UPSZCPPL JT ⎯ 5IPTFJOUFSFTUFEJOSFBMXPSMEFYBNQMFTPG 4UPSZCPPLVTBHF ⎯ 1FPQMFOFXUPGSPOUFOEEFWFMPQNFOUPS DPOTJEFSJOHBEPQUJOH4UPSZCPPL

Slide 5

Slide 5 text

PayPay Extarnal LY Corporation ZOZOTOWN IKYU ・・・ Yahoo! JAPAN Shopping Yahoo! JAPAN Auction PayPay Gateway ・・・ 8IBUJT1BZ1BZ(BUFXBZ BTZTUFNUIBUGBDJMJUBUFTUIFVTFPG1BZ1BZGSPNCPUIJOUFSOBM-:TFSWJDFTBOEDFSUBJOFYUFSOBMTFSWJDFT

Slide 6

Slide 6 text

8IBUJT1BZ1BZ(BUFXBZ $IBMMFOHFTJO'SPOUFOE %FWFMPQNFOU  /PUFBNNFNCFSTXJUITUSPOH GSPOUFOEFYQFSUJTF  1PPSGSPOUFOEEFWFMPQNFOU FYQFSJFODF  *OTVGGJDJFOUBVUPNBUFEUFTUJOH 0VSUFBNNBJOMZGPDVTFTPOTFSWFSTJEFEFWFMPQNFOU CVUXFBMTPEPTPNFXFCGSPOUFOEEFWFMPQNFOU Point Center Decided to try Storybook

Slide 7

Slide 7 text

8IBUBSF6*$PNQPOFOUT %JTQMBZ 1SPQT 3FVTBCMF6*FMFNFOUT  'VODUJPOJOEFQFOEFOUMZ  1SPWJEFDPOTJTUFOUEFTJHO  )BWFNVMUJQMFTUBUFT  OPSNBMIPWFSEJTBCMFE  6*$PNQPOFOU&YBNQMFT  CVUUPOT GPSNT DBSET NFOVT Defined as PointCard component for isolated testing Defined as MenuItem component for reusability

Slide 8

Slide 8 text

8IBUJT4UPSZCPPL 'SPOUFOEPQFOTPVSDFUPPMGPSDSFBUJOHBDBUBMPHPG6*DPNQPOFOUT Storybook Web UI %JTQMBZ 1SPQT 4UPSJFT 4UBUFT $PNQPOFOUT

Slide 9

Slide 9 text

4FUVQ4UPSZCPPL +VTUBDSFBUFpMF GPSFBDI DPNQPOFOU BOEEFpOF l4UPSJFTz

Slide 10

Slide 10 text

%FGJOFz4UPSJFTz "4UPSZJTBTJOHMFFYBNQMFPSTUBUFPGB6*DPNQPOFOU #VUUPOTUPSJFTUTY 1SPQT 4UPSJF T

Slide 11

Slide 11 text

,FZ#FOFGJUT 5ISFF,FZ#FOFGJUTPG*OUSPEVDJOH4UPSZCPPL %FWFMPQFS &YQFSJFODF %PDVNFOUBUJP O 5FTUJOH

Slide 12

Slide 12 text

,FZ#FOFGJUT %FWFMPQFS&YQFSJFODF %FWFMPQFS &YQFSJFODF %PDVNFOUBUJP O 5FTUJOH

Slide 13

Slide 13 text

%FWFMPQFS&YQFSJFODF XJUIPVU4UPSZCPPL What is this component? Too many components... To test this component, 1. start the application, 2. log in, and link PayPay account, 3. grant some points…

Slide 14

Slide 14 text

%FWFMPQFS&YQFSJFODF #FOFpUTGPS%FWFMPQFST  &BTJMZTXJUDIBOEDIFDLWBSJPVT TUBUFTPOUIFXFC6*  8IBUIBQQFOTPODMJDL  %JTQMBZXIFOQPJOUTPSMBSHF OVNCFST  %JTQMBZXIFO1BZ1BZBDDPVOUJT VOMJOLFE XJUI4UPSZCPPL

Slide 15

Slide 15 text

⎯ 4UPSZCPPLDBOCFEFQMPZFEBOETIBSFEXJUIPUIFST ⎯ *OPVSUFBN 4UPSZCPPLJTBVUPNBUJDBMMZEFQMPZFECZ4DSFXESJWFSXIFOBQVMM SFRVFTUJTDSFBUFE %FWFMPQFS&YQFSJFODF #FOFpUTGPSSFWJFXFST GPS3FWJFXFS

Slide 16

Slide 16 text

,FZ#FOFGJUT %PDVNFOUBUJPO %FWFMPQFS &YQFSJFODF %PDVNFOUBUJP O 5FTUJOH

Slide 17

Slide 17 text

%PDVNFOUBUJPO  +VTUBEEPOFMJOFUPFOBCMF BVUPEPDT  %PDVNFOUBUJPOJTBVUPNBUJDBMMZ HFOFSBUFEGSPNDPEF  "MXBZTTIBSFVQUPEBUF TQFDJpDBUJPOTXJUIZPVSUFBN

Slide 18

Slide 18 text

,FZ#FOFGJUT 5FTUJOH %FWFMPQFS &YQFSJFODF %PDVNFOUBUJP O 5FTUJOH

Slide 19

Slide 19 text

FYQFDUFE BDUVBM 5FTUJOH4OBQTIPU5FTU

Slide 20

Slide 20 text

⎯ 5IFSFBSFBMSFBEZNBOZDPNQPOFOUT NBLJOHUIFDPTUPGDSFBUJOH4UPSJFT ⎯ *UUBLFTUJNFUPVOEFSTUBOEUIFDPODFQUTPGBOFXUPPM $PNNPO$PODFSOT  2*TOUJUEJGGJDVMUUPJNQMFNFOUJOFYJTUJOHQSPKFDUTBOEMFBSO *NQMFNFOUBUJPOBOE-FBSOJOH&GGPSU ⎯ 4UBSUCZUSZJOHPOMZDPSFGFBUVSFTPSDPSFDPNQPOFOUT ⎯ 4UPSZGJMFTDBOCFBVUPHFOFSBUFEVTJOHHFOFSBUJWF"* "*SFDPNNFOETUBSUJOHHSBEVBMMZ

Slide 21

Slide 21 text

⎯ 4UPSJFTOFFEUPCFVQEBUFEXIFOFWFSDPNQPOFOUTDIBOHF ⎯ -POHUFSNPQFSBUJPOBMDPTUTJODSFBTF $PNNPO$PODFSOT  28POUPOHPJOHNBJOUFOBODFCFDPNFBCVSEFO 0OHPJOH.BJOUFOBODF ⎯ .PTUVQEBUFTBSFNFDIBOJDBMBOEOPUDPNQMFY ⎯ 5IFNPSFDPNQMFYBDPNQPOFOUCFDPNFT UIFNPSFWBMVBCMFEPDVNFOUBUJPOBOE BVUPNBUFEUFTUJOHUISPVHI4UPSZCPPLCFDPNF "5IFCFOFGJUTPVUXFJHIUIFDPTUT

Slide 22

Slide 22 text

$PODMVTJPO ⎯ 'SPOUFOEPQFOTPVSDFUPPMGPSDSFBUJOHBDBUBMPHPG6*DPNQPOFOUT 8IBUJT4UPSZCPPL ⎯ +VTUBDSFBUFGJMFGPSFBDIDPNQPOFOUBOEEFGJOFl4UPSJFTz 4FUVQ4UPSZCPPL ⎯ %FWFMPQFS&YQFSJFODF GPSCPUIEFWFMPQFSTBOESFWJFXFST ⎯ %PDVNFOUBUJPO FBTZUPDSFBUFBOENBJOUBJO ⎯ 5FTUJOH XJUIPVUBEEJUJPOBMEFWFMPQNFOU ,FZ#FOFGJUT ⎯ 4NBMMBEEJUJPOBMFGGPSU TJHOJpDBOUCFOFpUT ⎯ "*BTTJTUFE4UPSZHFOFSBUJPOMPXFSTBEPQUJPOCBSSJFST 1FSTPOBM*NQSFTTJPO