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

   View Slide

2. whoami
   • @qsona
   • Web Engineer at ελσΟαϓϦ (ϦΫϧʔτ)
   • Node.js / Rails / GraphQL / Microservices
   • Engineering Manager ͸͡Ί·ͨ͠
   

   View Slide

3. View Slide

4. https://studysapuri.jp/course/junior/release-2022-spring/
   

   View Slide

5. ৽ن։ൃϓϩδΣΫτͷ঺հ
   • ελσΟαϓϦͷ͏ͪɺதֶੜͷϢʔβʔΛର৅ʹ

   αʔϏεΛϦχϡʔΞϧ͢ΔϓϩδΣΫτ
   • ։ൃ͢Δ΋ͷ
   • iOS / Android / PC Web Apps
   • Backend APIs
   • ίϯςϯπΛ؅ཧ͢ΔγεςϜ
   • ։ൃظؒ: 2020-04 ։࢝, 2022-02 ϦϦʔε (ͦͷޙ΋ܧଓͯ͠։ൃӡ༻த)
   ֶशαʔϏεΛϑϧεΫϥονͰ
   ࡞ΔΠϝʔδ
   

   View Slide

6. ΞʔΩςΫνϟਤ
   (Ұ෦ൈਮ)
   

   View Slide

7. ͍͔ʹͯ͠ GraphQL Λಋೖ͔ͨ͠
   • ৽͍ٕ͠ज़Λ૊৫ʹಋೖ͢Δʹ͸ɺϋʔυϧ͕͋Δ
   • ಛʹɺ։ൃϝϯόʔͷೲಘײ͕ॏཁ
   • ΈΜͳ͕ʮ࢖͍͍ͨʯͱࢥ͑͹ɺଞͷ͍Ζ͍Ζͳ՝୊͸

   νʔϜͰڠྗͯ͠ղܾͰ͖Δ
   • νʔϜʹ GraphQL Λಋೖ͢ΔաఔͰɺ͍͔ʹͯ͠

   ʮνʔϜΈΜͳͷٕज़ʯʹͳ͍ͬͯͨͷ͔
   

   View Slide

8. ͓͠ͳ͕͖
   • ͳͥಋೖ͍ͨ͠ͷ͔ΛޠΔ
   • ։ൃମݧʹϑΥʔΧε͢Δ
   • ૊৫΋Ұॹʹઃܭ͢Δ
   • εΩʔϚۦಈ։ൃͷจԽΛ࡞Δ
   • ஥ؒΛ૿΍͢
   

   View Slide

9. 1) ͳͥಋೖ͍ͨ͠ͷ͔ΛޠΔ
   • ·ͣ͸௚઀తʹɺϝϯόʔΈΜͳͷೲಘײΛಘ͍ͨ
   • ͜Ε͕͋Ε͹ɺʮҰ୴ࢼͯ͠ΈΔʯͱ͜Ζ·Ͱ͸ਐΊΔ
   

   View Slide

10. ͳͥ GraphQL Λಋೖ͔ͨͬͨ͠ͷ͔ (1)
    • εΩʔϚۦಈ։ൃʹΑΓɺطଘͷ૊৫త
    ՝୊ΛղܾͰ͖Δ
    • Client ͔Β Backend ·Ͱશͯ GraphQL
    ʹ͢Δ͜ͱͰ

    ։ൃੜ࢈ੑΛߴΊΔ͜ͱ͕Ͱ͖Δ
    • ... ͳͲ͕Ұൠతͳ࿩ɺࠓճ͸͋·ΓਂງΓ
    ͠ͳ͍ (ଞࢿྉ΁ͷϦϯΫష͓͖ͬͯ·͢)
    

    View Slide

