Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
アプリエンジニアのためのGraphQL入門.pdf
Search
spycwolf
November 19, 2024
Technology
370
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
November 19, 2024
More Decks by spycwolf
See All by spycwolf
デザインシステムを利用したSwiftUIによるアプリ開発事情
spycwolf
1
900
Other Decks in Technology
See All in Technology
新機種発売前に見直そう!端末移行で再ログインが要るアプリ・要らないアプリは何が違うのか 〜シームレスに再開できる設計と実装〜
zozotech
PRO
0
210
品質と信頼性を地続きにする
grimoh
2
810
事業課題から技術的負債に向き合う
sansantech
PRO
2
2k
AIによるクリエイティブ生成を行う上での試行錯誤
plaidtech
PRO
0
160
あるけみー式LTスライド作成術
alchemy1115
2
220
2026-09-18 gotanda.sre Terraformで複数環境作ったり、複数Stateに分割したりそれとTerragrunt / Terraform multi envs and multi states
masasuzu
3
580
AI de Idea
kawaguti
PRO
2
130
積み重なった技術負債への挑戦 〜初手としての全社ゴト化〜
techtekt
PRO
0
1.4k
おい、エージェントを使って終わらせろ
nwiizo
2
720
アクセスキーこわい やめかたと漏らさない工夫
sassssan68
1
460
データ_AIの事業の勝敗をわけるもの
nek0128
1
460
Claude Code本って、 読む必要あるの?
oikon48
2
480
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
28
2.8k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
My Coaching Mixtape
mlcsv
0
320
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
500
Become a Pro
speakerdeck
PRO
31
6.3k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
760
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1.1k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
910
Faster Mobile Websites
deanohume
310
32k
Docker and Python
trallard
47
4.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.6k
Transcript
アプリエンジニアのための GraphQL⼊⾨
note inc. ‧2024年2⽉にnoteにジョイン ‧note Appチームリーダー ‧2015年〜モバイルアプリを専⾨に扱うようになる ‧それ以前はPHPやRubyでのバックエンド開発がメイン Spycwolf Kota KANEKO
2
note inc. GraphQLとは https://graphql.org/ • API のクエリ⾔語であり、既存のデータを使⽤してそれらのクエリを実⾏するた めのランタイムです。GraphQL は API
内のデータの完全でわかりやすい説明を 提供し、クライアントが必要なものだけを正確に要求できるようにします。 • GraphQL クエリを API に送信すると、必要なものだけが正確に取得されます。 それ以上でもそれ以下でもありません。GraphQL クエリは常に予測可能な結果 を 返します。 • GraphQL クエリは、1 つのリソースのプロパティにアクセスするだけでなく、そ れらの間の参照もスムーズに追跡します。⼀般的な REST API では複数の URL か らの読み込みが必要ですが、GraphQL API では 1 回のリクエストでアプリに必要 なすべてのデータを取得します。
note inc. GraphQLとの出会い • GraphQLは元々Facebookの内部で開発されたもので、2015年に⼀般に公開さ れ、その後、2018年に現在のGraphQL Foundationに移譲された • 2017年に新規アプリサービスの開発に伴い、当時のチームメンバーとGraphQL の導⼊を決めた
• APIとクライアントアプリとを並⾏してゼロから開発するタイミングで、関係す るエンジニア4⼈全員がAPIもアプリも両⽅を開発していった GraphQL導⼊の判断 • 実装する前段階の設計についてほぼ検討する箇所がない • REST APIは会社ごと、チームごとに設計が異なり、新規に開発するにも設計部分 に検討が必要そうだった • 単純に新しいものを使ってみたかった!
note inc. 当時の感想 • 当時はまだ細かい配慮が必要ではあったが、とにかく直感的に実装しやすい • indexとshowの区別を厳密に考慮しなくても後々困ることが少ないため、クライ アント側の画⾯要件が固まっていなくてもAPI側の開発を進められる • REST
APIに対しても当時からCodegeneratorはあったが、Apolloが扱いやすい • Grapiqlのようなプレイグラウンド環境が標準で備わっていて、クライアントか らのスキーマ確認&レスポンス確認がしやすい サーバーサイドの開発に慣れていないモバイルアプリエンジニアで も実装しやすい!
note inc. 覚えておくべきことはたった3つ
note inc. Schemaを定義する • 取得系はQuery、更新系はMutationという概 念 • 基本的にはリソースごとに取得できるカラム 情報を定義する •
ここで定義するスキーマは、そのままクライ アントからクエリとして指定できるものにな る • QueryもMutationもinputとして引数を設定 できる • 基本的にはこれだけ
note inc. Resolverを定義する • Resolverはリソースとスキーマとの関連を定 義する • データベースから取得したデータをそのまま スキーマに当てはめる場合が多いが、取得し たデータを加⼯して返却する場合もある
• UseCase的なレイヤー
note inc. Serviceを定義する • データベースとのやり取りは別定義にする ケースが多い • ここで定義したデータ取得する、もしくは更 新系の処理を⾏う •
Repository、DataSource的な役割
note inc. プロジェクトの覗きかた • graphqlはエンドポイントが1つなので、/grapql というディレクトリを探す • その配下に schema や
resolver などが⾒つかるはず • データリソースへのアクセスは resolverから辿れるはず • レスポンスを確認したいときは schema のネーミングから、該当する resolver を探す • resolver の定義を確認すれば何をしているのか、どこからデータを持ってきてい るのか、どこでデータを処理しているのかがわかるはず
note inc. 実際にプロダクトで扱うには3つ だけ理解しておけばいいなんてこ とはありません!
note inc. 普段あまりAPIの実装をしたこと がない⽅もチャレンジしてみてく ださい
Thank you !