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
chimame
June 19, 2023
Programming
11
6.7k
エッジで輝くフロントエンド
Cloudflare Meetup #1
chimame
June 19, 2023
Tweet
Share
More Decks by chimame
See All by chimame
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
180
Boost Your Web Performance with Hyperdrive
chimame
1
320
RemixでVersion skewに立ち向かう
chimame
2
1.2k
私がエッジを使う理由
chimame
10
4.1k
GraphQL Server on Edge after that
chimame
1
1.6k
Accelerating App Dev with Cloudflare Workers
chimame
1
450
GraphQL Server on Edge
chimame
12
6.1k
Cloudflare Workersと状態管理
chimame
4
1.8k
CSRなサイトを (疑似的な)ISRに変更した話
chimame
0
650
Other Decks in Programming
See All in Programming
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
370
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
22
24k
検索機能リプレイスを4ヶ月→2ヶ月に! AI Agentで実現した2倍速リプレイス
fuuki12
4
730
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
1
160
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
460
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
5.7k
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
1.9k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
110
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
350
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
300
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
200
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
550
How STYLIGHT went responsive
nonsquared
100
5.8k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
We Have a Design System, Now What?
morganepeng
53
7.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Gamification - CAS2011
davidbonilla
81
5.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
830
A Tale of Four Properties
chriscoyier
160
23k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Transcript
エッジで輝くフロントエンド Cloudflare Meetup #1 2023.06.19
目次 • フロントエンド技術の歴史 • フロントエンド領域の現状 • Cloudflare Pages • ユースケース
• まとめ
フロントエンド技術の歴史 • 2010年頃はRuby on Railsのようなフレーム ワークが確固たる地位を確立 ◦ サーバサイドでHTMLを生成し、クライアントに返す ◦ JavaScriptはAjaxやちょっとした画面動作に使用する
• JavaScriptはjQueryがまだスタンダードに使用 される時代
フロントエンド技術の歴史 • DOMの書き換えは大体以下の2通り ◦ Ajaxで取得したレスポンスの内容にまるっと書き換え る(サーバサイドレンダリング ) ◦ jQueryでDOMを書き換える •
2010年頃にBackbone.jsやReactが登場 ◦ アプローチは異なるが、 DOMの管理を何をもって行う かということに注目が集まる
フロントエンド技術の歴史 • Reactなどを使用したDOM変更によるWeb ページのUXが大幅に向上 ◦ 周辺のエコシステムも急速に成長 (Browserify, Webpack, Babel etc)
• バックエンドシステムと分離が始まる ◦ フロントエンド領域におけるセットアップの複雑さが増 加 ◦ レンダリングはフロントエンドが担う ようになる
フロントエンド技術の歴史 • レンダリングにおける問題 ◦ SEO ◦ クライアントサイドのマシンスペック etc • バックエンドシステムと整合性
◦ システム間連携の複雑性増加 ◦ コミュニケーションパスの増加
フロントエンド領域の現状 • レンダリングの様々な手法が確立 ◦ Client Side Rendering(CSR) ◦ Server Side
Rendering(SSR) ◦ Static Site Generation(SSG) ◦ Incremental Static Regeneration(ISR) ◦ Server Side Component ← NEW
フロントエンド領域の現状 • サーバサイドレンダリングって… ◦ 10数年前の話に戻ってきてはいるが、完全に 戻ってるわけではない ◦ クライアント、サーバサイド両方をうまく使う必 要がある
フロントエンド領域の現状 • サーバを使用するということは役割と責任も増 加 ◦ ブラウザからのアクセス制御 ◦ 静的ファイル配信の最適化 ◦ SSRのための計算リソースの確保
◦ フェイルオーバーやログなどの非機能要件 etc
フロントエンド領域の現状 • 現状における様々な打ち手 ◦ Vercel, Cloudflare Pages, Netfilyなどのホスティン グサービスで運用 ◦
Cloud Runなどのサーバレスサービスを使ったセルフ ホスティングで運用
Cloudflare Pages • 特徴 ◦ 2021年頃に登場したホスティングサービス ◦ 2021年後半にCloudflare Workesと連携が対応され てサーバリソースを使用することが可能になる
▪ サーバレスアーキテクチャ ◦ さらには無料の範囲が非常に大きい
Cloudflare Pages • Cloudflare Pages + Cloudflare Workersで 使用できるフレームワーク ◦
Remix ◦ Astro ◦ SvelteKit ◦ rakkas
Cloudflare Pages • Pages単体も魅力的だが他製品を活用するこ とでシステムを構築できる ◦ Cloudflareのキャッシュを活用 ◦ KV, R2やD1を活用した状態管理
◦ BotアクセスやDDOS対策を基本的に備える
ユースケース Webサイト 管理画面 データベース(PosggreSQL) バッチサーバ 画像(GCS) データの流れ SSRでクライアントに返す (SEO対 策が必要)
Zero Trustで認証を実施 CNAMEを設定して、CDNから配信 HTML 初期段階
ユースケース Webサイト 管理画面 連携API データベース(D1) Node.js処理サーバ 画像(R2) データの流れ 画像処理にNode.jsが必要な ため、D1からデータを取得す
るためのWorkers経由でデー タを取得 SSRでクライアントに返す (SEO対 策が必要) Zero Trustで認証を実施 カスタムドメインを設定してダイレクトにアクセス HTML 最終形
ユースケース • 移行のメリット ◦ 計算リソースがエッジで動作する( client or server ?) ▪
第3の計算リソースが使える ◦ コンテナをビルドする必要がない のでデプロイ時間が大 幅に短縮(10分前後→1分未満) ◦ サーバ費がダウン • 移行のデメリット ◦ ログ基盤は自分で作成する 必要がある ◦ Node.jsが必要な部分は別処理を作成 する必要がある
まとめ • フロントエンド担う領域は拡大している • フロントエンド領域の開発に注力するためには Cloudflare Pagesも十分な選択肢の1つ ◦ オリジンサーバとは違い、クライアントに近い場所で 動くのでレイテンシに利点生まれる
◦ サーバレス同様に処理能力をスケールアウトさせるこ とで、分散化し向上できることができる • サービスの機能をうまく利用し、顧客に価値を 提供するための開発に集中することが大事
Thanks! • name: chimame / rito • job: Webエンジニア •
field: Cloudflare, GCP, AWS, Ruby, Node.js, TypeScript, React, Next.js, Remix, Docker etc • company: Goens株式会社( https://about.goen-s.com ) • twitter: @chimame_rt • GitHub: chimame