Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQL 入門
Search
SAW
April 06, 2024
Programming
1
280
GraphQL 入門
GENKI.dev なんでもLT会 vol3 の発表資料です。
SAW
April 06, 2024
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
410
EditorConfig を使ってみよう
azuki
1
75
Symfony でサクッと作る REST API サーバー
azuki
1
140
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
170
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
270
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
140
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
360
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
310
Eloquent で relation を扱う基礎
azuki
0
160
Other Decks in Programming
See All in Programming
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
MCPで実現できる、Webサービス利用体験について
syumai
7
2.2k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
890
コーディングエージェント概観(2025/07)
itsuki_t88
0
460
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
230
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
階層化自動テストで開発に機動力を
ickx
1
450
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
740
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How GitHub (no longer) Works
holman
314
140k
Facilitating Awesome Meetings
lara
54
6.5k
How STYLIGHT went responsive
nonsquared
100
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Rails Girls Zürich Keynote
gr2m
95
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Transcript
GraphQL ⼊⾨ なんでもLT会 vol 3 2 02 4 / 0
4 / 0 6 SAW
$(whoami) • ⽒名: 加藤 宗⼀郎 (29歳) • ハンドルネーム: SAW •
関⻄の IT エンジニア コミュニティの賑やかし担当 (⾃称) • ⼤阪在住‧愛知出⾝ • X (旧 Twitter): @azuki_eater • 得意分野: Web アプリケーション開発 • Vue, Laravel 2
GraphQL とは • API のための問い合わせ⾔語 • GraphQL ではクエリで必要なデータをクライアントが指定 • サーバーはクエリに基づいて必要なデータを返却
• さまざまなプログラミング⾔語でのサーバー実装ライブラリが存在 3
GraphQL の特徴 • 必要なデータを 1 つのクエリで過不⾜なく柔軟に取得可能 • REST では API
のエンドポイントが返すデータ構造は⼀定 • GraphQL のエンドポイントは 1 つ • REST API では必要に応じてエンドポイントを新たに作成する必要がある • GraphQL はスキーマファースト • 各フィールドのデータ型を定義できクエリの型検証も可能 4
GraphQL を利⽤した API 通信の流れ 1 . クライアントがクエリを送信する 2 . サーバーは要求されるフィールドのデータを取得する処理を実⾏する
3 . 取得したデータをクライアントに返却する 5 クライアント サーバー query loginUser { user { me } } { "data": { "user": { "me": "SAW" } } } 1 . クエリを送信 2 . 要求されるフィールドの データを取得 3 . データを JSON で返却
GraphQL におけるデータ操作 • GraphQL におけるデータ操作の分類は以下の 3 つ • Query: データの読み込み操作
• CRUD の R (Read) を担当 • Mutation: データの書き込み操作 • CRUD の C (Create), U (Update), D (Delete) を担当 • Subscription: サーバーの更新をリアルタイムに取得 • サーバーのデータが変更されると subscribe しているクライアントに通知 6
GraphQL のクエリの基本的な記述⽅法 • データ操作 (query, mutation, subscription) の種類を記載 • データ操作の種類は省略可能
(フィールドを囲む波括弧は省略不可) • 取得対象のフィールドを指定 • フィールドがオブジェクトの場合はそのオブジェクトのプロパティを⼊れ⼦で指定 • フィールドが引数を受け取る場合は指定可能 7
GraphQL のクエリ例 • Countries GraphQL API を使った例 8 query Countries
{ countries { code name emoji languages { code name } } } 国の名前‧絵⽂字‧⾔語を取得 query Country { country(code: "JP") { code capital currency emoji name } } コードが JP の国の情報を取得 オブジェクトが⼊れ⼦の場合は ⼦オブジェクトのフィールドも指定 引数を指定
スキーマの定義 • API でどのような操作やフィールドが利⽤可能かを定義 • GraphQL におけるスキーマ定義⾔語によって定義 • サーバー側でスキーマを定義 •
それぞれのフィールドの型についても定義 9
GraphQL の型 • GraphQL にはスカラー型とオブジェクト型の 2 種類が存在 • スカラー型: GraphQL
で定義済みの型 • 定義済みの型: Int, Float, String, Boolean, ID • オブジェクト型: 複数のフィールドで構成される型 • non-nullable の指定はエクスクラメーションマーク (!) を記述 10
リストの表現⽅法 • GraphQL ではリストを⾓括弧 ([]) で表現 • リストの中⾝とリスト⾃⾝が nullable かどうかの指定が可能
11 リストの型宣⾔ 定義 [Int] リスト: nullable 中⾝: nullable な Int [Int!] リスト: nullable 中⾝: non-nullable な Int [Int]! リスト: non-nullable 中⾝: nullable な Int [Int!]! リスト: non-nullable 中⾝: non-nullable な Int
オブジェクト同⼠のリレーション • フィールドにオブジェクト型を指定することでリレーションを表現 • ⼀対⼀: フィールドにオブジェクト型を指定 • ⼀対多: フィールドにオブジェクトのリストを指定 •
多対多: 双⽅向に⼀対多のフィールドを定義 12
リレーションの定義例 • Countries GraphQL API を模倣して型定義する例 13 type Language {
code: ID! name: String! } type Country { code: ID! name: String! emoji: String! languages: [Language!]! } ⼀対多の例 type Language { code: ID! name: String! } type Country { code: ID! name: String! emoji: String! language: Language! } ⼀対⼀の例 type Language { code: ID! name: String! countries: [Country!]! } type Country { code: ID! name: String! emoji: String! languages: [Language!]! } 多対多の例 ※ 上記の例の場合は「⼀対多」が⾃然な定義
総括 • GraphQL の概要を説明 • GraphQL のデータ操作について説明 • Query, Mutation,
Subscription の役割 • GraphQL のクエリの基本的な書き⽅について説明 • GraphQL のスキーマ定義について説明 • スカラー型とオブジェクト型 • リレーションの実現⽅法 14
ご清聴ありがとうございました