Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
データの可視化とGraphQLを学ぶモチベーション
Search
kinocoboy
October 22, 2021
Programming
0
100
データの可視化とGraphQLを学ぶモチベーション
NINNO Tech Fest #2
データの可視化とGraphQLを学ぶモチベーション
kinocoboy
October 22, 2021
Tweet
Share
More Decks by kinocoboy
See All by kinocoboy
フロントエンドにおける「型」の責任分解に対する1つのアプローチ
kinocoboy2
5
1.5k
メタファーの使い方
kinocoboy2
0
280
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
5
1.1k
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy2
1
1k
【ScrumFestNiigata2024】a11yを起点とした組織横断を完了するためにアジャイルチームにとって大切だったこと100選
kinocoboy2
0
660
JSConfjp2023 Storybook駆動開発の再現性と効率化
kinocoboy2
2
4k
新卒だったころの僕へ向けて
kinocoboy2
0
210
スクラムマスターを目指すためにギャルになってみた話
kinocoboy2
9
11k
NINNO Tech Fest #05 春の推し
kinocoboy2
0
290
Other Decks in Programming
See All in Programming
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
210
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
8
2.2k
モデル駆動設計をやってみようワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
haru860
0
250
スタートアップを支える技術戦略と組織づくり
pospome
8
16k
AIコードレビューがチームの"文脈"を 読めるようになるまで
marutaku
0
350
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
580
組み合わせ爆発にのまれない - 責務分割 x テスト
halhorn
1
140
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
290
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
370
宅宅自以為的浪漫:跟 AI 一起為自己辦的研討會寫一個售票系統
eddie
0
490
C-Shared Buildで突破するAI Agent バックテストの壁
po3rin
0
370
[SF Ruby Conf 2025] Rails X
palkan
0
490
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Why Our Code Smells
bkeepers
PRO
340
57k
Designing for Performance
lara
610
69k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Code Reviewing Like a Champion
maltzj
527
40k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
92
What's in a price? How to price your products and services
michaelherold
246
12k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
How STYLIGHT went responsive
nonsquared
100
5.9k
Transcript
NINNO Tech Fest #2 2021.10.22 גࣜձࣾKUNO Լതو σʔλͷՄࢹԽͱGraphQLΛֶͿϞνϕʔγϣϯ
Self Introduction Hiroki.Kinoshita גࣜձࣾKUNO ਂֶशͱΫϥυΛۦ͢ΔDXاۀ Front Engineer / Designer Peacock
Engineer Group ( PEG ) Organizer Twitter: @kinocoboy2
ͳͥσʔλΛՄࢹԽΛ͢Δͷ͔
݁ɺϝϦοτ͕ଟ͍͔Β σʔλͷՄࢹԽΛ͢Δ͜ͱͷϝϦοτ ᶃ ؾ͚ͮΔ ᶄ அͰ͖Δ ᶅ Ԡ༻Ͱ͖Δ ᶆ etc…
σʔλͷՄࢹԽΛߦ͏ͨΊʹେࣄͳ͜ͱ ᶃ Ӿཡऀͷχʔζʹ߹Θͤͯ࡞͢Δ Ӿཡऀ͕ݟͯΘ͔Βͳ͍ ใաଟͰٯʹࠞཚΛট͘ ᶄ σʔλͷҙຯΛਂ͘ཧղ͢Δ ͳΜͷҙຯΛ࣋ͭࢦඪͳͷ͔Λ͔ͬ͠ΓѲ͢Δඞཁ͕͋Δ ؒҧͬͨσʔλΛूΊͯ͠·͏ɾҙຯΛؒҧ͑Δ
Ձ͋ΔՄࢹԽΛ͢ΔͨΊʹ ᶃ ࣮ݱ͍ͨ͠ͷͷݴޠԽΛపఈతʹߦ͏ υϝΠϯۦಈઃܭϢʔβʔετʔϦʔϚοϐϯάɺϞσϦϯάͳͲ৭ʑʹ ͳΔͷ͕ଟ͘ͳ͍ͬͯΔɻ ᶄ ͱʹ͔͘ࢼߦࡨޡ͠࠷దղΛಈ͖ͳ͕Βݟ͚ͭΔέʔε͕ଟ͍ ᶅ ํసͨΓલͷΑ͏ʹى͖Δͷ 👆
͜Ε͕ͱʹ͔͘Τά͍
None
ΫϥΠΞϯτ։ൃ͕ਏ͗͢Δ
RestAPI
REST API ͩͱɺͳͥΫϥΠΞϯτ͕ਏ͍͔ ᶃ API ଆͷ ΠϯλʔϑΣʔε ͕ ֓೦ͷมԽʹΑͬͯॊೈʹมಈ͢Δ ΠϯλʔϑΣʔε
͕มԽ͢ΔͨͼʹɺΫϥΠΞϯτଆͷ࣮͕ൃੜ ΠϯλʔϑΣʔε͕ఏڙ͞ΕΔ·ͰɺΫϥΠΞϯτԿͰ͖ͳ ͍ ᶄ ϑϩϯτଆͷ ը໘෦ ͷ߲Ճ͋Δ ΠϯλʔϑΣʔεमਖ਼ґཔΛ͢Δඞཁ͕͋Δ ΫϥΠΞϯτ͚ͩͰ߲Ճ͕݁͠ͳ͍
GraphQL
GraphQL ͱ ͬ͘͟Γݴ͏ͱ ᶃ GraphQL ΫϥΠΞϯτ͕ඞཁͳσʔλΛ API ͔ΒϑΣον͢ΔͨΊʹ ઃܭ͞Εͨݴޠ
ᶄ GraphQL Λ༻͢ΔͱɺΫϥΠΞϯτ όοΫΤϯυ API ͔Β ඞཁͳσʔλͷܕͱγΣΠϓΛऔಘՄೳ ᶅ GraphQL ͰɺͲΜͳλΠϓͷϦΫΤετͰɺ ΫϥΠΞϯτ ΞϓϦέʔγϣϯ͕ݺͼग़͢ΤϯυϙΠϯτ 1 ͚ͭͩ ᶆ GraphQL SQL ͱΑ͘ࣅ͍ͯ·͕͢ɺϑϩϯτΤϯυͰػೳ͢Δ
GraphQL ͱ తʹ͍͏ͱɺΫϥΠΞϯτ։ൃ ͱ όοΫΤϯυ։ൃͷΛత ͱ͍ͯ͠Δɻ ΤϯυϙΠϯτ͕̍ͭఏڙ͞ΕΕɺΫϥΠΞϯτଆ͕ཉ͍͠ใ Λࣗ༝ʹҾ͖ग़͠ͳ͕Β։ൃ͢Δ͜ͱ͕Մೳɻ SQLΛΫϥΠΞϯτଆ͕ॻ͍ͯɺόοΫΤϯυʹ࣮ߦͤ͞ΔΠϝʔδ
·ͱΊ ᶃ ΤϯδχΞೲΛσϦόϦʔ͢ΔͷͰͳ͘ɺೲͰಘΒΕΔՁΛσϦό Ϧʔ͢ΔଘࡏʹͳΔ ᶄ ՁΛσϦόϦʔ͢Δ߹ɺDDDϞσϦϯάɺϢʔβʔετʔϦʔϚοϐϯάͳͲ ͷతۦಈઃܭ͕ඞཁʹͳͬͯ͘Δɻ ᶅ తۦಈઃܭͷ߹ɺैདྷͷRestAPI ͱ
ΫϥΠΞϯτͷΈ߹ΘͤͩͱΫϥΠΞϯτ ։ൃ͕ਏ͍ɻ(ࡾॏ;Γ͜ʣ ᶆ ͦͷͨΊʹɺΫϥΠΞϯτͱRestAPIΛͰ͖Δ GraphQL తۦಈઃܭʹ༗ ޮɻ ᶇ ࢼߦࡨޡͰ͖ΔͷͰɺσʔλΛϢʔβʔͷχʔζʹ߹ΘͤͯՄࢹԽͰ͖ΔΑ͏ʹͳ Δɻ
GraphQLɺ͋Γ͔ͳʔ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