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

個人ブログサイトを構築して学ぶGraphQL NestJSとNext.js使うよ! / graphql nestjs nextjs bootcamp

Yusuke Wada
February 19, 2022

個人ブログサイトを構築して学ぶGraphQL NestJSとNext.js使うよ! / graphql nestjs nextjs bootcamp

「GraphQLの仕様はなんとなく知っているけど、それを使ってどうアプリを作るのかいまいちイメージがわかない」

そんなスキマを埋めるべく函館で登壇してきました。

近年ではReactをはじめフロントエンドの選択肢が豊富になっており、フロントエンドとバックエンド間のやりとりにはより汎用的かつ効率的な方法が求められます。

GraphQLはその選択肢のひとつです。この資料では NestJS で GraphQLバックエンドを実装し、それをNext.jsから利用して、個人ブログサイトを構築してみます。 GraphQL開発の流れを体験して、ご自身のアプリ開発に役立ててください。

Yusuke Wada

February 19, 2022
Tweet

More Decks by Yusuke Wada

Other Decks in Technology

Transcript


  1. ݸਓϒϩάΛ࡞ֶͬͯͿ(SBQI2-
    /FTU+4/FYUKT

    Ϋϥεϝιουגࣜձࣾ࿨ా༞հ

    View Slide

  2. ࠓ೔
    GraphQLͷ࿩

    View Slide

  3. ܦҢ
    "84"QQ4ZODͰ(SBQI2-όοΫΤϯυΛߏங͠
    ͨͷ͕͖͔͚ͬ
    https://aws.amazon.com/jp/appsync/

    View Slide

  4. ܦҢ
    "84"QQ4ZODͰ(SBQI2-όοΫΤϯυΛߏங͠
    ͨͷ͕͖͔͚ͬ

    View Slide

  5. ࢖ͬͨײ૝
    😊͍Ζ͍Ζͳιʔε͔Βσʔλͱͬͯ͜Εͯศར
    🤔୭͕ͳʹΛ΍͍ͬͯΔΜͩʁͲ͜·Ͱ͕(SBQI2-ʁ
    ࣗ෼ͷϒϩάαΠτΛGraphQLͰ࣮૷ͯ͠Έͨ

    View Slide

  6. (SBQI2-ͱ͍͑͹ʜ
    2VFSZͰσʔλͱΕ·͢ʂ
    .VUBUJPOͰσʔλߋ৽Ͱ͖·͢ʂ
    4VCTDSJQUJPOͰϦΞϧλΠϜʂ
    'BDFCPPL͕։ൃͨ͠΍ͭʂ

    View Slide


  7. ·ͨ͸

    View Slide

  8. (SBQI2-ͱ͍͑͹ʜ
    "84"QQ4ZODʂ
    "QPMMPʂ
    )BTVSBʂ

    View Slide


  9. 🤔

    View Slide


  10. ͜ΕΒͷ”ؒ”ΛຒΊ͍ͨ

    View Slide

  11. ຊൃදͷ໨త
    (SBQI2-Λ࣮ફ౤ೖ͢ΔΠϝʔδΛ΋ͬͯ΋Β͏
    ͻ͍ͯ͸ɿ
    ΞϓϦέʔγϣϯ։ൃऀΛ૿΍͢
    ͦͷͨΊʹɿ
    ݸਓϒϩάαΠτΛΠϯΫϦϝϯλϧʹߏஙͯ͠ɺ۩ମతͳ
    (SBQI2-ͷ࢖͍ํΛΈͳ͕Β࢓༷Λ೺Ѳ͢Δ
    όοΫΤϯυɺϑϩϯτΤϯυ྆ํߏங͢Δ

    View Slide

  12. 🙏΍Βͳ͍͜ͱ
    (SBQI2-4VCTDSJQUJPOTͷ࿩͸͋Γ·ͤΜ
    (SBQI2-%JSFDUJWFTͷ࿩͸͋Γ·ͤΜ
    ϩάΠϯɾηογϣϯ؅ཧͷ࿩͸͋Γ·ͤΜ
    ςετͷ࿩͸͋Γ·ͤΜ

    View Slide

  13. ΍Δ͜ͱ
    ݸਓ༻ͷϒϩάαΠτΛͭ͘Δ
    http://blog.parity-box.com/

    View Slide

  14. εϥΠυ͸ޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ


    ൃදதͷ಺༰ΛϝϞ͢Δඞཁ͸͋Γ·ͤΜɻ


    ࣸਅࡱӨΛ͢Δ৔߹͸


    ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹ͝഑ྀ͍ͩ͘͞
    Attention

    View Slide

  15. ࣗݾ঺հ
    ࿨ా༞հ
    Ϋϥεϝιουגࣜձࣾ
    ৽نࣄۀ౷ׅ෦;FOOνʔϜ
    XBEEZ@V
    "844DBMBʹΑΔ8FC"1*
    "84αʔόʔϨε3FDU41"
    (PPHMF$MPVE3BJMT/FYUKTʢࠓ͜͜ʣ

    View Slide

  16. ;FOOͱ͸
    *5ΤϯδχΞͷͨΊͷ৘ใڞ༗ίϛϡχςΟ

    View Slide

  17. ;FOOͱ͸
    https://www.youtube.com/watch?v=DTpGfpLybr0
    ;FOOݸਓ։ൃͷݶքʹ௅Μͩ࿩EFWTVNJ ࣍ͷٕज़ϒϩάΛૂ͏ʮ;FOOʯ͕Ϋϥεϝιου΁ɹվ
    ΊͯΤϯδχΞͷ৘ใൃ৴Λ໰͏
    https://ascii.jp/elem/000/004/042/4042376/

    View Slide

  18. ࣭໰΍ؾʹͳΔ͜ͱ͕͋ͬͨΒεΫϥοϓ΁
    (PPHMFΞΧ΢ϯτ͕͋Ε͹ແྉͰར༻Ͱ͖·͢

    View Slide

  19. ׬શཧղฤ
    (SBQI2-ͱ͸
    (JU)VC"1*Ͱମݧ͢Δ
    ϛχϚϜόοΫΤϯυ
    ϛχϚϜϑϩϯτΤϯυ
    Ϟνϕʔγϣϯͱٕज़ελοΫͷߟ࡯
    ࣮ફฤ
    ϒϩάτοϓϖʔδͷ࣮૷
    τοϓϖʔδվम
    ϒϩάهࣄຊจϖʔδ
    ίϝϯτػೳ
    NJDSP$.4ͰϓϩϑΟʔϧ؅ཧ

    View Slide

  20. ׬શཧղฤ
    (SBQI2-ͱ͸
    (JU)VC"1*Ͱମݧ͢Δ
    ϛχϚϜόοΫΤϯυ
    ϛχϚϜϑϩϯτΤϯυ
    Ϟνϕʔγϣϯͱٕज़ελοΫͷߟ࡯

    View Slide


  21. (SBQI2-ͱ͸

    View Slide

  22. ࢓༷Ͱ͢
    ن֨ɾཁٻࣄ߲ͷू·Γ
    ೥.FUBʢ౰࣌'BDFCPPLʣ͕ࣾൃදͨ͠
    https://www.youtube.com/watch?v=783ccP__No8

    View Slide

  23. ࢓༷Ͱ͢
    ن֨ɾཁٻࣄ߲ͷू·Γ
    ೥.FUBʢ౰࣌'BDFCPPLʣ͕ࣾൃදͨ͠
    FacebookΞϓϦͷχϡʔεϑΟʔ
    υΛϚϧνσόΠε΁ఏڙ͍ͨ͠


    Ϩεϙϯεߏ଄ΛϑϩϯτΤϯυ
    ͰܾΊΒΕΔΑ͏ʹ͢ΔAPIΛͭ͘
    Δ͜ͱʹ

    View Slide

  24. ͦͷޙɺϓϩμΫτ΍ϥΠϒϥϦ͕ग़ݱ
    3FMBZ
    "QPMMP
    "QQ4ZOD
    )BTVSB
    1SJTNB

    View Slide

  25. ΍΍͍͜͠
    (SBQI2-࢓༷ʹରͯ͠ɺ࣮૷͢ΔͨΊͷखஈ͕ͨ͘͞
    Μ͋Δঢ়ଶ

    View Slide

  26. ΍΍͍͜͠
    (SBQI2-࢓༷ʹରͯ͠ɺ࣮૷͢ΔͨΊͷखஈ͕ͨ͘͞
    Μ͋Δঢ়ଶ
    Introduction to Apollo Server; https://www.apollographql.com/docs/apollo-server/
    มΘΒͳ͍͜ͱɿ


    GraphQL͸ΫΤϦݴޠͰ͋Δ


    GraphQLόοΫΤϯυͱ


    ͦΕΛ࢖͏GraphQLϑϩϯτ
    Τϯυ͕ొ৔͢Δ

    View Slide


  27. (JU)VC"1*Ͱମݧ

    View Slide

  28. Ұॹʹ৮ͬͯΈ·͠ΐ͏
    (JU)VCΞΧ΢ϯτ͕͋Ε͹ମݧͰ͖·͢
    https://docs.github.com/en/graphql/overview/explorer
    [GitHub API Graphql Explorer]
    Explorer - GitHub Docs

    View Slide

  29. ৮ͬͯΈͯ
    ඞཁͳσʔλ͚ͩએݴతʹॻ͚͹औಘͰ͖Δ
    ͳΜͱͳ͘਌ࢠؔ܎ʹ͋Γͦ͏ͳσʔλ͕ͳΜͱͳͦ͘
    Μͳ+40/ͰऔಘͰ͖Δ
    ิ׬͕ޮ͘ʂ

    View Slide


  30. ࠷খߏ੒(SBQI2-όοΫΤϯυ

    View Slide

  31. "QPMMP4FSWFSͷαϯϓϧΛഈआ

    View Slide

  32. "QPMMP4FSWFSͷαϯϓϧΛഈआ
    GraphQL ͷόοΫΤϯυ
    ͔ΒϑϩϯτΤϯυ·Ͱ


    ϫϯετοϓ


    ιϦϡʔγϣϯΛఏڙ͢Δ
    ϓϥοτϑΥʔϜ

    View Slide

  33. 4DIFNB

    View Slide

  34. σʔλϩδοΫ

    View Slide

  35. 3FTPMWFS

    View Slide

  36. αʔόʔىಈ

    View Slide

  37. "QPMMP4UVEJP
    GraphQL αʔόʔ΁઀ଓ
    Ͱ͖Δϒϥ΢βπʔϧ


    ϩʔΧϧαʔόʔ΁΋ΞΫ
    ηεՄೳ


    Apollo ༷༷Ͱ͢

    View Slide

  38. "QPMMP4UVEJPIUUQMPDBMIPTU

    View Slide

  39. "QPMMP4UVEJPIUUQMPDBMIPTU

    View Slide

  40. "QPMMP4UVEJPIUUQMPDBMIPTU

    View Slide

  41. "QPMMP4UVEJPIUUQMPDBMIPTU
    GraphQLܕ৘ใͱυΩϡϝ
    ϯτ͕ࣗಈੜ੒͞Ε͍ͯΔ

    View Slide

  42. "QPMMP4UVEJPIUUQMPDBMIPTU

    View Slide

  43. "QPMMP4UVEJPIUUQMPDBMIPTU
    HTTPϦΫΤετͰ͖Δ

    View Slide

  44. "QPMMP4UVEJPIUUQMPDBMIPTU
    GraphQL ϦΫΤετ ≒ ͍͢͝POSTϦΫΤετ

    View Slide

  45. GraphQLόοΫΤϯυͷߏ੒ཁૉɹɹɹɹɹɹ
    Schema Resolver
    Data

    View Slide

  46. GraphQLόοΫΤϯυͷߏ੒ཁૉɹɹɹɹɹɹ
    Schema Resolver
    Data
    ͲΕ͚ͩ૖େʹͳͬͯ΋


    ͜ͷجຊߏ੒ཁૉ͸


    ͔ΘΒͳ͍


    View Slide


  47. ࠷খߏ੒(SBQI2-ϑϩϯτΤϯυ

    View Slide

  48. "QPMMP$MJFOUΛॳظԽ

    View Slide

  49. ݺͿ2VFSZΛܾఆ

    View Slide

  50. ϑΣονˍඳը

    View Slide

  51. ϑΣονˍඳը
    [


    {


    title: 'The Awakening',


    author: 'Kate Chopin',


    },


    {


    title: 'City of Glass',


    author: 'Paul Auster',


    },


    ]

    View Slide

  52. GraphQLϑϩϯτΤϯυ։ൃͷྲྀΕ
    2VFSZઃܭ σʔλϑΣον ඳը
    📱
    Query data
    Render

    View Slide


  53. Ϟνϕʔγϣϯͱٕज़ελοΫߟ࡯

    View Slide

  54. (SBQI2-όοΫΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ
    3&45GVMIUUQFYBNQMFDPNQPTUT
    ͳ"1*ͱൺ΂ͯʜ
    ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ

    Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ʣ

    View Slide

  55. (SBQI2-όοΫΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ
    3&45GVMIUUQFYBNQMFDPNQPTUT
    ͳ"1*ͱൺ΂ͯʜ
    ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ

    Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ʣ
    ࣮૷ͨ࣌͠఺ͰɺϑϩϯτΤϯυʹυΩϡϝϯτͱαϯυ
    ϘοΫε؀ڥʢ"QPMMP4UVEJPʣΛఏڙͰ͖Δ఺͕ڧΈ

    View Slide

  56. (SBQI2-όοΫΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ
    ωΰγΤʔγϣϯ=ௐ੔ͷख͕ؒݮΔ


    Ϗδωεɾ૊৫ͷεέʔϧʹ଱͑͏Δ
    3&45GVMIUUQFYBNQMFDPNQPTUT
    ͳ"1*ͱൺ΂ͯʜ
    ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ

    Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ʣ
    ࣮૷ͨ࣌͠఺ͰɺϑϩϯτΤϯυʹυΩϡϝϯτͱαϯυ
    ϘοΫε؀ڥʢ"QPMMP4UVEJPʣΛఏڙͰ͖Δ఺͕ڧΈ

    View Slide

  57. (SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ
    3&45GVMͳ"1*ͱൺ΂ͯʜ
    ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ

    Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍

    View Slide

  58. (SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ
    3&45GVMͳ"1*ͱൺ΂ͯʜ
    ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ

    Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍
    ը໘ͷඳըʹඞཁे෼ͳσʔλΛऔಘ͠ɺσʔλπϦʔͱί
    ϯϙʔωϯτπϦʔΛҰகͤ͞ΒΕΔ఺͕ϝϦοτ

    View Slide

  59. (SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ
    3&45GVMͳ"1*ͱൺ΂ͯʜ
    ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ

    Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍
    ը໘ͷඳըʹඞཁे෼ͳσʔλΛऔಘ͠ɺσʔλπϦʔͱί
    ϯϙʔωϯτπϦʔΛҰகͤ͞ΒΕΔ఺͕ϝϦοτ
    ωΰγΤʔγϣϯ=ௐ੔ͷख͕ؒݮΔ


    ίϯϙʔωϯτͷϝϯςφϯεੑ޲্͕ظ଴Ͱ͖Δ

    View Slide

  60. (SBQI2-Λ࠾༻ͯ͠Ͳ͏ͩͬͨܥͷ࿩
    https://engineering.mercari.com/blog/entry/20210818-mercari-shops-nestjs-graphql-server/#around-graphql-server
    Souzoh Tech Talk #04:Backends For Frontends

    View Slide

  61. (SBQI2-όοΫΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏

    View Slide

  62. (SBQI2-όοΫΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏

    View Slide

  63. (SBQI2-όοΫΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏
    TypeScript ʹΑΔόοΫΤϯυΞϓϦFW


    AngularΠϯεύΠΞυͳModule؅ཧ


    Apollo Server ϥΠϒϥϦʹΑΔGraphQL

    View Slide

  64. (SBQI2-ϑϩϯτΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏

    View Slide

  65. (SBQI2-ϑϩϯτΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏
    by

    View Slide

  66. (SBQI2-ϑϩϯτΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏
    by
    TypeScript ʹΑΔϑϩϯτΤϯυΞϓϦFW


    ϧʔςΟϯάαϙʔτ


    Server Rendering ΋αϙʔτɺReactϕʔε

    View Slide

  67. όοΫΤϯυͱϑϩϯτΤϯυ෼͚Δඞཁ͋Δʁ
    ݸਓϒϩάϨϕϧͰ͸ඞཁ͋Γ·ͤΜ
    (SBQI2-ͱ͍͏࢓༷ͦͷ΋ͷ͕ɺόοΫΤϯυͱϑϩ
    ϯτΤϯυͷ෼ۀΛ૝ఆ͍ͯ͠Δʢྫ֎͋Γ(BUTCZ+4ͱ͔
    ʣ
    ͷͰɺ͋͑ͯ෼͚ͯz෼ۀzΛମݧ͢Δ

    View Slide

  68. σϓϩΠେࣄ
    ຊൃදͰ͸ৄࡉ͸ड़΂·ͤΜ͕ɺͲΜͳ։ൃͰ΋σϓϩ
    ΠʢϦϦʔεʣՄೳੑΛઌʹ֬อ͢Δ͜ͱΛΦεεϝ͠
    ·͢
    ୯७ʹɺ
    Ϣʔβʔɾಡऀ΁Ձ஋Λಧ͚ͯͦ͜ͷΞϓϦ͔ͩΒ
    ։ൃޙ൒ΑΓલ൒ͷ΄͏͕σϓϩΠָ͕͔ͩΒ
    ։ൃ࡞ۀͱຊ൪σϓϩΠ࡞ۀͷࠩ෼Λਵ࣌֬ೝͰ͖Δ͔Β

    View Slide

  69. ϒϩάͷߏ੒
    هࣄϝλ৘ใ
    MarkdownϑΝΠϧ

    View Slide

  70. ׬શཧղฤ
    (SBQI2-ͱ͸
    (JU)VC"1*Ͱମݧ͢Δ
    ϛχϚϜόοΫΤϯυ
    ϛχϚϜϑϩϯτΤϯυ
    Ϟνϕʔγϣϯͱٕज़ελοΫͷߟ࡯

    View Slide

  71. (SBQI2-͸3&45GVMͳ"1*Λஔ͖׵͑Δ͔ʁ
    ্Ґޓ׵Ͱ΋ஔ͖׵͑ର৅Ͱ΋ͳ͍
    ݸਓϨϕϧɺখن໛ͳ։ൃͳΒΤίγεςϜͷॆ࣮΋͋
    Γ3&45GVM"1*ͷ΄͏͕ૣ͍͠ɺେن໛։ൃͰ΋͏·
    ͍͍ͬͯ͘ΔͳΒ(SBQI2-Λ࠾༻͢Δඞཁ͸ͳ͍
    (SBQI2-͸ɺΞϓϦέʔγϣϩδοΫͱ͍͏ΑΓ͸ɺ
    ։ൃମݧɺϝϯςφϯεମݧʹد༩͢Δ

    View Slide

  72. ࣮ફฤ
    ϒϩάτοϓϖʔδͷ࣮૷
    τοϓϖʔδվम
    ϒϩάهࣄຊจϖʔδ
    ίϝϯτػೳ
    NJDSP$.4ͰϓϩϑΟʔϧ؅ཧ

    View Slide


  73. ϒϩάτοϓϖʔδͷ࣮૷

    View Slide

  74. GraphQLόοΫΤϯυɹɹɹɹɹɹɹͷߏ੒ཁૉɹɹɹɹɹɹ
    Schema
    NestJS
    Resolver
    Data

    View Slide

  75. GraphQLόοΫΤϯυɹɹɹɹɹɹɹͷߏ੒ཁૉɹɹɹɹɹɹ
    Schema
    NestJS
    Resolver
    Data

    View Slide

  76. /FTU+4ͷ৔߹
    (SBQI2-4DIFNBΛ࡞Δํ๏͕;ͨͭ͋Δ
    ίʔυϑΝʔετ
    Ξϓϩʔν
    TypeScriptϑΝΠϧ
    GraphQL Schema
    εΩʔϚϑΝʔετ
    Ξϓϩʔν
    GraphQL Schema
    TypeScriptϑΝΠϧ

    View Slide

  77. /FTU+4ͷ৔߹
    (SBQI2-4DIFNBΛ࡞Δํ๏͕;ͨͭ͋Δ
    ίʔυϑΝʔετ
    Ξϓϩʔν
    TypeScriptϑΝΠϧ
    GraphQL Schema
    εΩʔϚϑΝʔετ
    Ξϓϩʔν
    GraphQL Schema
    TypeScriptϑΝΠϧ
    ͪ͜ΒΛ࠾༻ʢΦεεϝʣ


    TSͷίʔσΟϯάʹूதͰ͖Δ
    SchemaΛਖ਼ʹ͍ͨ͠


    ։ൃνʔϜͰ༗༻

    View Slide

  78. ίʔυϑΝʔετΞϓϩʔνͰͷ։ൃ
    (SBQI2-.PEVMFॳظԽ
    .PEFMΫϥεͷఆٛ
    σʔλΛฦ͢ϩδοΫΛ༻ҙ
    3FTPMWFSΫϥεͰඥ෇͚

    View Slide

  79. (SBQI2-.PEVMFॳظԽ

    View Slide

  80. (SBQI2-.PEVMFॳظԽ
    ࣗಈͰ Schema Λग़ྗ͢Δઃఆ

    View Slide

  81. .PEFMΫϥεͷఆٛ

    View Slide

  82. .PEFMΫϥεͷఆٛ
    Decorator ʹΑΓ Schema΁ͷ
    ม׵ର৅ͩͱೝࣝ͞ΕΔ

    View Slide

  83. σʔλͱ3FTPMWFS
    Decorator ʹΑΓ Schema΁ͷ
    ม׵ର৅ͩͱೝࣝ͞ΕΔ

    View Slide

  84. σʔλͱ3FTPMWFS
    Decorator ʹΑΓ Schema΁ͷ
    ม׵ର৅ͩͱೝࣝ͞ΕΔ

    View Slide

  85. σʔλͱ3FTPMWFS
    Decorator ʹΑΓ Schema΁ͷ
    ม׵ର৅ͩͱೝࣝ͞ΕΔ
    Schema, Data, Resolver
    ͕ἧͬͨͷͰαʔόʔΛى
    ಈͰ͖Δ

    View Slide

  86. ࣗಈੜ੒͞Εͨ4DIFNBϑΝΠϧ
    ։ൃதɺSchemaͷ͜ͱΛ


    ؾʹ͠ͳͯ͘Α͘ͳΔʂ

    View Slide

  87. "QPMMP4UVEJPͰ֬ೝͰ͖·͢

    View Slide

  88. 4DIFNB σʔλϩδοΫ 3FTPMWFS
    Schema Resolver
    Data
    GraphQLόοΫΤϯυɹɹɹɹɹɹɹͷߏ੒ཁૉɹɹɹɹɹɹ
    NestJS

    View Slide

  89. /FYUKT(SBQI2-ϑϩϯτଆͷ४උ
    (SBQI2-ΫϥΠΞϯτϥΠϒϥϦͷબఆ
    σʔλϑΣονΛࢼ͠ʹ࣮૷
    ϨϯμϦϯάΛ࣮૷
    (SBQI2-$PEF(FOFSBUPSͷಋೖ

    View Slide

  90. (SBQI2-ΫϥΠΞϯτϥΠϒϥϦͷબఆ
    /FTU+4ͱҟͳΓ(SBQI2-ඪ४αϙʔτͰ͸ͳ͍ͷͰ
    ࣗ෼ͨͪͰબͿඞཁ͕͋Δ
    /FTU+4͕"QPMMP4FSWFSͳͷͰ/FYUKT͸"QPMMP
    $MJFOUͰ΋0,͕ͩʜ

    View Slide

  91. (SBQI2-ΫϥΠΞϯτϥΠϒϥϦͷબఆ
    /FTU+4ͱҟͳΓ(SBQI2-ඪ४αϙʔτͰ͸ͳ͍ͷͰ
    ࣗ෼ͨͪͰબͿඞཁ͕͋Δ
    /FTU+4͕"QPMMP4FSWFSͳͷͰ/FYUKT͸"QPMMP
    $MJFOUͰ΋0,͕ͩʜ

    View Slide

  92. (SBQI2-ΫϥΠΞϯτϥΠϒϥϦͷબఆ
    /FTU+4ͱҟͳΓ(SBQI2-ඪ४αϙʔτͰ͸ͳ͍ͷͰ
    ࣗ෼ͨͪͰબͿඞཁ͕͋Δ
    /FTU+4͕"QPMMP4FSWFSͳͷͰ/FYUKT͸"QPMMP
    $MJFOUͰ΋0,͕ͩʜ
    Ωϟογϡઓུ͕γϯϓϧ

    View Slide

  93. σʔλϑΣονΛ࣮૷

    View Slide

  94. σʔλϑΣονΛ࣮૷
    ϛχϚϜߏ੒ͱࣅͯΔ

    View Slide

  95. ϑΣονͨ͠σʔλͰϨϯμϦϯά

    View Slide

  96. ϑΣονͨ͠σʔλͰϨϯμϦϯά

    View Slide

  97. (SBQI2-$PEF(FOFSBUPSΛಋೖ
    2VFSZΛ5ZQF4DSJQUͳͲʹग़ྗͰ͖ΔΤίγεςϜ

    ZBSODPEFHFO
    GraphQL query
    TypeScriptϑΝΠϧ

    View Slide

  98. (SBQI2-$PEF(FOFSBUPSΛಋೖ
    2VFSZΛ5ZQF4DSJQUͳͲʹग़ྗͰ͖ΔΤίγεςϜ

    ZBSODPEFHFO
    GraphQL query
    TypeScriptϑΝΠϧ
    ը໘։ൃதɺSchemaͷ͜ͱΛ


    ؾʹ͠ͳͯ͘Α͘ͳΔʂ

    View Slide

  99. (SBQI2-$PEF(FOFSBUPSΛಋೖ

    codegen.yml
    posts.query.gql

    View Slide

  100. (SBQI2-$PEF(FOFSBUPSΛಋೖ

    codegen.yml
    posts.query.gql
    yarn codegen

    View Slide

  101. (SBQI2-$PEF(FOFSBUPSΛಋೖ

    generaterd.graphql.ts

    View Slide

  102. (SBQI2-$PEF(FOFSBUPSΛಋೖ

    ࣗಈੜ੒͞ΕͨTypeScriptϑΝΠϧ͕
    importͯ͠࢖͑Δ


    => GraphQL ͱ TypeScript Λ੾Γ཭ͤΔ

    View Slide

  103. 2VFSZઃܭ σʔλϑΣον ඳը
    📱
    Query data Render
    GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ
    Next.js

    View Slide

  104. 2VFSZઃܭ σʔλϑΣον ඳը
    📱
    Query urql Render
    GraphQL


    Code
    Generator
    GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ
    Next.js

    View Slide

  105. ҎޙɺͲͷ෦෼ʹ֘౰͢Δ࡞ۀͳͷ͔

    Ͱ͖Δ͚ͩ໌ه͠·͢
    ։ൃͷྲྀΕΛͻͱͱ͓Γମݧ͠·ͨ͠
    NestJS Next.js

    View Slide

  106. ҎޙɺͲͷ෦෼ʹ֘౰͢Δ࡞ۀͳͷ͔

    Ͱ͖Δ͚ͩ໌ه͠·͢
    ։ൃͷྲྀΕΛͻͱͱ͓Γମݧ͠·ͨ͠
    NestJS Next.js
    ͜Μͳײ͡Ͱˠ

    View Slide


  107. τοϓϖʔδվम

    View Slide

  108. εΩοϓ͢Δ͕ಋೖ͢Δཁૉ
    όοΫΤϯυଆ
    1PTUHSF42-
    هࣄͷ߲໨௥Ճ
    1SJTNBʹΑΔ%#ΞΫηε
    ϑϩϯτΤϯυଆ
    .BUFSJBM6*ʢ.6*ʣͷಋೖ

    View Slide

  109. εΩοϓ͢Δ͕ಋೖ͢Δཁૉ
    όοΫΤϯυଆ
    1PTUHSF42-
    هࣄͷ߲໨௥Ճ
    1SJTNBʹΑΔ%#ΞΫηε
    ϑϩϯτΤϯυଆ
    .BUFSJBM6*ʢ.6*ʣͷಋೖ
    \
    JEGDDEEDEBDBDGFF
    UJUMF3BJMTͷECTFFEͰେྔσʔλͷ౤ೖ
    UZQFBSUJDMF
    FNPKJ💎
    QVCMJTI%BUF5;
    DPOUFOU1BUIQPTUTBSUJDMFTSBJMTQBSBMMFM
    TFFENE
    ^
    \
    JEEBBGEDGCED
    UJUMF࠷ڧΩʔϘʔυܾఆઓ
    UZQFEJBSZ
    FNPKJ💎
    QVCMJTI%BUF5;
    DPOUFOU1BUITUPSBHFQPTUTBSUJDMFTOFTUKTNE
    ^

    View Slide

  110. εΩοϓ͢Δ͕ಋೖ͢Δཁૉ
    όοΫΤϯυଆ
    1PTUHSF42-
    هࣄͷ߲໨௥Ճ
    1SJTNBʹΑΔ%#ΞΫηε
    ϑϩϯτΤϯυଆ
    .BUFSJBM6*ʢ.6*ʣͷಋೖ

    View Slide

  111. هࣄϒϩοΫɺ೔هϒϩοΫʹ෼͚͍ͨ
    %#ͷ߲໨ΛແࠎʹҰཡද͍ࣔͯ͠Δঢ়ଶ

    View Slide

  112. %#ͷ߲໨ʹର͢ΔߜΓࠐΈΛݕ౼
    όοΫΤϯυଆ
    1PTUHSF42-
    هࣄͷ߲໨௥Ճ
    1SJTNBʹΑΔ%#ΞΫηε
    ϑϩϯτΤϯυଆ
    .BUFSJBM6*ʢ.6*ʣͷಋೖ
    \
    JEGDDEEDEBDBDGFF
    UJUMF3BJMTͷECTFFEͰେྔσʔλͷ౤ೖ
    UZQFBSUJDMF
    FNPKJ💎
    QVCMJTI%BUF5;
    DPOUFOU1BUIQPTUTBSUJDMFTSBJMTQBSBMMFM
    TFFENE
    ^
    \
    JEEBBGEDGCED
    UJUMF࠷ڧΩʔϘʔυܾఆઓ
    UZQFEJBSZ
    FNPKJ💎
    QVCMJTI%BUF5;
    DPOUFOU1BUITUPSBHFQPTUTBSUJDMFTOFTUKTNE
    ^

    View Slide

  113. %#ͷ߲໨ʹର͢ΔߜΓࠐΈΛݕ౼
    όοΫΤϯυଆ
    1PTUHSF42-
    هࣄͷ߲໨௥Ճ
    1SJTNBʹΑΔ%#ΞΫηε
    ϑϩϯτΤϯυଆ
    .BUFSJBM6*ʢ.6*ʣͷಋೖ
    \
    JEGDDEEDEBDBDGFF
    UJUMF3BJMTͷECTFFEͰେྔσʔλͷ౤ೖ
    UZQFBSUJDMF
    FNPKJ💎
    QVCMJTI%BUF5;
    DPOUFOU1BUIQPTUTBSUJDMFTSBJMTQBSBMMFM
    TFFENE
    ^
    \
    JEEBBGEDGCED
    UJUMF࠷ڧΩʔϘʔυܾఆઓ
    UZQFEJBSZ
    FNPKJ💎
    QVCMJTI%BUF5;
    DPOUFOU1BUITUPSBHFQPTUTBSUJDMFTOFTUKTNE
    ^
    GraphQL Query Ͱ


    ύϥϝʔλΛड͚औΔඞཁ͕͋Δ

    View Slide

  114. (SBQI2-2VFSZ"SHVNFOUTͷར༻
    ྫ͑͹ɺهࣄΛBSJUJDMF͔EJBSZͰߜΓ͜Ή৔߹
    Query

    View Slide

  115. (SBQI2-2VFSZ"SHVNFOUTͷར༻
    ྫ͑͹ɺهࣄΛBSJUJDMF͔EJBSZͰߜΓ͜Ή৔߹
    Query
    ηοτͰόοΫΤϯυଆͷ


    ߜΓࠐΈػೳ΋ඞཁ

    View Slide

  116. ٕज़هࣄͱ೔هͰͦΕͧΕ݁Ռ͕΄͍͠
    Query

    View Slide

  117. ٕज़هࣄͱ೔هͰͦΕͧΕ݁Ռ͕΄͍͠
    Query
    ͜Ε͸ΤϥʔʹͳΔ

    View Slide

  118. (SBQI2-2VFSZ"MJBTFTͷར༻
    2VFSZʹରͯ͠ɺ೚ҙͷΩʔ໊ʢ"MJBTʣΛ͚ͭΔ
    Query

    View Slide

  119. (SBQI2-2VFSZ"MJBTFTͷར༻
    2VFSZʹରͯ͠ɺ೚ҙͷΩʔ໊ʢ"MJBTʣΛ͚ͭΔ
    Query

    View Slide

  120. (SBQI2-2VFSZ"MJBTFTͷར༻
    2VFSZʹରͯ͠ɺ೚ҙͷΩʔ໊ʢ"MJBTʣΛ͚ͭΔ
    Query
    posts.query.gql ʹॻ͘

    View Slide

  121. (SBQI2-2VFSZ"MJBTFTͷར༻
    2VFSZʹରͯ͠ɺ೚ҙͷΩʔ໊ʢ"MJBTʣΛ͚ͭΔ
    Query
    posts.query.gql ʹॻ͘
    yarn codegen ࣮ߦ

    View Slide

  122. 2VFSZઃܭ σʔλϑΣον ඳը
    📱
    Query urql Render
    GraphQL


    Code
    Generator
    GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ
    Next.js

    View Slide

  123. "MJBTFTʹΑΓผΩʔͰσʔλऔಘ
    AliasʹରԠͨ͠Ωʔ͕औಘͰ͖Δ
    urql

    View Slide

  124. (SBQI2-2VFSZ'SBHNFOUTͷར༻
    BSUJDMFTͱEJBSJFTɺࢦఆ͍ͯ͠ΔϑΟʔϧυ͕ಉ͡
    Query

    View Slide

  125. (SBQI2-2VFSZ'SBHNFOUTͷར༻
    BSUJDMFTͱEJBSJFTɺࢦఆ͍ͯ͠ΔϑΟʔϧυ͕ಉ͡
    Query

    View Slide

  126. (SBQI2-2VFSZ'SBHNFOUTͷར༻
    BSUJDMFTͱEJBSJFTɺࢦఆ͍ͯ͠ΔϑΟʔϧυ͕ಉ͡
    Query

    View Slide

  127. (SBQI2-2VFSZ'SBHNFOUTͷར༻
    BSUJDMFTͱEJBSJFTɺࢦఆ͍ͯ͠ΔϑΟʔϧυ͕ಉ͡
    Query
    yarn codegen ࣮ߦ

    View Slide

  128. "MJBTFTʹΑΓผΩʔͰσʔλऔಘ
    fragmentsʹରԠ͢Δܕ


    PostFragment ͕ࣗಈੜ੒
    Render

    View Slide

  129. "MJBTFTʹΑΓผΩʔͰσʔλऔಘ
    fragmentsʹରԠ͢Δܕ


    PostFragment ͕ࣗಈੜ੒
    Render

    View Slide

  130. "MJBTFTʹΑΓผΩʔͰσʔλऔಘ
    fragmentsʹରԠ͢Δܕ


    PostFragment ͕ࣗಈੜ੒
    Render
    PostFragment[] ͷඳըΛ


    PostListView ίϯϙʔωϯτʹҰ೚Ͱ͖Δ


    fragments ͱ ϑϩϯτΤϯυͷίϯϙʔωϯτ
    ΛରԠ͚ͮΔٕज़: ϑϥάϝϯτίϩέʔγϣϯ

    View Slide

  131. JOEFYUTY͕γϯϓϧʹ
    Render

    View Slide

  132. JOEFYUTY͕γϯϓϧʹ
    Render

    View Slide

  133. ݁Ռ

    View Slide

  134. ͜͜·ͰͰొ৔ͨ͠ཁૉ
    2VFSZ"SHVNFOUT
    2VFSZ΁ύϥϝʔλΛ౉͢
    ߜΓࠐΈͳͲɻ3&45GVM"1*ͷ2VFSZ
    1BSBNFUFSʹ͍ۙ
    2VFSZ"MJBTFT
    2VFSZʹ೚ҙͷ໊લΛ͚ͭΔ
    ಉ͡2VFSZͰҟͳΔߜΓࠐΈΛߦ͏৔߹ͳ
    ͲɻμογϡϘʔυը໘ͳͲͰظ଴
    'SBHNFOUT
    ϑΟʔϧυڞ௨Խ͢Δ
    ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚
    ϑϥάϝϯτίϩέʔγϣϯ

    View Slide


  135. هࣄຊจϖʔδ

    View Slide

  136. هࣄϖʔδͰऔಘ͍ͨ͠σʔλΛߟ͑Δ
    औಘ݅਺͸݅Ͱ0,
    63-ύε৘ใ͔Βಛఆ͍ͨ͠
    ຊจʢ.BSLEPXOʣΛऔಘ͍ͨ͠

    View Slide

  137. ϒϩάͷߏ੒
    هࣄϝλ৘ใ
    MarkdownϑΝΠϧ

    View Slide

  138. 2VFSZ͕ઌʹܾ·Δύλʔϯ

    View Slide

  139. ϑΟʔϧυݸผͷ3FTPMWFSΛఆٛ͢Δ
    Resolver
    CPEZ.BSLEPXOͱ͍͏ϑΟʔϧυ͕ࢦఆ͞Εͨͱ͖
    ͚ͩൃಈ͢Δ3FTPMWFSΛఆٛɹ
    औಘίετ͕ߴ͍ɺϩδοΫΛ੾Γ཭͍ͨ͠ϑΟʔϧυ
    ͷ3FTPMWFSΛ࣮૷͢Δͱ͖ʹ༗༻

    View Slide

  140. ·ͣ͸݅औಘ͢Δ
    fi
    OE1PTU͔Β
    Resolver

    View Slide

  141. ·ͣ͸݅औಘ͢Δ
    fi
    OE1PTU͔Β
    Resolver
    Argument Λఆٛ

    View Slide

  142. ϑΟʔϧυݸผͷ3FTPMWFSΛఆٛ͢Δ
    Resolver

    View Slide

  143. ϑΟʔϧυݸผͷ3FTPMWFSΛఆٛ͢Δ
    Resolver

    View Slide

  144. ϑΟʔϧυݸผͷ3FTPMWFSΛఆٛ͢Δ
    Resolver

    View Slide

  145. "QPMMP4UVEJPͰୟ͍ͯΈΔ
    Resolver

    View Slide

  146. "QPMMP4UVEJPͰୟ͍ͯΈΔ
    Resolver
    ͍͍ײ͡

    View Slide

  147. "QPMMP4UVEJPͰୟ͍ͯΈΔ
    Resolver
    contentPath, titleͱ


    bodyMarkdownͰ


    ࣮૷͕ผ

    View Slide

  148. /FYUKTଆɺ2VFSZΛ௥Ճ
    Ұཡͱಉ͡ϑΝΠϧʹ௥هͯ͠0,
    Query
    ↓ৄࡉϖʔδ༻ͷQueryΛ௥ه

    View Slide

  149. /FYUKTଆɺ2VFSZΛ௥Ճ
    Ұཡͱಉ͡ϑΝΠϧʹ௥هͯ͠0,
    Query
    yarn codegen ࣮ߦ
    ↓ৄࡉϖʔδ༻ͷQueryΛ௥ه

    View Slide

  150. /FYUKTଆɺ2VFSZΛ௥Ճ
    Ұཡͱಉ͡ϑΝΠϧʹ௥هͯ͠0,
    Query
    ↓ৄࡉϖʔδ༻ͷQueryΛ௥ه
    PostDetailPageDocument


    = Queryจࣈྻɹ͕ੜ੒͞ΕΔ

    View Slide

  151. QPTUT<TMVH>JOEFYUTY
    urql

    View Slide

  152. QPTUT<TMVH>JOEFYUTY
    urql

    View Slide

  153. खʹೖΕͨ)5.-Λ࢖ͬͯඳը
    Render
    https://zenn.dev/waddy/articles/intro-zenn-markdown

    View Slide

  154. खʹೖΕͨ)5.-Λ࢖ͬͯඳը
    Render

    View Slide

  155. Ұཡຊจ͕࣮૷Ͱ͖ͨ
    Next.js

    View Slide

  156. ͜͜·ͰͰొ৔ͨ͠ཁૉ
    2VFSZ"SHVNFOUT
    2VFSZ΁ύϥϝʔλΛ౉͢
    ߜΓࠐΈͳͲɻ3&45GVM"1*ͷ2VFSZ
    1BSBNFUFSʹ͍ۙ
    2VFSZ"MJBTFT
    2VFSZʹ೚ҙͷ໊લΛ͚ͭΔ
    ಉ͡2VFSZͰҟͳΔߜΓࠐΈΛߦ͏৔߹ͳ
    ͲɻμογϡϘʔυը໘ͳͲͰظ଴
    'SBHNFOUT
    ϑΟʔϧυڞ௨Խ͢Δ
    ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚
    ϑϥάϝϯτίϩέʔγϣϯ
    'JFME3FTPMWFS
    ಛఆϑΟʔϧυઐ༻3FTPMWFS
    औಘʹίετ͕ߴ͍'JFMEͳͲ΁ݸผͷ
    3FTPMWFSΛׂΓ౰ͯΔ࢓༷

    View Slide


  157. ίϝϯτػೳ

    View Slide

  158. هࣄຊจʹ͚ͬͭ͘Δ͜Εͷ͜ͱ
    Next.js

    View Slide

  159. هࣄຊจʹ͚ͬͭ͘Δ͜Εͷ͜ͱ
    Next.js
    ݱ࣮Ͱຊ౰ʹඞཁ͔Ͳ͏͔ͱ͍͏࿩͸͋Δ͕ɺ


    Mutation ͷαϯϓϧͱ࣮ͯ͠૷͠·͠ΐ͏


    View Slide

  160. εΩοϓ͢Δ͕࣮૷͢Δཁૉ
    όοΫΤϯυଆ
    ίϝϯτʢJNQSFTTJPOTʣςʔϒϧΛ௥Ճ
    QPTUTςʔϒϧͷࢠͱ͢Δ
    هࣄʹඥͮ͘JNQSFTTJPOTΛಡΈग़͢2VFSZ

    View Slide

  161. εΩοϓ͢Δ͕࣮૷͢Δཁૉ
    όοΫΤϯυଆ
    ίϝϯτʢJNQSFTTJPOTʣςʔϒϧΛ௥Ճ
    QPTUTςʔϒϧͷࢠͱ͢Δ
    هࣄʹඥͮ͘JNQSFTTJPOTΛಡΈग़͢2VFSZ
    {


    "id": "394474e1-51f4-4fe5-a498-e804cbceeadd",


    "sticker": "Thanks",


    "comment": "ࢀߟʹͳͬͨ",


    "postId": "fc8c04d6-6007-03dc-da13-c9ac29fe66e7",


    "twitterId": "waddy_u",


    "createdAt": "2022-01-30T19:34:22.000Z"


    },

    View Slide

  162. *NQSFTTJPOͷ.VUBUJPO
    Resolver

    View Slide

  163. *NQSFTTJPOͷ.VUBUJPO
    Resolver

    View Slide

  164. *NQSFTTJPOͷ.VUBUJPO
    Schema

    View Slide

  165. *NQSFTTJPOͷ.VUBUJPO
    Schema
    input ͭ·Γ


    Mutation ͷೖྗʹରԠ


    View Slide

  166. *NQSFTTJPOͷ.VUBUJPO
    Schema
    input CreateImpressionInput {


    comment: String


    postId: String!


    sticker: String!


    twitterId: String


    }


    ↑schema.gql

    View Slide

  167. *NQSFTTJPOͷ.VUBUJPO
    Schema

    View Slide

  168. ϑϩϯτΤϯυଆɿऔಘ͸Πϝʔδ͕༙͘
    ຊจऔಘ࣌ʹɺ*NQSFTTJPO΋औಘ͢Δ
    Query

    View Slide

  169. ϑϩϯτΤϯυଆɿऔಘ͸Πϝʔδ͕༙͘
    Query

    View Slide

  170. ϑϩϯτΤϯυଆɿऔಘ͸Πϝʔδ͕༙͘
    Query

    View Slide

  171. .VUBUJPOͷ࣮ߦ͸ɺϒϥ΢β͔Β
    ͜Ε·Ͱ͸HFU4FSWFS4JEF1SPQTͰσʔλΛऔಘ
    ͠ɺϨϯμϦϯάʹ࢖͍ͬͯͨ
    HFU4FSWFS4JEF1SPQT͸/FYUKTαʔόʔ͔Β
    /FTU+4αʔόʔ΁ͷ௨৴
    Next.js

    View Slide

  172. .VUBUJPOͷ࣮ߦ͸ɺϒϥ΢β͔Β
    ͜Ε·Ͱ͸HFU4FSWFS4JEF1SPQTͰσʔλΛऔಘ
    ͠ɺϨϯμϦϯάʹ࢖͍ͬͯͨ
    HFU4FSWFS4JEF1SPQT͸/FYUKTαʔόʔ͔Β
    /FTU+4αʔόʔ΁ͷ௨৴
    Next.js

    View Slide

  173. .VUBUJPOͷ࣮ߦ͸ɺϒϥ΢β͔Β
    ϑΥʔϜೖྗૹ৴ͨ͠ͱ͖ɺ୭͕Ͳ͜ʹૹΔʁ
    ϒϥ΢β͕/FTU+4αʔόʔʹ.VUBUJPOΛૹΔ
    Next.js

    View Slide

  174. .VUBUJPOͷ࣮ߦ͸ɺϒϥ΢β͔Β
    ϑΥʔϜೖྗૹ৴ͨ͠ͱ͖ɺ୭͕Ͳ͜ʹૹΔʁ
    ϒϥ΢β͕/FTU+4αʔόʔʹ.VUBUJPOΛૹΔ
    Next.js

    View Slide

  175. .VUBUJPOͷ࣮ߦ͸ɺϒϥ΢β͔Β
    ϑΥʔϜೖྗૹ৴ͨ͠ͱ͖ɺ୭͕Ͳ͜ʹૹΔʁ
    ϒϥ΢β͕/FTU+4αʔόʔʹ.VUBUJPOΛૹΔ
    Next.js
    React ίϯϙʔωϯτ͔Β
    DomEvent ʹ൓Ԡͯ͠ͳʹ
    ͔͢Δͱ͖


    => React Hooks ͕࢖͑Δ

    View Slide

  176. *NQSFTTJPO࡞੒ͷIPPLTΛߟ͑Δ
    Next.js
    ϑΥʔϜೖྗૹ৴ͨ͠ͱ͖ɺ.VUBUJPOΛ࣮ߦͰ͖
    Ε͹Αͦ͞͏ɻ
    ˣΈ͍ͨͳΠϝʔδ

    View Slide

  177. .VUBUJPOΛఆٛ
    Query

    View Slide

  178. .VUBUJPOΛఆٛ
    Query
    yarn codegen

    View Slide

  179. .VUBUJPOΛఆٛ
    Query
    yarn codegen

    View Slide

  180. .VUBUJPOΛఆٛ
    Query
    hooks Λࣗಈੜ੒ͯ͘͠Ε
    Δɻਆɻ

    View Slide

  181. (SBQI2-$PEF(FOFSBUPSΛಋೖ

    codegen.yml
    posts.query.gql

    View Slide

  182. (SBQI2-$PEF(FOFSBUPSΛಋೖ

    codegen.yml
    posts.query.gql
    ͜ͷਓͷ͓͔͛


    View Slide

  183. ϑΥʔϜૹ৴ͰIPPLTΛ࣮ߦ
    Render

    View Slide

  184. ϑΥʔϜૹ৴ͰIPPLTΛ࣮ߦ
    Render

    View Slide

  185. ͜͜·ͰͰొ৔ͨ͠ཁૉ
    2VFSZ"SHVNFOUT
    2VFSZ΁ύϥϝʔλΛ౉͢
    ߜΓࠐΈͳͲɻ3&45GVM"1*ͷ2VFSZ
    1BSBNFUFSʹ͍ۙ
    2VFSZ"MJBTFT
    2VFSZʹ೚ҙͷ໊લΛ͚ͭΔ
    ಉ͡2VFSZͰҟͳΔߜΓࠐΈΛߦ͏৔߹ͳ
    ͲɻμογϡϘʔυը໘ͳͲͰظ଴
    'SBHNFOUT
    ϑΟʔϧυڞ௨Խ͢Δ
    ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚
    ϑϥάϝϯτίϩέʔγϣϯ
    /FTUFE'JFME
    ϑΟʔϧυͰؔ܎Λදݱ
    l(SBQIzͨΔॴҎͰ΋͋ΔɻϒϩάͷྫͰ
    ͸هࣄͱίϝϯτͷ਌ࢠؔ܎Ͱར༻
    'JFME3FTPMWFS
    ಛఆϑΟʔϧυઐ༻3FTPMWFS
    औಘʹίετ͕ߴ͍'JFMEͳͲ΁ݸผͷ
    3FTPMWFSΛׂΓ౰ͯΔ࢓༷
    .VUBUJPO
    ϒϥ΢β͔Βͷܦ࿏͕ൃੜ
    (SBQI2-$PEF(FOFSBUPSΛ࢖͑͹
    3FBDU)PPLTͱͯ͠࢖͑Δ

    View Slide


  186. NJDSP$.4͔Βσʔλऔಘ

    View Slide

  187. NJDSP$.4ͱ͸
    ࡞੒ͨ͠ίϯςϯπΛAPIͰฦͤΔ


    ೔ຊ੡ CMS αʔϏε
    https://microcms.io

    View Slide

  188. ϒϩάͷߏ੒
    هࣄϝλ৘ใ
    MarkdownϑΝΠϧ

    View Slide

  189. ϒϩάͷߏ੒
    هࣄϝλ৘ใ
    MarkdownϑΝΠϧ
    ϓϩϑΟʔϧ

    View Slide

  190. ϒϩάͷߏ੒
    هࣄϝλ৘ใ
    MarkdownϑΝΠϧ
    ϓϩϑΟʔϧ
    ֎෦αʔϏε͔Β


    σʔλΛऔಘ͢Δྫ


    View Slide


  191. σϞ or ίʔυϦʔσΟϯά


    ʢ͕࣌ؒ͋Ε͹ʣ

    View Slide

  192. ʢ͕࣌ؒͳ͚Ε͹ʣ݁Ռ

    View Slide

  193. ʢ͕࣌ؒͳ͚Ε͹ʣ݁Ռ

    View Slide

  194. ʢ͕࣌ؒͳ͚Ε͹ʣ݁Ռ
    ϑϩϯτΤϯυͱͯ͠͸


    ཪଆ͕DBͳͷ͔


    SaaSͳͷ͔


    ؾʹͤͣQueryΛߏ੒Ͱ͖Δ

    View Slide

  195. ࣮ફฤ
    ϒϩάτοϓϖʔδͷ࣮૷
    τοϓϖʔδվम
    ϒϩάهࣄຊจϖʔδ
    ίϝϯτػೳ
    NJDSP$.4ͰϓϩϑΟʔϧ؅ཧ

    View Slide

  196. ͜͜·ͰͰొ৔ͨ͠ཁૉ
    2VFSZ"SHVNFOUT
    2VFSZ΁ύϥϝʔλΛ౉͢
    ߜΓࠐΈͳͲɻ3&45GVM"1*ͷ2VFSZ
    1BSBNFUFSʹ͍ۙ
    2VFSZ"MJBTFT
    2VFSZʹ೚ҙͷ໊લΛ͚ͭΔ
    ಉ͡2VFSZͰҟͳΔߜΓࠐΈΛߦ͏৔߹ͳ
    ͲɻμογϡϘʔυը໘ͳͲͰظ଴
    'SBHNFOUT
    ϑΟʔϧυڞ௨Խ͢Δ
    ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚
    ϑϥάϝϯτίϩέʔγϣϯ
    /FTUFE'JFME
    ϑΟʔϧυͰؔ܎Λදݱ
    l(SBQIzͨΔॴҎͰ΋͋ΔɻϒϩάͷྫͰ
    ͸هࣄͱίϝϯτͷ਌ࢠؔ܎Ͱར༻
    'JFME3FTPMWFS
    ಛఆϑΟʔϧυઐ༻3FTPMWFS
    औಘʹίετ͕ߴ͍'JFMEͳͲ΁ݸผͷ
    3FTPMWFSΛׂΓ౰ͯΔ࢓༷
    .VUBUJPO
    ϒϥ΢β͔Βͷܦ࿏͕ൃੜ
    (SBQI2-$PEF(FOFSBUPSΛ࢖͑͹
    3FBDU)PPLTͱͯ͠࢖͑Δ
    ֎෦αʔϏεͱ࿈ܞ
    (SBQI2-αʔόʔͰٵऩ
    ϑϩϯτΤϯυ͔Β2VFSZΛઃܭ͢Δͱ
    ͖ɺཪଆΛؾʹ͢Δඞཁ͕ͳ͍

    View Slide


  197. ͓ΘΓʹ

    View Slide

  198. গ͠Ͱ΋(SBQI2-Λ࢖͏Πϝʔδ͕༙͍ͨΒخ͍͠Ͱ͢
    3&45GVM"1*Λஔ͖׵͑Δ΋ͷͰ͸ͳ͍ɺదࡐదॴ
    ͨͩɺ"MJBTFT 'SBHNFOUT 'JFME3FTPMWFSͱ͍ͬ
    ͨڧྗͳ࢓༷ͷ΋ͱɺ࢖͏ଆͰ2VFSZΛߏ੒Ͱ͖Δ఺
    ͕ັྗ
    ΞϓϦέʔγϣϯΛૄ݁߹ʹͰ͖ΔϙΠϯτ૊৫Λ
    εέʔϧͤ͞ΔͨΊͷ෼ۀϙΠϯτ
    ݸਓ։ൃͰ΋"1*αʔόʔ͕/FTU+4ͻͱͭͰࡁΉ͔΋

    View Slide

  199. ࠓ೔ͷ಺༰͸;FOOͷຊͰചͬͯ·͢
    https://zenn.dev/waddy/books/graphql-nestjs-nextjs-bootcamp

    View Slide

  200. ࢀߟจݙ
    https://www.oreilly.co.jp/books/9784873118932/ https://booth.pm/ja/items/1576562 https://www.oreilly.co.jp/books/9784873119380/

    View Slide

  201. View Slide