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

GraphQLでの型渡しとデータフェッチの最適化

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for 林憲吾 林憲吾
September 19, 2024
Technology
1
580

 GraphQLでの型渡しとデータフェッチの最適化

「テックリードの悩みを解決するGraphQLの話」にて登壇した資料です。
https://estie.connpass.com/event/328999/

Avatar for 林憲吾

林憲吾

September 19, 2024
Tweet

More Decks by 林憲吾

See All by 林憲吾
GraphQLを安全に使うためにやっていること
Avatar for 林憲吾 hayashikengo
2
880
電子署名サービスの品質戦略
Avatar for 林憲吾 hayashikengo
1
1k
CTOの役割と、カルチャーの醸成
Avatar for 林憲吾 hayashikengo
1
99

Other Decks in Technology

See All in Technology
AWS CDK「読めるけど書けない」を脱却するファーストステップ
Avatar for Makky12 smt7174
3
160
The_Evolution_of_Bits_AI_SRE.pdf
Avatar for 株式会社ヌーラボ nulabinc
PRO
0
240
内製AIチャットボットで学んだDatadog LLM Observability活用術
Avatar for k.masachika mkdev10
0
130
20260311 ビジネスSWG活動報告（デジタルアイデンティティ人材育成推進WG Ph2 活動報告会）
Avatar for OpenID Foundation Japan oidfj
0
340
Postman v12 で変わる API開発ワークフロー (Postman v12 アップデート) / New API development workflow with Postman v12
Avatar for Yoichi Kawasaki yokawasa
0
140
visionOS 開発向けの MCP / Skills をつくり続けることで XR の探究と学習を最大化
Avatar for kazuhiro hara karad
1
500
最強のAIエージェントを諦めたら品質が上がった話 / how quality improved after giving up on the strongest AI agent
Avatar for kt2 kt2mikan
0
190
CyberAgentの生成AI戦略 〜変わるものと変わらないもの〜
Avatar for katayan katayan
0
260
Claude Code Skills 勉強会 (DevelersIO向けに調整済み) / claude code skills for devio
Avatar for MasahiroKawahara masahirokawahara
1
22k
"作る"から"使われる"へ：Backstage 活用の現在地
Avatar for SoftBank Tech Night sbtechnight
0
180
複数クラスタ運用と検索の高度化：ビズリーチにおけるElastic活用事例 / ElasticON Tokyo2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
170
マルチアカウント環境でSecurity Hubの運用！導入の苦労とポイント / JAWS DAYS 2026
Avatar for GENDA genda
0
840

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
640
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
220
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
280
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
860
Side Projects
Avatar for Sacha Greif sachag
455
43k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
63
51k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k

Transcript

  1. GraphQLでの型渡しとデータフェッチの最適化 株式会社PICK 林憲吾 Hayashi Kengo

  2. https://twitter.com/kenbu05 株式会社PICK CTO 林憲吾 Hayashi Kengo 自己紹介 ①経歴 ②趣味 学生時代　

    スペースマーケット (インターン ) 2018-2019　 ヤフー 2019-2022　スリーシェイク 2022-現在　 PICK CTO 筋トレ・バイク・釣り

  3. はじめに GraphQLでの型渡しとデータフェッチの最適化 01. AtomicDesign と colocationの相性 02. 03. 目次 まとめ

    04.

  4. 01. はじめに

  5. PICKはどんなプロダクトを作っているのか？ 01. はじめに 電子契約 案件管理 顧客管理 and more…

  6. PICKの技術スタック 01. はじめに

  7. GraphQLを効率的に扱う為にしたこと 01. はじめに データフェッチ最適化 → colocationの概念取り入れた コンポーネントでの Propsの扱いを楽に → fragmentとgraphql-codegenを取り入れた

  8. 02. GraphQLでの型渡しとデータフェッチの最適化

  9. colocationとは？ 02. GraphQLでの型渡しとデータフェッチの最適化 データの取得ロジックと、そのデータを使う UIコンポーネントを 同じ場所にまとめて管理するという考え方。

  10. なぜ取り入れたか？ 02. GraphQLでの型渡しとデータフェッチの最適化 - コンポーネント内にデータ取得ロジックが集約 → 開発効率とメンテナンス性の向上 → データフェッチの最適化

  11. colocation具体例（ヘッダーの場合） 02. GraphQLでの型渡しとデータフェッチの最適化

  12. コンポーネントのデータ定義が共通化できる 02. GraphQLでの型渡しとデータフェッチの最適化

  13. 共通化される場合の GraphQLの定義 02. GraphQLでの型渡しとデータフェッチの最適化

  14. graqhpl-codegenとは？ 02. GraphQLでの型渡しとデータフェッチの最適化 GraphQLスキーマやクエリをもとに、 型安全なコードを自動生成するライブラリ

  15. graqhpl-codegenをなぜ取り入れたか？ 02. GraphQLでの型渡しとデータフェッチの最適化 - フロントエンド側で、 GraphQLを型安全に扱う為。 → GraphQLのメリットを最大限享受 → Fragmentの型生成が

    colocation と相性良かった

  16. graphql-codegen実装例①（ hooks編） 02. GraphQLでの型渡しとデータフェッチの最適化

  17. graphql-codegen実装例②（ fragment編） 02. GraphQLでの型渡しとデータフェッチの最適化

  18. まとめ 02. GraphQLでの型渡しとデータフェッチの最適化 - colocation・graphql-codegen 導入すると → データに依存した Component Propsの型生成を自動化

    → 保守性・開発効率上がる → Queryの使いまわしが減り、データフェッチの最適化

  19. 03. AtomicDesign と colocation の相性

  20. AtomicDesignにおけるcolocation相性 03. GraphQLでのデータフェッチ最適化 - 必ずしも相性が良いとは限らない、、、 - データの再利用性 vs UIの再利用性の衝突 -

    各階層にFragmentが絡むことでのデータ階層の複雑性の増加 - 依存関係の複雑化

  21. AtomicDesignにおけるcolocationの落とし所 03. GraphQLでのデータフェッチ最適化 - Fragmentルール化 - 上位コンポーネントに集約 - 必要な場合にのみ Colocationを使う

    - Prop Drillingを活用する

  22. 04. まとめ

  23. まとめ 04. - colocation と graphql-codegen を導入すると、 GraphQLの メリットを享受できる -

    AtomicDesign と colocation は必ずしも相性が良い訳ではなく、 導入時には要検討

  24. 最後に 04. - Twitter/Zennやってます！ご興味あれば見てみてください！ - https://x.com/kenbu05 - https://zenn.dev/kenghaya -

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

  26. None