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
280
GraphQLの社内ドキュメントを作った話
2023/07/06 tsukiji.graphqlで発表したLTのスライドです
teppeita
July 06, 2023
Tweet
Share
More Decks by teppeita
See All by teppeita
React Nativeで運用しているアプリにExpoを導入する - 計画編 -
teppeita
0
120
フロントエンドのディレクトリ設計思想
teppeita
26
34k
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
890
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
CDK引数設計道場100本ノック
badmintoncryer
2
370
フロントエンドのパフォーマンスチューニング
koukimiura
5
1.9k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
790
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
250
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.7k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
350
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
600
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Automating Front-end Workflow
addyosmani
1370
200k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
RailsConf 2023
tenderlove
30
1.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Building Adaptive Systems
keathley
43
2.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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と仲良く🤝 ご清聴ありがとうございました