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

by Takayuki

Slide 1

Slide 1 text

Nuxt.jsにGraphQLを導入しようか ݕ討している話鈴木孝之 2019/02/26

Slide 2

Slide 2 text

"HFOEB ࣗݾ঺հɾձࣾ঺հ ։ൃதͷαʔϏε (SBQI2-Λಋೖ͢ΔϝϦοτ

Slide 3

Slide 3 text

ࣗݾ঺հɾձࣾ঺հ

Slide 4

Slide 4 text

1.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js

Slide 5

Slide 5 text

1.ࣗݾ঺հ

Slide 6

Slide 6 text

Slide 7

Slide 7 text

։ൃதͷαʔϏε

Slide 8

Slide 8 text

։ൃதͷࣗࣾαʔϏε ɾαʔόαΠυ 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͸৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍ ٕज़ཁ݅ ։ൃମ੍

Slide 9

Slide 9 text

ϑϩϯτΤϯυ αʔόαΠυ αʔόߏ੒ DBΞΫηε ϑΝΠϧΞοϓϩʔυ Ajax௨৴

Slide 10

Slide 10 text

ݱࡏͷAPIͷΤϯυϙΠϯτ਺ ໿ ̏̓

Slide 11

Slide 11 text

(SBQI2-Λಋೖ͢ΔϝϦοτ

Slide 12

Slide 12 text

GraphQLͱ͸ʁ GraphQL͸FacebookʹΑΓ։ൃ͞ΕͨΦʔϓϯιʔεͷݴޠͰ ͢ɻAPI࡞੒ͷ࢓૊Έͱͯ͠RESTͷ୅ΘΓʹ࢖͑·͢ɻREST ͸APIͷઃܭͱ࣮૷ʹ࢖͏֓೦্ͷઃܭϞσϧͰ͕͢ɺ GraphQL͸ඪ४Խ͞Εͨݴޠɺܕ෇͚ɺ࢓༷Λ࣋ͪΫϥΠΞϯ τͱαʔόʔؒΛڧྗʹ݁ͼ͚ͭ·͢ɻҟͳΔσόΠεؒͷ௨ ৴ʹඪ४Խ͞Εͨݴޠ͕͋Δ͜ͱͰɺେܕ͔ͭΫϩεϓϥοτ ϑΥʔϜͷΞϓϦ։ൃ͕ΑΓγϯϓϧʹͳΓ·͢ɻ https://qiita.com/syu_chan_1005/items/3350f1d12c17a77e98c7

Slide 13

Slide 13 text

ᶃେྔͰ൥ࡶʹͳΓ͕ͪͳWeb APIͷΤϯυϙΠ ϯτΛ؆ܿʹ੔ཧ͢Δ͜ͱ͕Ͱ͖Δ ᶄGraph docͰAPIυΩϡϝϯτΛҰݩ؅ཧͰ͖Δ GraphQLͷϝϦοτ

Slide 14

Slide 14 text

ϑϩϯτΤϯυ ௨ৗͷREST APIͱͷҧ͍ ~ैདྷͷREST API~ αʔόαΠυ /login ͳͲͳͲ ͳͲͳͲ /users /posts

Slide 15

Slide 15 text

ϑϩϯτΤϯυ ௨ৗͷREST APIͱͷҧ͍ ~GraphQLΛ࢖ͬͨ৔߹~ αʔόαΠυ ͳͲͳͲ ͳͲͳͲ /graphql

Slide 16

Slide 16 text

GraphQLΛ࢖͏͜ͱͰେྔͰ൥ࡶʹͳΓ ͕ͪͳWeb APIͷΤϯυϙΠϯτΛ؆ܿ ʹ੔ཧ͢Δ͜ͱ͕Ͱ͖Δʂʂ

Slide 17

Slide 17 text

௨ৗͷREST APIͱͷҧ͍ ~GraphQLΛ࢖ͬͨ৔߹~ https://labs.getninjas.com.br/sharing-data-in-a-microservices-architecture-using- graphql-97db59357602

Slide 18

Slide 18 text

Apollo Clientͱ͸ https://qiita.com/seya/items/26c8a0dc549a10efcdf8 Apollo Clientͱ͸GraphQL APIΛγϯϓϧʹΫϥΠΞϯτଆͰૢ࡞͢Δͨ ΊͷϥΠϒϥϦͰ͢ɻ ·ͣ͸Linkͱ͍͏΋ͷΛ༻͍ͯར༻͢ΔGraphQLΤϯυϙΠϯτΛઃఆ ͠·͢ɻ

Slide 19

Slide 19 text

Apollo Clientͱ͸ https://qiita.com/seya/items/26c8a0dc549a10efcdf8

Slide 20

Slide 20 text

Apollo Client https://github.com/takanorip/nuxt-graphql-sample σΟϨΫτϦߏ੒

Slide 21

Slide 21 text

Apollo Client https://github.com/takanorip/nuxt-graphql-sample ΤϯυϙΠϯτ΍ ϔομʔͷઃఆ default.js

Slide 22

Slide 22 text

Apollo Client https://github.com/takanorip/nuxt-graphql-sample ελʔΛ͚ͭΔgqlϑΝΠϧ addStar.gql

Slide 23

Slide 23 text

Apollo Client https://github.com/takanorip/nuxt-graphql-sample githubͷϦϙδτϦ৘ใΛ औಘ͢ΔgqlϑΝΠϧ getRepos.gql

Slide 24

Slide 24 text

Graph docͰAPIυΩϡϝϯτΛҰݩ؅ཧͰ͖Δ https://github.com/2fd/graphdoc

Slide 25

Slide 25 text

Graph docͰAPIυΩϡϝϯτΛҰݩ؅ཧͰ͖Δ https://2fd.github.io/graphdoc/star-wars/

Slide 26

Slide 26 text

·ͱΊ

Slide 27

Slide 27 text

ɾݱঢ়ͷWebΞϓϦ͸·ͩβ൛Λ࡞੒͍ͯ͠ΔͷͰɺεϐʔ υॏࢹͰߟ͑Δͱ·ͩಋೖ͠ͳͯ͘ྑ͍͔΋ɻ ɾͦΕͳΓʹֶशίετ͔͔Γͦ͏ɻ ɾΤϯυϙΠϯτ͕΋ͬͱɺ૿͔͑ͯΒ࢖͏ܗͰ͍͍͔΋ɻ ಋೖΛߟ͑ͨ݁Ռ

Slide 28

Slide 28 text

ࢀߟ 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