Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

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

    ։ൃੜ࢈ੑ͸ߴ·Βͳ͍

    View full-size slide

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

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

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

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

    View full-size slide

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

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide