「PayPayゲートウェイ」におけるStorybook活用事例 / Introducing Storybook: Enhancing Development in "PayPay Gateway"

PayPayゲートウェイチームはサーバーサイド主体の開発体制であり、フロントエンド技術や開発環境の整備が課題となっていました。
今回、Next.jsとStorybookを導入することで開発体験を大きく改善できた事例をもとに、本セッションではフロントエンドに不慣れなエンジニアでも使いやすいStorybookの魅力をご紹介します。

Transcript

1. *OUSPEVDJOH
   4UPSZCPPL
   &OIBODJOH
   %FWFMPQNFOU
   JO
   l1BZ1BZ
   (BUFXBZz -:
   $PSQPSBUJPO $PNNFSDF
   $PNQBOZ $PNNFSDF
   .BSLFUJOH
   4PMVUJPOT
   (SPVQ $PNNFSDF
   *OGSBTUSVDUVSF
   %JWJTJPO 5FSBPLB
   +VO
2. #JPHSBQIZ  +PJOFE
   :BIPP
   +BQBO
   $PSQPSBUJPO
   BT
   B
   OFX
   HSBEVBUF
   JO
     *OWPMWFE
   JO
   UIF
   EFWFMPQNFOU
   PG
   1BZ1BZ(8
   TJODF
   KPJOJOH
   UIF
   DPNQBOZ *OUFSFTUT 
   8FC
   'SPOUFOE
   (FOFSBUJWF
   "* $VSSFOU
   1BTTJPO 
   7JCF
   $PEJOH
   XJUI
   $MBVEF
   $PEF 4FMG*OUSPEVDUJPO 5FSBPLB
   +VO
   
   ࣉԬ
   ७
   KUFSBPLB
3. 4FTTJPO
   0WFSWJFX ⎯ *OUSPEVDUJPO
   UP
   4UPSZCPPL
   B
   MFBEJOH
   PQFO TPVSDF
   UPPM
   GPS
   GSPOUFOE
   EFWFMPQNFOU ⎯ 0WFSWJFX
   PG
   QSBDUJDBM
   VTF
   DBTFT
   BOE
   CFOFpUT 4FTTJPO
   0WFSWJFX "HFOEB ⎯ 8IBU
   JT
   1BZ1BZ
   (BUFXBZ ⎯ 8IBU
   JT
   4UPSZCPPL ⎯ ,FZ
   #FOFGJUT ⎯ $PNNPO
   $PODFSO
4. 5BSHFU
   "VEJFODF 8IP
   JT
   UIJT
   UBML
   GPS ⎯ "OZPOF
   XIP
   XBOUT
   UP
   MFBSO
   XIBU
   4UPSZCPPL
   JT ⎯ 5IPTF
   JOUFSFTUFE
   JO
   SFBMXPSME
   FYBNQMFT
   PG
   4UPSZCPPL
   VTBHF ⎯ 1FPQMF
   OFX
   UP
   GSPOUFOE
   EFWFMPQNFOU
   PS
   DPOTJEFSJOH
   BEPQUJOH
   4UPSZCPPL
5. PayPay Extarnal LY Corporation ZOZOTOWN IKYU ・・・ Yahoo! JAPAN Shopping Yahoo! JAPAN Auction PayPay Gateway ・・・ 8IBU
   JT
   1BZ1BZ
   (BUFXBZ B
   TZTUFN
   UIBU
   GBDJMJUBUFT
   UIF
   VTF
   PG
   1BZ1BZ
   GSPN
   CPUI
   JOUFSOBM
   -:
   TFSWJDFT
   BOE
   DFSUBJO
   FYUFSOBM
   TFSWJDFT
6. 8IBU
   JT
   1BZ1BZ
   (BUFXBZ $IBMMFOHFT
   JO
   'SPOUFOE
   %FWFMPQNFOU  /P
   UFBN
   NFNCFST
   XJUI
   TUSPOH
   GSPOUFOE
   FYQFSUJTF  1PPS
   GSPOUFOE
   EFWFMPQNFOU
   FYQFSJFODF  *OTVGGJDJFOU
   BVUPNBUFE
   UFTUJOH 0VS
   UFBN
   NBJOMZ
   GPDVTFT
   PO
   TFSWFSTJEF
   EFWFMPQNFOU
   CVU
   XF
   BMTP
   EP
   TPNF
   XFC
   GSPOUFOE
   EFWFMPQNFOU Point Center Decided to try Storybook
7. 8IBU
   BSF
   6*
   $PNQPOFOUT %JTQMBZ 1SPQT 3FVTBCMF
   6*
   FMFNFOUT  'VODUJPO
   JOEFQFOEFOUMZ  1SPWJEF
   DPOTJTUFOU
   EFTJHO  )BWF
   NVMUJQMF
   TUBUFT  OPSNBMIPWFSEJTBCMFE  6*
   $PNQPOFOU
   &YBNQMFT  CVUUPOT
   GPSNT
   DBSET
   NFOVT Defined as PointCard component for isolated testing Defined as MenuItem component for reusability
8. 8IBU
   JT
   4UPSZCPPL 'SPOUFOE
   PQFOTPVSDF
   UPPM
   GPS
   DSFBUJOH
   B
   DBUBMPH
   PG
   6*
   DPNQPOFOUT Storybook Web UI %JTQMBZ 1SPQT 4UPSJFT 4UBUFT $PNQPOFOUT
9. 4FUVQ
   4UPSZCPPL +VTU
   B
   DSFBUF
   pMF
   GPS
   FBDI
   DPNQPOFOU BOE
   EFpOF
   l4UPSJFTz
10. %FGJOF
    z4UPSJFTz "
    4UPSZ
    JT
    B
    TJOHMF
    FYBNQMF
    PS
    TUBUF
    PG
    B
    6*
    DPNQPOFOU #VUUPOTUPSJFTUTY 1SPQT 4UPSJF T
11. ,FZ
    #FOFGJUT 5ISFF
    ,FZ
    #FOFGJUT
    PG
    *OUSPEVDJOH
    4UPSZCPPL %FWFMPQFS
    &YQFSJFODF %PDVNFOUBUJP O 5FTUJOH
12. ,FZ
    #FOFGJUT %FWFMPQFS
    &YQFSJFODF %FWFMPQFS
    &YQFSJFODF %PDVNFOUBUJP O 5FTUJOH
13. %FWFMPQFS
    &YQFSJFODF XJUIPVU
    4UPSZCPPL 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…
14. %FWFMPQFS
    &YQFSJFODF #FOFpUT
    GPS
    %FWFMPQFST  &BTJMZ
    TXJUDI
    BOE
    DIFDL
    WBSJPVT
    TUBUFT
    PO
    UIF
    XFC
    6*  8IBU
    IBQQFOT
    PO
    DMJDL  %JTQMBZ
    XIFO
    QPJOUT
    
    
    PS
    MBSHF
    OVNCFST  %JTQMBZ
    XIFO
    1BZ1BZ
    BDDPVOU
    JT
    VOMJOLFE XJUI
    4UPSZCPPL
15. ⎯ 4UPSZCPPL
    DBO
    CF
    EFQMPZFE
    BOE
    TIBSFE
    XJUI
    PUIFST ⎯ *O
    PVS
    UFBN
    4UPSZCPPL
    JT
    BVUPNBUJDBMMZ
    EFQMPZFE
    CZ
    4DSFXESJWFS
    XIFO
    B
    QVMM
    SFRVFTU
    JT
    DSFBUFE %FWFMPQFS
    &YQFSJFODF #FOFpUT
    GPS
    SFWJFXFST GPS
    3FWJFXFS
16. ,FZ
    #FOFGJUT %PDVNFOUBUJPO %FWFMPQFS
    &YQFSJFODF %PDVNFOUBUJP O 5FTUJOH
17. %PDVNFOUBUJPO  +VTU
    BEE
    POF
    MJOF
    UP
    FOBCMF
    BVUPEPDT
     %PDVNFOUBUJPO
    JT
    BVUPNBUJDBMMZ
    HFOFSBUFE
    GSPN
    DPEF  "MXBZT
    TIBSF
    VQUPEBUF
    TQFDJpDBUJPOT
    XJUI
    ZPVS
    UFBN
18. ,FZ
    #FOFGJUT 5FTUJOH %FWFMPQFS
    &YQFSJFODF %PDVNFOUBUJP O 5FTUJOH
19. FYQFDUFE BDUVBM 5FTUJOH
    
    4OBQTIPU
    5FTU
20. ⎯ 5IFSF
    BSF
    BMSFBEZ
    NBOZ
    DPNQPOFOUT
    NBLJOH
    UIF
    DPTU
    PG
    DSFBUJOH
    4UPSJFT ⎯ *U
    UBLFT
    UJNF
    UP
    VOEFSTUBOE
    UIF
    DPODFQUT
    PG
    B
    OFX
    UPPM $PNNPO
    $PODFSOT
     2
    
    *TOU
    JU
    EJGGJDVMU
    UP
    JNQMFNFOU
    JO
    FYJTUJOH
    QSPKFDUT
    BOE
    MFBSO *NQMFNFOUBUJPO
    BOE
    -FBSOJOH
    &GGPSU ⎯ 4UBSU
    CZ
    USZJOH
    POMZ
    DPSF
    GFBUVSFT
    PS
    DPSF
    DPNQPOFOUT ⎯ 4UPSZ
    GJMFT
    DBO
    CF
    BVUPHFOFSBUFE
    VTJOH
    HFOFSBUJWF
    "* "
    
    *
    SFDPNNFOE
    TUBSUJOH
    HSBEVBMMZ
21. ⎯ 4UPSJFT
    OFFE
    UP
    CF
    VQEBUFE
    XIFOFWFS
    DPNQPOFOUT
    DIBOHF ⎯ -POHUFSN
    PQFSBUJPOBM
    DPTUT
    JODSFBTF $PNNPO
    $PODFSOT
     2
    
    8POU
    POHPJOH
    NBJOUFOBODF
    CFDPNF
    B
    CVSEFO 0OHPJOH
    .BJOUFOBODF ⎯ .PTU
    VQEBUFT
    BSF
    NFDIBOJDBM
    BOE
    OPU
    DPNQMFY ⎯ 5IF
    NPSF
    DPNQMFY
    B
    DPNQPOFOU
    CFDPNFT
    UIF
    NPSF
    WBMVBCMF
    EPDVNFOUBUJPO
    BOE
    BVUPNBUFE
    UFTUJOH
    UISPVHI
    4UPSZCPPL
    CFDPNF "
    
    5IF
    CFOFGJUT
    PVUXFJHI
    UIF
    DPTUT
22. $PODMVTJPO ⎯ 'SPOUFOE
    PQFOTPVSDF
    UPPM
    GPS
    DSFBUJOH
    B
    DBUBMPH
    PG
    6*
    DPNQPOFOUT 8IBU
    JT
    4UPSZCPPL ⎯ +VTU
    B
    DSFBUF
    GJMF
    GPS
    FBDI
    DPNQPOFOU
    BOE
    EFGJOF
    l4UPSJFTz 4FUVQ
    4UPSZCPPL ⎯ %FWFMPQFS
    &YQFSJFODF
    GPS
    CPUI
    EFWFMPQFST
    BOE
    SFWJFXFST ⎯ %PDVNFOUBUJPO
    FBTZ
    UP
    DSFBUF
    BOE
    NBJOUBJO ⎯ 5FTUJOH
    XJUIPVU
    BEEJUJPOBM
    EFWFMPQNFOU ,FZ
    #FOFGJUT ⎯ 4NBMM
    BEEJUJPOBM
    FGGPSU
    TJHOJpDBOU
    CFOFpUT ⎯ "*BTTJTUFE
    4UPSZ
    HFOFSBUJPO
    MPXFST
    BEPQUJPO
    CBSSJFST 1FSTPOBM
    *NQSFTTJPO