$30 off During Our Annual Pro Sale. View Details »

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

Avatar for 林憲吾 林憲吾
September 19, 2024
Technology
1
550

 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
840
電子署名サービスの品質戦略
Avatar for 林憲吾 hayashikengo
1
960
CTOの役割と、カルチャーの醸成
Avatar for 林憲吾 hayashikengo
1
92

Other Decks in Technology

See All in Technology
re:Invent2025 コンテナ系アップデート振り返り(+CloudWatchログのアップデート紹介)
Avatar for 枡川健太郎 masukawa
0
390
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
Avatar for Databricks Japan databricksjapan
1
210
AI時代の新規LLMプロダクト開発: Findy Insightsを3ヶ月で立ち上げた舞台裏と振り返り
Avatar for Dakuon dakuon
0
210
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
Avatar for yayoi_dd yayoi_dd
0
130
AI駆動開発の実践とその未来
Avatar for Ikko Eltociear Ashimine eltociear
1
210
Fashion×AI「似合う」を届けるためのWEARのAI戦略
Avatar for ZOZO Developers zozotech
PRO
2
850
Strands Agents × インタリーブ思考 で変わるAIエージェント設計 / Strands Agents x Interleaved Thinking AI Agents
Avatar for Takanori Suzuki takanorig
2
160
S3を正しく理解するための内部構造の読解
Avatar for NRI Netcom nrinetcom
PRO
2
160
ActiveJobUpdates
Avatar for Kuniaki IGARASHI igaiga
1
140
生成AIを利用するだけでなく、投資できる組織へ / Becoming an Organization That Invests in GenAI
Avatar for 株式会社カミナシ kaminashi
0
110
Microsoft Agent 365 についてゆっくりじっくり理解する！
Avatar for skmkzyk skmkzyk
0
380
RAG/Agent開発のアップデートまとめ
Avatar for sakai taka0709
0
190

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k

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