Nuxt.jsとGraphcoolで ツールを作っている話

Transcript

1. Nuxt.jsͱGraphcoolͰ πʔϧΛ࡞͍ͬͯΔ࿩
2. ࣗݾ঺հ • ށా ઍ൏ (Toda Chihaya) • @starfish0206 • PHP Swift Vue.js • झຯɹϙέϞϯɺఉΩϟϯ˚
3. ࠓ೔࿩͢͜ͱ
4. Nuxt.jsͱGraphcoolʹ͍ͭͯ ΊͬͪΌ ࡶʹઆ໌͠·͢
5. Nuxt.js is Կ • ΊͬͪΌ؆୯ʹαʔόʔαΠυϨϯμϦϯά Ͱ͖ΔVue.jsͷϑϨʔϜϫʔΫ • ੩తϑΝΠϧ΋؆୯ʹੜ੒Ͱ͖ΔͬΆ͍
6. Graphcool is Կ • ΊͬͪΌ؆୯ʹGraphQLΛ࢖͏͜ͱ͕Ͱ͖Δ BaaSαʔϏε • ϞσϧΛఆٛ͢Δ͚ͩͰɺQueryͱMutation ͕ࣗಈతʹఆٛ͞ΕΔ • GUIͷπʔϧ͕ΊͬͪΌศར
7. Կ࡞ͬͯΔʁ • ҭ੒ͨ͠ϙέϞϯͷ؅ཧπʔϧ • demoݟͤ·͢
8. Nuxt.jsΛ࢖ͬͯΈΔ
9. Πϯετʔϧ $ npm install -g vue-cli $ vue init nuxt/starter projectName $ cd projectName $ npm install $ npm run dev
10. ϧʔςΟϯάͱϏϡʔ • ಺෦తʹ͸vue-routerΛར༻ • pagesσΟϨΫτϦ഑ԼʹviewίϯϙʔωϯτͷϑΝ ΠϧΛ࡞੒ • ϑΝΠϧ໊ͱσΟϨΫτϦߏ੒ʹΑͬͯɺrouter.jsͷ ઃఆ͕ࣗಈతʹ࡞੒͞ΕΔ • router.jsʹॻ͍ͨํָ͕(ݸਓతײ૝
11. GraphcoolΛ࢖ͬͯΈΔ
12. Πϯετʔϧ $ npm install -g graphcool $ graphcool init server $ graphcool deploy $ graphcool local up
13. Ϟσϧఆٛ type Type @model { id: ID! @isUnique createdAt: DateTime! updatedAt: DateTime! name: String! }
14. ಈ࡞ • docker্ཱ͕͕͍ͪͬͯΔ • PrismaͰMySQLΛϥούʔ͍ͯ͠Δ • ϦϨʔγϣϯΛར༻͢Δ͜ͱ͕Ͱ͖Δ
15. Nuxt.js ͔ΒGraphcool΁઀ଓ • apollo-moduleΛར༻ • https://github.com/nuxt-community/apollo- module • graphcool info ͰΤϯυϙΠϯτͷ৘ใΛऔ ಘ͢Δ͜ͱ͕Մೳ
16. ·ͱΊ • Nuxt.js ΋ Graphcool΋ΊͬͪΌ؆୯ʹಋೖ͢Δ͜ ͱ͕Ͱ͖Δ • Ͳͬͪ΋υΩϡϝϯτ͕͔ͬ͠Γ͍ͯ͠Δ • όοΫΤϯυଆ͸ϞσϧΛఆٛ͢Δ͚ͩ • Graphcoolͷ͓͔͛Ͱɺϑϩϯτଆʹूத͢Δ͜ ͱ͕Ͱ͖ͨ