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

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
February 26, 2019

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

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

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

February 26, 2019
Tweet

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