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
380
エンジニアのキャリア論
bumptakayuki
1
210
地方カンファレンス主催のススメ
bumptakayuki
1
220
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.2k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
690
沖縄観光、名物を一挙紹介!
bumptakayuki
2
680
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.9k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Technology
See All in Technology
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
630
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
様々なファイルシステム
sat
PRO
0
230
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
860
生成AI時代のPythonセキュリティとガバナンス
abenben
0
120
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
310
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
1
350
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
110
Featured
See All Featured
Designing for Performance
lara
610
69k
A Modern Web Designer's Workflow
chriscoyier
697
190k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Documentation Writing (for coders)
carmenintech
75
5.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
580
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
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