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
290
エンジニアのキャリア論
bumptakayuki
0
190
地方カンファレンス主催のススメ
bumptakayuki
1
210
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
650
沖縄観光、名物を一挙紹介!
bumptakayuki
2
650
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.7k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
390
Other Decks in Technology
See All in Technology
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
0
240
robocopy の怖い話/scary-story-about-robocopy
emiki
0
420
MCPと認可まわりの話 / mcp_and_authorization
convto
2
330
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
200
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.2k
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
260
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
110
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
370
Jitera Company Deck / JP
jitera
0
310
SAE J1939シミュレーション環境構築
daikiokazaki
1
200
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
300
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Typedesign – Prime Four
hannesfritz
42
2.7k
Writing Fast Ruby
sferik
628
62k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
GitHub's CSS Performance
jonrohan
1031
460k
Side Projects
sachag
455
43k
Building Adaptive Systems
keathley
43
2.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
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