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
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.9k
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
370
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
160
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
370
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
630
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
JavaにおけるNull非許容性
skrb
2
2.6k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
180
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
180
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
120
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.1k
Featured
See All Featured
A better future with KSS
kneath
238
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Facilitating Awesome Meetings
lara
52
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualization
eitanlees
146
15k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
A Philosophy of Restraint
colly
203
16k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Navigating Team Friction
lara
183
15k
Scaling GitHub
holman
459
140k
How to Ace a Technical Interview
jacobian
276
23k
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