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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
930
Other Decks in Technology
See All in Technology
Cognition AI Japan - ウェビナー2_テストQA_運用監視
cogakira
0
140
ゲームのリアルタイム通信から見た QUIC と MoQ
segadevtech
0
120
パスキーの自動テストはどこまでいけるのか
teamlab
PRO
0
110
Deep Data Security 機能解説
oracle4engineer
PRO
2
800
実践!Cloud Run ハンズオン!! / Cloud Run handson
y0hgi
2
260
JAWSUG TOHOKU 青森支部 「LoGoチャット」のAWS移行で 乗り越えたこと
taketakekaho
0
230
QA4AI 2026-Oct 生成AI時代の品質保証
tokuty
1
680
実践! SRE × AI - ABEMA における AIOps -
tetsuya28
8
3k
NDIでApple Vision Proにリアルタイム映像送信
jyouryuusui
0
110
不可逆な意思決定を避けながら10億超の顧客データを AI Ready にするデータ基盤設計
baseballyama
1
310
UniFi(ユニファイ)AIカメラの現場活用
ludicmind
1
430
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
riyaamemiya
0
280
Featured
See All Featured
The Curious Case for Waylosing
cassininazir
1
570
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.4k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
590
Heart Work Chapter 1 - Part 1
lfama
PRO
10
37k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
980
A Modern Web Designer's Workflow
chriscoyier
699
190k
4 Signs Your Business is Dying
shpigford
187
23k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
750
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.8k
Evolving SEO for Evolving Search Engines
ryanjones
0
320
Technical Leadership for Architectural Decision Making
baasie
3
600
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 !