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
200
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
3.7k
ファインディ株式会社における生成AI活用までの軌跡
starfish719
1
3.7k
ファインディの テックブログ爆誕までの軌跡
starfish719
3
3.2k
動作確認やテストで漏れがちな観点3選
starfish719
6
1.5k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.8k
Findyの爆速開発を支えるPull requestの粒度
starfish719
0
4.9k
フロントエンドの設計刷新〜決断から効果検証まで〜
starfish719
0
64
開発生産性実践入門 Pullrequestの粒度編
starfish719
0
1.8k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bash Introduction
62gerente
615
210k
A better future with KSS
kneath
239
17k
Docker and Python
trallard
46
3.6k
A Tale of Four Properties
chriscoyier
160
23k
Context Engineering - Making Every Token Count
addyosmani
5
200
Music & Morning Musume
bryan
46
6.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Balancing Empowerment & Direction
lara
4
680
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ͷ͓͔͛Ͱɺϑϩϯτଆʹूத͢Δ͜ ͱ͕Ͱ͖ͨ