Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Gunmaweb #34のLTスライドです。
GraphQL、及びGraphQL×TypeScriptを組み合わせてみてエモいなぁと感じることが多かったのでそれらをまとめてみました。

TsukasaSekiguchi

February 02, 2019
Tweet

More Decks by TsukasaSekiguchi

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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…
    લఏ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. prisma/vscode-graphql

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 3. Document as Code͕
    ΤϞ͍

    View full-size slide

  12. nuwave/lighthouse

    View full-size slide

  13. 4. Code Generator͕
    ΤϞ͍

    View full-size slide

  14. dotansimha/graphql-code-generator

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide