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
2022技育祭_映写資料②
Search
techtekt
November 18, 2022
Technology
0
940
2022技育祭_映写資料②
techtekt
November 18, 2022
Tweet
Share
More Decks by techtekt
See All by techtekt
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
270
7,000名規模の 人材サービス企業における プロダクト戦略・戦術と課題 / Product strategy, tactics and challenges for a 7,000-employee staffing company
techtekt
0
480
ドメイン駆動設計によるdodaダイレクトのリビルド実践 / Rebuild practice of doda direct with domain-driven design
techtekt
0
1.6k
大規模サイトリビルドの現場から:成功と失敗のリアルな教訓 / Site Rebuild,Real Lessons Learned from Successes and Failures_JJUG Fall 2024
techtekt
0
530
VSMを活用したFindy Team+の運用促進 / promoting-operation-of-findy-team-plus-using-vsm
techtekt
0
690
ハッピーになる機械学習モデル開発 〜なるべく手間をかけずにコードの品質向上を目指す 〜
techtekt
0
230
Power BI 活用推進の歩み
techtekt
0
110
_microCMS_を使ってNext.jsアプリ開発しよう_.pdf
techtekt
0
1.8k
スクラム研修
techtekt
1
5.4k
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
67k
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.7k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
What’s new in Android development tools
yanzm
0
320
LLM時代の検索
shibuiwilliam
2
180
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
怖くない!はじめてのClaude Code
shinya337
0
400
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
7.1k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Music & Morning Musume
bryan
46
6.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Being A Developer After 40
akosma
90
590k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Gamification - CAS2011
davidbonilla
81
5.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Site-Speed That Sticks
csswizardry
10
690
Transcript
None
経験言語:Python、PHP、React、Vue(どれも少しずつ) 趣味:ゲーム(鉄拳、Apex)、アニメ、音楽(BUMP、椎 名林檎、ボカロ…etc) 好きな食べ物:ラーメン二郎、麺類、ハンバーガー Name : 佐藤ゆ(エンジニア)
技術調査(Poc)
? PoC(Proof of Concept:概念実証)とは
PoCとは? • 新たなアイデアやコンセプトの実現可能性やそれによって 得られる効果などについて検証すること • これによって事前に検討したアイデア/コンセプトの実現 可能性を見極め、期待した効果が得られると判断できれば 実プロジェクトを進めていくという形が一般的です。
BFFとは?
? フロントエンドのための バックエンドサーバー
BFFとは? • 従来のモノリシックなサービスからマイクロサービス化 ◦ 複数のAPIを叩く必要が出てくる
BFFとは? • 取得したデータの加工をフロントエンドで行う必要有り ◦ フロントエンドで表示する内容は往々にして変わるた め、加工処理はフロントエンドがいいかも・・・ ◦ APIで取得してきたデータの一部は不要なため削ぎ落 としたり・・・(インピーダンスミスマッチ) •
フロントエンドの肥大化 • そもそもフロントエンドはUI/UXに専念するべき
BFFとは? BFFを用意することでAPI集約、インピーダンスミス マッチの解消、責務・関心の分離、パフォーマンス の向上が見込めるってコト!?
BFFとは? デメリット • 開発・保守の工数増 • 通信量増 • マイクロサービスのどれかがダウンした際の運用などを考 える必要やBFFが停止した場合など、様々な観点から検 証・対策が必要
(通信量の対策としてはキャッシュ化などが挙げられる)
ユースケース
2. SSR(Server Side Rendering) 4. File Upload 5. Web Socket
3. Session Management 1. API Gateway
• APIの結果を一つに集約する(API Aggregation) • APIで取得したデータをフロントエンドに適したデータに加 工する(API Translate) • 余計なリクエストが増大しないようAPIのレスポンスをキャ ッシュ化(API
Cache) ◦ Chache-aside pattern ◦ Broker pattern • GraphQLとの相性が良い API Gateway
• GraphQLとの相性が良い API Gateway
Server Side Rendering • CSR(Client Server Rendering)と違い、サーバーでレンダ リングを行う ◦ CSRと比較するとSEO観点で有利だったり、ローディング時間が短いと
いったメリットがある • みなさんお馴染みのNext.js、Nuxt.jsで簡単に実装可 ◦ Next.jsはデフォルトでSSRの設定になっています ◦ たまにhydration周りでエラーになったり・・・ • SSG(Static Site Generation)もあるが、こちらは静的サイ トに向いている SSR
• 主にユーザーの情報など、頻繁にアクセスされるであろうデ ータを保存する ◦ Redisやmemcachedなどが多く使われるらしい • 仮にBFFで管理をしない場合 ◦ クライアント側でLocal StorageやCookieなどで管理する必要がある
▪ セキュリティ的によくないよね ◦ バックエンド側で処理を重複して実装する必要がある ▪ なんか面倒くさそう Session Management
• 多くの場合はファイルアップロード機能を実装するとチャンク 化してファイルを少しずつ送信することが多い ◦ Pythonのrequestsとか、PHP(Laravel)のlaravel-chunk-uploadとか ◦ チャンク化したデータを順番通りにバックエンドに送信するのは大変そう File Upload ファイル格納の処理を
BFFが担うことで シンプルに実装可能!
• クライアントとサーバー間で即時に通信を行うHTTPの拡張 機能 • チャットや同時編集機能(googleスプレッドシートとか)や SNSで使用される • BFFがリアルタイムにデータ交換をする処理を受け持つこと で、バックエンドはデータをDBに保存することだけに集中 できる。
Web Socket
Web Socket ① ② ③ ③’
• クライアントとサーバー間で即時に通信を行うHTTPの拡張 機能 • チャットや同時編集機能(googleスプレッドシートとか)や SNSで使用される • BFFがリアルタイムにデータ交換をする処理を受け持つこと で、バックエンドはデータをDBに保存することだけに集中 できる。
Web Socket(改めて)
BFFまとめ
まとめ • BFFには5つのユースケースがある • BFFにメリットがたくさんあるが、デメリットも勿論あるため、 要件によって採用するしないを決める必要がある • (個人的には)責務の分散、API集約によるメリットが大きいの で、新規プロジェクトでは検討して良さそう
? GraphQLとは
GraphQLとは? ※https://graphql.org/
GraphQLとは? ※https://graphql.org/
GraphQLとは? • Facebookが開発したよ ◦ REST APIを使用していたらクラッシュが頻発したため、 より効率的にデータを取得するためGraphQLが開発された ◦ Facebook、Netflix、GitHub、Twitterも使用してるみたい •
query言語で柔軟なデータ取得が可能 ◦ 複雑な関係のデータでも取得しやすい(自分比) • エンドポイントが単一 ◦ ユーザー情報は/users/ 、商品情報は/products/ ◦ GraphQLだと /graphql/でユーザーも商品も取れちゃう • スキーマの構造がグラフモデル ◦ 詳しくはデータモデルに関して調べてみてください
GraphQLとは? • RESTとGraphQLを比較してみる REST API https://docs.github.com/ja/rest/guides/getting-started-with-the-rest-api GraphQL API https://docs.github.com/ja/graphql/overview/explorer 尚、ユーザーID・ユーザー名・アバターURLのみがほしいとする
GraphQLとは? REST API • これって・・・ 過剰にデータ取得しすぎってコト!? 探せば他に良いエンドポイントありそう。 って思ったけど探すのめんどい
GraphQLとは? GraphQL API • 取得したいデータのみ抽出できた
SQL GraphQL SELECT query INSERT/UPDATE/ DELETE mutation - subscription GraphQLとは?
Pub Subのような仕組みのリアルタイム通信 特定の情報を監視するようなイメージです
GraphQLとは? GraphQL API デモ
REST API • 複数のエンドポイント • 取得するデータが決まっている ◦ 過剰な取得 ◦ 過少な取得
• 欲しいデータによっては複数回リ クエストを投げ、取得したデータ を加工して・・・といった手間が かかる GraphQL • 単一のエンドポイント • 取得したいデータをピンポ イントで抽出できる ◦ スキーマで定義したデータだけ だからなんでも取得できるとは 思わないこと • BFFとの親和性高そう GraphQLとは?
GraphQLまとめ
GraphQLまとめ • GraphQL良さそうだけどN+1問題とか性能が少し気になる • BFFにするならGraphQLあり • 今後はGraphQLが採用されることも増えていくのではないか
技術調査まとめ
技術調査まとめ • 技術を導入した際のメリデメを考える • 導入障壁はないか • 導入コストや開発後の運用保守(メンテナンス)まで検討する といったことを調査を行った上で検討する
おわり