Nuxt.jsにGraphQLを導入しようか検討している話

Nuxt.jsにGraphQLを導入しようか検討している話

Transcript

1. Nuxt.jsにGraphQLを導入しようか ݕ討している話 鈴木孝之 2019/02/26
2. "HFOEB ࣗݾ঺հɾձࣾ঺հ
   ։ൃதͷαʔϏε
   (SBQI2-Λಋೖ͢ΔϝϦοτ
3. ࣗݾ঺հɾձࣾ঺հ
4. 1.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js
5. 1.ࣗݾ঺հ
6. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
7. ։ൃதͷαʔϏε
8. ։ൃதͷࣗࣾαʔϏε ɾαʔόαΠυ PHP(Laravel5.5) ɾϑϩϯτΤϯυ JavaScript(jQuery,Vue.js,Nuxt.js) ɾΠϯϑϥ AWS(EC2,S3,RDS(mariadb)) ɾ։ൃ؀ڥ php7,nginx,mariadb,laradock(docker),webpack ɾͦͷଞ gitlab,gitlabCI(ࣗಈσϓϩΠͳͲ),Slack,phpStorm ɾSPAͷWebΞϓϦܦݧऀ Ұਓ ɾαʔόαΠυ͸ಘҙͳਓ͕ଟ͍ ɾVue.js͸৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍ ٕज़ཁ݅ ։ൃମ੍
9. ϑϩϯτΤϯυ αʔόαΠυ αʔόߏ੒ DBΞΫηε ϑΝΠϧΞοϓϩʔυ Ajax௨৴
10. ݱࡏͷAPIͷΤϯυϙΠϯτ਺ ໿ ̏̓
11. (SBQI2-Λಋೖ͢ΔϝϦοτ
12. GraphQLͱ͸ʁ GraphQL͸FacebookʹΑΓ։ൃ͞ΕͨΦʔϓϯιʔεͷݴޠͰ ͢ɻAPI࡞੒ͷ࢓૊Έͱͯ͠RESTͷ୅ΘΓʹ࢖͑·͢ɻREST ͸APIͷઃܭͱ࣮૷ʹ࢖͏֓೦্ͷઃܭϞσϧͰ͕͢ɺ GraphQL͸ඪ४Խ͞Εͨݴޠɺܕ෇͚ɺ࢓༷Λ࣋ͪΫϥΠΞϯ τͱαʔόʔؒΛڧྗʹ݁ͼ͚ͭ·͢ɻҟͳΔσόΠεؒͷ௨ ৴ʹඪ४Խ͞Εͨݴޠ͕͋Δ͜ͱͰɺେܕ͔ͭΫϩεϓϥοτ ϑΥʔϜͷΞϓϦ։ൃ͕ΑΓγϯϓϧʹͳΓ·͢ɻ https://qiita.com/syu_chan_1005/items/3350f1d12c17a77e98c7
13. ᶃେྔͰ൥ࡶʹͳΓ͕ͪͳWeb APIͷΤϯυϙΠ ϯτΛ؆ܿʹ੔ཧ͢Δ͜ͱ͕Ͱ͖Δ ᶄGraph docͰAPIυΩϡϝϯτΛҰݩ؅ཧͰ͖Δ GraphQLͷϝϦοτ
14. ϑϩϯτΤϯυ ௨ৗͷREST APIͱͷҧ͍ ~ैདྷͷREST API~ αʔόαΠυ /login ͳͲͳͲ ͳͲͳͲ /users /posts
15. ϑϩϯτΤϯυ ௨ৗͷREST APIͱͷҧ͍ ~GraphQLΛ࢖ͬͨ৔߹~ αʔόαΠυ ͳͲͳͲ ͳͲͳͲ /graphql
16. GraphQLΛ࢖͏͜ͱͰେྔͰ൥ࡶʹͳΓ ͕ͪͳWeb APIͷΤϯυϙΠϯτΛ؆ܿ ʹ੔ཧ͢Δ͜ͱ͕Ͱ͖Δʂʂ
17. ௨ৗͷREST APIͱͷҧ͍ ~GraphQLΛ࢖ͬͨ৔߹~ https://labs.getninjas.com.br/sharing-data-in-a-microservices-architecture-using- graphql-97db59357602
18. Apollo Clientͱ͸ https://qiita.com/seya/items/26c8a0dc549a10efcdf8 Apollo Clientͱ͸GraphQL APIΛγϯϓϧʹΫϥΠΞϯτଆͰૢ࡞͢Δͨ ΊͷϥΠϒϥϦͰ͢ɻ ·ͣ͸Linkͱ͍͏΋ͷΛ༻͍ͯར༻͢ΔGraphQLΤϯυϙΠϯτΛઃఆ ͠·͢ɻ
19. Apollo Clientͱ͸ https://qiita.com/seya/items/26c8a0dc549a10efcdf8
20. Apollo Client https://github.com/takanorip/nuxt-graphql-sample σΟϨΫτϦߏ੒
21. Apollo Client https://github.com/takanorip/nuxt-graphql-sample ΤϯυϙΠϯτ΍ ϔομʔͷઃఆ default.js
22. Apollo Client https://github.com/takanorip/nuxt-graphql-sample ελʔΛ͚ͭΔgqlϑΝΠϧ addStar.gql
23. Apollo Client https://github.com/takanorip/nuxt-graphql-sample githubͷϦϙδτϦ৘ใΛ औಘ͢ΔgqlϑΝΠϧ getRepos.gql
24. Graph docͰAPIυΩϡϝϯτΛҰݩ؅ཧͰ͖Δ https://github.com/2fd/graphdoc
25. Graph docͰAPIυΩϡϝϯτΛҰݩ؅ཧͰ͖Δ https://2fd.github.io/graphdoc/star-wars/
26. ·ͱΊ
    
27. ɾݱঢ়ͷWebΞϓϦ͸·ͩβ൛Λ࡞੒͍ͯ͠ΔͷͰɺεϐʔ υॏࢹͰߟ͑Δͱ·ͩಋೖ͠ͳͯ͘ྑ͍͔΋ɻ ɾͦΕͳΓʹֶशίετ͔͔Γͦ͏ɻ ɾΤϯυϙΠϯτ͕΋ͬͱɺ૿͔͑ͯΒ࢖͏ܗͰ͍͍͔΋ɻ ಋೖΛߟ͑ͨ݁Ռ
28. ࢀߟ https://2fd.github.io/graphdoc/star-wars/ https://github.com/takanorip/nuxt-graphql-sample https://qiita.com/seya/items/26c8a0dc549a10efcdf8 https://qiita.com/syu_chan_1005/items/3350f1d12c17a77e98c7 https://www.webprofessional.jp/rest-2-0-graphql/ https://booth.pm/ja/items/1045830