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.2k
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
180
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.8k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
1.1k
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
880
next.jsを使ったuniversal React 入門
steelydylan
1
280
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
320
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
430
アップルップルの新しいオープンソースの紹介
steelydylan
0
480
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
550
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
340
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
300
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
150
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
190
Open source software: how to live long and go far
gaelvaroquaux
0
660
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
920
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
990
Formの複雑さに立ち向かう
bmthd
1
930
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
950
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Fireside Chat
paigeccino
34
3.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
It's Worth the Effort
3n
184
28k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Automating Front-end Workflow
addyosmani
1368
200k
BBQ
matthewcrist
87
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
We Have a Design System, Now What?
morganepeng
51
7.4k
Thoughts on Productivity
jonyablonski
69
4.5k
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のような感覚で使えて便利です!)
以上です!! 懇親会等でぜひ仲良くしていただけたら嬉しいです!