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