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
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
Search
AijiUejima
August 24, 2024
Technology
7
5.7k
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
フロントエンドカンファレンス北海道2024
の登壇資料です。
AijiUejima
August 24, 2024
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
7
2.5k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
3k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.7k
Cloudflare Fonts試してみた🔤
aiji42
2
820
Hyperdrive試してみた🛸
aiji42
3
1.4k
Workers Browser Rendering API について
aiji42
0
580
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.6k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
980
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
15
6.1k
Other Decks in Technology
See All in Technology
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
200
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
300
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
120
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
160
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
460
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
140
RSCの時代にReactとフレームワークの境界を探る
uhyo
9
3k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
190
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
120
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
140
フィンテック養成勉強会#56
finengine
0
120
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Balancing Empowerment & Direction
lara
3
610
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Unsuck your backbone
ammeep
671
58k
Embracing the Ebb and Flow
colly
87
4.8k
KATA
mclloyd
32
14k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Typedesign – Prime Four
hannesfritz
42
2.8k
Bash Introduction
62gerente
615
210k
Agile that works and the tools we love
rasmusluckow
330
21k
Transcript
フロントエンドカンファレンス北海道2024 エッジはフロントンドなのか? バックエンドなのか? について考えてみる
- Aiji Uejima - Webエンジニア(フルスタックにやってます) - 最近はエッジコンピューティング(Cloudflare Workers)で色々構築・開発するのが好き 自己紹介 aiji42_dev
aiji42
会場の皆さんに質問 ? エッジコンピューティングは 「フロントエンド」だと思いますか? それとも「バックエンド」だと思いますか?
アジェンダ 1. エッジとはなにか? 2. エッジの特徴 3. エッジをフロントエンド側からみてみる 4. エッジをバックエンド側からみてみる 5.
領域の定義 6. まとめ
What is the edge? 1. エッジとはなにか?
エッジと聞くと何を思い浮かべますか? 「CDNロケーションのエッジコンピューティング」を思い浮かべる人が多いはず。 (フロントエンドカンファレンスだし)
CDNロケーションのエッジコンピューティング CDNデータセンター上のコンピュータでクライアントとオリジンとの間で計算を行う。 WAFや高速化などの目的から始まり、徐々に用途がフルスタック化しつつある。 地球レベルで見たときにクライアント側(端)に配置されているのでエッジ。
CDNロケーションのエッジコンピューティング 今日はこの話をメインにするが... これらが登場する以前から「エッジ」と呼ばれるものは存在していた。 なので特段「新しいもの」「新しい概念」というわけではない。
IoTのエッジサーバー デバイスと中央サーバとの間に小規模サーバを挟んで処理したり、デバイス自身が 計算リソースを持つことで、遅延対策やネットワーク負荷軽減の役割を果たす。 デバイス側(端)にあるサーバーなのでエッジ。
店舗の在庫・売上を分散管理するシステム 各店舗内に小規模なサーバを配置し、ローカルのネットワーク内で処理することで 各店舗のレジシステムが完結するようにする。 店舗側(端)で処理するのでエッジ。
概念自体は古くから存在していた エンドユーザの近くに計算リソースを分散させることで、 中央サーバーの負荷や遅延の低減を行うものを、 一般に「エッジ(コンピューティング)」と呼ぶ。 概念自体は新しい訳では無いが... 「CDNのエッジコンピューティング」は、 Web開発の場面で、最近少しずつ注目されるようになってきた。
なぜ注目され始めたのか? - Core Web Vitals のためにパフォーマンス改善の重要性が増した - キャッシュコントロールや画像最適化など - 言語・インタフェースの選択肢が増えた
- Fastly の VLC(Varnish) は習得難易度が高かった - JavaScriptで書けるベンダーが出始め、一気に敷居が下がった - 対応したライブラリやノウハウの普及により、フルスタック化
Edge features 2. エッジの特徴
ベンダー 名称 言語/エンジン Cloudflare Cloudflare Workers JavaScript/V8 Fastly Fastly Compute@Edge
Wasm/Wasmtime Vercel Vercel Functions JavaScript/V8 Akamai Akamai EdgeWorkers JavaScript/V8 各ベンダーの採用言語とエンジン
ベンダー 名称 言語/エンジン Cloudflare Cloudflare Workers JavaScript/V8 Fastly Fastly Compute@Edge
Wasm/Wasmtime Vercel Vercel Functions JavaScript/V8 Akamai Akamai EdgeWorkers JavaScript/V8 V8エンジンを採用しているベンダーが多い 各ベンダーの採用言語とエンジン
エッジとV8 V8エンジンのIsolate Modeが使用されることが多い。 一つのランタイムプロセス上でサンドボックスを立ち上げ、ユーザコードを実行。 VMベースと比較してスピンアップが速い。(従来のサーバレスと異なる点) Node.jsもV8の上に構築されているが、サンドボックスは組み込まれていない。 出典: Cloud Computing without
Containers https://blog.cloudflare.com/cloud-computing-without-containers
Looking at the edge from the frontend 3. フロントエンド側から見てみる ※
以降、 Cloudflare Wokers を前提に話します。
ブラウザ上のService Worker Webページとは別にバックグラウンドで実行するクライアントスクリプト。 Req/Resに介入して内容を変更したり、オリジンへリクエストすることなく CacheAPIを使ってレスポンスを返えしたりする。
エッジもある種のService Worker Service Workerと同じIFでWeb標準APIが動くように設計されている。 例えばCacheAPI や `waitUntil()` などが実行可能で、 Req/Resに介入し、スクリプトを実行することでプロキシの役割を持たせられる。 エッジ
= リモートで動くService Workerと考えることができる。
エッジもある種のService Worker Service Workerと同じIFでWeb標準APIが動くように設計されている。 互換性があるので、逆にエッジ用に書いたコードがブラウザでも実行可能。 リモートでブラウザをもう一つ動かしている感覚に近い
エッジはフロントエンドだ(?) - Chromeと同じV8エンジンの上で実行される - JSが動いてWeb標準APIが利用可能 - Service Workerと同じ機能を備えている エッジ ≒
ブラウザと考えることができるということは、 「エッジはフロントエンドだ」といって良さそう。
Looking at the edge from the backend 4. バックエンド側から見てみる
ブラウザでは動かない実装が動く Node.jsのAPIに関しては互換性がある。(node compat) グローバルリソースに対しての、TCP Socket接続が可能。
as Origin (Origin less) エッジランタイムをサポートするライブラリが増加傾向で、 SSRやRSCのためのフルスタックな環境として稼働させたり、 BFFをエッジで稼働させるなどの潮流が活発化してきている。 これまでのオリジンサーバの代替となりつつある。 Supporting edge
runtime
フルスタックなWebサーバーの代わりになる。 従来のオリジンサーバーの役目を果たせる。 「エッジはバックエンドだ」と言えるのでは? エッジはバックエンドだ(?) そもそも、フロントエンド=ブラウザ・クライアントと仮に限定するのであれば、 ブラウザ外(サーバ)で動いているエッジはバックエンドだと言えそう。
フルスタックなWebサーバーの代わりになる。 従来のオリジンサーバーの役目を果たせる。 「エッジはバックエンドだ」と言えるのでは? エッジはバックエンドだ(?) そもそも、フロントエンド=ブラウザ・クライアントと仮に限定するのであれば、 ブラウザ外(サーバ)で動いているエッジはバックエンドだと言えそう。 本当にそう言い切れるか?
フロントエンド=ブラウザ・クライアント? 実際はそんなに簡単に分けれるものではなさそう。 - ReactのServer Actions や Server Component はバックエンドか? -
Next.js や Remix の SSR はバックエンドか? - BFFを開発するのはバックエンドエンジニアの役割か? - キャッシュコントロールやコンテンツ配信の計画は誰が責任を持つべきか?
Definition of frontend and backaend 5. 領域の定義
境界線はどこか? フロントエンドとバックエンドの境界線はどこにあるのか?
フロントエンドとバックエンドで分け始めたのは2010年代前半 我々は、いつから役割を区分し始めたのか Google Books Ngram Viewerによるキーワード出現率の可視化 2010年
フロントエンドとバックエンドで分け始めたのは2010年代前半 - AJAXなどの技術の登場によるクライアントの表現力の向上と浸透 - アプリ対応・モバイル対応の必要性の増加 - SPA技術・ライブラリの発達 「フロントエンドはクライアント」「バックエンドはサーバ」と比較的分けやすかった。 我々は、いつから役割を区分し始めたのか
求められることの多様化 フロントエンド=ブラウザ・クライアントだけ ではないのは明白。 フロントエンドエンジニアの業務はブラウザ・クライアントの技術だけでは回らない。 フロントエンドとバックエンドで分けるようになってからおおよそ10年。 フロントエンドのニーズは多様化している。 - SSR/RSC (w/ data
loader) - キャッシュコントロール/コンテンツ配信の設計 - パフォーマンス改善 Reactを始めとした各種ライブラリはサーバサイド側の理解を暗黙的に求め、 GoogleはCWVを通じてブラウザに限らないスキルを求めている。
明確な境界線はない 境界線という概念で捉えるのは実態に即していない。
明確な境界線はない 境界線という概念で捉えるのは実態に即していない。 クロスオーバーしていると考える方が適している。 あるのは「バックエンド寄り」「フロントエンド寄り」という相対的な位置関係。
フロントエンド・バックエンドどちらかに限定することはできない。 ある意味、リモートでブラウザを動かしているようなもの。 フロントエンド・バックエンド間のコンテキストスイッチのためのコストが少なくて済み、 領域を分かつものではなく、架け橋になるものである。 エッジに話を戻すと フロントエンドの技術を使ったバックエンドである 出典: エッジは誰のもの? | ゆーすけべー日記
https://yusukebe.com/posts/2024/who-is-edge-for/
Conclusion 6. まとめ
エッジはフロントエンドとバックエンド両方の側面を持つ まとめ フロントエンド側面 - V8エンジンの上でJSでWeb標準なAPIを実行できるランタイム - Service Worker的な振る舞いを持つ バックエンド側面 -
Node.jsのAPIが実行可能で外部ともTCPで接続可能と、フルスタック - Origin as EdgeとしてWebサーバーの代替になりつつある フロントエンジニア、バックエンドエンジニア両方との親和性が高く、 言語やIFが統一されるので、スイッチングコストが少なく領域越境がしやすい。
まとめ フロントエンドとバックエンドには明確な境界線はない あるのは、「フロントエンド寄り」「バックエンド寄り」の相対的な位置関係。 複雑で多様なスキル・知識が求められる昨今、積極的に領域越境をしていきましょう。 最後に 「サーバサイドに苦手意識がある」 「普段クライアントコードしか書かない」というフロントエンドエンジニアの方、 「バックとフロントのスイッチングコストを下げたい」というフルスタックエンジニアの方は、 是非、エッジコンピューティングを触ってみてください!
Thank you!
参考・出典 - エッジコンピューティングとは? IoTの活用事例も解説 https://www.nec-solutioninnovators.co.jp/sp/contents/column/20220225_edge-computing.html - Containers at Edge and
the future https://speakerdeck.com/inductor/containers-at-edge-and-the-future - ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう https://speakerdeck.com/aiji42/biginaxiang-ke-etuzirantaimunosusume-etuzirantaimuwoyi-shi-sitakai-fa-wohazime you - エッジは誰のもの https://yusukebe.com/posts/2024/who-is-edge-for/ - Cloud Computing without Containers https://blog.cloudflare.com/cloud-computing-without-containers - サーバーレスJavaScriptの仕組みとは?| Service WorkersとCloudflare Workers https://www.cloudflare.com/ja-jp/learning/serverless/serverless-javascript/ - Cloudflare Workersプロキシパターン https://zenn.dev/yusukebe/articles/647aa9ba8c1550 - GraphQL Server on Edge https://speakerdeck.com/chimame/graphql-server-on-edge