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

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

ࠓ೔࿩͢͜ͱ • GraphQLͱ͸ • GraphQLͷPros/Cons • TypeScriptͱ͸ • GraphQLΛ৮ͬͯΤϞ͔ͬͨ͜ͱ • GraphQL×TypeScriptΛ૊Έ߹Θͤͯ ΤϞ͔ͬͨ͜ͱ 

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ͭͷ͜ͱ 

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

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

prisma/vscode-graphql 

2. GraphQLͷΫΤϦ͕ ΤϞ͍ 

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

3. Document as Code͕ ΤϞ͍ 

nuwave/lighthouse 

4. Code Generator͕ ΤϞ͍ 

dotansimha/graphql-code-generator 

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

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

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

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

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

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

͍͞͝ʹ 

• ࣮ࡍʹΞϓϦέʔγϣϯΛ࣮૷ͯ͠ΈΔͱҧͬͨݟ͑ํ͸͋Γͦ͏ • ٧·ͬͨ࣌ʹάάͬͯ΋ղܾࡦ͕օແ • ΫΤϦͷ8ׂ͕Resolver • CustomDirectiveɺCustomScalarͱϑϨʔϜϫʔΫͷओػೳ (DIɺORM౳)ͷ࿈ܞ͕ग़དྷͳ͍ • PrismaɺApollo͕ଟػೳɺϥΠϒϥϦ͕ଟ͗ͯ͢Α͘Θ͔Βͳ͍ • ΍ͬͺΓRestAPIҰຊʹ໭ͦ͏ • etc… ͦΕͰ΋஍ཕΛ౿Ήʹ஋͢ΔΤϞ͕͋͞Δʂ