Web IDE の進化とそれを支える技術 @pvcresin 2022-12-16 Eight LT 2022

鳥山らいか / pvcresin 仕事：Eight のWeb フロントエンド周りのサポートや改善 好きなこと：散歩・お笑い・アニメ・断捨離 2

Web IDE とは ブラウザ上でコーディングを行うことができる統合開発環境 （IDE ）サービス ローカルでの環境構築が必要ないため、手軽に始められる ※ここではIDE だけでなくエディタも含める 3

主な機能 コードエディタ ページのプレビュー（iframe ） 公開・Fork 共同編集（WebSocket API ） +α （外部ライブラリ読み込み、package 管理、デプロイなど） 4

様々な Web IDE サービス 使ったことあるものだけ軽くピックアップ JSFiddle ：シンプルなエディタ CodePen ：少し高機能 CodeSandbox ：VS Code が動いてリッチ Cloud9 ：サーバサイドのコードがリモートで動く 5

キーとなる技術 6

Electron Web 技術でデスクトップアプリを作成するフレームワーク Chromium とNode.js をバイナリに組み込む VS Code 、Slack などなど フロントエンド技術によるネイティブライクなUI 達 Monaco Editor ：エディタ Xterm.js ：ターミナル 7

Web Workers API メインスレッドとは別の、バックグラウンドのスレッドでスクリプ トを実行する仕組み（マルチスレッド） アプリのUI の操作性や動作速度を向上 種類 Dedicated Worker ( 専用ワーカー) Shared Worker ( 共有ワーカー) Service Worker 8

Service Worker メインスレッドと外部の通信に割り込むことができる、ネットワー クプロキシ リクエストを加工したり、キャッシュを使用したりできる → 仮想ネットワーキング、オフライン対応 9

File System Access API ユーザのローカルのファイルをブラウザで直に読み書きできる 単にFile にを読み取れるだけのFile API とは別物 ユースケース File API ファイルを読み取る、アップロードする File System Access API 直に書き込み、ファイルの作成・削除も可能 10

そして フロントエンド技術によるネイティブライクなUI 達 Service Worker File System Access API を合わせると... 11

VS Code for the Web 12

VS Code for the Web ブラウザ上で動くVS Code （デスクトップ版に比べて制限あり） GitHub で . キーを押すと起動（github.dev やvscode.dev ） GitHub 上のコードやローカルの編集などができる これにリモートの実行環境がつくとGitHub Codespaces と呼ばれる 13

キーとなる技術（ 2 回目） 14

WebAssembly （ WASM ） ブラウザやNode.js 上で高速動作するバイナリ形式（ .wasm ） C 、C++ 、Rust など様々な言語からコンパイルして生成 ネイティブ水準の速度で複数の言語で記述されたコードを動作させ ることが可能 ブラウザ上で動いたものの例 Ruby 、SQLite 、FFmpeg 、DOOM3 （ゲーム） 15

WASI WASM がファイルやネットワークなどを安全に扱うための仕様 例 Node.js → WebAssembly （WASI 準拠） → ファイルにアクセス 16

Wasmer 様々な"OS" 上で動くWASM の実行環境で、様々な言語に組み込める = 好きな言語でWASM 、好きな言語でサーバ、様々なOS で動く → Java （JVM ）の代替になれるかも memfs などのin-memory な仮想のファイルシステムライブラリと組 み合わせることで、ブラウザ内を"OS" と認識させることができる ブラウザ + 仮想ファイルシステム → WebAssembly （WASI 準拠） → 仮想ファイルにアクセス 17

そして VS Code for the web Web Worker WebAssembly （+ WASI ） 仮想ファイルシステム を合わせると... 18

Stackblitz 19

Stackblitz ブラウザ内でNode.js が動くWeb IDE サービス リモートサーバでコードを実行しないため、反映が速い オフラインで作業可能 20

WebContainer Stackblitz が作ったブラウザ内でNode.js が動く、WASM ベースの 「ミニOS 」by 公式 技術的要素（想像 ※） Node.js のWebAssembly （WASI 準拠） 仮想ファイルシステム（memfs? ） 仮想ネットワーキング（ServiceWorker ） シェルのWebAssembly （WASI 準拠）← （Stackblitz の秘術） ※ コードが公開されておらず、部分的な情報しかないため半分想像 21

WebContainer の体験 環境 ブラウザ + 仮想ファイルシステム + 仮想ネットワーキング → Node.js のWebAssembly （WASI 準拠） → 仮想ファイルにアクセス ビルド WASM のNode.js でビルド → SharedWorker 内にサーバが立つ ユーザ localhost にリクエスト → Service Worker がNode.js 役のShared Worker に処理を投げる 22

未来 別の言語のWASM に置き換えれば、ブラウザ内で様々な言語のサー バが立てられる ブラウザを入れれば、遅延が少ない快適な環境が構築できる未来が 来る かも！ 23