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
benzookapi
October 14, 2018
Technology
0
300
初心者がほぼ知識ゼロで触ってみたGraphQLの感想
benzookapi
October 14, 2018
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
2k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
450
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
130
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
170
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.1k
Tech. Blog TIPS
benzookapi
0
260
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
260
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1k
Other Decks in Technology
See All in Technology
php-conference-nagoya-2025
fuwasegu
0
150
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
500
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
260
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
610
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
630
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
140
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
220
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.5k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
430
Pwned Labsのすゝめ
ken5scal
1
380
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
330
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Become a Pro
speakerdeck
PRO
26
5.2k
Building an army of robots
kneath
303
45k
Transcript
ॳ৺ऀ͕΄΅ࣝθϩͰ৮ͬ ͯΈͨGraphQLͷײ API Meetup Tech Deep Dive #2: GraphQL
About me • Junichi Okamura (@benzookapi) • API Lover/Midnight Developer/MANGA
Creator/ TDD(Talk Driven Development)
ࠓ͓͍ͨ͜͠͠ͱ • GraphQLʹؔ৺Λ࣋ͬͨཧ༝ͱ৮ͬͯΈͨײ • ༰ઙ͍Ͱ͢ • ͔ͤͬ͘ͳͷͰಠࣗͷ໘നݟղʹ·ͱΊͯΈ· ͨ͠
GraphQLʹؔ৺Λ࣋ͬͨཧ༝ • REST APIʹ͖͖ͯͨ • ͦΖͦΖԿ͔৽͍༷͠ग़͖͍͍ͯͯΜ͡Ό ͳ͍ʁ • ࢀরܥPOST
ૣ৮ͬͯΈΔʁ • NO, ωοτͰ֓ཁ͚ͩ֬ೝͯ͠͠Β͘์ͬͯ ͓͍ͨ • ॳݟͱͯ͠ɺύϑΥʔϚϯεফඅϦιʔεʹ ͳ͚Εྑͦ͞͏
࣮ࡍ৮Δ͖͔͚ͬ • Կؾͳ͠ʹʮ࣍ճGraphQLऔΓ্͛ͯͩ͘͞ ͍ʂʯͱAPI MeetupͷํʹݴͬͨΒ͍ͭͷ·ʹ ͔ొஃ͢Δ͜ͱʹͳͬͯͨ • Α͠ٱʑʹTDD (Talk Driven
Developmentʣͩʂ
৮ͬͯΈͨʢσϞʣ • https://github.com/benzookapi/my-graphql- sample • https://github.com/benzookapi/my-react-sample • ͪ͜Βͷलҳ͗͢Δϒϩά͔Β΄΅ίϐʔͯ͠ಈ ͖·ͨ͠ɻhttps://www.m3tech.blog/entry/ graphql-apollo-react-express-nodejs
σϞͷߏ ͭͳ͙ଆʢΫϥΠΞϯτʣ React GraphQL modules http://localhost:3000 ఏڙ͢Δଆʢαʔόʔʣ Node+Express GraphQL modules
http://localhost:4000/graphiql
Γ͔ͨͬͨ͜ͱ • REST ͱGraphQL ͷ࣮ൺֱ • ͭͳ͙ଆʢΫϥΠΞϯτʣ͔ΒΈͯͲ͏͔ʁ • ఏڙ͢Δଆʢαʔόʔʣ͔ΒΈͯͲ͏͔ʁ •
೦ͳ͕ΒRESTଆͷ࣮͕࣌ؒͳͯؒ͘ʹ߹ Θͣɾɾɾ
ͭͳ͙ଆʢΫϥΠΞϯτʣ GraphQL vs REST ࣮ίετͷ͞ G ≒ R (ϥΠϒϥϦ͑มΘΒͳ͍ʁʣ ύϑΥʔϚϯε
G > R (GίʔϧΛݮΒͤΔ͚ͩૣ͍ʁʣ ίʔυͷগͳ͞ɾՄ ಡੑ G > R (GίʔϧΛݮΒͤΔ͚ͩઅɺ؆୯ʁʣ ϝϯςφϯεੑ G ≒ R (༷มߋͷίετಉ͡ʁʣ
ఏڙ͢Δଆʢαʔόʔʣ GraphQL vs REST ࣮ίετͷ͞ GraphQL < REST (G࿈݁ෛՙઃܭ͕େมʁʣ ύϑΥʔϚϯε
GraphQL ≒ < REST (ઃܭ࣍ୈ͕ͩRͷํָ͕ͦ͏ʣ ίʔυͷগͳ͞ɾՄ ಡੑ GraphQL ≒ < REST (ઃܭ࣍ୈ͕ͩGͷํ͕ࡶʹͳΓ͕ͪʁʣ ϝϯςφϯεੑ GraphQL > REST (GόʔδϣϯϨεͰεΩʔϚఏڙʣ
ֶͼํ • άάΔͱ৭ʑ͋Δ͚ͲຊՈαΠτΛॳΊ͔Βಡ Ήͷ͕Ұ൪Φεεϝ https://graphql.github.io/ • ҎԼ࣮༻త͔ͭ٬؍తͳઆ໌ͰΦεεϝ https://note.mu/konpyu/n/nc4fd122644a1
ͪͳΈʹੈͷAPIͰͲΕ͘Β͍ࢼ ͤΔͷ͔ɾɾʁ ͜Μ͚ͩϢʔβʔͱͯ͠ද໌͞Ε͍ͯΔ͕΄ ͱΜͲ͕෦͚ར༻ʢͩͱࢥ͏ʣ facebook API͢ΒݟͨΒͳ͍ʂ ʢfacebookݩʑύϑΥʔϚϯεվળͷͨΊ ʹGraphQLΛ։ൃɺOSSԽʣ
ײᶃ ॳϦΫΤετϨεϙϯεJSONͰશ෦ POSTͰγϯϓϧϥοΩʔͱࢥ͍͕ͬͯͨɺҙ֎ͱ ಠ༷͕ࣗଟֶ͘शίετߴͦ͏
ײᶄ σʔλ࡞ ʢRESTͰ͍͏POSTʣʹ͋·ΓԸܙ Λײ͡ͳ͍ɻΫΤϦͱΠϯλʔϑΣʔε͕ࣅ͍ͯΔ ͷͰٯʹࠞಉͦ͠͏
ײᶅ Authͷඪ४༷͕ͳ͍ʂʢGraphQLͱͯ͠ ֎ʁʣϏδωεϩδοΫͰΕͱ͔ɺJWTΛ͏ ͱ͔ఏҊతʹॻ͍ͯ͋Δ গͳ͍֎෦APIͱͯ͠ެ։͠ ͍ͯΔϓϥοτϑΥʔϜɺׂΓͬ ͯREST ͷOAuthΛྲྀ༻͍ͯ͠Δέʔε ͕ଟ͍ ʢࣗࢍʣ
ײᶆ APIΛͱͯ͠ఏڙ͢ΔଆʢϓϥοτϑΥʔϜʣ ɺΑͬΆͲ͏·͘ઃܭ͠ͳ͍ͱແବʹϦιʔε ৯ΘΕͨΓɺެ։ൣғ՝ۚମܥͷॲཧ͕େมʹ ͳΓͦ͏ʢRESTͰendpoint୯ҐͰग़͠Θ͚Ͱ͖ͯ ͨ͜ͱ͕શ෦ॲཧϕʔεʹͳΔʣ
ײᶇ ݁ߏReactΑΓͩͳɾɾʢग़ࣗతʹ͠ΐ͏͕ͳ͍ؾ ͢Δ͚ͲɺReactϋʔυϧߴ͍ਓଟ͍Α͏ͳʣ
ײᶈ • REST GETͩͱͲ͏ͯ͠දݱͮ͠Β͍ෳࡶͳΫ ΤϦʔΛAPIͰఏڙ͢Δʹظ௨Γཱͪͦ͏ • όʔδϣϯͳͲҙࣝͤͣ͞ήʔτΣΠݕࡧ Τϯδϯతʹ͑ΔAPIʹྑ͍͔ • ͋ΕɺͰͦΜͳΫΤϦʹಛԽ͓ͨ͠ೃછΈͷ
ͷ͋ͬͨΑͳɾɾɾ
SɾQɾLʂ
݁ ͻΐͬͱ͕ͯࣗ͠ཉ͍͠ͷͬͯ͜͏͍͏ͭͩͬͨɾɾʁ Request: SQL select id, name from employee where
id = 1; Response: JSON {id: 1, name: “me”} https://myapi.com/ (Single endpoint) Method: POST Headers: REST compatible (Auth) Status: REST compatible (Error handling)
͓͋ͱ͕ΑΖ͍͠Α͏Ͱ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