11. ͳͥ GraphQL Λಋೖ͔ͨͬͨ͠ͷ͔ (2)
    • ૊৫ಛ༗ͷ࿩: ʮωΠςΟϒΞϓϦޙ௥͍։ൃ໰୊ʯ
    • Backend + Web Frontend Λ͔ͶΔ։ൃऀ͕ଟ͍
    • Web ΞϓϦઌߦɺωΠςΟϒΞϓϦʹ͸ޙ͔Β࣮૷͞ΕΔػೳ͕ଟ͔ͬͨ
    • API υΩϡϝϯτ͕ͳ͔ͬͨΓɺWeb ͷը໘ʹدͬͨ API ࢓༷ʹͳ͍ͬͯͯɺ

    ޙ͔ΒωΠςΟϒΞϓϦͷ࣮૷࣌ʹࠔΔ͜ͱ͕ଟ͔ͬͨ
    • GraphQL ͸͜ΕΒΛղܾ͢Δ
    

    View Slide

12. ݁Ռ
    • ͸͡Ί͔Β͜ͷ໨తҙࣝΛڞ༗͍͕ͯͨ͠ɺυΩϡϝϯτΛల։͢Δ
    ͚ͩͰɺਁಁ͍ͯͨ͠Θ͚Ͱ͸ͳ͔ͬͨ
    • ͦΕʹΑͬͯɺҰ෦ͷϝϯόʔ͔Β͸ಋೖʹٙ໰ͷ੠΋
    • ࣄ͋Δ͝ͱʹࣗ෼ͷݴ༿ͰޠΔΑ͏ʹͨ݁͠Ռɺ

    ಋೖʹલ޲͖ͳϝϯόʔ͕૿͑ͨ (ͱࢥ͏)
    • ͱΓ͋͑ͣࢼͯ͠ΈΔϑΣʔζΛ1,2ϲ݄ઃ͚Δ͜ͱ͕Ͱ͖ͨ
    

    View Slide

13. 2) ։ൃମݧʹϑΥʔΧε͢Δ
    • GraphQL ಋೖͷओͳ໨త͸։ൃମݧͷ޲্Ͱ͋Δ͕ɺ

    ͦΕ͕ͳ͍ͱಋೖ͢Δཧ༝͕ͳ͘ͳΔ
    • ։ൃऀͷମݧ͕ѱ͍ͱɺಋೖ΁ͷϞνϕʔγϣϯ͕௿͘ͳΔ
    

    View Slide

14. ྑ͍ϓϥΫςΟεΛద༻͢Δ
    • ...͋Δ͍͸ɺϔΠτ͕ͨ·ΔઃܭΛճආ͢Δ
    • ආ͚ͨઃܭͷྫ
    • Client ʹ Repository ૚Λஔ͘
    • GraphQL Gateway + 

    Backend REST/gRPC ύλʔϯ
    • ։ൃऀ͕ "ͳΜ͔໘౗ͩͳ" ͱࢥ͏͜ͱ͕ଟ͔ͬͨΒෛ͚
    

    View Slide

15. ςΟʔνϯάɾίʔνϯά
    • ৽͍֓͠೦ͳͷͰɺͦΕΛ਎ʹ͚ͭΔʹ͸

    ͕͔͔࣌ؒΔ
    • ಛʹϙΠϯτʹͳΔ͜ͱ
    • όοΫΤϯυ: ࠶ؼతͳ resolve
    • ϑϩϯτΤϯυ: Fragment colocation
    • ϫʔΫγϣοϓ΍ϞϒϓϩάϥϛϯάͳͲΛ௨ͯ͠ɺ

    ঃʑʹ૊৫ͷ஌ࣝͱͯ֫͠ಘ͍ͯ͘͠
    

    View Slide

16. ݁Ռ
    • ͦ΋ͦ΋νʔϜϝϯόʔʹܙ·Ε͍ͯͨͷ͸લఏͱͯ͠...
    • ͍ΘΏΔ GraphQL ΞϨϧΪʔͷΑ͏ͳঢ়ଶ͸ى͜Βͳ͔ͬͨ
    • શମతʹ GraphQL ΁ͷཧղ౓͕ߴ͘ɺ࢖͍͜ͳ͍ͯ͠Δঢ়ଶ
    Ͱɺຊ֨తͳ։ൃΛ։࢝Ͱ͖ͨ
    

    View Slide

