WebContainer API とは？ブラウザ上で“本物の開発環境”が動く時代へ

2025.11.13

WebContainer API は、ブラウザの中に小さな仮想マシンを立ち上げ、Node.js のような実行環境をそのまま再現できる革新的な技術です。環境構築を行わなくても、ブラウザだけで HTML / CSS / JavaScript の開発や簡易サーバーの実行が可能になります。この記事では、WebContainer API と、それを採用しているオンライン開発サービス StackBlitz の仕組みをわかりやすく紹介します。また、実際に WebContainer 上で動作するサンプルプロジェクトを埋め込んでいますので、ブラウザだけで開発体験ができます。

WebContainer API とは？

WebContainer API は、ブラウザ内で JavaScript による仮想環境を構築し、Node.js とよく似た実行環境を動かすことができる技術です。

WebContainerでできること

ブラウザ内で npm install（依存パッケージインストール）
Node.js のモジュール（express など）がそのまま動作
HTML / CSS / JS をファイルとして管理
簡易サーバーの起動

インストール不要・サーバー不要で、学習や教材、デモ環境に非常に相性が良い仕組みです。

StackBlitz とは？

StackBlitz は WebContainer API を採用したブラウザ開発環境で、Vite / React / Vue / Angular などのフレームワークもブラウザだけで動作します。

特徴：

インストール不要
プレビューが高速
GitHub から直接開ける
教材・デモに最適

この記事に埋め込んでいるデモも、この StackBlitz SDK を利用しています。

WebContainer を使ったデモ（ブラウザだけで動作）

ここでは、WebContainer を使って ブラウザだけで動作するミニ開発環境 を体験できるサンプルを用意しています。特別なインストール作業は不要で、ページを読み込むだけで WebContainer が仮想的な Node.js 実行環境を立ち上げ、Express サーバーを起動します。実際の開発と同じように HTML・CSS・JavaScript をファイルとして編集でき、変更内容はプレビュー画面をリロードすることで反映されます。

今回のデモは次のファイルで構成されています：

index.html
style.css
index.js
package.json
server.js

それぞれが役割を持ち、ブラウザ内で小さなプロジェクトがそのまま動く仕組みになっています。左側でファイルを編集し、右側のプレビューで動作を確認する、という実際の開発に近い体験が可能です。

こちらのデモの埋め込みは以下のhtmlによって実装されています。

<div id="wc-app"></div>

<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>
<script>
StackBlitzSDK.embedProject(
  'wc-app',
  {
    title: 'WebContainer Multi-file Demo',
    description: 'HTML / CSS / JS を別ファイル管理したデモ',
    template: 'node',

    files: {
      "package.json": `
{
  "name": "wc-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.19.0"
  }
}
      `.trim(),

      "server.js": `
const express = require('express');
const app = express();
app.use(express.static('.'));  // ← index.html / style.css / index.js を配信
app.listen(3000, () => console.log('Server running'));
      `.trim(),

      "index.html": `
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>ブラウザだけで動くカウンター</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>カウンター</h1>

  <div class="counter">
    <span id="count">0</span>
    <button id="btn">+1</button>
  </div>

  <script src="index.js"><\/script>
</body>
</html>
      `.trim(),

      "style.css": `
body { font-family: system-ui, sans-serif; padding: 16px; }
.counter { margin-top: 16px; display: inline-flex; gap: 12px; font-size: 24px; }
#count { min-width: 40px; text-align: right; font-weight: bold; }
#btn { padding: 6px 16px; font-size: 16px; cursor: pointer; }
      `.trim(),

      "index.js": `
let count = 0;
const countEl = document.getElementById('count');
const btn = document.getElementById('btn');

function render() { countEl.textContent = count; }

btn.addEventListener('click', () => {
  // ▼ ここを書き換えて「好きな処理」に変えてみましょう！
  // 例）2ずつ増やしたい場合
  //   count += 2;
  count++;
  render();
});

render();
      `.trim()
    }
  },
  {
    height: 540,
    view: "default",
    openFile: "index.js"
  }
);
</script>

デモの使い方

このデモでは、WebContainer が package.json を読み込み、依存パッケージのインストールから npm start の実行までを自動で行います。

■ 動かし方

デモが表示されると Express サーバーが自動で起動します。
右側にプレビューが表示されます。
左側の index.js や style.css を編集できます。
変更内容を確認したい場合は、ファイルを保存してプレビューをリロードしてください。（自動反映ではありません）

■ 各ファイルの役割

index.html：ページのベースとなる HTML
style.css：デザイン・レイアウトを定義
index.js：カウンターの動作を制御する JavaScript
package.json：依存パッケージの管理と実行スクリプトの定義
server.js：Express サーバーのエントリーポイント

保存について

この開発環境はブラウザ内の一時領域で動作しており、作成したファイルや編集内容はタブを閉じると消えてしまいます。ローカル PC や外部サーバーには自動保存されず、あくまでブラウザ内に一時的に保持される仕組みです。永続的に保存したい場合は、エディタ右上から新しいウィンドウで StackBlitz 本体を開き、そこで保存することができます。また、ZIP のダウンロードや GitHub との連携によってプロジェクトとして管理することも可能です。

まとめ

WebContainer API はブラウザの中で開発環境そのものを動かすことを可能にする画期的な技術であり、インストールやサーバー構築を必要とせず、複数ファイル構成のプロジェクトをそのまま再現できる点が大きな魅力です。今回のデモのように Express サーバーをブラウザ上で動かせるだけでなく、さらに Vite を利用したホットリロード環境や、Sass・TypeScript といったコンパイル環境、ESLint や Prettier、Stylelint などのツールを組み込むことで、より本格的な開発ワークフローにも発展させられます。学習や教材としてはもちろん、軽量な試作やデモ制作の場面でも優れた柔軟性を発揮し、ブラウザだけで快適な開発体験を得ることができます。