エディター付きのReact開発環境を ブラウザーだけで実装した話

ぜひmosya Reactで遊んでみてください！

https://mosya.dev/react

Transcript

1. エディター付きのReact開発環境を ブラウザーだけで実装した話 Repro Tech Meetup Deep Dive into Browsers
2. 2. ブラウザーで動作する開発環 境のデモ 3. エディターの実装 目次 5. 採点の実装 1. 自己紹介 4. プレビュー環境の実装
3. 自己紹介 @steelydylan https://x.com/steelydylan
4. 妻と2歳の息子の3人暮らし サービス開発してます 小さな会社やってます 自己紹介 個人開発が大好きなWebエンジニア！特にフロントエンドの領域が好き
5. mosya Reactというサービスを今日リリースしました！ Web制作やWeb開発を勉強できる学習サービス。初学者だけでなく現役の方にも使ってもらえる勉強 になる教材を用意してます！
6. なぜこのような物を自作したのか 有料のライブラリが多い (StackBlitz社が開発するWebContainersが商 用利用の場合はライセンス費用がかかる) さらに表示速度を高めたい (ブラウザー標準のESMを使うことでバンドル 不要になりより速度を高められるから)
7. エディターの実装
8. エディターの実装 BiomeJSをWorker上で動かしてエディター上でリント結果を表示
9. エディターの実装 ブラウザー上で直接動かすと重いためWorker上で処理を実行 postMessageを意識せずに実装できるComLinkが便利
10. プレビュー環境の実装
11. 1 ブラウザーとサーバー間のプロキシーとして動作 2 キャッシュ機能 3 プッシュ通知機能 Push APIを使うことでサーバーからの通知を検知してそれをブラウザーに表示させることができます。 Service Workerはリクエスト結果などをキャッシュとしてキャッシュストレージに保存することができます。 この機能によってオフラインでもサイトを表示することが可能になったりします。 プレビュー環境の実装にServiceWorkerを利用 Service Workerはブラウザーからサーバーへのリクエスト時にそのリクエストに介在して、リクエストやレスポ ンスに対して変更を加えることができます。これをうまく利用することでリクエストされたファイルをコンパイ ルするコンパイラとして機能させられます。
12. ネットワークのレスポンスを確認 ネットワークを確認するとレスポンスがServiceWorker経由で行われていることがわかります
13. ネットワークのレスポンスを確認 ちゃんとTypeScriptがコンパイルされている これサーバー側の処理はゼロです！
14. importmapを利用してreactなどのライブラリを解決 importmapを利用するとreactやreact-domなどのライブラリを読み込む際にURLを省略することがで きます！ スクリプト側ではimport文のURLを省略できる HTML側にはimportmapを使う
15. ブラウザーだけで実現するトランスパイル環境の構成 IndexedDBをつかってServiceWorker側でユーザーが書いたコードを取得し、それをWasmにトラン スパイルさせて結果を返却しています！
16. Service Workerの開発はES Modulesとして開発するのが便利 typeにmoduleを指定するとService Worker側でimportなどの構文が使える Service Worker側はノーバンドルで開発しています！ https://github.com/steelydylan/monaco-browser-bundler/blob/master/public/sw.js
17. Service Workerの開発はES Modulesとして開発するのが便利 ES Modulesを使うとimportやexportなどお馴染みの構文が使えます！ skypackやesm.shなどのCommonJSをESMとして使える CDNとの相性がめっちゃいいです！
18. 今回はService Workerのリクエスト介在機能を利用 Honoを使うことで簡単にService Workerを使ったリクエスト介在ができます！ Cloudflare WorkersもService WorkerもRequestやResponseの仕様が同じなので Cloudflare WorkersでHonoが動くなら、Service Worker上でもHonoは動作します！
19. TypeScriptのコンパイルには@swc/wasm-webが最強！ Service Worker上でTypeScriptをトランスパイルするために@swc/wasm-webを利用します！ これもesm.shから直接利用が可能です！
20. エディターに書いたコードはIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです！ これを使うことでService Worker側からエディターに書いた内容の参照が可能！
21. エディターに書いたコードはIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです！ これを使うことでService Worker側からエディターに書いた内容の参照が可能！
22. SW側ではIndexedDBからリクエストされたファイルを検索 IndexedDBはブラウザーでもIndexedDBでも動作するので同じlocalforageを使って保存されたファイ ルを探索します！
23. 採点の実装
24. ユニットテスト @testing-library/reactをブラウザーで利用 採点時に先ほどのプレビュー環境を裏で表示しつつ採点 Reactが動く環境であれば@testing-library/reactは動く この辺のライブラリーと組み合わせることでブラウザーでもユニットテストが動かせる！！ https://github.com/kvendrik/jest-lite
25. 型テスト TypeScript Compiler APIで型テスト TypeScript Compiler APIはメモリ上でコンパイルしてエラーやメッセージを取得できる
26. 以上です！！ 懇親会等でぜひ仲良くしていただけたら嬉しいです！