ESMとは

Page content

ESMとは ECMAScript Modules の略で、
JavaScriptの公式モジュール（ファイル分割）方式です。

つまり
**JavaScriptで「別ファイルのコードを読み込む標準の仕組み」**です。

ESMの基本

ESMでは次の書き方を使います。

import { streamText } from "ai"
import { openai } from "@ai-sdk/openai"

export function hello() {
  console.log("hello")
}

この import / export 構文が
**ESM（ECMAScript Modules）**です。

以前の方式（CommonJS）

昔の Node.js は
別の方式を使っていました。

CommonJS

const ai = require("ai")

module.exports = {}

ESM vs CommonJS

項目 ESM CommonJS
読み込み import require
書き出し export module.exports
標準化 ES公式 Node独自
現在 主流 旧方式

Node.jsでESMを使う方法

package.json に追加

{
  "type": "module"
}

これを入れると

import { streamText } from "ai"

が使えます。

なぜAI SDKでESMが必要か

Vercel AI SDK は
ESM専用ライブラリだからです。

つまり

require("ai")

は使えません。

ESMのメリット

① 標準仕様
② ブラウザでも使える
③ Tree Shaking（不要コード削除）
④ 高速

例（ESMコード）

import { streamText } from "ai"
import { openai } from "@ai-sdk/openai"

const result = await streamText({
  model: openai("gpt-4o-mini"),
  prompt: "Explain AI"
})

for await (const text of result.textStream) {
  process.stdout.write(text)
}

よく出るエラー

Cannot use import outside module

原因
package.json にこれが無い

"type": "module"

まとめ

ESM = JavaScriptの最新モジュール方式

import
export

を使う仕組み。

AI系ライブラリ（AI SDKなど）は
ほぼすべてESMです。

JavaScriptの実行環境やモジュール方式には、
ESM / CommonJS / Node / Bun / Deno などがあり、それぞれ役割が違います。
2026年の開発環境を 構造から分かる形で整理します。

全体構造（まずこれを理解）

JavaScript
│
├ モジュール方式
│   ├ ESM（現在の標準）
│   └ CommonJS（旧方式）
│
└ 実行環境（Runtime）
    ├ Node
    ├ Bun
    └ Deno

つまり

  • ESM / CommonJS → コードの読み込み方式

  • Node / Bun / Deno → JavaScriptを実行するエンジン

です。

① ESM（現在の標準）

ESM = ECMAScript Modules

JavaScriptの公式モジュール方式です。

例

import { streamText } from "ai"
export function hello() {}

特徴

  • JavaScript標準

  • ブラウザでも動く

  • 2026年は ほぼ全部ESM

AI開発でも

  • Vercel AI SDK

  • Next.js

などは ESM前提です。

② CommonJS（旧方式）

昔の Node.js が使っていたモジュール方式。

例

const fs = require("fs")

module.exports = {}

特徴

  • Node独自仕様

  • 古いライブラリで使用

  • 新規開発ではほぼ使わない

ESM vs CommonJS

項目 ESM CommonJS
構文 import/export require
標準 ECMAScript Node独自
ブラウザ 使える 使えない
現在 主流 旧

③ Node（最も普及）

Node.js

JavaScriptをPCやサーバーで実行する環境。

できること

  • APIサーバー

  • Webアプリ

  • CLIツール

  • AIアプリ

例

node app.js

特徴

  • 世界標準

  • npmエコシステム

  • ほぼ全ライブラリ対応

④ Bun（爆速ランタイム）

Bun

2023〜急成長している新ランタイム。

特徴

  • Nodeより 3〜10倍高速

  • npm互換

  • bundler内蔵

  • test内蔵

例

bun run app.ts

用途

  • AIツール

  • CLI

  • 高速API

⑤ Deno（セキュア設計）

Deno

Nodeの作者が作った次世代環境。

特徴

  • セキュリティ重視

  • TypeScript標準

  • npm不要

例

deno run app.ts

Node / Bun / Deno 比較

項目 Node Bun Deno
普及 ★★★★★ ★★★ ★★
速度 普通 非常に速い 速い
npm あり あり 最近対応
AI開発 ◎ ◎ △

AI開発の主流（2026）

Next.js
   ↓
Node runtime
   ↓
ESM modules
   ↓
AI SDK

つまり

ESM
+
Node

が最も一般的です。

実際のAIコード

