WebContainerAPI

public.icon

https://i.gyazo.com/f539717ab275b43fd0a85a743ac43625.gif

概念

ブラウザ内でNode.jsを動かしているようなことができるAPI

これでLINEbot専用開発環境みたいなのが作れそう

入門

🚨注意

これで一瞬はまった

プレス

WebContainer API is now available to everyone.

ニュース

Dockerなどのコンテナ技術とは関係ありません

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

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

そしてStackBlitzはこのWebContainerをWebブラウザ上の高度なフレームワークとして位置づけ、同社自身がWebContainer上でVisual Studio Codeのような高度な機能を備えたコードエディタの「Codeflow IDE」や、記事執筆者向けにリアルタイムのプレビュー機能を備えた「Web Publisher」などを開発、提供しています。

APIが提供されたことで、WebContainerをプラットフォームにしたさまざまなアプリケーションの構築が可能になります。StackBlitzによると、SvelteのインタラクティブなチュートリアルはWebContainerを用いて開発されているとしており、ほかにもWebブラウザ内で実行されるChatGPTのようなAIアプリケーション、リッチな機能と表現を提供するローコード／ノーコード開発環境などが例に挙がっていました。

WebContainer APIや、その開発のためのCodeflowエディタなどはオープンソースではなくStackBlitzのプロダクトとして提供されていますが、個人利用やGitHub上でのパブリックリポジトリを利用した開発は無料となっています。

WebContainer APIは、WebContainersへのヘッドレスでのアクセスを実現するもので、開発者はWebContainers上に独自のユーザーアプリケーションを構築できるようになる。オープンソースで使用する場合は無料で、エンタープライズで使用する場合はサポートとライセンス提供するとしている。

同社は、WebContainer APIを使用してWebContainers上に「Codeflow IDE」を構築した。同IDEは、gitコマンド、デスクトップ拡張機能、ターミナルを備えたNode.js開発サーバをサポートする、Visual Studio Code IDEのフル機能バージョンとなっている。