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
160
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
測りにくい成果を測る — BtoB SaaSにおける効果検証への挑戦 / Shirokane Kougyou vol 20
sansan_randd
3
180
メルカリIBISの紹介
0gm
2
1.1k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
430
サーバなしで対戦ゲームが作れる!? 純正フレームワークで実現するリアルタイム通信
kuromelon257
0
170
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
450
エンジニアがデザインまで担うための AI駆動UIデザイン/フロントエンド開発実践
kitami
3
590
Apache Spark もくもく会
taka_aki
1
160
人工衛星のファームウェアをRustで書く理由
koba789
15
8.4k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
140
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
190
How AI agents are changing the way we should build APIs
fabpot
1
280
日本語で指示するだけ!AIで業務効率化を実現する 〜90分で体感する実践ワークショップ〜
taka_aki
0
1.5k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
We Have a Design System, Now What?
morganepeng
53
7.8k
Site-Speed That Sticks
csswizardry
10
830
Embracing the Ebb and Flow
colly
87
4.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Designing for Performance
lara
610
69k
KATA
mclloyd
32
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Writing Fast Ruby
sferik
628
62k
Docker and Python
trallard
46
3.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
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