Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エディター付きのReact開発環境を ブラウザーだけで実装した話
Search
Hori Godai
March 17, 2024
9
1.7k
エディター付きのReact開発環境を ブラウザーだけで実装した話
ぜひmosya Reactで遊んでみてください!
https://mosya.dev/react
Hori Godai
March 17, 2024
Tweet
Share
More Decks by Hori Godai
See All by Hori Godai
TypeScript Compiler APIを使って 型のユニットテストをブラウザーで動かす
steelydylan
3
110
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
steelydylan
1
1.9k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
900
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
790
next.jsを使ったuniversal React 入門
steelydylan
1
250
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
250
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
400
アップルップルの新しいオープンソースの紹介
steelydylan
0
450
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
500
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How to Ace a Technical Interview
jacobian
275
23k
Designing with Data
zakiwarfel
98
5k
Automating Front-end Workflow
addyosmani
1365
200k
A Tale of Four Properties
chriscoyier
155
22k
The Invisible Side of Design
smashingmag
295
50k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
BBQ
matthewcrist
83
9.1k
Faster Mobile Websites
deanohume
304
30k
How To Stay Up To Date on Web Technology
chriscoyier
785
250k
A designer walks into a library…
pauljervisheath
201
24k
Transcript
エディター付きの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側からエディターに書いた内容の参照が可能!
エディターに書いたコードは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はメモリ上でコンパイルしてエラーやメッセージを取得できる
以上です!! 懇親会等でぜひ仲良くしていただけたら嬉しいです!