ReactͱGraphQLͰ࣮ݱ͢ΔએݴతσʔλϑΣον2022.10.27 ReactΛͬͱޠΓ͍ͨʂ
View Slide
ࣗݾհ˕ 20214݄ Buysell Technologiesೖࣾ˕ ϑϩϯτΤϯυΤϯδχΞ˕ React / TypeScript / Go / GraphQL˕ झຯ○ ϚϯΨɺݸਓ։ൃ2ૣ ً
ΞδΣϯμ˕ GraphQL˕ Fragment Colocation˕ ·ͱΊ3
1.GraphQL4
GraphQLͱ˕ Web APIͷن֨˕ APIͷ༷ΛεΩʔϚݴޠͰఆٛ˕ ΫΤϦݴޠʹΑͬͯσʔλΛऔಘ5
GraphQLͰͷAPI௨৴ͷྫ6Ҿ༻ɿhttps://hasura.io/learn/graphql/intro-graphql/what-is-graphql/
7GraphQLͷجຊߏจ7Query˕ σʔλΛऔಘ͢ΔͨΊͷߏจ˕ RESTͷGETʹ૬˕ QueryͱϨεϙϯεͷߏ͕Ұக
8Queryͷྫ8ࢦఆͨ͠ϑΟʔϧυͷΈϨεϙϯεʹؚ·ΕΔ
9GraphQLͷجຊߏจ9Fragment˕ ϑΟʔϧυͷू߹Λఆٛ͢Δߏจ˕ QueryͷதͰల։ͯ͠༻˕ σʔλऔಘࣗମQuery͕ߦ͏
GraphQLͷಛ˕ ୯ҰͷΤϯυϙΠϯτ˕ σʔλϑΣονͷॊೈੑ˕ ڧྗͳΤίγεςϜ10
GraphQLͷಛ˕ ୯ҰͷΤϯυϙΠϯτ˕ σʔλϑΣονͷॊೈੑ˕ ڧྗͳΤίγεςϜ11
GraphQLΛ͏͜ͱͰඞཁͳσʔλͷΈΛཉ͍͠ܗͰऔಘͰ͖Δ12
ReactͷએݴతUIͱ૬ੑ͕͍͍UIσʔλཁ݅એݴతʹѻ͑Δ13
2.Fragment Colocation14
Fragment Colocationͱ˕ UIͱσʔλཁ݅ΛηοτͰཧ͢Δͱ͍͏ߟ͑ํ˕ ComponentͰ༻͢ΔσʔλΛFragmentͰఆٛ͢Δ˕ Meta(چFacebook)Ͱ࠾༻͞Ε͍ͯΔ15
16Ϣʔβʔϖʔδͷྫ16˕ Ϣʔβʔใ˕ ϢʔβʔͷλεΫҰཡ
17Componentͷ֊ߏ17˕ UserPage○ UserInfo○ TaskListUserPageUserInfoTaskList
UserInfo18UserPageUserInfoTaskList
UserInfo19UserPageUserInfoTaskListFragmentఆٛ
UserInfo20UserPageUserInfoTaskListFragmentఆٛFragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
TaskList21UserPageUserInfoTaskList
TaskList22UserPageUserInfoTaskListFragmentఆٛFragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
UserPage23UserPageUserInfoTaskList
UserPage24UserPageUserInfoTaskListFragmentΛ·ͱΊͨQueryΛఆٛ
UserPage25UserPageUserInfoTaskListFragmentΛ·ͱΊͨQueryΛఆٛhookͰQuery࣮ߦ
UserPage26UserPageUserInfoTaskListFragmentΛ·ͱΊͨQueryΛఆٛhookͰQuery࣮ߦQueryͰऔಘͨ͠σʔλΛࢠComponentʹ͢
શମ૾27TaskListUserPageUserInfoComponentͱGraphQLͷ֊ߏ͕Ұக
Fragment ColocationͷϝϦοτσʔλཁؚ݅Ίͯ ComponentΛΧϓηϧԽͰ͖Δ28
࠶ར༻͕ՄೳͷComponentͰߦ͍ͬͯΔͷσʔλཁ݅ͷએݴͷΈͰɺσʔλͷऔಘߦ͍ͬͯͳ͍ͷͰෳͷComponent ͔Βར༻͕Մೳσʔλཁؚ݅ΊͨComponentͷΧϓηϧԽӨڹൣғ͕ด͍ͯ͡ΔͷComponentʹमਖ਼Λ Ճ͑ͯݺͼग़͠ݩͷComponentमਖ਼ෆཁ29
30Ϣʔβʔϖʔδͷྫ30˕ Ϣʔβʔใʹ߲ΛՃ˕ λεΫҰཡʹมߋͳ߲͠ΛՃ
31UserInfoͷ࣮31˕ FragmentʹϑΟʔϧυΛՃ˕ ද߲ࣔΛՃ˕ Propsͷมߋͳ͠ՃՃ
32UserPageͷ࣮32˕ มߋՕॴͳ͠˕ ࢠComponentͷมߋ͕ ComponentʹӨڹ͍ͯ͠ͳ͍
3.·ͱΊ33
·ͱΊ˕ GraphQLͰσʔλϑΣον͕ॊೈʹߦ͑Δ˕ ComponentͰඞཁͳσʔλΛFragmentͰએݴతʹ ఆٛͰ͖Δ˕ ComponentͱFragmentΛηοτͰཧ͢Δ͜ͱͰσʔλཁؚ݅ΊͯΧϓηϧԽͰ͖Δ34
35XFBSFIJSJOHόΠηϧͰ ϦϢʔεۀքͷ%9Λਪਐ͍ͯ͘͠ ΤϯδχΞΛืू͍ͯ͠·͢όΠηϧ ΤϯδχΞ࠾༻