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

今回は「Webブラウザ上でNode.js環境を実現する「WebContainer」、iOS/iPadOS版Safariに対応。iPhone/iPadでWeb開発環境が起動」についてご紹介します。

関連ワード（利用、困難、見分等）についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

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

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

Big news: WebContainers are now supported on Safari, iOS and iPadOS!https://t.co/6SfOUDn4z2 pic.twitter.com/9PykipdNxJ

— StackBlitz (@stackblitz) April 27, 2023

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が起動しました。