Vue.js + GraphQL + Ruby on Rails でつくる SPA / Build SPA with Vue.js + GraphQL + Ruby on Rails

Transcript

1. Vue.js + GraphQL + Ruby on Rails Ͱͭ͘Δ SPA Kosuke Abe/giftee*Inc. 2020/02/06
2. About Me Job
   Hobby
   IUUQTNBDIJEBOJBUPLZP ϚνμχΞͱ͍͏αʔΫϧͰจֶϑϦϚʹখઆΛग़లͯ͠·͢
   Official website Twitter LPVTVLFBCF GitHub HJGUFF
   3BJMT
   ΤϯδχΞ 4'શൠ খઆಡΜͩΓॻ͍ͨΓͱ͔ !NFNFUJDT
3. Intro-Don Generator ΞʔςΟετ໊Λೖྗ͢Δͱɺ
   ͦͷΞʔςΟετͷۂ౰ͯΫΠζΛੜ੒ͯ͘͠ΕΔ܅
   Πϯτϩυϯ͕Ͱ͖Δͱ͸ݴͬͯͳ͍ https://musiq-quiz-generator.herokuapp.com/
4. 
   ࿩͢͜ͱ
   ࿩͞ͳ͍͜ͱ ɾओʹ
   (SBQI2-
   ʹ͍ͭͯ ɾ࡞ͬͨΞϓϦͷࡉ͔͍͜ͱʹ͍ͭͯ ݸਓ։ൃOJHIUͱ͸ Intro-Don Generator ɾ7VF3BJMT
   ͰͲΜͳ࣮૷Λͯ͠Δ͔
5. System Overview 7VFKT "QPMMP
   DMJFOU
   BQPMMPDMJFOU
   
   WVFBQPMMP (SBQI2-
   HSBQIRMSVCZ 3VCZ
   PO
   3BJMT iTunes API IFSPLV 'JSFCBTF
   IPTUJOH Infrastructure API server Frontend
6. System Overview 7VFKT "QPMMP
   DMJFOU
   WVFBQPMMP (SBQI2-
   HSBQIRMSVCZ 3VCZ
   PO
   3BJMT iTunes API IFSPLV 'JSFCBTF
   IPTUJOH Infrastructure API server Frontend ίί
7. GraphQL? RESTful API URL ͱ HTTP method ͷ ૊Έ߹ΘͤͰϦιʔεΛදݱ ਆΤϯυϙΠϯτʢex: “POST /graphql”͚ͩ౳ʣ ͱ body ͷ εΩʔϚఆٛ GraphQL API (&5
   BQJWRVJ[[FTJE
   ΫΠζৄࡉऔಘ HSBQIRM 1045
   BQJWRVJ[[FT
   ΫΠζ৽ن࡞੒ HSBQIRM query { quiz { name } } mutation createQuiz($name: String!){ createQuiz(input: { name: $name }) { quiz { name } } } ɾ'BDFCPPL͕։ൃ͍ͯ͠Δ8FC
   "1*ͷͨΊͷن֨
   ɾ3&45
   ͱൺֱ͞ΕΔ͜ͱ͕ଟ͍͕ɺ3&45
   Λ୅ସ͢Δ΋ͷͰ͸ͳ͍Β͍͠ Example Example
8. GraphQL Query & Mutation औಘ GET Query ొ࿥ POST Mutation ߋ৽ PUT/PATCH Mutation ࡟আ DELETE Mutation ɾ(SBQI2-
   Λར༻͍ͨ͠৔߹ɺͱΓ͋͑ͣ
   2VFSZ
   ͱ
   .VUBUJPO
   ͚֮ͩ͑Ε͹
   0,
   σʔλऔಘܥͷΫΤϦ σʔλߋ৽ܥͷΫΤϦ 2VFSZ .VUBUJPO XFCTPDLFUΛ࢖ͬͨมߋ؂ࢹͷΫΤϦ 4VCTDSJQUJPO )551ϝιουͱͷରԠ
9. Query with graphql-ruby https://github.com/rmosolgo/graphql-ruby ΠϯτϩυϯΫΠζͷҰཡΛ
   औಘ͍ͨ͠ʂ
10. Query with vue-apollo https://github.com/vuejs/vue-apollo
11. Mutation with graphql-ruby ΠϯτϩυϯΫΠζΛ
    ৽ن࡞੒͍ͨ͠ʂ
12. Mutation with vue-apollo
13. GraphQL ͷ೰ΈͲ͜Ζ ɾ/
    
    
    ໰୊ ɾΤϥʔϋϯυϦϯά ෳ਺ͷσʔλΛҰͭͷΫΤϦͰҰൃͰऔΕΔ͕ɺ/
    
    ͕ൃੜ͠΍͍͢ ˠHSBQIRMCBUDI IUUQTHJUIVCDPN4IPQJGZHSBQIRMCBUDI
    Λར༻ Ϩεϙϯεͷ εςʔλείʔυΛ200Ͱ౷Ұ͠ɺϨεϙϯεͷ errors ΩʔʹΤϥʔৄࡉ͕ೖΔ ɾ΍ͬͺΓ৘ใগͳ͍ ެࣜυΩϡϝϯτࣗମ͸ॆ࣮͍ͯ͠Δ͕ɺ3VCZ
    ͷ৘ใͷଟ͞ʹ׳ΕͯΔͱͪΐͬͱେมʜ →࣮૷ํ਑Λ݁ߏߟ͑ͳ͍ͱ͍͚ͳ͍(ຊΞϓϦͰ͸ΤϥʔϋϯυϦϯάΛαϘΓ·ͨ͠)
14. ࠓޙͰ͖ͨΒ΍Γ͍ͨ͜ͱ ɾ3FMBZ
    $VSTPS
    $POOFDUJPOT
    Λར༻ͨ͠ແݶεΫϩʔϧ ɾ(SBQI2-
    TVCTDSJQUJPO
    Λར༻ͯ͠ϦΞϧλΠϜʹಉ࣌Πϯτϩυϯ
15. Vue.js + GraphQL + Ruby on Rails ͰΞϓϦ࡞ͬͨॴײ ɾػೳͷ։ൃʹೖΔ·ͰͷηοτΞοϓ͕݁ߏ໘౗ ɾϑϩϯτΤϯυΤϯδχΞͱαʔόʔαΠυΤϯδχΞͷ
    
    ڑ཭ײ͕ԕ͍ϓϩδΣΫτͷ΄͏͕(SBQI2-
    ͷ
    TDIFNB
    ͕׆͖͖ͯͦ͏
    ɾXFCQBDL
    ͷઃఆ
    ɾBTTFU
    QJQFMJOFXFCQBDLFS
    Λണ͕͢
    ɾ"QPMMP$MJFOU
    ΍
    (SBQI2-
    TFSWFS
    ͷ४උ
    ɾFUDʜ
16. Vue.js + GraphQL + Ruby on Rails ͷॴײ ػೳͷ։ൃʹೖΔ·ͰͷηοτΞοϓ͕݁ߏ໘౗ ϑϩϯτΤϯυΤϯδχΞͱαʔόʔαΠυΤϯδχΞͷ
    ڑ཭ײ͕ԕ͍ϓϩδΣΫτͷ΄͏͕(SBQI2-
    ͷ
    TDIFNB
    ͕׆͖͖ͯͦ͏
    ɾXFCQBDL
    ͷઃఆ
    ɾBTTFU
    QJQFMJOFXFCQBDLFS
    Λണ͕͢
    ɾ"QPMMP$MJFOU
    ΍
    (SBQI2-
    TFSWFS
    ͷ४උ
    ɾFUDʜ ָ͚͠Ε͹Α͠ (ݸਓ։ൃͳͷͰ)
17. Thank you!