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
1.8k
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
99
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.7k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
860
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
770
next.jsを使ったuniversal React 入門
steelydylan
1
240
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
220
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
390
アップルップルの新しいオープンソースの紹介
steelydylan
0
440
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
490
Other Decks in Programming
See All in Programming
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
継続的な活動で築く地方エンジニアの道
myamashii
2
350
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
AHC035解説
terryu16
0
710
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
CSC307 Lecture 14
javiergs
PRO
0
220
Featured
See All Featured
Statistics for Hackers
jakevdp
792
220k
Practical Orchestrator
shlominoach
185
10k
Docker and Python
trallard
37
2.9k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Six Lessons from altMBA
skipperchong
24
3.2k
Designing Experiences People Love
moore
136
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
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のような感覚で使えて便利です!)
以上です!! 懇親会等でぜひ仲良くしていただけたら嬉しいです!