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

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 ͍ͩ͘͞! ΧδϡΞϧ໘ஊ͠·͠ΐ͏ʙ