HonoでReact・TypeScriptの実行環境をブラウザー上に作る

Cloudflare Meetup Nagoya 第3回用発表資料です！

Transcript

1. HonoでReact・TypeScriptの実行環境を ブラウザー上に作る Cloudflare Meetup Nagoya 第3回
2. 2. ブラウザーで動作するVite的 なもののデモ 3. Service Workerって何？ 目次 4. HonoでService Worker側の 処理を実装する 1. 自己紹介 5. ブラウザー側の実装
3. 自己紹介 @steelydylan https://x.com/steelydylan
4. 妻と2歳の息子の3人暮らし サービス開発してます 小さな会社やってます 自己紹介 個人開発が大好きなWebエンジニア！特にフロントエンドの領域が好き
5. mosyaというサービスを開発しています！ Web制作やWeb開発を勉強できる学習サービス。初学者だけでなく現役の方にも使ってもらえる勉強 になる教材を用意してます！
6. 学べるカリキュラムの一例(実践編) 実践編では初級編・中級編で学習した内容を活かし、figmaのデザインデータを参考にその見本に 近づけるようにコーディングする「模写」に取り組みます。 また実践編では、ビジュアル採点とコード採点を組み合わせた質の高い採点方法を採用しました。 プレビューでは見本と比較しながらコードが書ける 採点画面
7. Reactの初学者にはもちろん、現役の 方にもお勧めできる教材を作ってます mosya React開発中！ Reactやその周辺技術を学べる教材を開発中です！ mosya ReactのLPサイトイメージ
8. ブラウザーで動作するVite的なもののデモ https://monaco-browser-bundler.vercel.app/ このデモはmosyaを開発する上でのWeb技術の実験場として用意してます！ Powered by
9. なぜこのような物を自作したのか 有料のライブラリが多い (StackBlitz社が開発するWebContainersが商 用利用の場合はライセンス費用がかかる) さらに表示速度を高めたい (ブラウザー標準のESMを使うことでバンドル 不要になりより速度を高められるから)
10. Service Workerって何？
11. 1 ブラウザーとサーバー間のプロキシーとして動作 2 キャッシュ機能 3 プッシュ通知機能 Push APIを使うことでサーバーからの通知を検知してそれをブラウザーに表示させることができます。 Service Workerはリクエスト結果などをキャッシュとしてキャッシュストレージに保存することができます。 この機能によってオフラインでもサイトを表示することが可能になったりします。 Service Workerとは Service Workerはブラウザーからサーバーへのリクエスト時にそのリクエストに介在して、リクエストやレスポ ンスに対して変更を加えることができます。これをうまく利用することでリクエストされたファイルをコンパイ ルするコンパイラとして機能させられます。
12. ネットワークのレスポンスを確認 ネットワークを確認するとレスポンスがServiceWorker経由で行われていることがわかります
13. ネットワークのレスポンスを確認 ちゃんとTypeScriptがコンパイルされている これサーバー側の処理はゼロです！
14. Service Workerの開発はES Modulesとして開発するのが便利 typeにmoduleを指定するとService Worker側でimportなどの構文が使える Service Worker側はノーバンドルで開発しています！ https://github.com/steelydylan/monaco-browser-bundler/blob/master/public/sw.js
15. Service Workerの開発はES Modulesとして開発するのが便利 ES Modulesを使うとimportやexportなどお馴染みの構文が使えます！ skypackやesm.shなどのCommonJSをESMとして使える CDNとの相性がめっちゃいいです！
16. HonoでService Worker側の処理を実装する
17. ブラウザーだけで実現するトランスパイル環境の構成 IndexedDBをつかってServiceWorker側でユーザーが書いたコードを取得し、それをWasmにトラン スパイルさせて結果を返却しています！
18. 今回はService Workerのリクエスト介在機能を利用 Honoを使うことで簡単にService Workerを使ったリクエスト介在ができます！ Cloudflare WorkersもService WorkerもRequestやResponseの仕様が同じなので Cloudflare WorkersでHonoが動くなら、Service Worker上でもHonoは動作します！
19. Honoならリクエストされたファイル名の取得が簡単 Honoならルーターのパターン処理が秀逸なのでリクエストされたファイルの種類の特定が簡単！ https://github.com/steelydylan/monaco-browser-bundler/blob/master/public/sw.js
20. Honoならリクエストされたファイル名の取得が簡単 ファイル名の拡張子に応じて返すリクエストを調整
21. @swc/wasm-webが最強！ Service Worker上でTypeScriptをトランスパイルするために@swc/wasm-webを利用します！ これもesm.shから直接利用が可能です！
22. ブラウザー側の処理
23. エディターに書いたコードをIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです！ これを使うことでService Worker側からエディターに書いた内容の参照が可能！
24. エディターに書いたコードをIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです！ これを使うことでService Worker側からエディターに書いた内容の参照が可能！
25. エディターに書いたコードをIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです！ これを使うことでService Worker側からエディターに書いた内容の参照が可能！
26. SW側ではIndexedDBからリクエストされたファイルを検索 IndexedDBはブラウザーでもIndexedDBでも動作するので同じlocalforageを使って保存されたファイ ルを探索します！
27. importmapを利用してreactなどのライブラリを解決 importmapを利用するとreactやreact-domなどのライブラリを読み込む際にURLを省略することがで きます！ スクリプト側ではimport文のURLを省略できる HTML側にはimportmapを使う
28. まとめ ブラウザーの可能性は無限大！Service WorkerやWASMを使うと魔法のようなことができます！ Service Workerの開発にはHonoが便利 (HonoはService WorkerでもCloudflare Workersでも動きます！) @swc/wasm-webを使うとTypeScriptをブラウザーで変換可能 (WASMはブラウザーからでもServiceWorkerからでも動かせます！) IndexedDBはブラウザーとServiceWorker間のデータ共有に便利 (特にlocalforageはlocalStorageのような感覚で使えて便利です！)
29. 以上です！！ 懇親会等でぜひ仲良くしていただけたら嬉しいです！