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
91
Web IDEの進化とそれを支える技術
2022-12-16 Eight LT 2022
pvcresin
December 16, 2022
Tweet
Share
More Decks by pvcresin
See All by pvcresin
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
1
190
text-box-trim について 1 分で
pvcresin
0
120
ステップアップOSSコントリビュート
pvcresin
0
470
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
400
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
180
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
390
React はじめの一歩
pvcresin
1
250
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
160
Other Decks in Technology
See All in Technology
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
440
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
220
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.3k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
210
AlarmKitで実現する 新時代のシステム通知
tsuzuki817
0
220
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
3
610
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
140
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
13
7.2k
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
130
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
800
非エンジニアによるDevin開発のためにSREができること
shonansurvivors
0
100
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
240
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
A better future with KSS
kneath
239
17k
The Cult of Friendly URLs
andyhume
79
6.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
For a Future-Friendly Web
brad_frost
180
9.9k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Become a Pro
speakerdeck
PRO
29
5.5k
Making Projects Easy
brettharned
117
6.4k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What's in a price? How to price your products and services
michaelherold
246
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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