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

エディター付きのReact開発環境をブラウザーだけで実装した話 Repro Tech Meetup Deep Dive into Browsers

2. ブラウザーで動作する開発環境のデモ 3. エディターの実装目次 5. 採点の実装 1. 自己紹介
4. プレビュー環境の実装

自己紹介 @steelydylan https://x.com/steelydylan

妻と2歳の息子の3人暮らしサービス開発してます小さな会社やってます自己紹介個人開発が大好きなWebエンジニア！特にフロントエンドの領域が好き

mosya Reactというサービスを今日リリースしました！ Web制作やWeb開発を勉強できる学習サービス。初学者だけでなく現役の方にも使ってもらえる勉強になる教材を用意してます！

なぜこのような物を自作したのか有料のライブラリが多い (StackBlitz社が開発するWebContainersが商用利用の場合はライセンス費用がかかる) さらに表示速度を高めたい (ブラウザー標準のESMを使うことでバンドル不要になりより速度を高められるから)

エディターの実装

エディターの実装 BiomeJSをWorker上で動かしてエディター上でリント結果を表示

エディターの実装ブラウザー上で直接動かすと重いためWorker上で処理を実行 postMessageを意識せずに実装できるComLinkが便利

プレビュー環境の実装

1 ブラウザーとサーバー間のプロキシーとして動作 2 キャッシュ機能 3 プッシュ通知機能 Push APIを使うことでサーバーからの通知を検知してそれをブラウザーに表示させることができます。 Service Workerはリクエスト結果などをキャッシュとしてキャッシュストレージに保存することができます。
この機能によってオフラインでもサイトを表示することが可能になったりします。プレビュー環境の実装にServiceWorkerを利用 Service Workerはブラウザーからサーバーへのリクエスト時にそのリクエストに介在して、リクエストやレスポンスに対して変更を加えることができます。これをうまく利用することでリクエストされたファイルをコンパイルするコンパイラとして機能させられます。

ネットワークのレスポンスを確認ネットワークを確認するとレスポンスがServiceWorker経由で行われていることがわかります

ネットワークのレスポンスを確認ちゃんとTypeScriptがコンパイルされているこれサーバー側の処理はゼロです！

importmapを利用してreactなどのライブラリを解決 importmapを利用するとreactやreact-domなどのライブラリを読み込む際にURLを省略することができます！スクリプト側ではimport文のURLを省略できる HTML側にはimportmapを使う

ブラウザーだけで実現するトランスパイル環境の構成 IndexedDBをつかってServiceWorker側でユーザーが書いたコードを取得し、それをWasmにトランスパイルさせて結果を返却しています！

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との相性がめっちゃいいです！

今回はService Workerのリクエスト介在機能を利用 Honoを使うことで簡単にService Workerを使ったリクエスト介在ができます！ Cloudflare WorkersもService WorkerもRequestやResponseの仕様が同じなので Cloudflare WorkersでHonoが動くなら、Service Worker上でもHonoは動作します！

TypeScriptのコンパイルには@swc/wasm-webが最強！ Service Worker上でTypeScriptをトランスパイルするために@swc/wasm-webを利用します！これもesm.shから直接利用が可能です！

エディターに書いたコードはIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです！これを使うことでService Worker側からエディターに書いた内容の参照が可能！

SW側ではIndexedDBからリクエストされたファイルを検索 IndexedDBはブラウザーでもIndexedDBでも動作するので同じlocalforageを使って保存されたファイルを探索します！

採点の実装

ユニットテスト @testing-library/reactをブラウザーで利用採点時に先ほどのプレビュー環境を裏で表示しつつ採点 Reactが動く環境であれば@testing-library/reactは動くこの辺のライブラリーと組み合わせることでブラウザーでもユニットテストが動かせる！！ https://github.com/kvendrik/jest-lite

型テスト TypeScript Compiler APIで型テスト TypeScript Compiler APIはメモリ上でコンパイルしてエラーやメッセージを取得できる

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

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

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

Hori Godai

More Decks by Hori Godai

Featured

Transcript