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
310
エンジニアのキャリア論
bumptakayuki
0
200
地方カンファレンス主催のススメ
bumptakayuki
1
210
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
660
沖縄観光、名物を一挙紹介!
bumptakayuki
2
660
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.7k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Technology
See All in Technology
リモートワークで心掛けていること 〜AI活用編〜
naoki85
0
190
モノレポにおけるエラー管理 ~Runbook自動生成とチームメンションの最適化
biwashi
0
420
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
35
16k
なごミュ@SPAJAM2025 第二回予選
1901drama
0
110
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
1
270
EKS Pod Identity における推移的な session tags
z63d
1
170
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
220
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
7
200
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
430
生成AIによるデータサイエンスの変革
taka_aki
0
3.1k
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
260
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
150
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Faster Mobile Websites
deanohume
309
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How GitHub (no longer) Works
holman
314
140k
Facilitating Awesome Meetings
lara
55
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
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