Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Full Stackな型安全を支えるGraphQLのFragment活用
Search
Anji.T
August 28, 2025
Programming
1
130
Full Stackな型安全を支えるGraphQLのFragment活用
Anji.T
August 28, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
180
[AtCoder Conference 2025] LLMを使った業務AHCの上⼿な解き⽅
terryu16
3
610
TestingOsaka6_Ozono
o3
0
170
生成AI時代を勝ち抜くエンジニア組織マネジメント
coconala_engineer
0
530
AIコーディングエージェント(skywork)
kondai24
0
200
Microservices rules: What good looks like
cer
PRO
0
1.6k
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
uki00a
0
150
AIエージェントの設計で注意するべきポイント6選
har1101
5
2.1k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
170
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
cer
PRO
0
390
tparseでgo testの出力を見やすくする
utgwkk
2
270
リリース時」テストから「デイリー実行」へ!開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
goataka
0
140
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
160
AI: The stuff that nobody shows you
jnunemaker
PRO
1
9
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
9.1k
WENDY [Excerpt]
tessaabrams
8
35k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
130
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
0
300
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
750
Evolving SEO for Evolving Search Engines
ryanjones
0
73
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を変更時、コンポーネントレベルでコンパイルエ ラーを出してくれる。
匠技研工業ではエンジニアを募集しています!!
ありがとうございました!