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な型安全を支えるGraphQLのFragment活用
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Anji.T
August 28, 2025
Programming
1
140
Full Stackな型安全を支えるGraphQLのFragment活用
Anji.T
August 28, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
Best-Practices-for-Cortex-Analyst-and-AI-Agent
ryotaroikeda
1
110
高速開発のためのコード整理術
sutetotanuki
1
410
CSC307 Lecture 02
javiergs
PRO
1
780
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
210
ぼくの開発環境2026
yuzneri
0
240
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
AI時代の認知負荷との向き合い方
optfit
0
170
CSC307 Lecture 04
javiergs
PRO
0
660
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
nash_efp
1
990
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
150
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
How to make the Groovebox
asonas
2
1.9k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
140
Become a Pro
speakerdeck
PRO
31
5.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Technical Leadership for Architectural Decision Making
baasie
2
250
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
58
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
260
The Curious Case for Waylosing
cassininazir
0
240
Leo the Paperboy
mayatellez
4
1.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.7k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
Transcript
Full Stackな型安全を支える GraphQLのFragment活用 田中 杏直 / Tanaka Anji 2025/08/28 TsKaigi
Mashup
氏名:田中 杏直 / Tanaka Anji @anji0114 自己紹介 所属:匠技研工業 / プロダクトエンジニア
None
None
• GraphQLでの開発の流れ • データ取得の課題と Fragment • Full Stackな型安全を支える Fragment 今日お話しすること
GraphQLでの開発の流れ
スキーマの定義
バックエンド実装
GraphQL Codegen
生成されたファイル
データ取得の設計課題と Fragment
どこでデータを取得する?問題
他の設計パターン Repository + Hooks • どこでuseUserを呼ぶか? • 親で呼ぶ?子で呼ぶ?複数の場所で呼んだら 重複する? •
コンポーネント追加のたびに、親の取得内容を 都度調整
他の設計パターン Container/Presentational • どのレベルでContainerを作るか? • ページ単位?セクション単位?コンポーネント単 位?
Fragment Colocationを使用することで
子は親の取得位置を気にせず開発することできる
Full Stackな型安全を支える Fragment
None
バックエンド側で schemaを変更した時
型エラーをコンポーネントレベルで出すことができる
コンポーネントが増えた場合でも
該当コンポーネントだけを変えれば良い
まとめ • 従来の「どこでクエリを呼ぶか?」「親子で重複してない?」という判断コスト が減る。 • 各コンポーネントが必要なデータを Fragmentで宣言するため、 親の設計 や他コンポーネントの実装を知る必要がない。 •
バックエンド側で Schemaを変更時、コンポーネントレベルでコンパイルエ ラーを出してくれる。
匠技研工業ではエンジニアを募集しています!!
ありがとうございました!