Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
スキーマと型で拓く Full-Stack TypeScript / TSKaigi 2025
Search
Altech
May 22, 2025
Technology
3
2.7k
スキーマと型で拓く Full-Stack TypeScript / TSKaigi 2025
TS Kaigi 2015 でお話しした資料です。
https://2025.tskaigi.org/talks/Altech_2015
Altech
May 22, 2025
Tweet
Share
More Decks by Altech
See All by Altech
継続的なサービス発展を支えるアーキテクチャと技術 / Developers Summit 2023
altech
20
6.3k
Wantedly の技術とアーキテクチャ / 2023年度 新人研修
altech
2
690
技術を的に当てる技術について - GraphQL を入れ直した話 / 吉祥寺.pm28
altech
7
6.1k
マイクロサービス・アーキテクチャと共存する Ruby on Rails のアーキテクチャ的拡張 - その事例と可能性 / Kaigi on Rails 2021
altech
8
3.5k
ソフトウェア設計の Why & What & How / Wantedly 新卒研修
altech
0
11k
Data-Driven Service-Oriented Architecture & UI
altech
3
1.6k
Ruby で作るデータ分析基盤
altech
9
2k
Object-Oriented Abstraction of Redis Sorted Set
altech
2
2.4k
Microservices on “Rails” - Wantedly のマイクロサービス事例
altech
8
5.8k
Other Decks in Technology
See All in Technology
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
350
CDK Vibe Coding Fes
tomoki10
1
460
Operating Operator
shhnjk
1
640
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
220
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
140
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
260
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.2k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
220
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1.1k
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
0
170
ロールが細分化された組織でSREは何をするか?
tgidgd
1
170
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Making Projects Easy
brettharned
116
6.3k
Speed Design
sergeychernyshev
32
1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Raft: Consensus for Rubyists
vanstee
140
7k
It's Worth the Effort
3n
185
28k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Being A Developer After 40
akosma
90
590k
Embracing the Ebb and Flow
colly
86
4.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Transcript
4PIFJ5BLFOP54,BJHJ εΩʔϚͱܕͰ͘ 'VMM4UBDL5ZQF4DSJQU
ຊൃදʹ͍ͭͯ 'VMM4UBDL5ZQF4DSJQUΛग़ൃͱͯ͠ɺlͲΜͳz'VMM4UBDL54͔Β࢝Ί Δͱྑ͍͔ΛൃలՄೳੑؚΊͯߟ͠·͢ɻ ͦΕΛ౿·͑ͯιϑτΣΞͷશମΛߏ͢ΔΞʔΩςΫνϟɾελΠϧͱ ͯ͠(SBQI2-ʹΑΔʮεΩʔϚۦಈͷ'VMM4UBDL5ZQF4DSJQUʯΛհ͠ ·͢ɻ ͜ͷൃද͕ࠓޙͷ'VMM4UBDL54ͷ͕ΓͷҰॿʹͳΕͱࢥ͍·͢ɻ
ࣗݾհ • 4PIFJ5BLFOP • 4"/6 d • ࠷ॳͷιϑτΣΞΤϯδχΞͱͯ͠ࢀը
• ιϑτΣΞྖҬͷٕज़͓Αͼ৫ͷԽ • 8BOUFEMZ d • ϓϩμΫτ։ൃɾٕज़ج൫ɾϚωδϝϯτͳͲ • ٕज़ɿ3VCZˠ3VCZ 5ZQF4DSJQU (P 1ZUIPO(SBQI2- H31$ • ຊൃද4"/6ʹ͓͚ΔऔΓΈͰ͕͢ɺલ৬ʹ͓͚Δܦݧಉ࣌ͷଞࣾͷऔΓ Έ͔Βଟ͘ͷώϯτΛಘ͍ͯ·͢💡 !"MUFDI@
• εϚϗͰ༧ͯ͠ɺ͙͢ʹࣗવͷத • ιϑτΣΞ׆༻ͯ͠ӡӦΛ࣮ݱ • શࠃڌҎ্Λల։த 4"/6OE)PNFʹ͍ͭͯ
࣮ɺ࠷ॳϊʔίʔυͰ ্ཱ͕ͪͬͨαʔϏε • ॳظ͔ΒϊʔίʔυπʔϧΛ༻ ͯ͠αʔϏεΛ։ൃɾӡӦ • δϣΠϯͨ࣌͠Ͱը໘Ҏ ্ɺΧϥϜͷσʔλΛ࣋ͭ தنαʔϏε
• εϚʔτϩοΫɾΦϯϥΠϯܾࡁ ͳͲෳͷ֎෦4BB4ͱଟ֯తʹ ࿈ܞ IUUQTOPUFDPNTBOV@DPNOOGDECD
ࣄۀల։ͷதͰϑϧϦϓϨΠεΛ࣮ࢪ • ࠓޙͷల։Λ౿·͑ͯϑϧϦϓϨΠεΛ։࢝ˠ'VMM4UBDL5ZQF4DSJQUΛ࠾༻ • ࣄۀతʹ֦େϑΣʔζͷͨΊ৽αʔϏεల։ʢچγεςϜͷ։ൃʣͱฒߦͯ͠৽γες ϜΛ։ൃɺޙʹҠߦͨ͠ ͜ͷΑ͏ͳڧ͕ཁٻ͞ΕΔ։ൃʹ͓͍ͯεΩʔϚۦಈͷ'VMM4UBDL54͕େ׆༂🌸 ڌ
ݐஙϞσϧ αʔϏεܗଶ αϒεΫ ୯ധɾαϒεΫɾڞಉॴ༗ɾ౩ॴ༗ ҠߦݩγεςϜن ΧϥϜ ΧϥϜ اۀϑΣʔζ γϦʔζ" γϦʔζ#Ϋϩʔζ ༨ஊɿϊʔίʔυͰԯҎ্ௐୡͨ͠ࠃ།ҰͷαʔϏε😁
ຊͷΞτϥΠϯ ࣗݾհɾഎܠઆ໌ˡ͜͜·Ͱ ΞʔΩςΫνϟϨϕϧͷઃܭ ίʔυͰݟΔεΩʔϚۦಈ։ൃ ·ͱΊ
ΞʔΩςΫνϟϨϕϧͷઃܭ
ࢦͨ͜͠ͱ zεϐʔυΛ٘ਜ਼ʹͤͣɺ࣋ଓతʹ͢ΔιϑτΣΞΛ࡞Δz ࣄۀͱϓϩμΫτΛத৺ͱͨ͠ϑϧαΠΫϧ։ൃγϯϓϧͳ͜ͱΛγϯϓϧʹ࣮ݱ͠ ͳ͕Βɺઐੑͷߴ͍ղܾ͕Ͱ͖Δ࠷খηοτͷٕज़બఆΛͭͭ͠কདྷͷٕज़બ ΛݮΒ͞ͳ్͍தͰڊେͳϦΞʔΩςΫνϟͰΛࢭΊͳ͍ʜ
࠾༻ͨ͠ΞʔΩςΫνϟ
࠾༻ͨ͠ΞʔΩςΫνϟ ׂͱී௨🤔
Ұาͬͯ༻ޠఆٛɿ ΫϥΠΞϯταΠυαʔόʔαΠυɺϑϩϯτΤϯυόοΫΤϯυ ϥϯλΠϜ۠ ͷҧ͍ ΫϥΠΞϯταΠυ αʔόʔαΠυ ϑϩϯτΤϯυ όοΫΤϯυ ɾϢʔβʔͱΛ࣋ͭ
6* ɾ࣮ࡏͱମݧΛΓग़͢ 69 ɾϏδωεϧʔϧΛแ ɾσʔλϕʔεͱ࿈ܞ ɾखݩͷσόΠεͰಈ࡞ ɾωοτϫʔΫͷઌͰಈ࡞ ▶︎ ͜ͷೋ͕ͭϓϩάϥϜߏ্໌֬ʹ͔ΕΔ͔ઃܭ্ͷબʹͳΔ
ϑϩϯτΤϯυͱόοΫΤϯυͷ໌֬ͳΛબ େࣄʹͨ͜͠ͱɿ • ઃܭඪɿʢͲͪΒ͔ͱ͍͏ͱʣରਓઐ༻ੑΛॏࢹ͢ΔϑϩϯτΤϯυͱɺγεςϜͱͯ͠ͷ൚ ༻ੑͱυϝΠϯͷෳࡶੑʹ͖߹͏όοΫΤϯυ • ৫จԽɿϑϧαΠΫϧͰͷ։ൃΛଅਐͭͭ͠ɺઐతͳྖҬ͕͋Δ͜ͱΛೝΊΔ • ٕज़ઓུɿ࣮ߦσόΠεʹґଘ͠ྲྀಈੑߴ͍ϑϩϯτΤϯυٕज़ʹରͯ͠ɺൺֱత҆ఆͯ͠
σϓϩΠ༰қͳαʔόʔαΠυٕज़ • Ҏ্ͷશͯͱ૬ޓ࡞༻͠ͳ͕ΒਐԽ͢ΔΞʔΩςΫνϟʢޙड़ʣ • બɿϑϩϯτΤϯυͱόοΫΤϯυΛ͢Δ • ٕज़ͱͯ͠(SBQI2-Λ࠾༻
ٕज़ͱͯ͠ͷ(SBQI2-ʹ͍ͭͯ • ιϑτΣΞͷΠϯλʔϑΣΠεΛεΩʔϚͱͯ͠ఆٛ͢Δ • όοΫΤϯυεΩʔϚΛຬͨ͢Α͏ʹ࣮͢Δ • ϑϩϯτΤϯυεΩʔϚΛݩʹΫΤϦΛൃߦ͢Δ • ࣮͕ΠϯλʔϑΣΠεʹґଘ͢ΔͨΊɺదʹεΩʔϚΛઃܭ͢Δ͜ͱͰૄ݁߹ͷԸܙ͕͋Δ
(SBQI2-ΫΤϦ query SanuAreas { areas { name sites { name rooms { code } } } } { "data": { "areas": [ { "name": "ീϲַ", "sites": [ { "name": "ീϲַ 1st", "rooms": [ { "code": "0103" }, { "code": "0102" } (SBQI2-Ϩεϙϯε
࠾༻ͨ͠ΞʔΩςΫνϟʢ࣮ࡍʣ • ϞϊϨϙ͕ͩ'&#&ΛཧతʹʢผͷOQNύοέʔδʹͳΔʣ • αʔόʔଆ୯Ұͷ/PEFKTϓϩηεͱͯ͠ಈ͔͠ɺ'&#&྆ํͱͯ͠ৼΔ͏ • ඞཁʹԠͯ͡'&#&ͰͷαʔόʔɾσϓϩΠαΠΫϧͷͳͲՄೳ
ਐԽ͢ΔΞʔΩςΫνϟɿ ϑϩϯτΤϯυͷଟ༷Խ
ਐԽ͢ΔΞʔΩςΫνϟɿ ϑϩϯτΤϯυͷଟ༷Խ • ϢʔεέʔεڥʹԠͯ͡ҟͳΔ ϑϩϯτΤϯυΛఏڙ͍ͯ͘͠έʔε • ࠷దͳٕज़͕54ͱݶΒͳ͍ • ࣮ࡍ4"/6Ͱཧ༻ΞϓϦʹ
ϩʔίʔυٕज़ 3FUPPM Λ࠾༻ • (SBQI2-Ͱఏڙ͢Δใ͕ಉ͡Ͱ͋Ε όοΫΤϯυͷมߋͳ͠Ͱల։Ͱ͖Δ ݱͷ8FCαʔϏε࣮ࣾձͷଟ༷ͳεςʔΫϗϧμʔΛר͖ࠐΜͰ՝Λղܾ͢Δέʔεଟ͘ͳ͍ͬͯΔͨΊɺ γεςϜڞ௨͕ͩҟͳΔΞϓϦΛఏڙ͢Δɺͱ͍ͬͨ͜ͱ4"/6ʹݶΒͣҙ֎ͱଟ͍ͷͰͳ͍Ͱ͠ΐ͏͔
ਐԽ͢ΔΞʔΩςΫνϟɿ όοΫΤϯυͷߴԽ
ਐԽ͢ΔΞʔΩςΫνϟɿ όοΫΤϯυͷߴԽ • ֎෦γεςϜʹྲྀͨ͠ΓɺෳࡶͳॲཧΛ αϒγεςϜͰ࣮ݱ͢Δέʔε • (SBQI2-εΩʔϚ͑͞ຬͨͤɺඞཁͳ෦ ͚ͩผγεςϜͱͯ͠ɾ౷߹͕༰қʢࢧ ԉٕज़͕๛ʣ
• ܾΊଧͪͰͳٕ͘ज़తબࢶ͕͋Δ ͜ͱ͕தظతʹਖ਼͍͠ਐԽΛଅ͢
εϐʔυΛ٘ਜ਼ʹ͠ͳ͍ͭͷ όοΫΤϯυͱϑϩϯτΤϯυΛ͚Δ͜ͱͰൃੜ͢ΔΦʔόʔϔουʹରॲɿ • ։ൃ࣌ɿαʔόʔͷىಈɾ࿈ܞ͕໘ʹͳΔ • ➡ϑϩϯτΤϯυͷ/FYUKTαʔόʔʹόοΫΤϯυಉࠝ✅ίϚϯυͰىಈɾऴྃ • ӡ༻࣌ɿΠϯϑϥ$*$%͕ෳࡶʹ •
➡ϞϊϨϙΛ7FSDFMʹ࿈ܞͯ͠αʔόϨεʹ͓ͤ • ✅ચ࿅͞Εͨ։ൃϓϥοτϑΥʔϜͰɺΤϯδχΞϓϩμΫτ։ൃʹूத • ࣮ߦ࣌ɿωοτϫʔΫΛܦ༝͢Δ͜ͱʹΑΔίετɾ૿ • ➡αʔόʔαΠυ͔Βͷ(SBQI2-ݺͼग़͠τϥϯεϙʔτΛ)551͔Βࠩ͠ସ͑ • ✅༨ͳαʔόϨεɾϑΝϯΫγϣϯͷىಈΛ͑Δ͜ͱ͕Ͱ͖ͨ
ࢦͨ͜͠ͱʢ࠶ܝʣ zεϐʔυΛ٘ਜ਼ʹͤͣɺ࣋ଓతʹ͢ΔιϑτΣΞΛ࡞Δz
ࢦͨ͜͠ͱʢ࠶ܝʣ zεϐʔυΛ٘ਜ਼ʹͤͣɺ࣋ଓతʹ͢ΔιϑτΣΞΛ࡞Δz 'VMM4UBDL5ZQF4DSJQUͰ࣮ݱ
ࢦͨ͜͠ͱʢ࠶ܝʣ zεϐʔυΛ٘ਜ਼ʹͤͣɺ࣋ଓతʹ͢ΔιϑτΣΞΛ࡞Δz εΩʔϚʹΑΔͰ࣮ݱ
ࢦͨ͜͠ͱʢ࠶ܝʣ zεϐʔυΛ٘ਜ਼ʹͤͣɺ࣋ଓతʹ͢ΔιϑτΣΞΛ࡞Δz
ίʔυϨϕϧͰݟΔ εΩʔϚͱܕ͕ͨΒ͢Ձ
࠷ॳʹ͓ͼ🙏 ൃද࣌ؒͷ߹͋Γ(SBQI2-Y5ZQF4DSJQUΛͬͨ։ൃͷΠϩϋ͔ΒຊηογϣϯͰ ѻ͏͜ͱͰ͖·ͤΜͰͨ͠ɻ ࢝ΊΔࡍͷखҾ͖ͱͯ͠ڈͷ54,BJHJͰͷ!IPLBDDIB͞ΜʹΑΔ5ZQF4DSJQUͱ (SBQI2-Ͱ࣮ݱ͢Δܕ҆શͳ"1*࣮ ͕େมஸೡͳηογϣϯͱͳ͍ͬͯ·͢🙌 ຊηογϣϯͰϑϩϯτΤϯυ͔ΒόοΫΤϯυ·ͰεΩʔϚΛ௨ͯ͡ܕ͕͍͍ͯΔ͜ ͱΛલఏͱͯ͠εΩʔϚۦಈͷྲྀΕʹ͍ͭͯݟ͍͖ͯ·͢ɻ <ৄ͍͠ํ͚>্هൃදͱͷࡉ͔ͳٕज़બఆͷҧ͍
(SBQI2-4%- εΩʔϚఆٛݴޠ ΛͬͨʮεΩʔϚϑΝʔετʯͷΞϓϩʔνΛ࠾༻ (SBQI2-ίʔυੜϑϩϯτΤϯυόοΫΤϯυ(SBQI2-$PEFHFOͰ౷Ұ όοΫΤϯυͰͦΕΛ(SBQI2-:PHB্Ͱಈ͔͢ߏʹͳ͍ͬͯΔ IUUQTTQFBLFSEFDLDPNIPLBDDIBUTLBJHJ
͓ͦͷɿશ෦Λදࣔ͢Δ ΤϦΞʼڌʼ෦
type Query { areas: [Area!]! } """ΤϦΞʢྫɿീϲַ,Տޱބʣ""" type Area {
name: String! sites: [Site!]! } """ڌʢྫɿീϲַ1st,ീϲַ2ndʣ""" type Site { nth: String! rooms: [Room!]! } """෦""" type Room { Code: String! } (SBQI2-εΩʔϚΛఆٛ͢Δ • ΤϯτϦϙΠϯτΛఆٛ • ֤ΦϒδΣΫτΛఆٛ • ຊޠซه͢Δ • ϢϏΩλεݴޠͷఆٛʹͳΔ • ΦϒδΣΫτಉ࢜Λܨ͙ schema.graphql
όοΫΤϯυɿڌʹؚ·ΕΔ෦ΛऔಘͰ͖ΔΑ͏ʹ͢Δྫ • (SBQI2-$PEFHFO4FSWFS1SFTFUͰܗΛίʔυੜ import type { SiteResolvers } from
"../__generated__/types"; export const Site: SiteResolvers = { rooms: async (parent, _arg, ctx) => { // Implementation of the resolver. // // // // }, }; resolvers/Site.ts
όοΫΤϯυɿڌʹؚ·ΕΔ෦ΛऔಘͰ͖ΔΑ͏ʹ͢Δྫ • (SBQI2-$PEFHFO4FSWFS1SFTFUͰܗΛίʔυੜ import type { SiteResolvers } from
"../__generated__/types"; export const Site: SiteResolvers = { rooms: async (parent, _arg, ctx) => { // Implementation of the resolver. // // // // }, }; resolvers/Site.ts • ੜ͞Εͨܗʹରͯ͠σʔλϑΣονΛ࣮ • ͜ͷ߹σʔλϕʔεͱͷΓऔΓʹ1SJTNBΛར༻͍ͯ͠Δ return ctx.prisma.room.findMany({ where: { siteId: parent.id, }, });
ϑϩϯτΤϯυɿ෦Λදࣔ͢Δίϯϙʔωϯτͷྫ • 3FBDUίϯϙʔωϯτͷϑΝΠϧʹ ࢀর͢Δ(SBQI2-ͷσʔλఆٛ • 'SBHNFOU$PMPDBUJPOͱ͍͏ඞਢख๏ const Fragment =
graphql(` fragment RoomForCalendar on Room { code } `); type Props = { FragmentType<typeof Fragment> }; export function Room({ roomData }: Props) { const room = useFragment(Fragment, roomData); return ( <div style={roomStyle}> {room.code} </div> ); } room.tsx
ϑϩϯτΤϯυɿ෦Λදࣔ͢Δίϯϙʔωϯτͷྫ • ྫɿ෦ʹઃඋ͕͍ͨ߹ͷରԠ • มߋ͕ίϯϙʔωϯτͰ݁͢Δ✅ const Fragment = graphql(`
fragment RoomForCalendar on Room { code facility { name type } } `); type Props = { FragmentType<typeof Fragment> }; export function Room({ roomData }: Props) { const room = useFragment(Fragment, roomData); return ( <div style={roomStyle}> {room.code} {facilityIcon(room.facility.type)} {facilityLabel(room.facility.type)} </div> ); } room.tsx
͓ͦͷɿ৽͍͠αʔϏεϓϥϯͷల։ എܠɿ্ཱͪ͛ͷ։ൃͱฒߦͯ͠ɺ్த͔ΒͭͷαʔϏεϓϥϯ͕࢝ಈ
6OJPOܕΛ׆༻ͨ͠ࣄۀల։ɿεΩʔϚϨϕϧ αʔϏεϓϥϯΛ6OJPOܕͰϞσϦϯάͯ͠Ճ͍ͯ͘͠ ॳظͷεΩʔϚఆٛɿ ݱࡏͷεΩʔϚఆٛɿ union ServiceProvider = | SubscriptionProvider
| BusinessProvider | CoOwnersProvider | FullOwnersProvider | StayProvider # ৽αʔϏε # ৽αʔϏε # ৽αʔϏε union ServiceProvider = | SubscriptionProvider | BusinessProvider schema.graphql schema.graphql
6OJPOܕΛ׆༻ͨ͠ࣄۀల։ɿܕϨϕϧ มߋ͖͢ՕॴΛܕΤϥʔͰัଊ ➡मਖ਼ՕॴΛϦετΞοϓ ✅αʔϏεϓϥϯΛػಈతʹల։ ʣવͳ͕ΒυϝΠϯͷؔ৺ࣄΛεΩʔϚͱܕʹͲͷΑ͏ʹɾͲͷఔөͤ͞Δ͔ͱ͍͏υϝΠϯͷใઃܭ࠷ॏཁʹͳΓ·͢ εΩʔϚ͔Βੜ͞Εͨܕʹରͯ͠ཏνΣοΫΛॻ͍͓ͯ͘͜ͱͰɾɾɾ switch (provider.type) { case
"SubscriptionProvider": handleSubscriptionProvider(provider); case "BusinessProvider": handleBusinessProvider(provider); default: { // ৽αʔϏεΛεΩʔϚʹө͢Δͱ͜͜ͰܕΤϥʔ͕ൃੜ const _exhaustiveCheck: never = provider.type; } }
εΩʔϚͱܕʹΑΔ։ൃΛͯ͠Έͯ վΊͯΞϓϦέʔγϣϯશମΛ၆ᛌͯ͠Έ·͢ɿ ɾϑϩϯτΤϯυεΩʔϚʹج͍ͮͯΫΤϦΛൃߦ͢Δॊೈͳ։ൃ͕Ͱ͖Δ ɾόοΫΤϯυͭͷεΩʔϚΛܨׂ͙Λ༩͑ΒΕΔ͜ͱͰਫ਼ͷߴ͍࣮͕Ͱ͖Δ ಉ࣌ʹ։ൃ࣌ͱ࣮ߦ࣌ͷݕূόϥϯεͷྑ͞ʹ͍ͨ͠ͱ͜ΖͰ͢ɿ ɾܕɿ։ൃ࣌ʹ5ZQF4DSJQUʹΑΔܕνΣοΫ✅ʢϑΟʔυόοΫॏࢹʣ ɾεΩʔϚɿ։ൃ࣌ʹՃ࣮͑ͯߦ࣌ݕূ✅ʢ҆શੑॏࢹʣ
ԿΑΓεΩʔϚͱ͍͏நͷߴ͍هड़Λىʹ͢Δ͜ͱɺνʔϜʹڞ௨ݴޠΛͨΒ͠·͢ɻ ඞવతʹ$VSTPS%FWJOͳͲͷ"*ίʔσΟϯάͱൈ܈ʹ૬ੑ͕ྑ͘ͳΓ·͢ɻ ૯ͯ͡εΩʔϚۦಈͷ։ൃ୯ͳΔܕ҆શੑΛ͑ΔՁΛ࣋ͭɺͱݴ͑ΔͰ͠ΐ͏ɻ
·ͱΊ
ࠓ͓͑ͨ͜͠ͱ • εΩʔϚۦಈ'VMM4UBDL5ZQF4DSJQUͷΞʔΩςΫνϟ • (SBQI2-Λ׆༻ͯ͠ϑϩϯτΤϯυͱόοΫΤϯυʹڥքΛ࡞Δ • ϑϩϯτΤϯυͷଟ༷ԽόοΫΤϯυͷׂɾ֦ுͳͲͷൃలύλʔϯ • ϫϯϓϩηεԽɺΠϯϓϩηεԽɺϓϥοτϑΥʔϜ׆༻ͳͲͷςΫχοΫ
• εΩʔϚۦಈͰͷ։ൃ • εΩʔϚఆ͔ٛΒϑϩϯτΤϯυɾόοΫΤϯυͷ࣮·Ͱ • εΩʔϚ͔Βܕʹམͱ͠ࠐΉ͜ͱͰࣄۀల։ੑΛ֫ಘ͢Δྫ
ͷιϑτΣΞΛ5ZQF4DSJQUͰΔ ࠷ޙʹɾɾɾ ʹ࢝·ͬͨଟ͘ͷ8FCαʔϏεɺͱڞʹٕज़ɾ৫ͷεέʔϧͷ՝ʹ औΓΜͰ͖·ͨ͠ɻεΩʔϚਐతܕ͚ͷٕज़ॳະख़Ͱͨ͠ɻ ͦͯ͠ࠓɺࢲ͕ͨͪఏҊ͢ΔͷɺʮεΩʔϚͱܕΛ࣠ʹͨ͠'VMM4UBDL5ZQF4DSJQUʯͱ ͍͏۩ମతͳղܾࡦͰ͢ɻ ͜Ε୯ʹ։ൃޮͷͰͳ͘ɺ࣋ଓՄೳͰՁ͋ΔιϑτΣΞΛ࡞ΔͨΊͷຊ࣭ తͳΞϓϩʔνͷҰͭͰ͢ɻ ͥͻօ͞ΜͷݱͰࢼͯ͠Έ͍ͯͩ͘͞ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
"QQFOEJY
ٕज़ʹ͓͚Δ(SBQI2-ͷཱͪҐஔ • ݺͼग़͠ଆͷॊೈੑ͕13$ΑΓߴ͘ɺϑϩϯτΤϯυͱόοΫΤϯυͷͷڥք ͕มΘΔ ▶︎ ͜ͷ݁Ռͱͯ͠ϑϩϯτΤϯυͷల։ੑ͕ߴ͘ͳΔ • ಉ࣌ʹ࠷దԽͱͷτϨʔυΦϑ͕͋ΔͨΊɺ͜ͷதͰൺֱͯ͠બ͢Δ͜ͱʹͳΔ "1*DVTUPNJ[BUJPOTQFDUSVNUSBEFP
ff 1SPEVDUJPO3FBEZ(SBQI2-<YY>
αʔόʔαΠυʹ͓͚Δ(SBQI2-ݺͼग़͠ import { YogaLink } from "@graphql-yoga/apollo-link"; function createApolloClientForServer(...)
{ return new ApolloClient({ // มߋ͜Ε͚ͩ link: new YogaLink({ fetch: yoga.fetch, endpoint: yoga.graphqlEndpoint, }), // ... }); } ɾ"QPMMP$MJFOUͷMJOLΛมߋ͢Δ͜ͱͰΠϯϓϩηεʹͰ͖Δ
3FBM8PSME(SBQI2-4DIFNB ɾεΩʔϚΛҭ͍ͯͯ͘ͱ͜͏͍͏άϥϑ͕ग़དྷ͍ͯ͘
(SBQI2-ؔ࿈ͷ͓͢͢Ίࢿྉू • 5ZQF4DSJQUͱ(SBQI2-Ͱ࣮ݱ͢Δܕ҆શͳ"1*࣮ • IUUQT[FOOEFWVCJF@EFWBSUJDMFTBEFFFF • (SBQI2-ͷޡղSFUIJOLJOHHSBQIRM • IUUQTTQFBLFSEFDLDPNTPOBUBSESFUIJOLJOHHSBQIRM •
1SPEVDUJPO3FBEZ(SBQI2- • IUUQTCPPLQSPEVDUJPOSFBEZHSBQIRMDPN • (SBQI2-͋Δ͍3FBDUʹ͓͚Δࣗతͳσʔλऔಘʹ͍ͭͯ • IUUQTTQFBLFSEFDLDPNRVSBNZGSBHNFOUDPNQPTJUJPOPGHSBQIRM • (SBQI2-αʔόͷߏཁૉΛཧ͢Δ • IUUQTTQFBLFSEFDLDPNJ[VNJOHSBQIRMTFSWFSUFDIOPMPHZTFMFDUJPO
όοΫΤϯυͷϨΠϠϦϯά