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
Web IDEの進化とそれを支える技術
Search
pvcresin
December 16, 2022
Technology
0
53
Web IDEの進化とそれを支える技術
2022-12-16 Eight LT 2022
pvcresin
December 16, 2022
Tweet
Share
More Decks by pvcresin
See All by pvcresin
text-box-trim について 1 分で
pvcresin
0
83
ステップアップOSSコントリビュート
pvcresin
0
450
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
360
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
140
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
360
React はじめの一歩
pvcresin
1
230
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
130
Other Decks in Technology
See All in Technology
クラウド食堂とは?
hiyanger
0
130
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
100
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
770
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
260
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
360
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
780
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
100
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.3k
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
120
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4k
OPENLOGI Company Profile for engineer
hr01
1
20k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.9k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
530
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Visualization
eitanlees
146
15k
Fireside Chat
paigeccino
35
3.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Being A Developer After 40
akosma
89
590k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Embracing the Ebb and Flow
colly
84
4.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Transcript
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