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
Taro Nagasawa
January 26, 2018
Programming
5
4.2k
GraphQL入門
エムスリー Tech Talk で発表したスライドです。
Taro Nagasawa
January 26, 2018
Tweet
Share
More Decks by Taro Nagasawa
See All by Taro Nagasawa
Android開発者のための Kotlin Multiplatform入門
ntaro
0
690
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
2.2k
#Ubie 狂気の認知施策と選考設計
ntaro
13
13k
UbieにおけるサーバサイドKotlin活用事例
ntaro
1
1.1k
KotlinでSpring 完全理解ガイド #jsug
ntaro
6
3.4k
Kotlinでサーバサイドを始めよう!
ntaro
1
990
Androidからサーバーサイドまで!プログラミング言語 Kotlinの魅力 #devboost
ntaro
5
2.7k
Kotlin Contracts #m3kt
ntaro
4
4.1k
How_to_Test_Server-side_Kotlin.pdf
ntaro
1
500
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
Is Xcode slowly dying out in 2025?
uetyo
1
270
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Become a Pro
speakerdeck
PRO
29
5.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Code Review Best Practice
trishagee
69
18k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Visualization
eitanlees
146
16k
Writing Fast Ruby
sferik
628
62k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The World Runs on Bad Software
bkeepers
PRO
69
11k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
GraphQL 入門
長澤 太郎 • エムスリー株式会社 • 日本Kotlinユーザグループ代表
もくじ 1. GraphQLとは 2. GraphQLを始める 3. 便利なツールやサービス
1. GraphQLとは
None
GraphQL • Facebook発OSSであるクエリ言語 ◦ REST APIに代わるリソース操作方法を提供 ◦ HTTPだけでなく、gRPCやThriftの上でも動く • 必要なものだけ取得できる
• 一度のリクエストで関連するものすべてを取得できる • 型システム • API定義コードがそのままドキュメントに
スキーマとクエリ type Query { hello: String } { hello }
スキーマ クエリ { "data": { "hello": "Hello, world!" } } レスポンス
スキーマとクエリ type Query { hello: String } { hello }
スキーマ クエリ { "data": { "hello": "Hello, world!" } } レスポンス 型
スキーマとクエリ type Query { hello: String } { hello }
スキーマ クエリ { "data": { "hello": "Hello, world!" } } レスポンス クエリと結果が同じ形!
{ hello { content } } ユーザ定義型 type Message {
content: String } type Query { hello: Message } { "data": { "hello": { "content": "Hello, world!" } } }
{ hello { priority } } 列挙型 enum Priority {
HIGH, NORMAL } type Message { content: String, priority: Priority } type Query { hello: Message } { "data": {"hello": { "priority": "HIGH" } } }
{ hello { priority } } 列挙型 enum Priority {
HIGH, NORMAL } type Message { content: String, priority: Priority } type Query { hello: Message } { "data": {"hello": { "priority": "HIGH" } } } クエリと結果が同じ形! 必要なフィールドを自由に選 択できる!
関連するデータ(スキーマ) type User { name: String, messages: [Message] } enum
Priority { HIGH, NORMAL } type Message { content: String, priority: Priority user: User } type Query { hello: Message }
関連するデータ(クエリ) { hello { content, user { name } }
{ "data": { "hello": { "content": "Hello, world!", "user": { "name": "Taro" } } } }
non-null type User { name: String! messages: [Message]! } enum
Priority { HIGH, NORMAL } type Message { content: String!, priority: Priority! user: User! } type Query { hello: Message! }
コメント # ただのコメント "ドキュメント用のコメント" type Message { "内容" content: String!,
"優先度" priority: Priority! "投稿者" user: User! }
スキーマ再考とミューテーション # ユーザ定義型 type Message { id: Int! content: String!
} # クエリ type Query { getAllMessages: [Message]! getMessage(id: Int!): Message } # ミューテーション type Mutation { createMessage(content: String!): Message updateMessage(id: Int!, content: String!): Message }
ミューテーションoperation mutation { createMessage(content: "Hello, world!") { id content }
}
ミューテーションoperation mutation { createMessage(content: "Hello, world!") { id content }
} query { getAllMessages { id content } } ちなみに、クエリは指定もできるし省略もできる
データの変更を受け取る"第3のoperation" subscription { Message(filter: { mutation_in: [UPDATED, DELETED] }) {
mutation node { id content } previousValues { id content } } }
データの変更を受け取る"第3のoperation" subscription { Message(filter: { mutation_in: [UPDATED, DELETED] }) {
mutation node { id content } previousValues { id content } } } ミューテーションの種 類でフィルタ ミューテーションの種類 どういう操作があったのか 変更後の値 変更前の値
2. GraphQLを始める
好きな言語で実装しよう
Node + ExpressでGraphQL const express = require('express'); const graphqlHTTP =
require('express-graphql'); const { buildSchema } = require('graphql'); const schema = buildSchema(` type Query { hello: String! } `); const root = { hello: () => 'Hello, world!'; }; const app = express(); app.user('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000);
Node + ExpressでGraphQL const express = require('express'); const graphqlHTTP =
require('express-graphql'); const { buildSchema } = require('graphql'); const schema = buildSchema(` type Query { hello: String! } `); const root = { hello: () => 'Hello, world!'; }; const app = express(); app.user('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000); スキーマの定義
Node + ExpressでGraphQL const express = require('express'); const graphqlHTTP =
require('express-graphql'); const { buildSchema } = require('graphql'); const schema = buildSchema(` type Query { hello: String! } `); const root = { hello: () => 'Hello, world!'; }; const app = express(); app.user('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000); APIの実装
起動してクエリを実行 curl http://localhost:4000/graphql\ -X POST\ -H 'Content-type: application/json'\ -d '
{ "query":"{ hello }" } ' {"data":{"hello":"Hello, world!"}}
起動してクエリを実行 curl http://localhost:4000/graphql\ -X POST\ -H 'Content-type: application/json'\ -d '
{ "query":"{ hello }" } ' {"data":{"hello":"Hello, world!"}} JSON
起動してクエリを実行 curl http://localhost:4000/graphql\ -X POST\ -H 'Content-type: application/json'\ -d '
{ "query":"{ hello }" } ' {"data":{"hello":"Hello, world!"}} GraphQL
GraphiQL const express = require('express'); const graphqlHTTP = require('express-graphql'); const
{ buildSchema } = require('graphql'); const schema = buildSchema(` type Query { hello: String! } `); const root = { hello: () => 'Hello, world!'; }; const app = express(); app.user('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true })); app.listen(4000);
GraphiQL
GraphiQLで遊んでみる • SWAPI GraphQL Wrapper http://graphql.org/swapi-graphql/ • GitHub API v4
https://developer.github.com/v4/
3. 便利な ツールやサービス
GraphCMS • いわゆるHeadless CMS: API-firstなCMS • WebHookをサポート(有償版のみ) • サインアップしてコンソールに入るとチュートリアルが
モデルを定義して
データを入力して
GraphiQLで確認する
スキーマ定義ファイルを ダウンロードできる
Graphcool • GraphQLバックエンドを提供するBaaS • GraphCMSのように使いやすいUI • GraphCMSより玄人向き • WebHookあり •
イベントをフックできる関数をJavaScriptで定義可能
モデルを定義して
データを入力して
GraphiQLで確認する
スキーマ定義ファイルを ダウンロードできる
望むなら関数を定義
こんな画面も用意されている
PostGraphQL • ポスグレに作ってある既存のDBに対して、GraphQL APIを 自動的につくってくれるツール
使い方 $ npm install -g postgraphql $ postgraphql\ -c postgres://user@host/db\
--export-schema-graphql schema.txt
使い方 $ npm install -g postgraphql $ postgraphql\ -c postgres://user@host/db\
--export-schema-graphql schema.txt DBのURL スキーマ定義 ファイルの出力
すごいよ!!!!
Apollo GraphQL • GraphQLのライブラリやらを作ってるコミュニティ
Apollo GraphQL Client for Android スキーマ定義とクエリ定義 からJavaコードを 自動生成してくれる!!
まとめ・雑感 • GraphQLはクエリ言語でAPIが便利に • シンプルながら強力な機能 • API作るときにURL考えなくてよいの助かる • ちょっとしたサービスならGraphcoolだけで自分でサーバを用 意する必要なさそう
• PostGraphQL、すごいけど使い道わからない • コード生成できるし言うことなしでは