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

by Yusuke Wada

Slide 1

Slide 1 text

ݸਓϒϩάΛ࡞ֶͬͯͿ(SBQI2- /FTU+4/FYUKT Ϋϥεϝιουגࣜձࣾ࿨ా༞հ

Slide 2

Slide 2 text

ࠓ೔ GraphQLͷ࿩

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

·ͨ͸

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

🤔

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

(SBQI2-ͱ͸

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

΍΍͍͜͠ (SBQI2-࢓༷ʹରͯ͠ɺ࣮૷͢ΔͨΊͷखஈ͕ͨ͘͞ Μ͋Δঢ়ଶ

Slide 26

Slide 26 text

΍΍͍͜͠ (SBQI2-࢓༷ʹରͯ͠ɺ࣮૷͢ΔͨΊͷखஈ͕ͨ͘͞ Μ͋Δঢ়ଶ Introduction to Apollo Server; https://www.apollographql.com/docs/apollo-server/ มΘΒͳ͍͜ͱɿ GraphQL͸ΫΤϦݴޠͰ͋Δ GraphQLόοΫΤϯυͱ ͦΕΛ࢖͏GraphQLϑϩϯτ Τϯυ͕ొ৔͢Δ

Slide 27

Slide 27 text

(JU)VC"1*Ͱମݧ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

"QPMMP4FSWFSͷαϯϓϧΛഈआ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

4DIFNB

Slide 34

Slide 34 text

σʔλϩδοΫ

Slide 35

Slide 35 text

3FTPMWFS

Slide 36

Slide 36 text

αʔόʔىಈ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

"QPMMP4UVEJPIUUQMPDBMIPTU

Slide 39

Slide 39 text

"QPMMP4UVEJPIUUQMPDBMIPTU

Slide 40

Slide 40 text

"QPMMP4UVEJPIUUQMPDBMIPTU

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

"QPMMP4UVEJPIUUQMPDBMIPTU

Slide 43

Slide 43 text

"QPMMP4UVEJPIUUQMPDBMIPTU HTTPϦΫΤετͰ͖Δ

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

"QPMMP$MJFOUΛॳظԽ

Slide 49

Slide 49 text

ݺͿ2VFSZΛܾఆ

Slide 50

Slide 50 text

ϑΣονˍඳը

Slide 51

Slide 51 text

ϑΣονˍඳը [ { title: 'The Awakening', author: 'Kate Chopin', }, { title: 'City of Glass', author: 'Paul Auster', }, ]

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Ϟνϕʔγϣϯͱٕज़ελοΫߟ࡯

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

/FTU+4ͷ৔߹ (SBQI2-4DIFNBΛ࡞Δํ๏͕;ͨͭ͋Δ ίʔυϑΝʔετ Ξϓϩʔν TypeScriptϑΝΠϧ GraphQL Schema εΩʔϚϑΝʔετ Ξϓϩʔν GraphQL Schema TypeScriptϑΝΠϧ ͪ͜ΒΛ࠾༻ʢΦεεϝʣ TSͷίʔσΟϯάʹूதͰ͖Δ SchemaΛਖ਼ʹ͍ͨ͠ ։ൃνʔϜͰ༗༻

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

(SBQI2-.PEVMFॳظԽ

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

.PEFMΫϥεͷఆٛ

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

"QPMMP4UVEJPͰ֬ೝͰ͖·͢

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

σʔλϑΣονΛ࣮૷

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

2VFSZઃܭ σʔλϑΣον ඳը 📱 Query urql Render GraphQL Code Generator GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ Next.js

Slide 105

Slide 105 text

ҎޙɺͲͷ෦෼ʹ֘౰͢Δ࡞ۀͳͷ͔   Ͱ͖Δ͚ͩ໌ه͠·͢ ։ൃͷྲྀΕΛͻͱͱ͓Γମݧ͠·ͨ͠ NestJS Next.js

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

τοϓϖʔδվम

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

ٕज़هࣄͱ೔هͰͦΕͧΕ݁Ռ͕΄͍͠ Query

Slide 117

Slide 117 text

ٕज़هࣄͱ೔هͰͦΕͧΕ݁Ռ͕΄͍͠ Query ͜Ε͸ΤϥʔʹͳΔ

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

2VFSZઃܭ σʔλϑΣον ඳը 📱 Query urql Render GraphQL Code Generator GraphQLϑϩϯτΤϯυɹɹɹɹɹɹɹ։ൃͷྲྀΕ Next.js

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

"MJBTFTʹΑΓผΩʔͰσʔλऔಘ fragmentsʹରԠ͢Δܕ PostFragment ͕ࣗಈੜ੒ Render PostFragment[] ͷඳըΛ PostListView ίϯϙʔωϯτʹҰ೚Ͱ͖Δ fragments ͱ ϑϩϯτΤϯυͷίϯϙʔωϯτ ΛରԠ͚ͮΔٕज़: ϑϥάϝϯτίϩέʔγϣϯ

Slide 131

Slide 131 text

JOEFYUTY͕γϯϓϧʹ Render

Slide 132

Slide 132 text

JOEFYUTY͕γϯϓϧʹ Render

Slide 133

Slide 133 text

݁Ռ

Slide 134

Slide 134 text

Slide 135

Slide 135 text

هࣄຊจϖʔδ

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

2VFSZ͕ઌʹܾ·Δύλʔϯ

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

·ͣ͸݅औಘ͢Δ fi OE1PTU͔Β Resolver

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

"QPMMP4UVEJPͰୟ͍ͯΈΔ Resolver

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

QPTUT<TMVH>JOEFYUTY urql

Slide 152

Slide 152 text

QPTUT<TMVH>JOEFYUTY urql

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

Slide 157

Slide 157 text

ίϝϯτػೳ

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

εΩοϓ͢Δ͕࣮૷͢Δཁૉ όοΫΤϯυଆ ίϝϯτʢ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" },

Slide 162

Slide 162 text

*NQSFTTJPOͷ.VUBUJPO Resolver

Slide 163

Slide 163 text

*NQSFTTJPOͷ.VUBUJPO Resolver

Slide 164

Slide 164 text

*NQSFTTJPOͷ.VUBUJPO Schema

Slide 165

Slide 165 text

*NQSFTTJPOͷ.VUBUJPO Schema input ͭ·Γ Mutation ͷೖྗʹରԠ

Slide 166

Slide 166 text

*NQSFTTJPOͷ.VUBUJPO Schema input CreateImpressionInput { comment: String postId: String! sticker: String! twitterId: String } ↑schema.gql

Slide 167

Slide 167 text

*NQSFTTJPOͷ.VUBUJPO Schema

Slide 168

Slide 168 text

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

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

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

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

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

Slide 177

Slide 177 text

.VUBUJPOΛఆٛ Query

Slide 178

Slide 178 text

.VUBUJPOΛఆٛ Query yarn codegen

Slide 179

Slide 179 text

.VUBUJPOΛఆٛ Query yarn codegen

Slide 180

Slide 180 text

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

Slide 181

Slide 181 text

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

Slide 182

Slide 182 text

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

Slide 183

Slide 183 text

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

Slide 184

Slide 184 text

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

Slide 185

Slide 185 text

͜͜·ͰͰొ৔ͨ͠ཁૉ 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ͱͯ͠࢖͑Δ

Slide 186

Slide 186 text

NJDSP$.4͔Βσʔλऔಘ

Slide 187

Slide 187 text

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

Slide 188

Slide 188 text

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

Slide 189

Slide 189 text

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

Slide 190

Slide 190 text

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

Slide 191

Slide 191 text

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

Slide 192

Slide 192 text

ʢ͕࣌ؒͳ͚Ε͹ʣ݁Ռ

Slide 193

Slide 193 text

ʢ͕࣌ؒͳ͚Ε͹ʣ݁Ռ

Slide 194

Slide 194 text

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

Slide 195

Slide 195 text

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

Slide 196

Slide 196 text

Slide 197

Slide 197 text

͓ΘΓʹ

Slide 198

Slide 198 text

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

Slide 199

Slide 199 text

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

Slide 200

Slide 200 text

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

Slide 201

Slide 201 text

No content