Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HonoでReact・TypeScriptの実行環境をブラウザー上に作る

Hori Godai
October 06, 2023

 HonoでReact・TypeScriptの実行環境をブラウザー上に作る

Cloudflare Meetup Nagoya 第3回用発表資料です!

Hori Godai

October 06, 2023
Tweet

More Decks by Hori Godai

Other Decks in Programming

Transcript

  1. HonoでReact・TypeScriptの実行環境を
    ブラウザー上に作る
    Cloudflare Meetup Nagoya 第3回

    View full-size slide

  2. 2. ブラウザーで動作するVite的
    なもののデモ
    3. Service Workerって何?
    目次
    4. HonoでService Worker側の
    処理を実装する
    1. 自己紹介
    5. ブラウザー側の実装

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 学べるカリキュラムの一例(実践編)
    実践編では初級編・中級編で学習した内容を活かし、figmaのデザインデータを参考にその見本に
    近づけるようにコーディングする「模写」に取り組みます。
    また実践編では、ビジュアル採点とコード採点を組み合わせた質の高い採点方法を採用しました。
    プレビューでは見本と比較しながらコードが書ける 採点画面

    View full-size slide

  7. Reactの初学者にはもちろん、現役の
    方にもお勧めできる教材を作ってます
    mosya React開発中!
    Reactやその周辺技術を学べる教材を開発中です!
    mosya ReactのLPサイトイメージ

    View full-size slide

  8. ブラウザーで動作するVite的なもののデモ
    https://monaco-browser-bundler.vercel.app/
    このデモはmosyaを開発する上でのWeb技術の実験場として用意してます!
    Powered by

    View full-size slide

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

    View full-size slide

  10. Service Workerって何?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. HonoでService Worker側の処理を実装する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Honoならリクエストされたファイル名の取得が簡単
    Honoならルーターのパターン処理が秀逸なのでリクエストされたファイルの種類の特定が簡単!
    https://github.com/steelydylan/monaco-browser-bundler/blob/master/public/sw.js

    View full-size slide

  20. Honoならリクエストされたファイル名の取得が簡単
    ファイル名の拡張子に応じて返すリクエストを調整

    View full-size slide

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

    View full-size slide

  22. ブラウザー側の処理

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. まとめ
    ブラウザーの可能性は無限大!Service WorkerやWASMを使うと魔法のようなことができます!
    Service Workerの開発にはHonoが便利
    (HonoはService WorkerでもCloudflare Workersでも動きます!)
    @swc/wasm-webを使うとTypeScriptをブラウザーで変換可能
    (WASMはブラウザーからでもServiceWorkerからでも動かせます!)
    IndexedDBはブラウザーとServiceWorker間のデータ共有に便利
    (特にlocalforageはlocalStorageのような感覚で使えて便利です!)

    View full-size slide

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

    View full-size slide