いかにして GraphQL を組織に導入するか (新規開発編) / how we introduce GraphQL on scratch development

GraphQL Tokyo #18 Lightning Talks https://www.meetup.com/ja-JP/graphql-tokyo/events/286913987/

Links:
[GraphQL を活用したスキーマ駆動開発の実践](https://speakerdeck.com/qsona/schema-driven-development-with-graphql)
[GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL - Speaker Deck](https://speakerdeck.com/qsona/architecture-practices-with-graphql)
[Quramy/gql-study-workshop](https://github.com/Quramy/gql-study-workshop)
[Schema-Driven Development とアジャイルなチーム](https://note.com/qsona/n/nfc73a8e82dff)

Transcript

1. ͍͔ʹͯ͠ GraphQL Λ ૊৫ʹಋೖ͢Δ͔ (৽ن։ൃฤ) @qsona 2022-08-31 GraphQL Tokyo #18 Lightning Talks
2. whoami • @qsona • Web Engineer at ελσΟαϓϦ (ϦΫϧʔτ) • Node.js / Rails / GraphQL / Microservices • Engineering Manager ͸͡Ί·ͨ͠
4. https://studysapuri.jp/course/junior/release-2022-spring/
5. ৽ن։ൃϓϩδΣΫτͷ঺հ • ελσΟαϓϦͷ͏ͪɺதֶੜͷϢʔβʔΛର৅ʹ
 αʔϏεΛϦχϡʔΞϧ͢ΔϓϩδΣΫτ • ։ൃ͢Δ΋ͷ • iOS / Android / PC Web Apps • Backend APIs • ίϯςϯπΛ؅ཧ͢ΔγεςϜ • ։ൃظؒ: 2020-04 ։࢝, 2022-02 ϦϦʔε (ͦͷޙ΋ܧଓͯ͠։ൃӡ༻த) ֶशαʔϏεΛϑϧεΫϥονͰ ࡞ΔΠϝʔδ
6. ΞʔΩςΫνϟਤ (Ұ෦ൈਮ)
7. ͍͔ʹͯ͠ GraphQL Λಋೖ͔ͨ͠ • ৽͍ٕ͠ज़Λ૊৫ʹಋೖ͢Δʹ͸ɺϋʔυϧ͕͋Δ • ಛʹɺ։ൃϝϯόʔͷೲಘײ͕ॏཁ • ΈΜͳ͕ʮ࢖͍͍ͨʯͱࢥ͑͹ɺଞͷ͍Ζ͍Ζͳ՝୊͸
 νʔϜͰڠྗͯ͠ղܾͰ͖Δ • νʔϜʹ GraphQL Λಋೖ͢ΔաఔͰɺ͍͔ʹͯ͠
 ʮνʔϜΈΜͳͷٕज़ʯʹͳ͍ͬͯͨͷ͔
8. ͓͠ͳ͕͖ • ͳͥಋೖ͍ͨ͠ͷ͔ΛޠΔ • ։ൃମݧʹϑΥʔΧε͢Δ • ૊৫΋Ұॹʹઃܭ͢Δ • εΩʔϚۦಈ։ൃͷจԽΛ࡞Δ • ஥ؒΛ૿΍͢
9. 1) ͳͥಋೖ͍ͨ͠ͷ͔ΛޠΔ • ·ͣ͸௚઀తʹɺϝϯόʔΈΜͳͷೲಘײΛಘ͍ͨ • ͜Ε͕͋Ε͹ɺʮҰ୴ࢼͯ͠ΈΔʯͱ͜Ζ·Ͱ͸ਐΊΔ
10. ͳͥ GraphQL Λಋೖ͔ͨͬͨ͠ͷ͔ (1) • εΩʔϚۦಈ։ൃʹΑΓɺطଘͷ૊৫త ՝୊ΛղܾͰ͖Δ • Client ͔Β Backend ·Ͱશͯ GraphQL ʹ͢Δ͜ͱͰ
 ։ൃੜ࢈ੑΛߴΊΔ͜ͱ͕Ͱ͖Δ • ... ͳͲ͕Ұൠతͳ࿩ɺࠓճ͸͋·ΓਂງΓ ͠ͳ͍ (ଞࢿྉ΁ͷϦϯΫష͓͖ͬͯ·͢)
11. ͳͥ GraphQL Λಋೖ͔ͨͬͨ͠ͷ͔ (2) • ૊৫ಛ༗ͷ࿩: ʮωΠςΟϒΞϓϦޙ௥͍։ൃ໰୊ʯ • Backend + Web Frontend Λ͔ͶΔ։ൃऀ͕ଟ͍ • Web ΞϓϦઌߦɺωΠςΟϒΞϓϦʹ͸ޙ͔Β࣮૷͞ΕΔػೳ͕ଟ͔ͬͨ • API υΩϡϝϯτ͕ͳ͔ͬͨΓɺWeb ͷը໘ʹدͬͨ API ࢓༷ʹͳ͍ͬͯͯɺ
 ޙ͔ΒωΠςΟϒΞϓϦͷ࣮૷࣌ʹࠔΔ͜ͱ͕ଟ͔ͬͨ • GraphQL ͸͜ΕΒΛղܾ͢Δ
12. ݁Ռ • ͸͡Ί͔Β͜ͷ໨తҙࣝΛڞ༗͍͕ͯͨ͠ɺυΩϡϝϯτΛల։͢Δ ͚ͩͰɺਁಁ͍ͯͨ͠Θ͚Ͱ͸ͳ͔ͬͨ • ͦΕʹΑͬͯɺҰ෦ͷϝϯόʔ͔Β͸ಋೖʹٙ໰ͷ੠΋ • ࣄ͋Δ͝ͱʹࣗ෼ͷݴ༿ͰޠΔΑ͏ʹͨ݁͠Ռɺ
 ಋೖʹલ޲͖ͳϝϯόʔ͕૿͑ͨ (ͱࢥ͏) • ͱΓ͋͑ͣࢼͯ͠ΈΔϑΣʔζΛ1,2ϲ݄ઃ͚Δ͜ͱ͕Ͱ͖ͨ
13. 2) ։ൃମݧʹϑΥʔΧε͢Δ • GraphQL ಋೖͷओͳ໨త͸։ൃମݧͷ޲্Ͱ͋Δ͕ɺ
 ͦΕ͕ͳ͍ͱಋೖ͢Δཧ༝͕ͳ͘ͳΔ • ։ൃऀͷମݧ͕ѱ͍ͱɺಋೖ΁ͷϞνϕʔγϣϯ͕௿͘ͳΔ
14. ྑ͍ϓϥΫςΟεΛద༻͢Δ • ...͋Δ͍͸ɺϔΠτ͕ͨ·ΔઃܭΛճආ͢Δ • ආ͚ͨઃܭͷྫ • Client ʹ Repository ૚Λஔ͘ • GraphQL Gateway + 
 Backend REST/gRPC ύλʔϯ • ։ൃऀ͕ "ͳΜ͔໘౗ͩͳ" ͱࢥ͏͜ͱ͕ଟ͔ͬͨΒෛ͚
15. ςΟʔνϯάɾίʔνϯά • ৽͍֓͠೦ͳͷͰɺͦΕΛ਎ʹ͚ͭΔʹ͸
 ͕͔͔࣌ؒΔ • ಛʹϙΠϯτʹͳΔ͜ͱ • όοΫΤϯυ: ࠶ؼతͳ resolve • ϑϩϯτΤϯυ: Fragment colocation • ϫʔΫγϣοϓ΍ϞϒϓϩάϥϛϯάͳͲΛ௨ͯ͠ɺ
 ঃʑʹ૊৫ͷ஌ࣝͱͯ֫͠ಘ͍ͯ͘͠
16. ݁Ռ • ͦ΋ͦ΋νʔϜϝϯόʔʹܙ·Ε͍ͯͨͷ͸લఏͱͯ͠... • ͍ΘΏΔ GraphQL ΞϨϧΪʔͷΑ͏ͳঢ়ଶ͸ى͜Βͳ͔ͬͨ • શମతʹ GraphQL ΁ͷཧղ౓͕ߴ͘ɺ࢖͍͜ͳ͍ͯ͠Δঢ়ଶ Ͱɺຊ֨తͳ։ൃΛ։࢝Ͱ͖ͨ
17. 3) ૊৫΋Ұॹʹઃܭ͢Δ • ٕज़ͱ૊৫͸දཪҰମͱͳΓɺϓϩμΫτͷՁ஋ΛੜΈग़͢ɻ
 ໨ࢦ͢૊৫ͷߏ଄ͱٕज़͕Ұக͍ͯ͠ͳ͍ͱɺ
 ։ൃੜ࢈ੑ͸ߴ·Βͳ͍
18. BFF vs GraphQL • BFF (Backend for Frontend) ͷಋೖΛٻΊΔ੠͕
 ωΠςΟϒΤϯδχΞΛத৺ʹ͋ͬͨ (͕ɺ൓ରͨ͠) • BFF ͸ Backend - Frontend ͷ૊৫Λૄʹ͍ͨ͠ͱ͖༗ޮ • ʮωΠςΟϒޙ௥͍։ൃʯͷͭΒΈΛܦݧ͍ͯ͠ΔͷͰɺ
 ωΠςΟϒΤϯδχΞ͔Β BFF ͷఏҊ͕ग़ͯ͘Δͷ͸े෼ཧղͰ͖Δ • ͔͠͠ɺࠓճ͸৽ن։ൃͰ1ͭͷϓϩμΫτΛ࡞্͍ͬͯ͘Ͱɺ
 Ή͠ΖີͰ͋Γ͍ͨͱߟ͑ͨ
19. GraphQL & One Team • ͜Ε·ͰͷʮωΠςΟϒޙ௥͍։ൃʯͷΞϯνςʔθͱͯ͠
 ʮOne Teamʯ͕ඪޠʹ • ໨ࢦ͍ͨ͠૊৫૾ʹ޲͔ͬͯਐΜͰ͍͖ɺ
 ٕज़ͱ૊৫͕Ϛον͢Δঢ়ଶʹͳͬͨ
20. ݁Ռ • ϦϦʔεલͷऴ൫Ͱ͸ٕज़࣠ͰͷνʔϜ෼͚ʹͳ͕ͬͨɺ
 One Team తͳจԽ͸຺ʑͱड͚ܧ͕ΕͨΑ͏ʹࢥ͏ • ຊϦϦʔεޙɺBackend / Web Frontend / Native ͷΤϯδχΞ ͕ࠞ੒ͱͳΔεΫϥϜνʔϜΛ3ͭ݁੒
21. ͦͷଞ (࣌ؒ଍Γͳ͍ͷͰྲྀ͢) • εΩʔϚۦಈ։ൃͷจԽΛ࡞Δ • ӈهࣄͥͻݟͯΈ͍ͯͩ͘͞ • ஥ؒΛ૿΍͢ • νʔϜ಺Ͱ GraphQL ΛֶͿձΛ΍ͬͯΈͨΓ • GraphQL ͕޷͖ͳΤϯδχΞΛνʔϜʹ༠ͬͨΓ
22. ·ͱΊ? • ͳʹ͔৽͍͠΋ͷΛಋೖ͢Δͱ͖ɺ
 ͦΕʹΑͬͯʮશһ͕ಘΛ͢ΔʯΑ͏ʹઃܭ͢Δͷ͕ίπ • ࣗ෼͸ಘ͢Δͷ͔ͩΒɺଞͷΈΜͳ΋ಘͰ͖ΔΑ͏ʹઃܭ͢Δ
23. We are hiring! • GraphQL ΊͬͪΌ΍ͬͯ·͢ • GraphQL ޷͖ͳํͱ͔ɺֶशαʔϏεʹڵຯ͋Δํͥͻ • ελσΟαϓϦͱͯ͠࠾༻΍ͬͯ·͢ • Twitter @qsona ʹ DM ͍ͩ͘͞! ΧδϡΞϧ໘ஊ͠·͠ΐ͏ʙ