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 スキーマで支えるレジアプリ開発 / "hey Talk" Engineers #4
Search
ta-chibana
August 31, 2021
Technology
1
1.6k
GraphQL スキーマで支えるレジアプリ開発 / "hey Talk" Engineers #4
ta-chibana
August 31, 2021
Tweet
Share
More Decks by ta-chibana
See All by ta-chibana
STORES で GraphQL について考えた話
tachibana
1
350
わたしの知らなかった超絶技巧プログラミングの世界
tachibana
2
750
Other Decks in Technology
See All in Technology
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
620
20251027_findyさん_音声エージェントLT
almondo_event
2
460
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
Dify on AWS 環境構築手順
yosse95ai
0
140
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
380
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
150
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
320
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.5k
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
2
770
Featured
See All Featured
Scaling GitHub
holman
463
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
The Language of Interfaces
destraynor
162
25k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Transcript
GraphQL スキーマで支える レジアプリ開発 Takuma Chibana 2021-08-18 "hey Talk" Engineers #4
自己紹介 • 知花 卓磨 • https://github.com/ta-chibana • バックエンドエンジニア • STORES
レジ や EC の 開発をやっています
「STORES レジ」を リリースしました!
「STORES レジ」を 支えるエンジニアリング
None
• レジ用 API は EC(Rails)のコードベースに乗る形で実装 • graphql-ruby を使って実装 • GraphQL
スキーマやそれを使った開発の進め方について話します
なぜ GraphQL ? • アプリチームから GraphQL を使いたいという相談 • API スキーマ・ドキュメントの管理がいい感じにできそう
(検討当時は EC の API スキーマが管理されていなかった) • その他 GraphQL にすることによるメリット (もちろんデメリットも) • バックエンドとして利用するにあたって 大きな問題はなさそうだと判断
アプリチームとどのように お仕事を進めたか
「初めての GraphQL」読書会をやった • 初めて GraphQL に関わる メンバーが多かった • レジの開発に関わるメンバーと そうでないメンバー数名が
参加した
「初めての GraphQL」読書会をやった API 開発に関する思い出が 語られるなどした
API スキーマの設計・共有方法
API スキーマの設計・共有方法 1. バックエンドで API のインターフェースを設計・実装する (この間アプリチームは UI の実装を並行して進める) 実装
API スキーマの設計・共有方法 2. GraphQL::RakeTask を利用した rake タスクを用意し 定義された rake タスクを実行して実装からスキーマを生成する
bin/rails graphql:schema:idl
API スキーマの設計・共有方法 3. アプリチームは生成された schema.graphql ファイルを 利用して開発を進める 開発に利用
EC での API 開発の流れと比較する
EC での API 開発の流れ 1. フロントエンドエンジニアと議論してスキーマを定義する
EC での API 開発の流れ 2. スキーマ定義にあうように API を実装する
両者の違い レジ • 実装から始める • スキーマは実装から生成 • スキーマの設計は バックエンドエンジニアが行う EC
• スキーマ定義から始める • スキーマは Stoplight Studio などで YAML を作成して定義 • スキーマの設計は バックエンド・フロントエンド 両チームで議論して行う
Q. やってみてどうだった?
Q. やってみてどうだった? • A. 良かったと思う • スキーマの自動生成が楽で、API 開発を素早く進めることができた • 実装とスキーマ定義に乖離がなくて良い
• API スキーマの用語で議論できた
Q. スキーマ定義が最初ではない?
Q. スキーマ定義が最初ではない? • A. はい • アプリチームメンバーはこれまで EC と関わったことがない •
EC のことを知っているバックエンドチームのメンバーで 設計した方が早そうだと判断 • 不明点あれば適宜コミュニケーションをとった • 両チームとも要件定義段階で関わっていた & ドキュメントもあるので認識のズレは起こりづらかった • 仲が悪くならなかった
Q. スキーマ定義から始めることは できない?
Q. スキーマ定義から始めることはできない? • A. いいえ • graphql-ruby の DSL を使いながら議論して
先にスキーマ定義を作ることはできそう(今回はやっていない) 実装経験なくても理解はできそう ...? ↑ココ
Q. スキーマ生成タスクの実行漏れは?
Q. スキーマ生成タスクの実行漏れは? • A. テストで防いでいます • この辺りは graphql-ruby のドキュメントを参考にしました https://graphql-ruby.org/testing/schema_structure.html
まとめ • スキーマが実装から生成できるので乖離なく、 スキーマ定義と実装が同時にできるので開発速度向上が狙えた • 生成されるスキーマ・ドキュメントによって共通言語が作られ、 コミュニケーションコストが下がった • 必要になったらスキーマ定義から始めることもできそうなので そのうち試してみても良さそう
ありがとうございました!