17. 3) ૊৫΋Ұॹʹઃܭ͢Δ
    • ٕज़ͱ૊৫͸දཪҰମͱͳΓɺϓϩμΫτͷՁ஋ΛੜΈग़͢ɻ

    ໨ࢦ͢૊৫ͷߏ଄ͱٕज़͕Ұக͍ͯ͠ͳ͍ͱɺ

    ։ൃੜ࢈ੑ͸ߴ·Βͳ͍
    

    View Slide

18. BFF vs GraphQL
    • BFF (Backend for Frontend) ͷಋೖΛٻΊΔ੠͕

    ωΠςΟϒΤϯδχΞΛத৺ʹ͋ͬͨ (͕ɺ൓ରͨ͠)
    • BFF ͸ Backend - Frontend ͷ૊৫Λૄʹ͍ͨ͠ͱ͖༗ޮ
    • ʮωΠςΟϒޙ௥͍։ൃʯͷͭΒΈΛܦݧ͍ͯ͠ΔͷͰɺ

    ωΠςΟϒΤϯδχΞ͔Β BFF ͷఏҊ͕ग़ͯ͘Δͷ͸े෼ཧղͰ͖Δ
    • ͔͠͠ɺࠓճ͸৽ن։ൃͰ1ͭͷϓϩμΫτΛ࡞্͍ͬͯ͘Ͱɺ

    Ή͠ΖີͰ͋Γ͍ͨͱߟ͑ͨ
    

    View Slide

19. GraphQL & One Team
    • ͜Ε·ͰͷʮωΠςΟϒޙ௥͍։ൃʯͷΞϯνςʔθͱͯ͠

    ʮOne Teamʯ͕ඪޠʹ
    • ໨ࢦ͍ͨ͠૊৫૾ʹ޲͔ͬͯਐΜͰ͍͖ɺ

    ٕज़ͱ૊৫͕Ϛον͢Δঢ়ଶʹͳͬͨ
    

    View Slide

20. ݁Ռ
    • ϦϦʔεલͷऴ൫Ͱ͸ٕज़࣠ͰͷνʔϜ෼͚ʹͳ͕ͬͨɺ

    One Team తͳจԽ͸຺ʑͱड͚ܧ͕ΕͨΑ͏ʹࢥ͏
    • ຊϦϦʔεޙɺBackend / Web Frontend / Native ͷΤϯδχΞ
    ͕ࠞ੒ͱͳΔεΫϥϜνʔϜΛ3ͭ݁੒
    

    View Slide

21. ͦͷଞ (࣌ؒ଍Γͳ͍ͷͰྲྀ͢)
    • εΩʔϚۦಈ։ൃͷจԽΛ࡞Δ
    • ӈهࣄͥͻݟͯΈ͍ͯͩ͘͞
    • ஥ؒΛ૿΍͢
    • νʔϜ಺Ͱ GraphQL ΛֶͿձΛ΍ͬͯΈͨΓ
    • GraphQL ͕޷͖ͳΤϯδχΞΛνʔϜʹ༠ͬͨΓ
    

    View Slide

22. ·ͱΊ?
    • ͳʹ͔৽͍͠΋ͷΛಋೖ͢Δͱ͖ɺ

    ͦΕʹΑͬͯʮશһ͕ಘΛ͢ΔʯΑ͏ʹઃܭ͢Δͷ͕ίπ
    • ࣗ෼͸ಘ͢Δͷ͔ͩΒɺଞͷΈΜͳ΋ಘͰ͖ΔΑ͏ʹઃܭ͢Δ
    

    View Slide

23. We are hiring!
    • GraphQL ΊͬͪΌ΍ͬͯ·͢
    • GraphQL ޷͖ͳํͱ͔ɺֶशαʔϏεʹڵຯ͋Δํͥͻ
    • ελσΟαϓϦͱͯ͠࠾༻΍ͬͯ·͢
    • Twitter @qsona ʹ DM ͍ͩ͘͞! ΧδϡΞϧ໘ஊ͠·͠ΐ͏ʙ
    

    View Slide