Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

エディターの実装

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

プレビュー環境の実装

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Service Workerの開発はES Modulesとして開発するのが便利 typeにmoduleを指定するとService Worker側でimportなどの構文が使える Service Worker側はノーバンドルで開発しています！ https://github.com/steelydylan/monaco-browser-bundler/blob/master/public/sw.js

Slide 17

Slide 17 text

Service Workerの開発はES Modulesとして開発するのが便利 ES Modulesを使うとimportやexportなどお馴染みの構文が使えます！ skypackやesm.shなどのCommonJSをESMとして使える CDNとの相性がめっちゃいいです！

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

採点の実装

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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