3.

JavaScript プラットフォーム完全ガイド — ブラウザ/Node/Deno/Bun/Workers

編集
この記事の要点
  • JavaScript の実行プラットフォーム = ブラウザ / サーバ / エッジ / モバイル / デスクトップ
  • ブラウザエンジン: V8 (Chrome/Edge/Node), SpiderMonkey (Firefox), JavaScriptCore (Safari)
  • サーバ系: Node.js (de facto) / Deno (TS native) / Bun (高速)
  • エッジ系: Cloudflare Workers (V8 Isolates) / Vercel Edge / Deno Deploy
  • アプリ: Electron (デスクトップ Web) / React Native (モバイル / ネイティブブリッジ)

プラットフォーム全体像

カテゴリプラットフォームエンジン主な用途
ブラウザChrome / EdgeV8Web フロント
ブラウザFirefoxSpiderMonkeyWeb フロント
ブラウザSafariJavaScriptCore (Nitro)Web フロント (Apple)
サーバNode.jsV8API / CLI / ビルド
サーバDenoV8 + RustTypeScript ファースト
サーバBunJavaScriptCore + Zig高速ランタイム
エッジCloudflare WorkersV8 Isolates軽量関数を CDN エッジで
エッジVercel Edge / Deno DeployV8Next.js Edge / Fresh
デスクトップElectronV8 + ChromiumVS Code / Slack / Discord
デスクトップTauriOS の WebView軽量 (Electron 代替)
モバイルReact NativeJavaScriptCore / HermesiOS / Android
モバイルCapacitor / CordovaWebViewハイブリッドアプリ

ブラウザエンジン

V8 (Google / Chromium 系)

  • 2008 年公開。JIT コンパイル (Ignition インタプリタ + TurboFan 最適化)
  • Chrome / Edge / Opera / Brave / Node.js / Deno / Cloudflare Workers が採用
  • OSS。v8/v8 リポジトリで開発

SpiderMonkey (Mozilla / Firefox)

  • 世界初の JavaScript エンジン (1996 年)
  • Baseline / IonMonkey / WarpMonkey JIT
  • Rust とも組み合わせて開発

JavaScriptCore / Nitro (Apple / Safari)

  • Safari / iOS / iPadOS で標準搭載
  • LLInt → Baseline JIT → DFG JIT → FTL JIT の 4 段階階層 JIT
  • React Native / Bun のランタイムベース

Node.js: サーバサイド JS の de facto

  • 2009 年 Ryan Dahl 公開。V8 + libuv (イベントループ + 非同期 I/O)
  • npm エコシステム (世界最大のパッケージ数)
  • LTS (Long Term Support) は偶数番台。2026 年現在 v22 が Active LTS
  • 用途: REST API / GraphQL / CLI / ビルドツール / バッチ処理
// Node.js 最小 HTTP サーバ
import http from 'node:http';

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, Node!');
}).listen(3000);

Deno: TypeScript ファースト

  • 2018 年 Node.js 作者 Ryan Dahl が「Node の後悔」から作成
  • TypeScript ネイティブ (トランスパイル不要)
  • セキュリティ: デフォルトで FS / Net 不可。明示的に --allow-net 必要
  • npm 互換 (v1.25+)、URL から直接 import 可能
// Deno で TS をそのまま実行
import { serve } from "https://deno.land/std@0.215.0/http/server.ts";

serve((req) => new Response("Hello, Deno!"));

// 実行
// deno run --allow-net server.ts

Bun: 高速ランタイム + ツールチェイン

  • 2022 年公開。Zig 言語で実装、JavaScriptCore エンジン採用
  • Node.js 互換 API + 標準で TS / JSX / Tailwind サポート
  • パッケージマネージャ・テストランナー・バンドラ・トランスパイラを内蔵
  • npm install が npm の数倍〜数十倍速い
// Bun の最小サーバ (Bun.serve 独自 API)
Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response("Hello, Bun!");
  },
});

// 実行
// bun run server.ts
// bun install (npm の代替)
// bun test (jest の代替)

Cloudflare Workers: V8 Isolates エッジ

  • 世界中の CDN エッジで JavaScript を実行
  • 従来の VM / コンテナと違い V8 Isolate で起動が 5ms 以下
  • Node 標準 API は使えない。Web Standard API (fetch / Request / Response) ベース
  • 料金: リクエスト数課金で 1 日 100,000 req まで無料
// Cloudflare Workers
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    if (url.pathname === '/api/hello') {
      return new Response(JSON.stringify({ msg: 'Hello from edge' }), {
        headers: { 'Content-Type': 'application/json' },
      });
    }
    return new Response('Not Found', { status: 404 });
  },
};

Electron: デスクトップアプリ

  • Chromium + Node.js を同梱して 1 つのアプリにする
  • VS Code / Slack / Discord / Figma Desktop / WhatsApp 等が採用
  • 欠点: バンドルが 150MB 級になる / メモリ消費大
  • 軽量代替に Tauri (Rust) / Neutralino

React Native: モバイルネイティブ

  • React のコンポーネントを iOS / Android のネイティブ UI にレンダリング
  • JS スレッド ⇔ ネイティブスレッドを Bridge (旧) / JSI (新) で通信
  • 2024 年から新アーキテクチャ (New Architecture / Fabric / TurboModules) がデフォルト
  • 競合: Flutter (Dart) / Capacitor (WebView ベース)

API 差異の早見表

APIブラウザNodeDenoBunCF Workers
fetch○ (v18+)
fs (ファイル)×node:fsDeno.readFile○ Node 互換×
process.env×Deno.envenv 引数
document / DOM××××
WebSocket△ (ws ライブラリ)
setTimeout

ES Modules と CommonJS

// ESM (新標準。ブラウザ / 最新 Node)
import express from 'express';
export default function() { ... }

// package.json
{ "type": "module" }   // .js を ESM 扱い

// CommonJS (Node の旧形式)
const express = require('express');
module.exports = function() { ... }

// package.json
{ "type": "commonjs" } // または省略 (デフォルト)

ターゲット別ビルド (Babel / SWC)

// .browserslistrc で対象を指定
> 0.5%
last 2 versions
Firefox ESR
not dead

// → ターゲットに合わせて Babel / SWC が
//    トランスパイル / ポリフィル

// SWC (Rust 製。Babel より 10-20 倍高速)
// Next.js / Turbopack が標準採用

FAQ

Q: Node / Deno / Bun、どれを選ぶ?
A: 実績重視・エコシステム → Node。TypeScript 主体・セキュリティ重視 → Deno。速度重視・モノリポ → Bun。新規プロジェクトで失敗したくないなら Node + TypeScript が無難です。

Q: なぜ Cloudflare Workers では Node API が使えない?
A: 起動 5ms を実現するため V8 Isolate ベースで、Node.js のような libuv / fs を持たないからです。最近は nodejs_compat フラグで一部 Node API が使えます。

Q: Electron でなく Tauri を選ぶ理由は?
A: バンドルサイズが Tauri は 10MB 前後 (Electron は 150MB)、メモリも 1/3 以下。ただし OS の WebView を使うので OS バージョン差が出やすい。

編集
Post Share
子ページ
  1. Node.js
同階層のページ
  1. 環境構築
  2. 文法
  3. プラットフォーム
  4. ライブラリ
  5. フレームワーク
  6. テンプレートエンジン
  7. ビルトインオブジェクト
  8. エラー一覧
  9. よくある事例

最近更新/作成されたページ