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
3
1.7k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
4.3k
ファインディ株式会社における生成AI活用までの軌跡
starfish719
1
3.8k
ファインディの テックブログ爆誕までの軌跡
starfish719
3
3.2k
動作確認やテストで漏れがちな観点3選
starfish719
6
1.5k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.8k
Findyの爆速開発を支えるPull requestの粒度
starfish719
0
5k
フロントエンドの設計刷新〜決断から効果検証まで〜
starfish719
0
66
開発生産性実践入門 Pullrequestの粒度編
starfish719
0
1.9k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
470k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Embracing the Ebb and Flow
colly
88
4.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Done Done
chrislema
185
16k
Navigating Team Friction
lara
190
15k
KATA
mclloyd
PRO
32
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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ͷ͓͔͛Ͱɺϑϩϯτଆʹूத͢Δ͜ ͱ͕Ͱ͖ͨ