Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsにGraphQLを導入しようか検討している話
Search
Takayuki
February 26, 2019
Technology
2
950
Nuxt.jsにGraphQLを導入しようか検討している話
Nuxt.jsにGraphQLを導入しようか検討している話
Takayuki
February 26, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel × Clean Architecture
bumptakayuki
0
350
エンジニアのキャリア論
bumptakayuki
0
200
地方カンファレンス主催のススメ
bumptakayuki
1
220
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
680
沖縄観光、名物を一挙紹介!
bumptakayuki
2
670
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.8k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Technology
See All in Technology
サプライチェーン攻撃に学ぶModuleの仕組みと セキュリティ対策
kuro_kurorrr
3
790
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
9
3.6k
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
4
2.2k
いまさら聞けない ABテスト入門
skmr2348
0
170
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
170
GopherCon Tour 概略
logica0419
2
160
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
680
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
240
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
170
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
6.2k
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
31
9.4k
What is BigQuery?
aizack_harks
0
120
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Speed Design
sergeychernyshev
32
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The World Runs on Bad Software
bkeepers
PRO
71
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
Nuxt.jsにGraphQLを導入しようか ݕ討している話 鈴木孝之 2019/02/26
"HFOEB ࣗݾհɾձࣾհ ։ൃதͷαʔϏε (SBQI2-Λಋೖ͢ΔϝϦοτ
ࣗݾհɾձࣾհ
1.ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ※ಉಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹಠཱɻ
ɾݱࡏɺडୗ։ൃΛΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js
1.ࣗݾհ
Copyright Re:Build.inc All Rights Reserved. ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕
◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
։ൃதͷαʔϏε
։ൃதͷࣗࣾαʔϏε ɾαʔόαΠυ 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৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍ ٕज़ཁ݅ ։ൃମ੍
ϑϩϯτΤϯυ αʔόαΠυ αʔόߏ DBΞΫηε ϑΝΠϧΞοϓϩʔυ Ajax௨৴
ݱࡏͷAPIͷΤϯυϙΠϯτ ̏̓
(SBQI2-Λಋೖ͢ΔϝϦοτ
GraphQLͱʁ GraphQLFacebookʹΑΓ։ൃ͞ΕͨΦʔϓϯιʔεͷݴޠͰ ͢ɻAPI࡞ͷΈͱͯ͠RESTͷΘΓʹ͑·͢ɻREST APIͷઃܭͱ࣮ʹ͏֓೦্ͷઃܭϞσϧͰ͕͢ɺ GraphQLඪ४Խ͞Εͨݴޠɺܕ͚ɺ༷Λ࣋ͪΫϥΠΞϯ τͱαʔόʔؒΛڧྗʹ݁ͼ͚ͭ·͢ɻҟͳΔσόΠεؒͷ௨ ৴ʹඪ४Խ͞Εͨݴޠ͕͋Δ͜ͱͰɺେܕ͔ͭΫϩεϓϥοτ ϑΥʔϜͷΞϓϦ։ൃ͕ΑΓγϯϓϧʹͳΓ·͢ɻ https://qiita.com/syu_chan_1005/items/3350f1d12c17a77e98c7
ᶃେྔͰࡶʹͳΓ͕ͪͳWeb APIͷΤϯυϙΠ ϯτΛ؆ܿʹཧ͢Δ͜ͱ͕Ͱ͖Δ ᶄGraph docͰAPIυΩϡϝϯτΛҰݩཧͰ͖Δ GraphQLͷϝϦοτ
ϑϩϯτΤϯυ ௨ৗͷREST APIͱͷҧ͍ ~ैདྷͷREST API~ αʔόαΠυ /login ͳͲͳͲ ͳͲͳͲ /users
/posts
ϑϩϯτΤϯυ ௨ৗͷREST APIͱͷҧ͍ ~GraphQLΛͬͨ߹~ αʔόαΠυ ͳͲͳͲ ͳͲͳͲ /graphql
GraphQLΛ͏͜ͱͰେྔͰࡶʹͳΓ ͕ͪͳWeb APIͷΤϯυϙΠϯτΛ؆ܿ ʹཧ͢Δ͜ͱ͕Ͱ͖Δʂʂ
௨ৗͷREST APIͱͷҧ͍ ~GraphQLΛͬͨ߹~ https://labs.getninjas.com.br/sharing-data-in-a-microservices-architecture-using- graphql-97db59357602
Apollo Clientͱ https://qiita.com/seya/items/26c8a0dc549a10efcdf8 Apollo ClientͱGraphQL APIΛγϯϓϧʹΫϥΠΞϯτଆͰૢ࡞͢Δͨ ΊͷϥΠϒϥϦͰ͢ɻ ·ͣLinkͱ͍͏ͷΛ༻͍ͯར༻͢ΔGraphQLΤϯυϙΠϯτΛઃఆ ͠·͢ɻ
Apollo Clientͱ https://qiita.com/seya/items/26c8a0dc549a10efcdf8
Apollo Client https://github.com/takanorip/nuxt-graphql-sample σΟϨΫτϦߏ
Apollo Client https://github.com/takanorip/nuxt-graphql-sample ΤϯυϙΠϯτ ϔομʔͷઃఆ default.js
Apollo Client https://github.com/takanorip/nuxt-graphql-sample ελʔΛ͚ͭΔgqlϑΝΠϧ addStar.gql
Apollo Client https://github.com/takanorip/nuxt-graphql-sample githubͷϦϙδτϦใΛ औಘ͢ΔgqlϑΝΠϧ getRepos.gql
Graph docͰAPIυΩϡϝϯτΛҰݩཧͰ͖Δ https://github.com/2fd/graphdoc
Graph docͰAPIυΩϡϝϯτΛҰݩཧͰ͖Δ https://2fd.github.io/graphdoc/star-wars/
·ͱΊ
ɾݱঢ়ͷWebΞϓϦ·ͩβ൛Λ࡞͍ͯ͠ΔͷͰɺεϐʔ υॏࢹͰߟ͑Δͱ·ͩಋೖ͠ͳͯ͘ྑ͍͔ɻ ɾͦΕͳΓʹֶशίετ͔͔Γͦ͏ɻ ɾΤϯυϙΠϯτ͕ͬͱɺ૿͔͑ͯΒ͏ܗͰ͍͍͔ɻ ಋೖΛߟ͑ͨ݁Ռ
ࢀߟ 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