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
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
Search
Hori Godai
October 06, 2023
Programming
1
2.3k
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
Cloudflare Meetup Nagoya 第3回用発表資料です!
Hori Godai
October 06, 2023
Tweet
Share
More Decks by Hori Godai
See All by Hori Godai
TypeScript Compiler APIを使って 型のユニットテストをブラウザーで動かす
steelydylan
3
220
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.9k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
1.2k
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
930
next.jsを使ったuniversal React 入門
steelydylan
1
310
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
380
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
480
アップルップルの新しいオープンソースの紹介
steelydylan
0
510
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
580
Other Decks in Programming
See All in Programming
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.5k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
2
360
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
130
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
200
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
testingを眺める
matumoto
1
130
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
1
290
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Balancing Empowerment & Direction
lara
3
600
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Code Review Best Practice
trishagee
70
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
Become a Pro
speakerdeck
PRO
29
5.5k
A designer walks into a library…
pauljervisheath
207
24k
Done Done
chrislema
185
16k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Code Reviewing Like a Champion
maltzj
525
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Transcript
HonoでReact・TypeScriptの実行環境を ブラウザー上に作る Cloudflare Meetup Nagoya 第3回
2. ブラウザーで動作するVite的 なもののデモ 3. Service Workerって何? 目次 4. HonoでService Worker側の
処理を実装する 1. 自己紹介 5. ブラウザー側の実装
自己紹介 @steelydylan https://x.com/steelydylan
妻と2歳の息子の3人暮らし サービス開発してます 小さな会社やってます 自己紹介 個人開発が大好きなWebエンジニア!特にフロントエンドの領域が好き
mosyaというサービスを開発しています! Web制作やWeb開発を勉強できる学習サービス。初学者だけでなく現役の方にも使ってもらえる勉強 になる教材を用意してます!
学べるカリキュラムの一例(実践編) 実践編では初級編・中級編で学習した内容を活かし、figmaのデザインデータを参考にその見本に 近づけるようにコーディングする「模写」に取り組みます。 また実践編では、ビジュアル採点とコード採点を組み合わせた質の高い採点方法を採用しました。 プレビューでは見本と比較しながらコードが書ける 採点画面
Reactの初学者にはもちろん、現役の 方にもお勧めできる教材を作ってます mosya React開発中! Reactやその周辺技術を学べる教材を開発中です! mosya ReactのLPサイトイメージ
ブラウザーで動作するVite的なもののデモ https://monaco-browser-bundler.vercel.app/ このデモはmosyaを開発する上でのWeb技術の実験場として用意してます! Powered by
なぜこのような物を自作したのか 有料のライブラリが多い (StackBlitz社が開発するWebContainersが商 用利用の場合はライセンス費用がかかる) さらに表示速度を高めたい (ブラウザー標準のESMを使うことでバンドル 不要になりより速度を高められるから)
Service Workerって何?
1 ブラウザーとサーバー間のプロキシーとして動作 2 キャッシュ機能 3 プッシュ通知機能 Push APIを使うことでサーバーからの通知を検知してそれをブラウザーに表示させることができます。 Service Workerはリクエスト結果などをキャッシュとしてキャッシュストレージに保存することができます。
この機能によってオフラインでもサイトを表示することが可能になったりします。 Service Workerとは Service Workerはブラウザーからサーバーへのリクエスト時にそのリクエストに介在して、リクエストやレスポ ンスに対して変更を加えることができます。これをうまく利用することでリクエストされたファイルをコンパイ ルするコンパイラとして機能させられます。
ネットワークのレスポンスを確認 ネットワークを確認するとレスポンスがServiceWorker経由で行われていることがわかります
ネットワークのレスポンスを確認 ちゃんとTypeScriptがコンパイルされている これサーバー側の処理はゼロです!
Service Workerの開発はES Modulesとして開発するのが便利 typeにmoduleを指定するとService Worker側でimportなどの構文が使える Service Worker側はノーバンドルで開発しています! https://github.com/steelydylan/monaco-browser-bundler/blob/master/public/sw.js
Service Workerの開発はES Modulesとして開発するのが便利 ES Modulesを使うとimportやexportなどお馴染みの構文が使えます! skypackやesm.shなどのCommonJSをESMとして使える CDNとの相性がめっちゃいいです!
HonoでService Worker側の処理を実装する
ブラウザーだけで実現するトランスパイル環境の構成 IndexedDBをつかってServiceWorker側でユーザーが書いたコードを取得し、それをWasmにトラン スパイルさせて結果を返却しています!
今回はService Workerのリクエスト介在機能を利用 Honoを使うことで簡単にService Workerを使ったリクエスト介在ができます! Cloudflare WorkersもService WorkerもRequestやResponseの仕様が同じなので Cloudflare WorkersでHonoが動くなら、Service Worker上でもHonoは動作します!
Honoならリクエストされたファイル名の取得が簡単 Honoならルーターのパターン処理が秀逸なのでリクエストされたファイルの種類の特定が簡単! https://github.com/steelydylan/monaco-browser-bundler/blob/master/public/sw.js
Honoならリクエストされたファイル名の取得が簡単 ファイル名の拡張子に応じて返すリクエストを調整
@swc/wasm-webが最強! Service Worker上でTypeScriptをトランスパイルするために@swc/wasm-webを利用します! これもesm.shから直接利用が可能です!
ブラウザー側の処理
エディターに書いたコードをIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです! これを使うことでService Worker側からエディターに書いた内容の参照が可能!
エディターに書いたコードをIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです! これを使うことでService Worker側からエディターに書いた内容の参照が可能!
エディターに書いたコードをIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです! これを使うことでService Worker側からエディターに書いた内容の参照が可能!
SW側ではIndexedDBからリクエストされたファイルを検索 IndexedDBはブラウザーでもIndexedDBでも動作するので同じlocalforageを使って保存されたファイ ルを探索します!
importmapを利用してreactなどのライブラリを解決 importmapを利用するとreactやreact-domなどのライブラリを読み込む際にURLを省略することがで きます! スクリプト側ではimport文のURLを省略できる HTML側にはimportmapを使う
まとめ ブラウザーの可能性は無限大!Service WorkerやWASMを使うと魔法のようなことができます! Service Workerの開発にはHonoが便利 (HonoはService WorkerでもCloudflare Workersでも動きます!) @swc/wasm-webを使うとTypeScriptをブラウザーで変換可能 (WASMはブラウザーからでもServiceWorkerからでも動かせます!)
IndexedDBはブラウザーとServiceWorker間のデータ共有に便利 (特にlocalforageはlocalStorageのような感覚で使えて便利です!)
以上です!! 懇親会等でぜひ仲良くしていただけたら嬉しいです!