Tweet
Tweet

Slide 1

Slide 1 text

͍͔ʹͯ͠ GraphQL Λ ૊৫ʹಋೖ͢Δ͔ (৽ن։ൃฤ) @qsona 2022-08-31 GraphQL Tokyo #18 Lightning Talks

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ͳͥ GraphQL Λಋೖ͔ͨͬͨ͠ͷ͔ (1) • εΩʔϚۦಈ։ൃʹΑΓɺطଘͷ૊৫త ՝୊ΛղܾͰ͖Δ • Client ͔Β Backend ·Ͱશͯ GraphQL ʹ͢Δ͜ͱͰ
 ։ൃੜ࢈ੑΛߴΊΔ͜ͱ͕Ͱ͖Δ • ... ͳͲ͕Ұൠతͳ࿩ɺࠓճ͸͋·ΓਂງΓ ͠ͳ͍ (ଞࢿྉ΁ͷϦϯΫష͓͖ͬͯ·͢)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

݁Ռ • ͸͡Ί͔Β͜ͷ໨తҙࣝΛڞ༗͍͕ͯͨ͠ɺυΩϡϝϯτΛల։͢Δ ͚ͩͰɺਁಁ͍ͯͨ͠Θ͚Ͱ͸ͳ͔ͬͨ • ͦΕʹΑͬͯɺҰ෦ͷϝϯόʔ͔Β͸ಋೖʹٙ໰ͷ੠΋ • ࣄ͋Δ͝ͱʹࣗ෼ͷݴ༿ͰޠΔΑ͏ʹͨ݁͠Ռɺ
 ಋೖʹલ޲͖ͳϝϯόʔ͕૿͑ͨ (ͱࢥ͏) • ͱΓ͋͑ͣࢼͯ͠ΈΔϑΣʔζΛ1,2ϲ݄ઃ͚Δ͜ͱ͕Ͱ͖ͨ

Slide 13

Slide 13 text

2) ։ൃମݧʹϑΥʔΧε͢Δ • GraphQL ಋೖͷओͳ໨త͸։ൃମݧͷ޲্Ͱ͋Δ͕ɺ
 ͦΕ͕ͳ͍ͱಋೖ͢Δཧ༝͕ͳ͘ͳΔ • ։ൃऀͷମݧ͕ѱ͍ͱɺಋೖ΁ͷϞνϕʔγϣϯ͕௿͘ͳΔ

Slide 14

Slide 14 text

ྑ͍ϓϥΫςΟεΛద༻͢Δ • ...͋Δ͍͸ɺϔΠτ͕ͨ·ΔઃܭΛճආ͢Δ • ආ͚ͨઃܭͷྫ • Client ʹ Repository ૚Λஔ͘ • GraphQL Gateway + 
 Backend REST/gRPC ύλʔϯ • ։ൃऀ͕ "ͳΜ͔໘౗ͩͳ" ͱࢥ͏͜ͱ͕ଟ͔ͬͨΒෛ͚

Slide 15

Slide 15 text

ςΟʔνϯάɾίʔνϯά • ৽͍֓͠೦ͳͷͰɺͦΕΛ਎ʹ͚ͭΔʹ͸
 ͕͔͔࣌ؒΔ • ಛʹϙΠϯτʹͳΔ͜ͱ • όοΫΤϯυ: ࠶ؼతͳ resolve • ϑϩϯτΤϯυ: Fragment colocation • ϫʔΫγϣοϓ΍ϞϒϓϩάϥϛϯάͳͲΛ௨ͯ͠ɺ
 ঃʑʹ૊৫ͷ஌ࣝͱͯ֫͠ಘ͍ͯ͘͠

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

3) ૊৫΋Ұॹʹઃܭ͢Δ • ٕज़ͱ૊৫͸දཪҰମͱͳΓɺϓϩμΫτͷՁ஋ΛੜΈग़͢ɻ
 ໨ࢦ͢૊৫ͷߏ଄ͱٕज़͕Ұக͍ͯ͠ͳ͍ͱɺ
 ։ൃੜ࢈ੑ͸ߴ·Βͳ͍

Slide 18

Slide 18 text

BFF vs GraphQL • BFF (Backend for Frontend) ͷಋೖΛٻΊΔ੠͕
 ωΠςΟϒΤϯδχΞΛத৺ʹ͋ͬͨ (͕ɺ൓ରͨ͠) • BFF ͸ Backend - Frontend ͷ૊৫Λૄʹ͍ͨ͠ͱ͖༗ޮ • ʮωΠςΟϒޙ௥͍։ൃʯͷͭΒΈΛܦݧ͍ͯ͠ΔͷͰɺ
 ωΠςΟϒΤϯδχΞ͔Β BFF ͷఏҊ͕ग़ͯ͘Δͷ͸े෼ཧղͰ͖Δ • ͔͠͠ɺࠓճ͸৽ن։ൃͰ1ͭͷϓϩμΫτΛ࡞্͍ͬͯ͘Ͱɺ
 Ή͠ΖີͰ͋Γ͍ͨͱߟ͑ͨ

Slide 19

Slide 19 text

GraphQL & One Team • ͜Ε·ͰͷʮωΠςΟϒޙ௥͍։ൃʯͷΞϯνςʔθͱͯ͠
 ʮOne Teamʯ͕ඪޠʹ • ໨ࢦ͍ͨ͠૊৫૾ʹ޲͔ͬͯਐΜͰ͍͖ɺ
 ٕज़ͱ૊৫͕Ϛον͢Δঢ়ଶʹͳͬͨ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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