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とGraphcoolで ツールを作っている話
Search
starfish719
June 25, 2018
0
130
Nuxt.jsとGraphcoolで ツールを作っている話
starfish719
June 25, 2018
Tweet
Share
More Decks by starfish719
See All by starfish719
ファインディ株式会社における生成AI活用までの軌跡
starfish719
1
930
ファインディの テックブログ爆誕までの軌跡
starfish719
3
3.1k
動作確認やテストで漏れがちな観点3選
starfish719
6
1.4k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.8k
Findyの爆速開発を支えるPull requestの粒度
starfish719
0
4.8k
フロントエンドの設計刷新〜決断から効果検証まで〜
starfish719
0
58
開発生産性実践入門 Pullrequestの粒度編
starfish719
0
1.8k
Gatsby + Netlifyで ポートフォリオサイトを 作った話
starfish719
0
74
vegatech_3.pdf
starfish719
0
410
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Ace a Technical Interview
jacobian
279
23k
Documentation Writing (for coders)
carmenintech
73
5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Become a Pro
speakerdeck
PRO
29
5.5k
Navigating Team Friction
lara
188
15k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
How STYLIGHT went responsive
nonsquared
100
5.7k
Transcript
Nuxt.jsͱGraphcoolͰ πʔϧΛ࡞͍ͬͯΔ
ࣗݾհ • ށా ઍ൏ (Toda Chihaya) • @starfish0206 • PHP
Swift Vue.js • झຯɹϙέϞϯɺఉΩϟϯ˚
ࠓ͢͜ͱ
Nuxt.jsͱGraphcoolʹ͍ͭͯ ΊͬͪΌ ࡶʹઆ໌͠·͢
Nuxt.js is Կ • ΊͬͪΌ؆୯ʹαʔόʔαΠυϨϯμϦϯά Ͱ͖ΔVue.jsͷϑϨʔϜϫʔΫ • ੩తϑΝΠϧ؆୯ʹੜͰ͖ΔͬΆ͍
Graphcool is Կ • ΊͬͪΌ؆୯ʹGraphQLΛ͏͜ͱ͕Ͱ͖Δ BaaSαʔϏε • ϞσϧΛఆٛ͢Δ͚ͩͰɺQueryͱMutation ͕ࣗಈతʹఆٛ͞ΕΔ •
GUIͷπʔϧ͕ΊͬͪΌศར
Կ࡞ͬͯΔʁ • ҭͨ͠ϙέϞϯͷཧπʔϧ • demoݟͤ·͢
Nuxt.jsΛͬͯΈΔ
Πϯετʔϧ $ npm install -g vue-cli $ vue init nuxt/starter
projectName $ cd projectName $ npm install $ npm run dev
ϧʔςΟϯάͱϏϡʔ • ෦తʹvue-routerΛར༻ • pagesσΟϨΫτϦԼʹviewίϯϙʔωϯτͷϑΝ ΠϧΛ࡞ • ϑΝΠϧ໊ͱσΟϨΫτϦߏʹΑͬͯɺrouter.jsͷ ઃఆ͕ࣗಈతʹ࡞͞ΕΔ •
router.jsʹॻ͍ͨํָ͕(ݸਓతײ
GraphcoolΛͬͯΈΔ
Πϯετʔϧ $ npm install -g graphcool $ graphcool init server
$ graphcool deploy $ graphcool local up
Ϟσϧఆٛ type Type @model { id: ID! @isUnique createdAt: DateTime!
updatedAt: DateTime! name: String! }
ಈ࡞ • docker্ཱ͕͕͍ͪͬͯΔ • PrismaͰMySQLΛϥούʔ͍ͯ͠Δ • ϦϨʔγϣϯΛར༻͢Δ͜ͱ͕Ͱ͖Δ
Nuxt.js ͔ΒGraphcoolଓ • apollo-moduleΛར༻ • https://github.com/nuxt-community/apollo- module • graphcool info
ͰΤϯυϙΠϯτͷใΛऔ ಘ͢Δ͜ͱ͕Մೳ
·ͱΊ • Nuxt.js GraphcoolΊͬͪΌ؆୯ʹಋೖ͢Δ͜ ͱ͕Ͱ͖Δ • ͲͬͪυΩϡϝϯτ͕͔ͬ͠Γ͍ͯ͠Δ • όοΫΤϯυଆϞσϧΛఆٛ͢Δ͚ͩ
• Graphcoolͷ͓͔͛Ͱɺϑϩϯτଆʹूத͢Δ͜ ͱ͕Ͱ͖ͨ