ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
プラットフォーム全体像
| カテゴリ | プラットフォーム | エンジン | 主な用途 |
|---|---|---|---|
| ブラウザ | Chrome / Edge | V8 | Web フロント |
| ブラウザ | Firefox | SpiderMonkey | Web フロント |
| ブラウザ | Safari | JavaScriptCore (Nitro) | Web フロント (Apple) |
| サーバ | Node.js | V8 | API / CLI / ビルド |
| サーバ | Deno | V8 + Rust | TypeScript ファースト |
| サーバ | Bun | JavaScriptCore + Zig | 高速ランタイム |
| エッジ | Cloudflare Workers | V8 Isolates | 軽量関数を CDN エッジで |
| エッジ | Vercel Edge / Deno Deploy | V8 | Next.js Edge / Fresh |
| デスクトップ | Electron | V8 + Chromium | VS Code / Slack / Discord |
| デスクトップ | Tauri | OS の WebView | 軽量 (Electron 代替) |
| モバイル | React Native | JavaScriptCore / Hermes | iOS / Android |
| モバイル | Capacitor / Cordova | WebView | ハイブリッドアプリ |
ブラウザエンジン
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 | ブラウザ | Node | Deno | Bun | CF Workers |
|---|---|---|---|---|---|
fetch | ○ | ○ (v18+) | ○ | ○ | ○ |
fs (ファイル) | × | ○ node:fs | ○ Deno.readFile | ○ Node 互換 | × |
process.env | × | ○ | ○ Deno.env | ○ | ○ env 引数 |
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 バージョン差が出やすい。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
同階層のページ
- 環境構築
- 文法
- プラットフォーム
- ライブラリ
- フレームワーク
- テンプレートエンジン
- ビルトインオブジェクト
- エラー一覧
- よくある事例
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?