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

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側からエディターに書いた内容の参照が可能！

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のような感覚で使えて便利です！)

以上です！！懇親会等でぜひ仲良くしていただけたら嬉しいです！

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

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

Hori Godai

More Decks by Hori Godai

Other Decks in Programming

Featured

Transcript