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
78
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
110
ステップアップOSSコントリビュート
pvcresin
0
460
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
390
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
170
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
380
React はじめの一歩
pvcresin
1
250
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
150
Other Decks in Technology
See All in Technology
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
ロールが細分化された組織でSREは何をするか?
tgidgd
1
160
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
720
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
170
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
220
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
ゼロからはじめる採用広報
yutadayo
3
1k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
520
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
270
インフラ寄りSREの生存戦略
sansantech
PRO
8
3.3k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
630
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.1k
Featured
See All Featured
Done Done
chrislema
184
16k
Facilitating Awesome Meetings
lara
54
6.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Scaling GitHub
holman
460
140k
Designing for humans not robots
tammielis
253
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Speed Design
sergeychernyshev
32
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building Adaptive Systems
keathley
43
2.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
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