$30 off During Our Annual Pro Sale. View Details »

個人ブログサイトを構築して学ぶ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  Ϋϥεϝιουגࣜձࣾ࿨ా༞հ

  2. ࠓ೔  GraphQLͷ࿩

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

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

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

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

  7.  ·ͨ͸

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

  9.  🤔

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

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

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

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

  14. εϥΠυ͸ޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ ൃදதͷ಺༰ΛϝϞ͢Δඞཁ͸͋Γ·ͤΜɻ ࣸਅࡱӨΛ͢Δ৔߹͸ ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹ͝഑ྀ͍ͩ͘͞ Attention

  15. ࣗݾ঺հ  ࿨ా༞հ Ϋϥεϝιουגࣜձࣾ ৽نࣄۀ౷ׅ෦;FOOνʔϜ XBEEZ@V  "84 4DBMBʹΑΔ8FC"1* 

    "84αʔόʔϨε 3FDU41"  (PPHMF$MPVE 3BJMT /FYUKTʢࠓ͜͜ʣ
  16. ;FOOͱ͸  *5ΤϯδχΞͷͨΊͷ৘ใڞ༗ίϛϡχςΟ

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

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

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

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

  21.  (SBQI2-ͱ͸

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

  23. ࢓༷Ͱ͢  ن֨ɾཁٻࣄ߲ͷू·Γ ೥.FUBʢ౰࣌'BDFCPPLʣ͕ࣾൃදͨ͠ FacebookΞϓϦͷχϡʔεϑΟʔ υΛϚϧνσόΠε΁ఏڙ͍ͨ͠ Ϩεϙϯεߏ଄ΛϑϩϯτΤϯυ ͰܾΊΒΕΔΑ͏ʹ͢ΔAPIΛͭ͘ Δ͜ͱʹ

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

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

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

    GraphQL͸ΫΤϦݴޠͰ͋Δ GraphQLόοΫΤϯυͱ ͦΕΛ࢖͏GraphQLϑϩϯτ Τϯυ͕ొ৔͢Δ
  27.  (JU)VC"1*Ͱମݧ

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

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

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

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

  32. "QPMMP4FSWFSͷαϯϓϧΛഈआ  GraphQL ͷόοΫΤϯυ ͔ΒϑϩϯτΤϯυ·Ͱ ϫϯετοϓ ιϦϡʔγϣϯΛఏڙ͢Δ ϓϥοτϑΥʔϜ

  33. 4DIFNB 

  34. σʔλϩδοΫ 

  35. 3FTPMWFS 

  36. αʔόʔىಈ 

  37. "QPMMP4UVEJP  GraphQL αʔόʔ΁઀ଓ Ͱ͖Δϒϥ΢βπʔϧ ϩʔΧϧαʔόʔ΁΋ΞΫ ηεՄೳ Apollo ༷༷Ͱ͢

  38. "QPMMP4UVEJPIUUQMPDBMIPTU 

  39. "QPMMP4UVEJPIUUQMPDBMIPTU 

  40. "QPMMP4UVEJPIUUQMPDBMIPTU 

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

  42. "QPMMP4UVEJPIUUQMPDBMIPTU 

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

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

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

  46. GraphQLόοΫΤϯυͷߏ੒ཁૉɹɹɹɹɹɹ Schema Resolver Data ͲΕ͚ͩ૖େʹͳͬͯ΋ ͜ͷجຊߏ੒ཁૉ͸ ͔ΘΒͳ͍

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

  48. "QPMMP$MJFOUΛॳظԽ 

  49. ݺͿ2VFSZΛܾఆ 

  50. ϑΣονˍඳը 

  51. ϑΣονˍඳը  [ { title: 'The Awakening', author: 'Kate Chopin',

    }, { title: 'City of Glass', author: 'Paul Auster', }, ]
  52. GraphQLϑϩϯτΤϯυ։ൃͷྲྀΕ 2VFSZઃܭ σʔλϑΣον ඳը 📱 Query data Render

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

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

  55. (SBQI2-όοΫΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ  3&45GVMIUUQFYBNQMFDPNQPTUT ͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ 
 Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ʣ ࣮૷ͨ࣌͠఺ͰɺϑϩϯτΤϯυʹυΩϡϝϯτͱαϯυ ϘοΫε؀ڥʢ"QPMMP4UVEJPʣΛఏڙͰ͖Δ఺͕ڧΈ

  56. (SBQI2-όοΫΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ  ωΰγΤʔγϣϯ=ௐ੔ͷख͕ؒݮΔ Ϗδωεɾ૊৫ͷεέʔϧʹ଱͑͏Δ 3&45GVMIUUQFYBNQMFDPNQPTUT ͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ 
 Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ʣ ࣮૷ͨ࣌͠఺ͰɺϑϩϯτΤϯυʹυΩϡϝϯτͱαϯυ

    ϘοΫε؀ڥʢ"QPMMP4UVEJPʣΛఏڙͰ͖Δ఺͕ڧΈ
  57. (SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ  3&45GVMͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ 
 Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍

  58. (SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ  3&45GVMͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ 
 Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ ը໘ͷඳըʹඞཁे෼ͳσʔλΛऔಘ͠ɺσʔλπϦʔͱί ϯϙʔωϯτπϦʔΛҰகͤ͞ΒΕΔ఺͕ϝϦοτ

  59. (SBQI2-ϑϩϯτΤϯυΛ࠾༻͢ΔϞνϕʔγϣϯ  3&45GVMͳ"1*ͱൺ΂ͯʜ ύϑΥʔϚϯε্͕͕Δɺ࣮૷͕ૣ͘ࡁΉ 
 Ұ੾ͳ͍ʢ3&45GVM(SBQI2-ʹΑΔ࿩Ͱ͸ͳ͍ ը໘ͷඳըʹඞཁे෼ͳσʔλΛऔಘ͠ɺσʔλπϦʔͱί ϯϙʔωϯτπϦʔΛҰகͤ͞ΒΕΔ఺͕ϝϦοτ ωΰγΤʔγϣϯ=ௐ੔ͷख͕ؒݮΔ ίϯϙʔωϯτͷϝϯςφϯεੑ޲্͕ظ଴Ͱ͖Δ

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

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

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

  63. (SBQI2-όοΫΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏  TypeScript ʹΑΔόοΫΤϯυΞϓϦFW AngularΠϯεύΠΞυͳModule؅ཧ Apollo Server ϥΠϒϥϦʹΑΔGraphQL

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

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

  66. (SBQI2-ϑϩϯτΤϯυɺϑϨʔϜϫʔΫԿʹ͠Α͏  by TypeScript ʹΑΔϑϩϯτΤϯυΞϓϦFW ϧʔςΟϯάαϙʔτ Server Rendering ΋αϙʔτɺReactϕʔε

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

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

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

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

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

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

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

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

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

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

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

    GraphQL Schema TypeScriptϑΝΠϧ ͪ͜ΒΛ࠾༻ʢΦεεϝʣ TSͷίʔσΟϯάʹूதͰ͖Δ SchemaΛਖ਼ʹ͍ͨ͠ ։ൃνʔϜͰ༗༻
  78. ίʔυϑΝʔετΞϓϩʔνͰͷ։ൃ   (SBQI2-.PEVMFॳظԽ  .PEFMΫϥεͷఆٛ  σʔλΛฦ͢ϩδοΫΛ༻ҙ  3FTPMWFSΫϥεͰඥ෇͚

  79. (SBQI2-.PEVMFॳظԽ 

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

  81. .PEFMΫϥεͷఆٛ 

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

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

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

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

    ಈͰ͖Δ
  86. ࣗಈੜ੒͞Εͨ4DIFNBϑΝΠϧ  ։ൃதɺSchemaͷ͜ͱΛ ؾʹ͠ͳͯ͘Α͘ͳΔʂ

  87. "QPMMP4UVEJPͰ֬ೝͰ͖·͢ 

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

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

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

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

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

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

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

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

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

  97. (SBQI2-$PEF(FOFSBUPSΛಋೖ  2VFSZΛ5ZQF4DSJQUͳͲʹग़ྗͰ͖ΔΤίγεςϜ  ZBSODPEFHFO GraphQL query TypeScriptϑΝΠϧ

  98. (SBQI2-$PEF(FOFSBUPSΛಋೖ  2VFSZΛ5ZQF4DSJQUͳͲʹग़ྗͰ͖ΔΤίγεςϜ  ZBSODPEFHFO GraphQL query TypeScriptϑΝΠϧ ը໘։ൃதɺSchemaͷ͜ͱΛ ؾʹ͠ͳͯ͘Α͘ͳΔʂ

  99. (SBQI2-$PEF(FOFSBUPSΛಋೖ   codegen.yml posts.query.gql

  100. (SBQI2-$PEF(FOFSBUPSΛಋೖ   codegen.yml posts.query.gql yarn codegen

  101. (SBQI2-$PEF(FOFSBUPSΛಋೖ   generaterd.graphql.ts

  102. (SBQI2-$PEF(FOFSBUPSΛಋೖ   ࣗಈੜ੒͞ΕͨTypeScriptϑΝΠϧ͕ importͯ͠࢖͑Δ => GraphQL ͱ TypeScript Λ੾Γ཭ͤΔ

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

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

    GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ Next.js
  105. ҎޙɺͲͷ෦෼ʹ֘౰͢Δ࡞ۀͳͷ͔ 
 Ͱ͖Δ͚ͩ໌ه͠·͢ ։ൃͷྲྀΕΛͻͱͱ͓Γମݧ͠·ͨ͠  NestJS Next.js

  106. ҎޙɺͲͷ෦෼ʹ֘౰͢Δ࡞ۀͳͷ͔ 
 Ͱ͖Δ͚ͩ໌ه͠·͢ ։ൃͷྲྀΕΛͻͱͱ͓Γମݧ͠·ͨ͠  NestJS Next.js ͜Μͳײ͡Ͱˠ

  107.  τοϓϖʔδվम

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

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

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

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

  112. %#ͷ߲໨ʹର͢ΔߜΓࠐΈΛݕ౼  όοΫΤϯυଆ 1PTUHSF42- هࣄͷ߲໨௥Ճ 1SJTNBʹΑΔ%#ΞΫηε ϑϩϯτΤϯυଆ .BUFSJBM6*ʢ.6*ʣͷಋೖ \ JEGDDEEDEBDBDGFF

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

     UJUMF3BJMTͷECTFFEͰେྔσʔλͷ౤ೖ  UZQFBSUJDMF  FNPKJ💎  QVCMJTI%BUF5;  DPOUFOU1BUIQPTUTBSUJDMFTSBJMTQBSBMMFM TFFENE ^ \ JEEBBGEDGCED  UJUMF࠷ڧΩʔϘʔυܾఆઓ  UZQFEJBSZ  FNPKJ💎  QVCMJTI%BUF5;  DPOUFOU1BUITUPSBHFQPTUTBSUJDMFTOFTUKTNE ^  GraphQL Query Ͱ ύϥϝʔλΛड͚औΔඞཁ͕͋Δ
  114. (SBQI2-2VFSZ"SHVNFOUTͷར༻  ྫ͑͹ɺهࣄΛBSJUJDMF͔EJBSZͰߜΓ͜Ή৔߹ Query

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

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

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

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

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

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

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

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

    GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ Next.js
  123. "MJBTFTʹΑΓผΩʔͰσʔλऔಘ  AliasʹରԠͨ͠Ωʔ͕औಘͰ͖Δ urql

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

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

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

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

  128. "MJBTFTʹΑΓผΩʔͰσʔλऔಘ  fragmentsʹରԠ͢Δܕ PostFragment ͕ࣗಈੜ੒ Render

  129. "MJBTFTʹΑΓผΩʔͰσʔλऔಘ  fragmentsʹରԠ͢Δܕ PostFragment ͕ࣗಈੜ੒ Render

  130. "MJBTFTʹΑΓผΩʔͰσʔλऔಘ  fragmentsʹରԠ͢Δܕ PostFragment ͕ࣗಈੜ੒ Render PostFragment[] ͷඳըΛ PostListView ίϯϙʔωϯτʹҰ೚Ͱ͖Δ

    fragments ͱ ϑϩϯτΤϯυͷίϯϙʔωϯτ ΛରԠ͚ͮΔٕज़: ϑϥάϝϯτίϩέʔγϣϯ
  131. JOEFYUTY͕γϯϓϧʹ  Render

  132. JOEFYUTY͕γϯϓϧʹ  Render

  133. ݁Ռ 

  134. ͜͜·ͰͰొ৔ͨ͠ཁૉ  2VFSZ"SHVNFOUT 2VFSZ΁ύϥϝʔλΛ౉͢ ߜΓࠐΈͳͲɻ3&45GVM"1*ͷ2VFSZ 1BSBNFUFSʹ͍ۙ 2VFSZ"MJBTFT 2VFSZʹ೚ҙͷ໊લΛ͚ͭΔ ಉ͡2VFSZͰҟͳΔߜΓࠐΈΛߦ͏৔߹ͳ ͲɻμογϡϘʔυը໘ͳͲͰظ଴

    'SBHNFOUT ϑΟʔϧυڞ௨Խ͢Δ ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚ ϑϥάϝϯτίϩέʔγϣϯ
  135.  هࣄຊจϖʔδ

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

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

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

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

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

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

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

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

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

  145. "QPMMP4UVEJPͰୟ͍ͯΈΔ  Resolver

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

  147. "QPMMP4UVEJPͰୟ͍ͯΈΔ  Resolver contentPath, titleͱ bodyMarkdownͰ ࣮૷͕ผ

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

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

  150. /FYUKTଆɺ2VFSZΛ௥Ճ  Ұཡͱಉ͡ϑΝΠϧʹ௥هͯ͠0, Query ↓ৄࡉϖʔδ༻ͷQueryΛ௥ه PostDetailPageDocument = Queryจࣈྻɹ͕ੜ੒͞ΕΔ

  151. QPTUT<TMVH>JOEFYUTY  urql

  152. QPTUT<TMVH>JOEFYUTY  urql

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

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

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

  156. ͜͜·ͰͰొ৔ͨ͠ཁૉ  2VFSZ"SHVNFOUT 2VFSZ΁ύϥϝʔλΛ౉͢ ߜΓࠐΈͳͲɻ3&45GVM"1*ͷ2VFSZ 1BSBNFUFSʹ͍ۙ 2VFSZ"MJBTFT 2VFSZʹ೚ҙͷ໊લΛ͚ͭΔ ಉ͡2VFSZͰҟͳΔߜΓࠐΈΛߦ͏৔߹ͳ ͲɻμογϡϘʔυը໘ͳͲͰظ଴

    'SBHNFOUT ϑΟʔϧυڞ௨Խ͢Δ ίϯϙʔωϯτͱରԠ෇͚ͯඳըΛҰ೚ ϑϥάϝϯτίϩέʔγϣϯ 'JFME3FTPMWFS ಛఆϑΟʔϧυઐ༻3FTPMWFS औಘʹίετ͕ߴ͍'JFMEͳͲ΁ݸผͷ 3FTPMWFSΛׂΓ౰ͯΔ࢓༷
  157.  ίϝϯτػೳ

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

  159. هࣄຊจʹ͚ͬͭ͘Δ͜Εͷ͜ͱ  Next.js ݱ࣮Ͱຊ౰ʹඞཁ͔Ͳ͏͔ͱ͍͏࿩͸͋Δ͕ɺ Mutation ͷαϯϓϧͱ࣮ͯ͠૷͠·͠ΐ͏

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

  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" },
  162. *NQSFTTJPOͷ.VUBUJPO  Resolver

  163. *NQSFTTJPOͷ.VUBUJPO  Resolver

  164. *NQSFTTJPOͷ.VUBUJPO  Schema

  165. *NQSFTTJPOͷ.VUBUJPO  Schema input ͭ·Γ Mutation ͷೖྗʹରԠ

  166. *NQSFTTJPOͷ.VUBUJPO  Schema input CreateImpressionInput { comment: String postId: String!

    sticker: String! twitterId: String } ↑schema.gql
  167. *NQSFTTJPOͷ.VUBUJPO  Schema

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

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

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

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

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

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

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

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

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

  177. .VUBUJPOΛఆٛ  Query

  178. .VUBUJPOΛఆٛ  Query yarn codegen

  179. .VUBUJPOΛఆٛ  Query yarn codegen

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

  181. (SBQI2-$PEF(FOFSBUPSΛಋೖ   codegen.yml posts.query.gql

  182. (SBQI2-$PEF(FOFSBUPSΛಋೖ   codegen.yml posts.query.gql ͜ͷਓͷ͓͔͛

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

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

  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ͱͯ͠࢖͑Δ
  186.  NJDSP$.4͔Βσʔλऔಘ

  187. NJDSP$.4ͱ͸  ࡞੒ͨ͠ίϯςϯπΛAPIͰฦͤΔ ೔ຊ੡ CMS αʔϏε https://microcms.io

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

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

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

  191.  σϞ or ίʔυϦʔσΟϯά ʢ͕࣌ؒ͋Ε͹ʣ

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

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

  194. ʢ͕࣌ؒͳ͚Ε͹ʣ݁Ռ  ϑϩϯτΤϯυͱͯ͠͸ ཪଆ͕DBͳͷ͔ SaaSͳͷ͔ ؾʹͤͣQueryΛߏ੒Ͱ͖Δ

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

  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Λઃܭ͢Δͱ ͖ɺཪଆΛؾʹ͢Δඞཁ͕ͳ͍
  197.  ͓ΘΓʹ

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

    ݸਓ։ൃͰ΋"1*αʔόʔ͕/FTU+4ͻͱͭͰࡁΉ͔΋
  199. ࠓ೔ͷ಺༰͸;FOOͷຊͰചͬͯ·͢  https://zenn.dev/waddy/books/graphql-nestjs-nextjs-bootcamp

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

  201. None