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のSEKAIへようこそ
Search
FUJI Goro
February 09, 2018
Technology
20
9.4k
すばらしきGraphQLのSEKAIへようこそ
DroidKaigi 2018のスライドです
FUJI Goro
February 09, 2018
Tweet
Share
More Decks by FUJI Goro
See All by FUJI Goro
How to Boost Your Code with WebAssembly
gfx
2
3k
AssemblyScriptでライブラリコードの高速化をしてみる
gfx
5
3.2k
実践TypeScriptトークバトル
gfx
1
1.2k
歴史的経緯の説明 as code
gfx
7
2.8k
Elasticsearchによる 全文検索の実装 in Rails
gfx
6
9.6k
マルチテナント・ウェブアプリケーションの実践
gfx
14
9.6k
How to choose the ORM on Android
gfx
1
4.3k
How Do We Get Along With Static Types
gfx
5
3.4k
"OSSにコントリビュート" なんてしてる場合じゃない!
gfx
21
15k
Other Decks in Technology
See All in Technology
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
120
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1k
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
530
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
zaimy
3
180
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
200
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
190
Wasmで社内ツールを作って配布しよう
askua
0
180
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.1k
Gemini in Android Studio - Google I/O Bangkok '25
akexorcist
0
160
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
6
620
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
280
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
410
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Writing Fast Ruby
sferik
628
62k
Agile that works and the tools we love
rasmusluckow
329
21k
Optimizing for Happiness
mojombo
379
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building an army of robots
kneath
306
45k
Transcript
͢Β͖͠ GraphQLͷSEKAIΑ͏ͦ͜ DroidKaigi 2018, day 2, 14:50-15:20 gfx at Bit
Journey, Inc.
ࣗݾհ • ໊લ: gfx (FUJI Goro) • ॴଐ: Bit Journey,
Inc. • ؔΘ͍ͬͯΔϓϩμΫτ: Kibela • ใڞ༗πʔϧ / Wiki • લճͷDroidKaigiͰʮORMͷબͼํʯͰͨ͠
ࣗݾհ
Kibela
Kibela Web API • GraphQLΛ࠾༻ • ෦APIͱͯ͠Ұ෦ಋೖࡁΈ • ެ։༻APIͱͯ͠࠾༻༧ఆ •
2018தʹެ։͍ͨ͠ • ϞόΠϧ༻APIવGraphQL • ΞϓϦReact NativeͰ࣮༧ఆʢ༧ఆ͕Ε͓ͯΓະணखʣ
Agenda • SDD: Schema-Driven Developmentʹ͍ͭͯ • GraphQLͱԿ͔ • GraphQL in
Android • With Java / Kotlin • With React Native
SDD: Schema-Driven Development • SchemaʢʹAPIͱσʔλߏͷఆٛʣͱϩδοΫͷ։ ൃΛಉ࣌ʹਐΊΔ͜ͱ • αʔόʔαΠυͱΫϥΠΞϯταΠυͰschemaΛϕʔε ʹίϛϡχέʔγϣϯ͍͢͠ •
ΫϥΠΞϯταΠυschemaͷมߋΛ͏͜ͱͰαʔ όʔαΠυͷ༷มߋʹै͍͢͠ • Schema͔ΒͷίʔυੜͰܕ҆શͳίʔυΛॻ͚Δ
DroidKaigi 2018ͱSDD • Web APIͷSDDޚࡾՈ͕ἧ͍ʂʂ • ·ͩAPIఆٛཧͰফͯ͠ΔͷʁʙSwaggerΛ༻ ͍ͨେنΞϓϦ࣌ͷAPIఆٛཧͱίʔυδΣ ωϨʔτʙ •
gRPCͱProtocol BuffersͰ࡞ΔɺҰຯҧ͏௨৴पΓ • ͢Β͖͠GraphQLͷSEKAIΑ͏ͦ͜
yugui, 2018 ࠓ͞ΒProtocol BufferͱɺखʹೃછΉಓ۩ͷ https://qiita.com/yugui/items/160737021d25d761b353 “ࣗͷྖҬʹดͨ͡σʔλߏͰ͋Εɺ εΩʔϚͱ͔ܕએݴͱ͔ࡉ͔͍റΓͳ͠Ͱܰྔʹ ਐΊΔͷ͋Γͩɻ͔͠͠ɺଞਓͷྖҬͱͷք໘ ͔ͬ͠Γఆ͓͍ٛͯͨ͠ํ͕ྑ͍ɻεΩʔϚఆ ٛͱ͍͏੫ۚΛࢧΘͳ͍ͱͦͷͷπέͲ͜
͔Ͱճ͖ͬͯͯɺ1ֻ͔࣌ؒΔE2Eςετ͕͚͜Δ ͱ͔ɺि࣍มߋϨϏϡʔ߹ಉձٞͷൃͱ͔ɺͦ ͏͍͏ͭͰࢧ͏͜ͱʹͳΔɻ”
GraphQLͱԿ͔
GraphQLʹ͍ͭͯ • Facebook͕։ൃ͍ͯ͠ΔΫΤϦݴޠ • ϦιʔεऔಘʹಛԽͨ͠Web API༷ͱ͍͑Δ • Web API ͳͷͰ௨৴ϓϩτίϧHTTP
• ೝূresponse bodyͷѹॖͳͲHTTPʹ४ͣΔ • ෦APIͱͯ͠֎෦APIͱͯ͠༗ޮ
“ϦιʔεऔಘʹಛԽͨ͠Web API” • Ϧιʔεऔಘܥ͕ඇৗʹॊೈ͔ͭڧྗ • Ϧιʔεߋ৽ܥϝιουΛఆٛͯ͠ݺͿײ ͡ʹͳΔͷͰGraphQLͰ͋ΔϝϦοτগͳ ͍ • “ϦιʔεͷऔಘʹGraphQLΛͬͯߋ৽
RESTͰ”ͱ͍͏ͷΛఏএ͢Δਓ͍ΔϨϕϧ
GitHubͷGraphQL APIΛ GaphiQLͰோΊΔ
GraphiQLʢάϥϑΟΫϧʣ • The GraphQL IDE • ཁ͢ΔʹAPI console / API
explorer • ิ͕ޮ͘͏͑ʹυΩϡϝϯτϏϡʔΞଂ • GraphiQL͕͋Δ͔ΒGraphQLΛ͏ͱ͍͏Ϩ ϕϧͷڧྗͳπʔϧ
σϞ / movie
GraphQLͷ༷ࢠ with GitHub Ϩεϙϯε +40/ ϦΫΤετ (SBQI2-
GraphQLͷ༷ࢠ with GitHub
GraphQLͷ༷ࢠ with GitHub
GraphQLͷ༷ࢠ with GitHub
GraphQLͷ༷ࢠ with GitHub %#ΧϥϜͷͰͳ͘ ՃࡁΈͷϑΟʔϧυʂ
GraphQLͷ༷ࢠ with GitHub ϦΫΤετΛΈΕ Ϩεϙϯεͷߏ͕Θ͔Δʂ
GraphQLͷ༷ࢠ with GitHub υΩϡϝϯτϏϡʔΞ͖ʂ
GraphQLͷ༷ࢠ with GitHub SPPUʹఆٛ͞Ε͍ͯΔͷେ ͷ߹RVFSZͱNVUBUJPOͷΈ
GraphQLͷ༷ࢠ with GitHub ͜͜Ͱྫʹ͍ͬͯΔ SFQPTJUPSZϑΟʔϧυ PXOFSͱOBNΛҾʹͱΓ 3FQPTJUPSZܕΛฦ͢ͱͷ͜ͱ
GraphQLͷ༷ࢠ with GitHub 3FQPTJUPSZܕͷৄࡉ ࣮͍ͯ͠ΔΠϯλʔϑΣΠε ଘࡏ͢ΔϑΟʔϧυ
͜͜·Ͱͷ·ͱΊ • ϦΫΤετ͔ΒϨεϙϯεͷߏ͕͔Δ • ΞϓϦέʔγϣϯ͕ͦͷͰඞཁͳϑΟʔϧυ ͚ͩΛϦΫΤετ͢ΔͨΊ༨ܭͳܭࢉ͕ෆཁ • ͨͱ͑ઌͷྫͩͱ “descriptionHTML”
ෆཁͳͱ͖ϦΫΤετ͠ͳ͍͜ͱͰαʔόʔ αΠυͰͷܭࢉΛݮͰ͖Δ
ܕγεςϜ • جຊܕ + ྻ + Ϋϥε + ΠϯλʔϑΣΠε •
جຊܕInt, Float, Boolean, String, ID • Ϋϥε෮ͷΠϯλʔϑΣΠεΛ࣮Ͱ͖Δ • ΠϯλʔϑΣΠεJavaͷͦΕͱ΄΅ಉ͡ • શͯͷܕnon-nullʹͰ͖Δ (e.g. String!)
Mutation • Ϧιʔεߋ৽ܥͷΫΤϦλΠϓ • ࣗ༝ʹ໊લΛ͚ͭΒΕΔͷͰɺRESTͷPOST/ PUT/PATH/DELETEͷ͜ͱΕͯΑ͍
Relay 1. Facebook͕։ൃ͍ͯ͠ΔGraphQLΛલఏͱ͠ ͨView Frameworkͷ͜ͱ 2. Relay (1) ͕αʔόʔʹରͯ͠ٻΊΔ༷Ͱ͋ ΔRelay
Server Specificationͷ͜ͱ • GraphQLίΞʹෆ͢Δ෦Λิ͢Δ ༷ͳͷͰशಘඞਢ
Relay Connection • ϦιʔεϦετͷϖʔδϯάΛఆΊ༷ͨ • edges: ϦετͷεϥΠεΛද͢ྻ • node: Ϧετͷ1ཁૉ
ͳͥRelay Connection͕ඞཁ͔ • ϦετͷεϥΠεͰ͋ΔྻΛฦ͍ͨ͠ • ҙͷϝλσʔλΛฦ͍ͨ͠ • ͭ·ΓੜͷྻΛฦ͢Θ͚ʹ͍͔ͳ͍ • ͦ͜Ͱ
edges / node ͱ͍͏Λઃ͚ͨ
Relay Connection in GitHub WJFXFSDVSSFOUVTFSͷ lQVCMJDSFQPTJUPSJFT͔Β࠷৽ͭ ͨͩ͠GPSLΛআ͘z
Relay Connection in GitHub ΧελϜϝλσʔλ
Relay Connection in GitHub ྻʹؔͯ͠ΫΤϦͷߏ͔Β ࣗ໌Ͱͳ͍͕ʜ
Relay Connection in GitHub
Relay Connection in GitHub
ΫΤϦखॻ͖ʁ • खॻ͠Ζͱ͍͏ઃܭҙਤΛόϦόϦײ͡Δ • ΫΤϦͷߏ͕ϨεϙϯεͷߏΛܾΊΔ͔Β • ΑͬͯɺϨεϙϯεͷσʔλܕΛίʔυੜ͢ ΔͳΒΫΤϦ੩తͰͳ͚ΕͳΒͳ͍ • GraphiQL͕͋ΕۤͰͳ͍ͷͷཧతʹ
͍׳ΕͨΤσΟλͰॻ͖͍͕ͨ…
͜͜·Ͱͷ·ͱΊ • GraphQL: Web API༻ͷΫΤϦݴޠ • GraphiQL: GraphQL༻ͷAPI console •
Relay: View FrameworkͱͦΕ͕ཁٻ͢Δαʔόʔ ͷ༷ • Relay Connection: ϖʔδϯάՄೳͳϦετͷ༷
GraphQL in Android
Apollo - GraphQL client • JS / Android / iOS
༻ͷApollo client͕͋Δ • Apollo for AndroidJavaΛఆ • ΫΤϦ͔ΒJavaίʔυΛੜ͢ΔϥΠϒϥϦ • ΫΤϦ͕ද͢σʔλߏͷΫϥεΛੜ͢Δ
ΫΤϦ͔ΒίʔυΛੜ͢Δ • ίʔυ͔ΒΫΤϦΛੜ͢ΔͷͰͳ͍ • OrmaͳͲͷORMίʔυ͔ΒΫΤϦΛੜ ͕ͪ͠ • ͳͥͳΒɺΫϥεΛੜ͢ΔͨΊʹΫΤϦ͕ ੩తͰͳ͍ͱ͍͚ͳ͍͔Β
Apollo for Android ˣίʔυੜ
Apollo for Android • ΫΤϦ͝ͱʹΫϥε܈Λੜ͢Δ • ϦΫΤετΫϥε • ϨεϙϯεΫϥε •
HTTP௨৴෦OkHttpʹґଘ
Apollo for Android • ͋·Γͬͯͳ͍ͷͰͬ͘͟Γॴײ • GraphQL queryରԠ͢Δviewͱಉ͡ϑΝΠϧʹஔ ͖͍͕ͨɺApolloͷ߹ *.graphql
ʹॻ͘ͷ͕ෆศ • KotlinͩͬͨΒ෮จࣈྻϦςϥϧ͕͋ΔͷͰ view componentʹqueryΛॻ͘ͷϫϯνϟϯ ͋Γͦ͏
JavaScript / TypeScript • Relay • Apollo • ੜGraphQLͰී௨ʹ͑Δ •
Kibela (web) ੜGraphQLͰ͍ͬͯΔ
Relay • “A JavaScript framework for building data- driven React
applications” • σʔλͷྲྀΕFluxͱಉ͡ • View componentͱqueryΛಉ͡ϑΝΠϧʹॻ͘ • ͳͥͳΒʮͦͷviewʹͱͬͯඞཁͳσʔλʯΛ աෆͳ͍ͬͯ͘Δͷͦͷview͚͔ͩͩΒ
Relayͷงғؾ
Relayͷงғؾ 3FBDU$PNQPOFOU
Relayͷงғؾ (SBQI2-ΫΤϦ
Relayͷงғؾ 3FMBZ2VSZ3FOEFSFSͷSFOEFSͰ σʔλ͔ΒW%0.Λߏஙͯ͠ฦ͢
Relay does not meet TypeScript • KibelaͰ͓ͦΒ͘RelayΘͳ͍ • ͳͥͳΒTypeScriptͱͷ૬ੑ͕ѱ͍͔Β •
ύονΛͯͳ͍ͱϏϧυͰ͖ͳ͍Ϩϕϧ • queryͱviewΛରԠͤ͞Δͱ͍͏ൃΑ͍ͷ Ͱͦͷൃ͚ͩࢀߟʹ͢Δ
Ϟσϧʁഊࢭʁ • GraphQLΛ͏ͱ͖ʮview component͕ඞཁͳ ϑΟʔϧυ͚ͩΛϦΫΤετͯͦ͠ͷσʔλΛview ʹຒΊΔʯΈ͍ͨͳΞʔΩςΫνϟ͕Αͦ͞͏ • Ϟσϧഊࢭͱ͍͏֓೦ෆཁͳͷͰ…ͱ ࢥ͍ͬͯΔ •
·ͩʮࣗͰAPIΛ։ൃ͠ͳ͕ΒviewΛΉʯ͜ ͱ͔ͯ͠͠ͳ͍ͷͰ͜ͷลະͰ͋Δ
εΩʔϚΛαόΫϥͰڞ༗ʁ • GraphQL APIεΩʔϚΛΤϯυϙΠϯτͰε ΩʔϚΛฦ͢ • ίʔυੜʹεΩʔϚ͕ඞཁͳͷͰɺϏϧυ ࣌ʹΤϯυϙΠϯτΛୟ͍ͯεΩʔϚΛऔͬͯ ͘Δ •
͜ͷͱ͖ΤϯυϙΠϯτΛϩʔΧϧʹ͢Ε ։ൃ൛ͷར༻Մೳ
ଞͷWeb APIख๏ͷॴײ
vs RESTful API / Swagger • RESTfulݸਓతʹʮWeb APIΛແཧΓ HTTPʹ͍ͤͯΔʯײ͕͋ͬͯͭΒ͍
vs RESTful API / Swagger • ಉ͡HTTPεςʔλείʔυʹ෮ͷҙຯΛ࣋ͨͤͨ݁Ռ͍ʹͳΒͳ ͍͜ͱ͕͠͠ • OAuth
scope͕Γͳ͍ͱ͖ϩάΠϯϢʔβͷݖݶ͕ͳ͍ͱ͖ʹ 403Λฦͨ͠Γ͢ΔͷͰ403Ͱذͨ͋͠ͱߋʹผͷใͰذ͕ඞཁ • ϦΫΤετͷඞਢύϥϝʔλͷෆ400? 404? 422? • ಉҰαʔϏεͰ͢Β౷Ұ͞Εͯͳ͍͜ͱ • ϦόʔεϓϩΩγ͕502ͱ͔503Λฦ͢ • εςʔλείʔυʹAPIͷ༷ͱͦΕҎ֎ͷ༷͕ࠞࡏ͍ͯ͠Δ…
vs RESTful API / Swagger • GraphQLʮGraphQLϨϕϧͰॲཧ͕ޭ͠ ͨΒ200ʯͰݻఆ͢Δ • ΤϥʔίʔυϨεϙϯεͷerrorsϑΟʔϧυ
Ͱදݱ͢Δ
vs RESTful API / Swagger OPUGPVOEͱͷ͜ͱ
vs RESTful API / Swagger • RESTͩͱ GET / POST
/ PUT / PATCH / DELETE ͚ͩͰશͯͷߋ৽ܥͷৼΔ͍Λද ݱ͠ͳ͍ͱ͍͚ͳ͍ • ʮϑΟʔϧυͷআʯDELETE? PATCH? • GraphQLͷߋ৽ܥʢmutationʣҙͷ໊લ Λ͚ͭΒΕΔͷͰదͳ໊લΛ͚ͭΕΑ͍
vs gRPC • ͜ͷ෦ͷ࣍ͷ࣌ؒͷςʔϚ͕gRPCͳͷͰৄ ͦͪ͘͠Βʂ • ൚༻ੑͷߴ͍RPCϥΠϒϥϦͰ࣮͋Δ • GraphQLͷΑ͏ͳʮ࠷খݶͷϦιʔεΛऔ ಘʯ͢Δͷ͕ऑ͍ҹ
·ͱΊ • ಡΈ͍͢ΫΤϦ • ΫΤϦΛಡΊϨεϙϯε͕͍͍͔ͩͨΔ • ܕ҆શͳεΩʔϚ • nullable /
non-null όονϦΈࠐΈ
GraphQL͍͍ͧ