活用パターンで学ぶGraphQL

5BFXPP,JN ׆༻ύλʔϯͰֶͿ(SBQI2-

ࣗݾ঺հ 5BFXPP,JN ΩϜς΢ʣ "84ࣄۀຊ෦ίϯαϧςΟϯά෦ॴଐ ೥݄ೖࣾɺ೔ຊޠྺ೥ "1/"845PQ&OHJOFFSTʹ౰બ Ϋϥεϝιουͷ࠷ॳͷؖࠃਓΤϯδχΞ ޷͖ͳ"84αʔϏεɿ"QQ4ZODɺ"NQMJGZ

ηογϣϯ֓ཁ ͜ͷηογϣϯͰ࿩͞ͳ͍͜ͱ (SBQI2-ͷจ๏ (SBQI2-εΩʔϚσβΠϯͷϕετϓϥΫςΟε ίʔυϨϕϧͰͷϕετϓϥΫςΟε (SBQI2-Λ࢖ͬͨೝূɾηΩϡϦςΟ (SBQI2-ϞχλϦϯάɾ࠷దԽ౳

ηογϣϯ֓ཁ ͜ͷηογϣϯͰ࿩͢͜ͱ (SBQI2-ͷొ৔എܠͱجૅ֓೦ (SBQI2-ΞʔΩςΫνϟʔύλʔϯ #BDLFOE'PS'SPOUFOE 3FBMUJNF"SDIJUFDUVSF 5ISFF'BDUPS"QQ (SBQI2-ͷ$234ύλʔϯ

GraphQLͷ֓೦

(SBQI2-ͷ֓೦ɿొ৔എܠ REST API Λ։ൃ͢ΔνʔϜͰ͸ ΄ͱΜͲಉ͡໰୊ͱઓ͏

(SBQI2-ͷ֓೦ɿొ৔എܠ ྫ͑͹ɺҎԼͷ"1*͕͋ͬͨͱ͢Δ (&5BQJVTFST

(SBQI2-ͷ֓೦ɿొ৔എܠ ϖʔδωʔγϣϯ͸౰ͨΓલ͔ͩΒɺ͜͏ͳΔ (&5BQJVTFST QBHF@OVN

(SBQI2-ͷ֓೦ɿొ৔എܠ ཁ͕݅૿͑ͯɺϞόΠϧͱ΢ΣϒΛಉ࣌ʹαϙʔτ͢Δ ͜ͱʹͳΔ (&5BQJVTFST QBHF@OVNQMBUGPSNNPCJMF (&5BQJVTFST QBHF@OVNQMBUGPSNXFC

(SBQI2-ͷ֓೦ɿొ৔എܠ ϦΫΤετΛૹΔଆͷը໘ߏ੒ʹΑΓɺϨεϙϯεͷσʔ λͷछྨ͕ҟͳΔ (&5BQJVTFST QBHF@OVNQMBUGPSNNPCJMFUZQFQMBZFS@MJTU (&5BQJVTFST QBHF@OVNQMBUGPSNNPCJMFUZQFDIBUUJOH@SPPN (&5BQJVTFST
QBHF@OVNQMBUGPSNXFCUZQFVTFS@NBOBHFS

(SBQI2-ͷ֓೦ɿొ৔എܠ όοΫΤϯυଆͷAPIؔ਺Ұ͚ͭͩͰ ίʔυ͕਺ඦϥΠϯʹͳΔ ॏෳίʔυ͕ଟ͘ͳͬͯޮ཰͕Α͘ͳ͍

(SBQI2-ͷ֓೦ɿొ৔എܠ ϝϯςφϯε͕ݫ͘͠ͳΔ͔Βɺ࠷ॳ͔ΒඞཁͳϑΟʔ ϧυͷΈϦΫΤετ͢Δ (&5BQJVTFST QBHF@OVNpFMETBDDPVOU*E OJDLOBNF JNBHF
X@ I@ NPEF (&5BQJVTFST QBHF@OVNpFMETBDDPVOU*E OJDLOBNF CJSUI JOUFSFTUT JNBHF X@ I@ NPEF JODMVEFGSJFOE@MJTU

(SBQI2-ͷ֓೦ɿొ৔എܠ όοΫΤϯυଆ͸ͪΐͬͱָʹͳΔ

(SBQI2-ͷ֓೦ɿొ৔എܠ ͔͠͠ɺΫϥΠΞϯτଆͰඞཁͱ͢Δ ෳࡶͳAPIΛઃܭ͢Δ͜ͱ͸ͱͯ΋೉͍͠ Θ͚͕෼͔Βͳ͍APIʹͳΔ

(SBQI2-ͷ֓೦ɿొ৔എܠ ͔͠͠ɺϑϩϯτΤϯυଆͰ͸ APIΛཧղͮ͠Β͘ͳΔ ΋͏Θ͚͕Θ͔Βͳ͍APIʹͳΔ (&5BQJVTFST QBHF@OVNpFMETBDDPVOU*E OJDLOBNF
JNBHF X@ I@ NPEF (&5BQJVTFST QBHF@OVNpFMETBDDPVOU*E OJDLOBNF CJSUI JOUFSFTUT JNBHF X@ I@ NPEF JODMVEFGSJFOE@MJTU

(SBQI2-ͷ֓೦ɿ04'"ʢ0OF4J[F'JUT"MMʣ 04'" 0OF4J[F'JUT"MM ໰୊ ݩʑ͸ҰͭͷϢʔζέʔεʹ࠷దԽ͞ΕΔΑ͏ʹઃܭ͞Ε͕ͨɺ ͲΜͲΜ"1*͕େ͖͘ͳΓɺଟ͘ͷϢʔζέʔεʹ΋౴͑ΔΑ͏ ʹͳͬͯɺϝϯςφϯε΍௥Ճػೳͷ֦ு͕ݫ͘͠ͳΔ

(SBQI2-ͷ֓೦ɿ5"%" 2015೥9݄ɺFacebook ΑΓ GraphQL ͕ެࣜʹެ։͞Ε·ͨ͠ʂ

(SBQI2-ͷ֓೦ɿTBNQMFSFRSFTQ query { users { accountId name imageUrl
} } { “data”: { “accountId”: “twkiiim”, “name”: “Taewoo Kim”, “imageUrl”: “…..” } } Request Response

(SBQI2-ͷ֓೦ɿλΠϓʢ5ZQFʣ (SBQI2-͸λΠϓγεςϜ type User { id: ID! accountId:
String! name: String! imageUrl: String address: Address } type Address { zipcode: String! city: String! } type Chatroom { id: ID! users: [User!]! createdAt: DateTime! }

(SBQI2-ͷ֓೦ɿΫΤϦʢ2VFSZ σʔλΛऔಘ͢Δ query { user(id: 13) { accountId
name address { city } } }

(SBQI2-ͷ֓೦ɿϛϡʔςʔγϣϯʢ.VUBUJPO σʔλΛૢ࡞͢Δ σʔλͷੜ੒ɾมߋɾ࡟আ mutation { createUser(input: { name:
“Taewoo Kim”, zipcode: “000-0000”, city: “Tokyo” }) { id } }

(SBQI2-ͷ֓೦ɿαϒεΫϦϓγϣϯʢ4VCTDSJQUJPO σʔλΛߪಡ͢Δ subscription { onCreateUser { id name
address { zipcode city } } }

(SBQI2-ͷ֓೦ɿ·ͱΊ (SBQI2-ͷࡾͭͷΦϖϨʔγϣϯ ΫΤϦʢ2VFSZʣ ϛϡʔςʔγϣϯʢ.VUBUJPOʣ αϒεΫϦϓγϣϯʢ4VCTDSJQUJPOʣ ͜ͷࡾͭͷΦϖϨʔγϣϯʹΑΓɺ༷ʑͳύλʔϯ͕ߟ ͑ΒΕ·͢ʂ

GraphQLΞʔΩςΫνϟʔύλʔϯ

(SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE Backend-For-Frontend ύλʔϯ

(SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE (SBQI2-લͷ΄ͱΜͲͷ"1* αʔό͸ࠨଆͷΑ͏ͳߏ੒ ϓϥοτϑΥʔϜຖʹ༷ʑͳଟ͘ͷ ϢʔζέʔεΛͨͩҰ͚ͭͩͷ"1* αʔόͰશͯॲཧͤ͞Δߏ੒ 04'"ʢ0OF4J[F'JUT"MMʣ໰୊͕͋Δ
ͨΊɺن໛͕େ͖͘ͳΕ͹ͳΔ΄Ͳɺޮ ཰͕ٸܹʹԼ͕Δ

(SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE

(SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE ֤ϓϥοτϑΥʔϜʹ߹Θͤͯ"1*αʔόΛ෼͚Δઓུ ϓϥοτϑΥʔϜຖʹָʹΧελϚΠζͰ͖ΔͷͰྑ͍ʂ ಉ͡ػೳΛߦ͏ίʔυ͕ͦΕͧΕͷ"1*αʔόͷίʔυʹଘࡏ ͢ΔͷͰίʔυͷॏෳ͕ଟ͘ͳͬͨΓ͢Δ໰୊ͷͨΊɺ௥Ճͷ ޻਺͕͔͔Δ

(SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE

(SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE γϯάϧ(SBQI2-"1*αʔόͰ#''͕Ͱ͖Δʁ ΫϥΠΞϯτଆͰඞཁͳϑΟʔϧυΛ௚઀બΜͰϦΫΤετΛ ૹΔ͔ΒɺϓϥοτϑΥʔϜຖʹϖΠϩʔυ࠷దԽ͕ࣗવʹຬ ͨ͞ΕΔ

(SBQI2-ύλʔϯɿ#'' #BDLFOE'PS'SPOUFOE ͔͠͠ʂʂ ·ͨ04'"໰୊͕ൃੜ͢ΔՄೳੑ΋͋Δ ϖΠϩʔυɺͭ·Γɺσʔλͷදݱͱ͍͏؍఺Ͱ͸γϯάϧ(SBQI2- "1*͚ͩͰશવྑ͍͚ͲɺϓϥοτϑΥʔϜຖͷϢʔβೝূɺΩϟογ ϯά౳Λߟ͑ͯΈΔͱɺ΍͸Γ"1*αʔό͸෼͚ͨํ͕ྑ͍ ҰํɺϖΠϩʔυͷΧελϚΠζͷΈ͕ཁ݅Ͱ͋Ε͹ɺγϯάϧ
(SBQI2-"1*Ͱ#''͢Δ͜ͱ΋શવ͋Γ

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF Realtime Architecture ύλʔϯ

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF ͳͥ(SBQI2-ͱϦΞϧλΠϜΛ૊Έ߹ΘͤΔͷ͔ʁ ϦΞϧλΠϜΞʔΩςΫνϟʔ͸ιέοτͰ΋࣮૷ग़དྷΔ (SBQI2-Λ࢖͏ͱλΠϓγεςϜͷ͓ӄͰߋʹޮ཰తͳ࣮૷͕ग़དྷΔ

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF αϒεΫϦϓγϣϯʢ4VCTDSJQUJPOʣ (SBQI2-ͷΦϖϨʔγϣϯͰ͋ΔαϒεΫϦϓγϣϯΛ࢖͏ ͜ͱͰ΄ͱΜͲͷϦΞϧλΠϜαʔϏεͷ࣮૷͕؆୯ʹͳΔ σʔλܗࣜʢλΠϓʣΛఆٛ͢Δ͚ͩͰϦΞϧλΠϜػೳ͕࢖͑Δɿ "QQ4ZODɺ)BTVSBͷΑ͏ͳαʔϏεͷ͓ӄͰόοΫΤϯυଆͷ࣮૷ ͷͨΊͷखؒΛ͔͚ͣʹϦΞϧλΠϜཁ݅ͷ࣮૷͕Մೳʹͳͬͨʂ

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF https://youtu.be/kuTyxcjqeUk ஫จαʔϏεDEMO

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF ϦΞϧλΠϜػೳͷ ͨΊ"QQ4ZODΛ࢖ͬ ͨαϯϓϧͷߏ੒ ஫จαʔϏεͷॲཧΠ ϕϯτΛΞυϛϯଆͷ ը໘ʹϦΞϧλΠϜͰ දࣔͯ͘͠ΕΔγφϦ
Φ

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF https://youtu.be/ZujdsxSRt48 ྫʣApollo + Hasura

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF "84"QQ4ZOD "84ͷϚωʔδυ(SBQI2-αʔϏεʢαʔόʔϨεʣ εΩʔϚΛఆ͓͚ٛͯͩ͘͠ͰউखʹαϒεΫϦϓγϣϯػೳ͕࢖͑Δ

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF AppSync ͷ subscription Λ࢖ͬͨྫ

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF ϒϩάॻ͍ͯ·͢ʂ

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF https://dev.classmethod.jp/articles/serverless-for-order-system-jawsdays2020/

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF https://dev.classmethod.jp/articles/appsync-for-realtime-communication-akiba-aws-15/

(SBQI2-ύλʔϯɿ3FBMUJNF"SDIJUFDUVSF https://dev.classmethod.jp/articles/relay-re-introduction-2019-appsync/

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ Three Factor App ύλʔϯ

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ )BTVSB͞Μ͕ఏҊͨ͠ϞμʔϯϑϧελοΫΞϓϦέʔ γϣϯͷΞʔΩςΫνϟʔ ϦΞϧλΠϜ(SBQI2- ϦϥΠΞϏϦςΟʔͷͨΊͷΠϕϯτॲཧ ඇಉظαʔόʔϨε

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ https://3factor.app/ 1. ϦΞϧλΠϜGraphQL 2. ϦϥΠΞϏϦςΟͷͨΊͷΠϕϯτॲཧ 3. ඇಉظαʔόʔϨε

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ ϦΞϧλΠϜ(SBQI2- w ͙͢ϑΟʔυόοΫՄೳ w (SBQI2-ͷαϒεΫϦϓγϣϯʹ࣮ͯ૷͞ΕΔ

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ ϦϥΠΞϏϦςΟʔͷͨΊͷΠϕϯτॲཧ w (SBQI2-ϛϡʔςʔγϣϯͷ௕͍ॲཧΛ଴ͨͣʹɺ؆୯ʹ ॲཧͰ͖ΔΦϖϨʔγϣϯʢΠϕϯτΛੜ੒͢Δ͜ͱʣΛ ߦ͏ w Πϕϯτ͸গͳ͘ͱ΋ճ͸ඞͣର৅αʔϏεʹ఻ΘΔ

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ ඇಉظαʔόʔϨε w ֤ϚΠΫϩαʔϏε͸αʔόʔϨεͰ࣮૷͞Εͯ͋Δ w ֤αʔϏε͸ΠϕϯτετΞ͔ΒΠϕϯτΛड͚෇͚ͯॲཧ ͢Δ w
ಉ༷ͷΠϕϯτ͸Կճॲཧͯ͠΋ಉ͡ঢ়ଶʹͳΔΑ͏ʹ࣮ ૷͢Δʢ*EFNQPUFOUʣ w Πϕϯτͷॱ൪ʹӨڹΛड͚ͳ͍

$234ύλʔϯͱ͸ʁ w $PNNBOE2VFSZ3FTQPOTJCJMJUZ4FHSFHBUJPOͷུޠ w ΫΤϦͱϛϡʔςʔγϣϯΛ෼཭ͯ͠ߟ͑ΔΞϓϩʔν w 5ISFF'BDUPS"QQ͸(SBQI2-Ͱ$234ύλʔϯΛ ࣮૷͢ΔͨΊͷํ๏

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ ΫΤϦ͸(SBQI2-ͷॲཧͦͷ··Ͱ0, ϛϡʔςʔγϣϯ͸ΠϕϯτΛൃੜ͙ͯ͢͠ϨεϙϯεΛฦ͢

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ ϛϡʔςʔγϣϯΑΓΠϕϯτ͕ੜ੒͞Εͨ৔߹ɺ Πϕϯτ͸֘౰͢ΔαʔϏεʹૹΒΕΔʢΠϕϯτϧʔςΟϯάʣ

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ ૹΒΕͨΠϕϯτ͸ΠϕϯτετΞʹอଘ͞ΕΔ ˠɹඇಉظͰॲཧ͞ΕΔ

(SBQI2-ύλʔϯɿ5ISFF'BDUPS"QQ ඇಉظͰॲཧ͞ΕͨΠϕϯτʢݩͷϛϡʔςʔγϣϯʣʹΑΓɺ αϒεΫϦϓγϣϯ͕τϦΨʔ͞ΕΔ

·ͱΊ

·ͱΊ (SBQI2-ͷొ৔എܠʹ͍ͭͯઆ໌͠·ͨ͠ (SBQI2-ͷ̏ͭͷΦϖϨʔγϣϯʹ͍ͭͯઆ໌͠·͠ ͨ (SBQI2-ΞʔΩςΫνϟʔΛઃܭ͢ΔࡍʹࢀߟʹͳΕ ΔΞʔΩςΫνϟʔͱߟ͑ํΛ঺հ͠·ͨ͠

活用パターンで学ぶGraphQL

活用パターンで学ぶGraphQL

More Decks by Taewoo Kim

Other Decks in Programming

Featured

Transcript