Create Payment App using Vue.js + Go + PAY.JP + gRPC

GitHub: https://github.com/po3rin/vue-golang-payment-app
Qiita: https://qiita.com/po3rin/items/9638eab0a6a70faca86e

Transcript

1. $SFBUF1BZNFOU"QQ
   VTJOH7VFKT(P1":+1H31$
   (P6OLP-5
   

   View Slide

2. !QPSJO
   'SPOUFOE%FWFMPQNFOU%BUBTJFODF
   +BWB4DSJQU1ZUIPO(PMBOH
   QBHF
   (P6OLP-5
   

   View Slide

3. QBHF
   *OUSPEVDUJPO
   \
   

   View Slide

4. *OUSPEVDUJPO
   ʴઈࢍษڧதͷ(PݴޠͰ࣮૷͍ͨ͠
   QBHF
   ʴΫϨδοτΧʔυܾࡁ͸࣮૷ͷ΍Γқ͞Λ༏ઌ
   8BOUUP
   
   ࣗӦۀͷ਌ͷͨΊʹ8αΠτ
   ʹΫϨδοτܾࡁΛ࣮૷͢Δʹ
   ͋ͨΓɺ(PݴޠͰ1":+1Λ࢖
   ༻ͯ͠Έͨ
   (P6OLP-5
   

   View Slide

5. QBHF
   4LJMMTUBDL
   
   ϑϩϯτΤϯυ͸࢖͍׳Εͨ
   7VFKT Λ࠾༻ɻΫϨδοτΧʔ
   υܾࡁ͸ 1":+1 Λ࠾༻ɻ೔ຊ
   ͷاۀ͕։ൃ͚ͨͩ͋ͬͯ͠೔
   ຊޠυΩϡϝϯτ͕๛෋ɻ
   *OUSPEVDUJPO
   (P6OLP-5
   

   View Slide

6. %FWFMPQNFOU
   QBHF
   "SDIJUFDUVSF
   
   ϑϩϯτଆͰ1":+1ͱ௚઀΍Γ
   औΓͯ͠ɺܾࡁʹ࢖͑Δ UPLFO
   Λड͚औΓ·͢ɻͦͷUPLFOΛ
   ܾࡁػೳͷ͋ΔϚΠΫϩαʔϏ
   εʹ౉͠·͢ɻܾࡁαʔϏε͕
   ࣮ࡍͷܾࡁΛ 1":+1 ͱ΍Γͱ
   Γ͠·͢ɻ
   ᶃ$BSE৘ใ
   ᶄUPLFO
   "1*αʔόʔ
   ܾࡁαʔϏε ϑϩϯτΤϯυ
   ᶅUPLFO
   ᶆ঎඼৘ใUPLFO
   ᶇ঎඼৘ใUPLFO
   (P6OLP-5
   

   View Slide

7. QBHF
   (Pº1":+1
   \
   

   View Slide

8. (Pº1":+1
   QBHF
   QBZKQHP
   
   HJUIVCDPNQBZKQQBZKQHPW͸
   1":+1ͱͷ΍ΓͱΓΛந৅Խͯ͘͠Ε
   Δ(P੡ύοέʔδ
   ʴਖ਼௚υΩϡϝϯτ͸গͳ͍͕ίʔυͷίϝϯτ͕ৄ͍͠
   ʴ͔ͯͦ΋ͦ΋(P͕ಡΈ΍͍͢
   ʴগ͠ਪ঑ػೳ͕࢒͍ͬͯΔ͕1":+1ͷ"1*Λ͔͍ͬ͠ந৅Խ͍ͯ͠Δ
   (P6OLP-5
   

   View Slide

9. (Pº1":+1
   QBHF
   XBSOJOH
   
   ஫ҙ఺͸ΫϨδοτΧʔυ৘ใΛαʔ
   όʔΛ௨͢ߏ੒ ௨աܕ
   ͸ඇਪ঑Ͱ͋
   Γɺ݄ʹ1":+1ͷ"1*͕͏͚͚ͭͳ͘
   ͳΔQBZKQHP͸͜ͷॲཧ͕·ͩ࢒ͬͯ
   ͍ΔͷͰ࣮૷࣌͸஫ҙɻϑϩϯτͰΧʔ
   υ৘ใΛτʔΫϯԽͯͦ͠ΕΛαʔόʔ
   ʹ௨͢ܗ͕ਪ঑͞ΕͯΔ
   º
   ̋
   5PLFO
   (P6OLP-5
   

   View Slide

10. DIBSHF
    QBZKQύοέʔδΛൿີ伴Ͱॳ
    ظԽ͠ɺ$IBSHFϝιουͰ࣮
    ࡍͷࢧ෷͍Λߦ͏ɻ͜Ε͚ͩͰ
    ऴΘΓɻ؆୯ʂʂ
    QBHF
    

    View Slide

11. QBHF
    $SFBUF1BZNFOUTFSWJDFVTJOHH31$
    \
    

    View Slide

12. H31$
    QBHF
    8IBUH31$
    
    )551Λඪ४Ͱαϙʔτͨ͠31$ϑ
    ϨʔϜϫʔΫɻ1SPUPDPM#V⒎FSΛH31$
    ༻ʹॻ্͍ͨͰɺαϙʔτ͍ͯ͠Δݴ
    ޠ (P 1ZUIPO 3VCZ ౳
    ʹίʔυॻ͖
    ग़͠Λߦ͏ͱɺҟͳΔݴޠؒͰ΋ܕอ
    ূ͞Εͨ௨৴Λߦ͏͜ͱ͕Ͱ͖·͢ɻ
    QSPUPDίϚϯυ JNQPSU
    QSPUPDPMCV⒎FS HPMBJOHpMF HPMBOHpMF
    QSPUP ϑΝΠϧΛ࡞੒
    ͠ɺ(PݴޠͷίʔυΛ
    ࣗಈੜ੒ɻܕอূ΋͞
    Ε͍ͯΔɻ΋ͪΖΜ(P
    ݴޠҎ֎ͷॻ͖ग़͠΋
    Մೳ
    ॻ͖ग़͞Εͨ(Pݴޠͷ
    JOUFSGBDF΍TUSVDUΛ
    JNQPSU͠ɺ։ൃऀ͸͜
    ͷܕΛຬͨ͢Α͏ʹ࣮
    ૷͍͚ͯͩ͘͠
    (P6OLP-5
    

    View Slide

13. QBHF
    $SFBUF'SPOUFOE41"
    \
    

    View Slide

14. $SFBUF'SPOUFOE41"
    QBHF
    $IFDLPVU
    
    DIFDLPVU ͸ σβΠϯ͞Εܾͨࡁ
    ϑΥʔϜɺΧʔυ৘ใͷόϦσʔγϣ
    ϯɺΧʔυ৘ใͷτʔΫϯԽΛߦ͏
    ϑΥʔϜΛੜ੒͢ΔϥΠϒϥϦɻ
    WVFQBZKQDIFDLPVU ͸ 7VFKT Ͱ
    DIFDLPVUΛ࢖͑ΔΑ͏ʹͨ͠΋ͷ
    UPLFO
    UPLFO
    $BSE৘ใ
    (P6OLP-5
    

    View Slide

15. QBZKQDIFDLPVU
    ϞδϡʔϧಡΈࠐΜͰίϯϙʔω
    ϯτஔ͍ͨΒऴΘΓɺ͜ΕͰΧʔ
    υ৘ใΛUPLFOԽ͢ΔϘλϯ͕Ͱ
    ͖Δɻॲཧ͕͓ΘͬͨΒݺ͹ΕΔ
    ϝιου΋ࢦఆͰ͖Δ
    QBHF
    

    View Slide

16. QBHF
    $PODMVTJPO
    \
    

    View Slide

17. $PODMVTJPO
    QBHF
    FBTZUPEFWFMPQQBZNFOUTFSWJDF
    
    (P6OLP-5
    1":+1Ͱ଎߈Χʔυܾࡁ͕Ͱ͖ͨʂH31$ͰϚΠΫϩ
    αʔϏεԽ͢Δͷ΋(Pͱ૬ੑ͕͍͍ͱײͨ͡ɻUPLFO
    Խͨ͠ޙɺ֬ೝը໘ڬΉͷ͸ඞཁͩͱײͨ͡ͷͰͦ͜
    ͸ࠓޙɻ
    

    View Slide

18. 
    ϖʔδ͸΋͏ଘࡏ͠·ͤΜ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    (P6OLP-5
    

    View Slide