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
850
Nuxt.jsにGraphQLを導入しようか検討している話
Nuxt.jsにGraphQLを導入しようか検討している話
Takayuki
February 26, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
地方カンファレンス主催のススメ
bumptakayuki
1
93
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
290
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
360
沖縄観光、名物を一挙紹介!
bumptakayuki
2
380
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
940
flutterでイベントアプリを作ってみた
bumptakayuki
0
87
オフショア開発の辛みと学んだ事
bumptakayuki
0
300
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
130
ChatGPTに記事を書かせてみた
bumptakayuki
1
200
Other Decks in Technology
See All in Technology
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
490
私のRSpecの書き方 / How I write RSpec
tmtms
4
840
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
3k
Getting started with controlling LEGO using Swift
hcrane
0
130
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
4.1k
Introducing Pkl
enomotok
0
100
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
550
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Designing the Hi-DPI Web
ddemaree
275
33k
Ruby is Unlike a Banana
tanoku
95
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Building an army of robots
kneath
300
41k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
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