Webブラウザ上でNode.js環境を実現する「WebContainer」、iOS/iPadOS版Safariに対応。iPhone/iPadでWeb開発環境が起動

2023年5月9日

WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerがiOS/iPadOS 16.4以降のSafariに対応したことを明らかにしました

iPhoneやiPad上のSafari上で、Node.jsをベースとしたWeb開発環境が起動することになります。

WebContainerはStackBlitzが開発し提供している、Webブラウザ上で実現されるWebAssemblyベースのNode.js環境です(名前に「Container」と付いていますが。Dockerなどのコンテナ技術とは関係ありません)。

Node.jsが備えるJavaScriptランタイムの機能とHTTPサーバの機能などがWebブラウザ上で提供されるため、外部のサーバに依存することなく、Webブラウザ上でnpmによるNode.jsベースのツールチェーンの実行や、Webアプリケーションの開発、テスト、実行などが実現できます。

例えばサーバサイドレンダリングのためのフレームワークであるNext.jsの実行や、GraphQLの実装などがWebブラウザ上で可能だと説明されています。

Webブラウザ上の開発環境はサーバと見分けが付かなくなっていく

これまでWebContainerは、WindowsおよびMacのChromeブラウザ、Firefox(β対応)、Safari(β対応)、Android上のChomeブラウザ(β対応)で実行可能でした。

iOS/iPad OSのSafariについては、過去のバージョンのSafariがJavaScriptの「SharedArrayBuffer」に対応していなかったこと、スタックトレースが他のブラウザ実装と異なること、メモリアロケーションの制限が厳しく、メモリリークのバグも一部で発生することなどから、これまでWebContainerの実行が困難だと説明されていました。

しかしその後iOS/iPadOSのSafariにもSharedArrayBufferが実装され、WebContainer側でも異なるブラウザ実装での解決策を講じ、メモリリークのバグについてはiOS/iPadOSを検知すると別ドメインにリダイレクト後に元のページに戻るという回避策などを組み込み、WebKitの開発者によるバグの解決などの協力も得た結果、iOS/iPadOS 16.4以降のSafariではWebContainerが実行可能となりました。

実際に手元のiPadで試したところ、問題なくWebContainerが起動しました。

fig

WebContainerはStackBlitzのプロダクトとして提供されていますが、個人利用やGitHub上でのパブリックリポジトリを利用した開発は無料となっています

StackBlitzは2月にWebContainerのAPIも提供を開始しています。Web技術の進化によって、Webブラウザ上で構築される開発環境は、サーバ上で構築されるそれとどんどん見分けが付かなくなっていくようです。

参考:Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど

あわせて読みたい

JavaScript WebAssembly Web標準 開発ツール iOS Node.js




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本