Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ゼロから始める型安全なGraphQL開発
Search
黒柳シャチ子
June 22, 2024
Programming
1
570
ゼロから始める型安全なGraphQL開発
PHPConference福岡2024LT登壇資料
黒柳シャチ子
June 22, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
宅宅自以為的浪漫:跟 AI 一起為自己辦的研討會寫一個售票系統
eddie
0
510
re:Invent 2025 のイケてるサービスを紹介する
maroon1st
0
140
GISエンジニアから見たLINKSデータ
nokonoko1203
0
180
ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた
nearme_tech
PRO
0
130
これならできる!個人開発のすゝめ
tinykitten
PRO
0
120
LLMで複雑な検索条件アセットから脱却する!! 生成的検索インタフェースの設計論
po3rin
4
900
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
740
認証・認可の基本を学ぼう前編
kouyuume
0
260
TestingOsaka6_Ozono
o3
0
170
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
120
ViewファーストなRailsアプリ開発のたのしさ
sugiwe
0
510
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
790
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
30
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
0
40
Typedesign – Prime Four
hannesfritz
42
2.9k
The SEO Collaboration Effect
kristinabergwall1
0
300
The Cult of Friendly URLs
andyhume
79
6.7k
Designing for humans not robots
tammielis
254
26k
Google's AI Overviews - The New Search
badams
0
870
Building Flexible Design Systems
yeseniaperezcruz
330
39k
Practical Orchestrator
shlominoach
190
11k
Transcript
ゼロから始める 型安全なGraphQL開発 with Laravel + Lighthouse + TypeScript 黒柳シャチ子 /
髙山 伶
・黒柳シャチ子 / 髙山 伶 (@shachi_daikon55) ・所属: ディップ株式会社 ・バイトルなどのWEBアプリ開発 / 3年目
・PHP / TypeScript / AWS … 自己紹介
今日伝えたいこと
GraphQLを使った スキーマ駆動開発
めっちゃいいぞっ 👍
GraphQL使うなら Laravel + Lighthouse
めっちゃいいぞっ 👍
GraphQLでの型安全な 開発体験の良さを
ぜひ皆さんにも伝えたい!!
そんなLTです
まずは GraphQLおさらい
RESTの手法と 比較しながら説明
APIサーバー RESTの場合 クライアント “/users/1” エンドポイント毎に決め られた処理を実行
APIサーバー RESTの場合 クライアント “/users/1” しかしuser情報のうち ”name”しか必要としない場合 エンドポイント毎に決め られた処理を実行
APIサーバー RESTの場合 クライアント “/users/1” ここの取得データが余分 エンドポイント毎に決め られた処理を実行
APIサーバー RESTの場合 クライアント “/users/1” ここの取得データが余分 エンドポイント毎に決め られた処理を実行 リソースのオーバー・アンダーフェッチ
GraphQLの場合
APIサーバー クライアント “/graphql” エンドポイントは一つだけ 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ
どうやってクライアントは クエリを作るの?
GraphQLでは必ず スキーマと呼ばれる 型を伴ったデータリソースを定義 = I/F まずGraphQLで定義する スキーマ(I/F)を参照
まずGraphQLで定義する スキーマ(I/F)を参照
まずGraphQLで定義する スキーマ(I/F)を参照 この型の、
まずGraphQLで定義する スキーマ(I/F)を参照 このフィールドが欲しい
まずGraphQLで定義する スキーマ(I/F)を参照 User型はこの二つのクエリで提供されている
まずGraphQLで定義する スキーマ(I/F)を参照 User型はこの二つのクエリで提供されている このデータを取得するクエリは
このような形で組み上げられる
このような形で組み上げられる
APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ
APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ 必要なリソースを柔軟に指定できる オーバー・アンダーフェッチを防げる
APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ それが GraphQL
以上GraphQLの 前提知識おさらい
開発体験的に嬉しい点 (クライアント)
・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント )
・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント ) 簡単に型安全に開発できちゃう
✅
・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント )
クエリするデータを component単位で記述する User詳細画面の componentたち UserName.tsx UserEmail.tsx
クエリするデータを component単位で記述する User詳細画面の componentたち UserName.tsx UserEmail.tsx 欲しい
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 ただこれ、
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 親 component (page)が
子 component で必要なデータを 知ってなきゃいけない。。。
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 もしcomponentの 必要なデータが変わった場合、
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 そのcomponentを使っているすべての pageでクエリの書き換えが必要になる 🤨
そこで、
Fragment Colocation という仕組みを使用 UserName.tsx UserEmail.tsx component毎に 欲しいデータを定義
Fragment Colocation という仕組みを使用 UserName.tsx UserEmail.tsx 要は componentたちは 各々欲しいデータを自ファイル中で主張
分配 page側でそのFragment(主張)をまとめる
分配する時 pageは子の欲しいデータについて 関心を持たない 分配
分配する時 pageは子の欲しいデータについて 関心を持たない 分配 欲しいデータの情報が componentの中に閉じる
分配する時 pageは子の欲しいデータについて 関心を持たない 分配 バリ改修しやすい 👍
さらに、
・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 実際の開発体制での嬉しみ (クライアント )
GraphQL codegen で GraphQLクエリの型を TypeScriptで使う
UserName.tsx UserEmail.tsx GraphQL codegenを使うと
UserName.tsx UserEmail.tsx Fragmentやクエリを元に GraphQLから型を自動生成してくれる Fragmentを元に、 型を自動生成 Fragmentを元に、 型を自動生成
このFragmentと 型の自動生成を組み合わせると
もし必要なデータに 変更があったとしても User詳細画面の componentたち UserName.tsx UserEmail.tsx 欲しい 追加で 欲しい
componentの Fragmentを追記して UserEmail.tsx 追記
codegenの型生成コマンド を実行するだけで
APIのデータ取得内容を変えられちゃう! 分配 追加取得 できちゃう
それだけで APIのデータ取得内容を変えられちゃう! 分配 追加取得 できちゃう 型のエラーも起きません ✅ API連携での余計な型エラーとは おさらば
それだけで APIのデータ取得内容を変えられちゃう! 分配 追加取得 できちゃう 超簡単に型安全に APIと連携できちゃう ✅
クライアント側はわかったけど サーバー側は難しいのでは?
APIサーバー RESTの場合 クライアント “/users/1” エンドポイント毎に決め られた処理を実行 “/posts” 処理1 処理2
GraphQLの場合
APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・
APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・ めんどくさそう ?
APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・ 大丈夫ですよ 😏
Lighthouseが あるからねぇ!
Lighthouse Laravelフレンドリーな GraphQL FW https://lighthouse-php.com/
Lighthouse APIサーバー Lighthouseのサーバーに スキーマを設置して動作 ・・・
スキーマに直説解決処理を記載していく ・・・ Lighthouse APIサーバー
Lighthouseの強力なスキーマ解決能力 ・ モデル・カラムと名前が一致するスキーマは デフォルトでその値を返してくれる ・ディレクティブ と呼ばれる使い回しの効く備え 付けのスキーマ解決処理が豊富 ・複雑なスキーマの解決は、リゾルバー にまと められる
先ほどのUser型 の実装を考える
これが
こう!
ディレクティブ を使えばシンプルに Lighthouse備え付けの ディレクティブ リレーション id引数一致のUserモデ ルを取得
ディレクティブが ついてないものは自動解決 Userモデルのid, name, emailのカラム値を取得
APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・
APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ 👍 手軽に始められる 👍 ディレクティブのおかげで記述量少なく済む 👍
スキーマファーストなので、 スキーマ駆動開発しやすい
APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ PHPerの皆さん LighthouseでGraphQL 触り始めてはいかがでしょう?
APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ 触りましょうよ!!!!
いかがだったでしょうか
「なんかよくわからないけど、 面白そうだ!」
そう思っていただけたら 幸いです🙏
まとめ ・ GraphQL + TypeScriptは、すごく簡単に型 安全なAPI連携ができる ・Laravel + Lighthouseはスキーマの解決が 楽。記述量が少なく済む。
・GraphQLの開発は一度仕組みを整えると改 修がほんとにしやすい
カジュアル面談やってます! https://hrmos.co/pages/dip-net/jobs/phperkaigi-dip
ご清聴ありがとうございました!