import { streamText } from "ai"
import { openai } from "@ai-sdk/openai"

const result = await streamText({
  model: openai("gpt-4o-mini"),
  prompt: "Explain AI"
})

このコードは

  • Node

  • ESM

で動きます。

2026年の開発トレンド

Next.js
+
Node
+
ESM
+
AI SDK

または

Bun
+
ESM
+
AI SDK

超シンプルまとめ

用語 意味
ESM JavaScriptのモジュール方式
CommonJS 古いモジュール方式
Node JavaScript実行環境
Bun 高速ランタイム
Deno 安全設計ランタイム

2026年のシリコンバレーで実際に使われているAI開発スタックは、
ほぼ次の **「8レイヤー構造」**で整理できます。

これは現在のAIエコシステムを モデル → UI →インフラまで8層に分けたものです。 (Zenn)

2026年 AI開発スタック（シリコンバレー標準）

全体構造

AI Model
↓
AI Framework / Agents
↓
RAG / Vector DB
↓
Backend
↓
Frontend
↓
Auth / Payments
↓
Infra / Hosting
↓
Monitoring / Analytics

この8層で ほぼ全AI SaaSが作られています。

① AIモデル層（LLM）

ここがAIの「頭脳」です。

主流モデル

  • GPT系

  • Claude

  • Gemini

  • Llama

  • DeepSeek

主に使うAPI

  • OpenAI

  • Anthropic

  • Google

② AIフレームワーク

AI機能をアプリに組み込むレイヤー。

主流

  • Vercel AI SDK

  • LangChain

  • LangGraph

AI SDKは

  • ストリーミング

  • tool calling

  • multi model

を統一APIで扱えます。 (株式会社一創 |)

③ RAG / Vector Database

AIに「外部知識」を与える層。

RAG = Retrieval Augmented Generation

主流

  • pgvector

  • Pinecone

  • Weaviate

  • Milvus

RAGは

文書
↓
Embedding
↓
Vector DB
↓
検索
↓
LLM

という構造です。

AIアプリでは ほぼ必須技術です。

④ Backend

AIアプリのAPIサーバー。

主流

  • Node.js

  • Fastify

  • Express

言語

  • TypeScript

  • Python（AI研究）

⑤ Frontend

AI UI（チャットなど）

主流

  • Next.js

  • React

  • Tailwind

Next.jsが主流の理由

  • Server Components

  • API Routes

  • Edge Functions

⑥ Database

アプリデータ

主流

  • PostgreSQL

  • Redis

AI SaaSでは

PostgreSQL
+
pgvector

が一番多いです。 (Infinity Sky AI)

⑦ Auth / Billing

SaaS運営に必要。

Auth

  • Clerk

  • Auth.js

課金

  • Stripe

⑧ インフラ

デプロイ環境

主流

  • Vercel

  • Railway

  • AWS

AI SaaSでは

Frontend → Vercel
Backend → Railway
DB → Supabase

が多いです。 (Infinity Sky AI)

シリコンバレーの典型スタック

実際のAI SaaSの構成

Frontend
Next.js
Tailwind
Vercel AI SDK

Backend
Node.js
TypeScript

AI
OpenAI / Claude

RAG
pgvector
Supabase

Auth
Clerk

Payments
Stripe

Deploy
Vercel

この構成は

AIスタートアップのデフォルト構成と言われています。 (BuildMVPFast)

AI SaaS最小構成（2026）

一人開発なら

Next.js
+
Vercel AI SDK
+
OpenAI
+
Supabase
+
Stripe

これだけで

  • AIチャット

  • SaaS課金

  • RAG

  • ユーザー管理

まで作れます。

シリコンバレーのトレンド

2026の特徴

① TypeScript化

Python → TypeScriptへ移行

理由

  • フルスタック開発

② Agent化

AIは

Chatbot
↓
AI Agent

へ進化

③ RAG標準化

LLM単体 → 外部知識

最強スタック（2026）

最も多い構成

Next.js
+
Vercel AI SDK
+
OpenAI / Claude
+
pgvector
+
Supabase
+
Stripe
+
Vercel

もし興味あれば、次もかなり面白いです👇

「個人で年商1億いくAI SaaSスタック（2026実例）」
「シリコンバレーのAIスタートアップが最初に作るプロダクトTOP10」
「1人で作れるAI SaaSランキング」

実は 個人開発でも数ヶ月で作れる構造があります。