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
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
Search
Hori Godai
October 06, 2023
Programming
1
1.5k
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
Cloudflare Meetup Nagoya 第3回用発表資料です!
Hori Godai
October 06, 2023
Tweet
Share
More Decks by Hori Godai
See All by Hori Godai
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
8
1.6k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
800
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
700
next.jsを使ったuniversal React 入門
steelydylan
1
210
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
200
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
360
アップルップルの新しいオープンソースの紹介
steelydylan
0
410
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
460
Other Decks in Programming
See All in Programming
Deep Dive into React Stream/Serialize
mugi_uno
3
440
Domain-Driven Transformation
hschwentner
2
1.5k
AppRouter Panel Talk
yosuke_furukawa
PRO
1
430
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
What We Can Learn From OSS
inouehi
0
430
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
400
Fast JSX: Don't clone props object #28768
yossydev
1
150
Java 22 Overview
kishida
1
190
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
3
310
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
330
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
990
Featured
See All Featured
Practical Orchestrator
shlominoach
183
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Being A Developer After 40
akosma
66
580k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
Building Your Own Lightsaber
phodgson
100
5.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
A better future with KSS
kneath
231
16k
Transcript
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側からエディターに書いた内容の参照が可能!
エディターに書いたコードをIndexedDBに保存 IndexedDBはブラウザーからもService Workerからもアクセス可能なデータストアです! これを使うことでService Worker側からエディターに書いた内容の参照が可能!
エディターに書いたコードを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のような感覚で使えて便利です!)
以上です!! 懇親会等でぜひ仲良くしていただけたら嬉しいです!