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
110
Nuxt.jsとGraphcoolで ツールを作っている話
starfish719
June 25, 2018
Tweet
Share
More Decks by starfish719
See All by starfish719
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
5.7k
Findyの爆速開発を支えるPull requestの粒度
starfish719
0
260
フロントエンドの設計刷新〜決断から効果検証まで〜
starfish719
0
37
開発生産性実践入門 Pullrequestの粒度編
starfish719
0
930
Gatsby + Netlifyで ポートフォリオサイトを 作った話
starfish719
0
52
vegatech_3.pdf
starfish719
0
390
CloudFunctionsと CloudVisionで 遊んでみた
starfish719
0
56
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
190
Writing Fast Ruby
sferik
628
61k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
330
Site-Speed That Sticks
csswizardry
2
210
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
850
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Documentation Writing (for coders)
carmenintech
67
4.5k
RailsConf 2023
tenderlove
29
960
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ͷ͓͔͛Ͱɺϑϩϯτଆʹूத͢Δ͜ ͱ͕Ͱ͖ͨ