GraphQL×TypeScriptでエモかった5つのこと.pdf

Transcript

1. GraphQL×TypeScriptͰ ΤϞ͔ͬͨ5ͭͷ͜ͱ 2019/02/02 Gunma.web #34 ؔޱ ࢘

2. ໊લ: ؔޱ࢘ SNS: GitHub: TsukasaGR Twitter: TsukasaGr NewsPicks: ؔޱ࢘ ࠲ӈͷ໏

   ࣗ෼ͷͨΊʹɺଞਓʹਚ͘͢ ࢓ࣄ: αϥϦʔϚϯ: SIerͰ৽نࣄۀ(toC޲͚ͷWebαʔϏε)։ൃ ϑϦʔϥϯε: ελʔτΞοϓͷWebΤϯδχΞ ࠷ۙ৮ͬͯΔ΋ͷ: PHP(Laravel)ɺJavascript/Typescript(Vue.js/Nuxt.js)ɺGraphQLɺDockerɺAWSɺFirebase ࣗݾ঺հ

3. ࠓ೔࿩͢͜ͱ • GraphQLͱ͸ • GraphQLͷPros/Cons • TypeScriptͱ͸ • GraphQLΛ৮ͬͯΤϞ͔ͬͨ͜ͱ •

   GraphQL×TypeScriptΛ૊Έ߹Θͤͯ ΤϞ͔ͬͨ͜ͱ

4. GraphQL(backend) Laravel: 5.7.24 nuwave/lighthouse: 2.6.4 mll-lab/laravel-graphql-playground: 0.3.3 GraphQL(frontend), TypeScript Nuxt.js:

   2.3.4 typescript: 3.2.2 @nuxtjs/apollo: 4.0.0-rc2.3 etc… લఏ

5. ΤϞ͔ͬͨ5ͭͷ͜ͱ

6. 1. ΫϥΠΞϯτ࣮ߦ؀ڥ͕ ΤϞ͍

7. mll-lab/laravel-graphql-playground (prisma/graphql-playground)

8. prisma/vscode-graphql

9. 2. GraphQLͷΫΤϦ͕ ΤϞ͍

10. ෳ਺ͷΫΤϦΛ·ͱΊͯൃߦ

11. 3. Document as Code͕ ΤϞ͍

12. nuwave/lighthouse

13. 4. Code Generator͕ ΤϞ͍

14. dotansimha/graphql-code-generator

15. 5. ·ͩओྲྀʹͳͬͯͳ͍ͷ͕ ΤϞ͍

16. • TypeScript͸AltJSͷσϑΝΫτʹͳΓͭͭ͋Δ͕ɺAPI͸ ·ͩ·ͩRestAPI͕ओྲྀ • ΋ͪΖΜGraphQL͸RestAPIͷ୅ସͱͯ͠Ͱͳ͘࢖͍෼͚ Δ΋ͷͩͱࢥ͏͕ɺSSKDsͳAPIͰ͋Ε͹ΤϯυϙΠϯτ ͕ҰՕॴʹ·ͱ·͍ͬͯΔͱϑϩϯτΤϯυ͕εοΩϦ͢ Δ • ͢ͰʹΤϞ͍GraphQL͕ͩɺࠓޙ͞ΒʹΤϞ͘ͳ͍ͬͯ͘

    Մೳੑ͕͋Δʂ ͞ΒʹΤϞ͘ͳΔ͔΋ʁʂ

17. ͓·͚. ΤϞ͘ͳ͍ͱ͜Ζ

18. • GraphQLͷΤϞ͘ͳ͍ͱ͜Ζ • TypeScriptͷΤϞ͘ͳ͍ͱ͜Ζ • Laravel×GraphQLͷΤϞ͘ͳ͍ͱ͜Ζ • Nuxt×TypeScriptͷΤϞ͘ͳ͍ͱ͜Ζ

19. LaravelͷGraphQL ϥΠϒϥϦ͕ൃల్্ LaravelͰGraphQLΛ࢖͍౗ͯ͠Έͨ https://qiita.com/TsukasaGR/items/1a8b0020e5e83e7a46c7

20. NuxtͷTSαϙʔτ͕·ͩऑ͍ ͕ɺઌ೔ϦϦʔε͞Εͨv2.4ͰTSαϙʔτͨ͠ͱͷ͜ͱ https://dev.to/nuxt/nuxtjs-v240-is-out-typescript-smart- prefetching-and-more-18d

21. ͍͞͝ʹ

22. • ࣮ࡍʹΞϓϦέʔγϣϯΛ࣮૷ͯ͠ΈΔͱҧͬͨݟ͑ํ͸͋Γͦ͏ • ٧·ͬͨ࣌ʹάάͬͯ΋ղܾࡦ͕օແ • ΫΤϦͷ8ׂ͕Resolver • CustomDirectiveɺCustomScalarͱϑϨʔϜϫʔΫͷओػೳ (DIɺORM౳)ͷ࿈ܞ͕ग़དྷͳ͍ •

    PrismaɺApollo͕ଟػೳɺϥΠϒϥϦ͕ଟ͗ͯ͢Α͘Θ͔Βͳ͍ • ΍ͬͺΓRestAPIҰຊʹ໭ͦ͏ • etc… ͦΕͰ΋஍ཕΛ౿Ήʹ஋͢ΔΤϞ͕͋͞Δʂ