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

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

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

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

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

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