Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Full Stackな型安全を支えるGraphQLのFragment活用

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Anji.T Anji.T
August 28, 2025
Programming
1
140

Full Stackな型安全を支えるGraphQLのFragment活用

Avatar for Anji.T

Anji.T

August 28, 2025
Tweet

Other Decks in Programming

See All in Programming
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
110
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
410
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
210
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
240
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
170
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
990
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
150

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
2
250
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
58
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
260
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
240
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380

Transcript

  1. Full Stackな型安全を支える GraphQLのFragment活用 田中 杏直 / Tanaka Anji 2025/08/28 TsKaigi

    Mashup

  2. 氏名：田中 杏直 / Tanaka Anji @anji0114 自己紹介 所属：匠技研工業 / プロダクトエンジニア

  3. None
  4. None

  5. • GraphQLでの開発の流れ • データ取得の課題と Fragment • Full Stackな型安全を支える Fragment 今日お話しすること

  6. GraphQLでの開発の流れ

  7. スキーマの定義

  8. バックエンド実装

  9. GraphQL Codegen

  10. 生成されたファイル

  11. データ取得の設計課題と Fragment

  12. どこでデータを取得する？問題

  13. 他の設計パターン Repository + Hooks • どこでuseUserを呼ぶか？ • 親で呼ぶ？子で呼ぶ？複数の場所で呼んだら 重複する？ •

    コンポーネント追加のたびに、親の取得内容を 都度調整

  14. 他の設計パターン Container/Presentational • どのレベルでContainerを作るか？ • ページ単位？セクション単位？コンポーネント単 位？

  15. Fragment Colocationを使用することで

  16. 子は親の取得位置を気にせず開発することできる

  17. Full Stackな型安全を支える Fragment

  18. None

  19. バックエンド側で schemaを変更した時

  20. 型エラーをコンポーネントレベルで出すことができる

  21. コンポーネントが増えた場合でも

  22. 該当コンポーネントだけを変えれば良い

  23. まとめ • 従来の「どこでクエリを呼ぶか？」「親子で重複してない？」という判断コスト が減る。 • 各コンポーネントが必要なデータを Fragmentで宣言するため、 親の設計 や他コンポーネントの実装を知る必要がない。 •

    バックエンド側で Schemaを変更時、コンポーネントレベルでコンパイルエ ラーを出してくれる。

  24. 匠技研工業ではエンジニアを募集しています！！

  25. ありがとうございました！