Tweet
Tweet

Slide 1

Slide 1 text

Nuxt.jsͱGraphcoolͰ πʔϧΛ࡞͍ͬͯΔ࿩

Slide 2

Slide 2 text

ࣗݾ঺հ • ށా ઍ൏ (Toda Chihaya) • @starfish0206 • PHP Swift Vue.js • झຯɹϙέϞϯɺఉΩϟϯ˚

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ

Slide 4

Slide 4 text

Nuxt.jsͱGraphcoolʹ͍ͭͯ ΊͬͪΌ ࡶʹઆ໌͠·͢

Slide 5

Slide 5 text

Nuxt.js is Կ • ΊͬͪΌ؆୯ʹαʔόʔαΠυϨϯμϦϯά Ͱ͖ΔVue.jsͷϑϨʔϜϫʔΫ • ੩తϑΝΠϧ΋؆୯ʹੜ੒Ͱ͖ΔͬΆ͍

Slide 6

Slide 6 text

Graphcool is Կ • ΊͬͪΌ؆୯ʹGraphQLΛ࢖͏͜ͱ͕Ͱ͖Δ BaaSαʔϏε • ϞσϧΛఆٛ͢Δ͚ͩͰɺQueryͱMutation ͕ࣗಈతʹఆٛ͞ΕΔ • GUIͷπʔϧ͕ΊͬͪΌศར

Slide 7

Slide 7 text

Կ࡞ͬͯΔʁ • ҭ੒ͨ͠ϙέϞϯͷ؅ཧπʔϧ • demoݟͤ·͢

Slide 8

Slide 8 text

Nuxt.jsΛ࢖ͬͯΈΔ

Slide 9

Slide 9 text

Πϯετʔϧ $ npm install -g vue-cli $ vue init nuxt/starter projectName $ cd projectName $ npm install $ npm run dev

Slide 10

Slide 10 text

ϧʔςΟϯάͱϏϡʔ • ಺෦తʹ͸vue-routerΛར༻ • pagesσΟϨΫτϦ഑ԼʹviewίϯϙʔωϯτͷϑΝ ΠϧΛ࡞੒ • ϑΝΠϧ໊ͱσΟϨΫτϦߏ੒ʹΑͬͯɺrouter.jsͷ ઃఆ͕ࣗಈతʹ࡞੒͞ΕΔ • router.jsʹॻ͍ͨํָ͕(ݸਓతײ૝

Slide 11

Slide 11 text

GraphcoolΛ࢖ͬͯΈΔ

Slide 12

Slide 12 text

Πϯετʔϧ $ npm install -g graphcool $ graphcool init server $ graphcool deploy $ graphcool local up

Slide 13

Slide 13 text

Ϟσϧఆٛ type Type @model { id: ID! @isUnique createdAt: DateTime! updatedAt: DateTime! name: String! }

Slide 14

Slide 14 text

ಈ࡞ • docker্ཱ͕͕͍ͪͬͯΔ • PrismaͰMySQLΛϥούʔ͍ͯ͠Δ • ϦϨʔγϣϯΛར༻͢Δ͜ͱ͕Ͱ͖Δ

Slide 15

Slide 15 text

Nuxt.js ͔ΒGraphcool΁઀ଓ • apollo-moduleΛར༻ • https://github.com/nuxt-community/apollo- module • graphcool info ͰΤϯυϙΠϯτͷ৘ใΛऔ ಘ͢Δ͜ͱ͕Մೳ

Slide 16

Slide 16 text

·ͱΊ • Nuxt.js ΋ Graphcool΋ΊͬͪΌ؆୯ʹಋೖ͢Δ͜ ͱ͕Ͱ͖Δ • Ͳͬͪ΋υΩϡϝϯτ͕͔ͬ͠Γ͍ͯ͠Δ • όοΫΤϯυଆ͸ϞσϧΛఆٛ͢Δ͚ͩ • Graphcoolͷ͓͔͛Ͱɺϑϩϯτଆʹूத͢Δ͜ ͱ͕Ͱ͖ͨ