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
teppeita
July 06, 2023
Programming
0
260
GraphQLの社内ドキュメントを作った話
2023/07/06 tsukiji.graphqlで発表したLTのスライドです
teppeita
July 06, 2023
Tweet
Share
More Decks by teppeita
See All by teppeita
フロントエンドのディレクトリ設計思想
teppeita
25
31k
Other Decks in Programming
See All in Programming
Ça bouge du côté des animations CSS !
goetter
2
150
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
React 19アップデートのために必要なこと
uhyo
8
1.5k
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
710
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
SwiftUI Viewの責務分離
elmetal
PRO
2
280
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
210
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
240
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Building Adaptive Systems
keathley
40
2.4k
Producing Creativity
orderedlist
PRO
344
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Language of Interfaces
destraynor
156
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Faster Mobile Websites
deanohume
306
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Documentation Writing (for coders)
carmenintech
67
4.6k
Transcript
GraphQLの社内ドキュメント を作った話 2023-07-06 tsukiji.graphql 株式会社マイベスト 竹尾 哲平(@_teppeita)
• 竹尾 哲平 • @_teppeita • フロントエンドエンジニア • 株式会社マイベスト •
人の選択をサポートするサービス • 商品を自社で検証してランク付け 自己・自社紹介 ドキュメント作成の背景
今日伝えたいこと GraphQLは 社内向けのドキュメントを整えると 運用コストが減るので オススメ
今日話すこと ▶ 作成の背景と解決したかった課題 ▶ ドキュメント作成の進め方 ▶ 成果物(=ドキュメント)の紹介 ▶ 結果どうなったか
GraphQLは2019年に導入 バックエンドはRailsなので、graphql-rubyを使用 クライアントはApolloClientを使用 ここ1年で、 フロントエンドの構成を、Rails/一部Reactから、ほぼ全画面をNext.jsに置き換え それに併せて、GraphQLのAPIも全面的に実装 GraphQLの使用場面が急増した結果、いくつかの課題が顕在化した マイベストとGraphQL 作成の背景と解決したかった課題
• 入社後に初めてGraphQLを触る人が多い • 概念的な説明から具体的な実装方針まで理解が必要 • 毎回誰かが時間をかけて説明しなければならない 課題①:オンボーディング 作成の背景と解決したかった課題
• 設計・実装方針を共有しきれていなかった • コードレビューで都度コメントして共有する必要があり負荷が高 かった • ルールを決められていない箇所で、統一感の無いコードがどんどん 増えていった 課題②:設計方針の共有 作成の背景と解決したかった課題
→結果 「大まかな方針は分かったけど、具体的な実装はどうすれば良い?」 「今回読んだ人と読んでない人の格差が出るのでは?」 まずトライしたこと 作成の背景と解決したかった課題
課題を解決するには、 社内向けのドキュメントが必要 だと判断
今日話すこと ▶ 作成の背景と解決したかった課題 ▶ ドキュメント作成の進め方 ▶ 成果物(=ドキュメント)の紹介 ▶ 結果どうなったか
枠組みを整理 ドキュメント作成の進め方 ページ構成 フォーマット トピック
「手が空いた時に書く」だとなかなか進まないので、 毎週1時間MTGをセットして、その中で作業を進めることに。 議論しながらルールを整理する会を実施(勉強会も兼ねて) ドキュメント整理会を実施 ドキュメント作成の進め方
今日話すこと ▶ 作成の背景と解決したかった課題 ▶ ドキュメント作成の進め方 ▶ 成果物(=ドキュメント)の紹介 ▶ 結果どうなったか
- 全体像 - GraphQLについて学ぶ - マイベストでの使われ方のポイント - 設計思想 - バックエンド
- キャッシュ - ページネーション - N+1 - フロントエンド - ファイルの命名と配置 - 型の自動生成 - Fragment Colocation ページ構成(一部抜粋) 成果物(=ドキュメント)の紹介
ドキュメントの例① 成果物(=ドキュメント)の紹介
ドキュメントの例② 成果物(=ドキュメント)の紹介
ドキュメントの例③ 成果物(=ドキュメント)の紹介
今日話すこと ▶ 作成の背景と解決したかった課題 ▶ ドキュメント作成の進め方 ▶ 成果物(=ドキュメント)の紹介 ▶ 結果どうなったか
オンボーディングでの 個別フォローが 最小限で済むように😃
コードレビューも 方針が明文化されているので 負荷が激減😁
設計で悩んだら 「整理してドキュメントに書きましょう」 という流れができた🤩
結論 社内ドキュメントを整理したら GraphQLの運用がスムーズになった
これからも GraphQLと仲良く🤝 ご清聴ありがとうございました