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

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

qsona
August 31, 2022

いかにして 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)

qsona

August 31, 2022
Tweet

More Decks by qsona

Other Decks in Technology

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 ͸͡Ί·ͨ͠
  3. None
  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 ͍ͩ͘͞! ΧδϡΞϧ໘ஊ͠·͠ΐ͏ʙ