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
2.3k
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
Cloudflare Meetup Nagoya 第3回用発表資料です!
Hori Godai
October 06, 2023
Tweet
Share
More Decks by Hori Godai
See All by Hori Godai
TypeScript Compiler APIを使って 型のユニットテストをブラウザーで動かす
steelydylan
3
200
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.9k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
1.1k
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
910
next.jsを使ったuniversal React 入門
steelydylan
1
300
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
360
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
460
アップルップルの新しいオープンソースの紹介
steelydylan
0
500
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
570
Other Decks in Programming
See All in Programming
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
610
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
810
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
620
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
180
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
TypeScript LSP の今までとこれから
quramy
0
110
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Automating Front-end Workflow
addyosmani
1370
200k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Building Adaptive Systems
keathley
41
2.6k
Typedesign – Prime Four
hannesfritz
41
2.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
For a Future-Friendly Web
brad_frost
178
9.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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のような感覚で使えて便利です!)
以上です!! 懇親会等でぜひ仲良くしていただけたら嬉しいです!