概要
JavaScriptのオブジェクト は、言語仕様に基づく「組み込みオブジェクト」から、
実行環境(ブラウザ)で提供される「Web APIオブジェクト」、
さらにES6以降で拡張された「構造化オブジェクト」や、
開発者が自由に定義する「ユーザー定義オブジェクト」まで、階層的に分類できます。
本記事では、
親レベルの4分類と、
それぞれに属する子レベルの主なオブジェクト+代表的メソッドを整理します。
目次
- JavaScriptオブジェクトの全体像
-
子レベルの分類と代表的メソッド
- 組み込みオブジェクト(Built-in Objects)
- ブラウザAPIオブジェクト(Web API Objects)
- 構造化オブジェクト(ES6以降)
- ユーザー定義オブジェクト(User-defined Objects) - まとめ
- 参考リンク
1. JavaScriptオブジェクトの全体像
JavaScriptにおけるオブジェクトは、以下の4つの「親レベル」に大別されます。
| 分類 | 提供元 | 代表例 | 主な用途 |
|---|---|---|---|
| 組み込みオブジェクト | ECMAScript仕様 |
Object, Array, Date, Math
|
言語レベルの基本構文・演算 |
| ブラウザAPIオブジェクト | 実行環境(ブラウザ) |
document, fetch, localStorage
|
HTML構造や通信の操作 |
| 構造化オブジェクト(ES6以降) | ECMAScript拡張 |
Promise, Map, Set
|
非同期処理・新しいデータ構造 |
| ユーザー定義オブジェクト | 開発者 | const user = {} |
アプリ固有のロジック |
2. 子レベルの分類と代表的メソッド
組み込みオブジェクト(Built-in Objects)
JavaScriptの基本構文・演算・データ処理を提供する、言語仕様レベルのオブジェクト群です。
ブラウザ・Node.js問わず使用できます。
| 子カテゴリ | 主なオブジェクト | 代表的メソッド | 用途 |
|---|---|---|---|
| コアオブジェクト |
Object, Function, Boolean
|
Object.keys(), Object.values(), Function.call()
|
オブジェクト構築・関数制御 |
| 数値・日付関連 |
Number, Math, Date
|
Math.round(), Math.random(), Date.now(), getFullYear()
|
数値演算・日付処理 |
| 文字列関連 |
String, RegExp
|
includes(), replace(), match(), split()
|
文字列解析・正規表現処理 |
| 配列関連 |
Array, TypedArray
|
map(), filter(), reduce(), push(), pop()
|
配列操作・繰り返し処理 |
| 構造化データ |
JSON, ArrayBuffer, DataView
|
JSON.parse(), JSON.stringify()
|
データの変換・バイナリ処理 |
| 国際化API | Intl |
Intl.DateTimeFormat(), Intl.NumberFormat()
|
ローカライズ・フォーマット処理 |
ブラウザAPIオブジェクト(Web API Objects)
ブラウザが提供する、実行環境依存のオブジェクト群。
HTML・通信・ストレージ・メディアなどにアクセスします。
| 子カテゴリ | 主なオブジェクト | 代表的メソッド | 用途 |
|---|---|---|---|
| DOM API |
document, Element, Node, Event
|
getElementById(), querySelector(), appendChild(), addEventListener()
|
HTML要素操作・イベント処理 |
| Web Storage API |
localStorage, sessionStorage
|
setItem(), getItem(), removeItem(), clear()
|
永続的データ保存 |
| Fetch / Network API |
fetch, Request, Response
|
fetch(url), response.json(), response.text()
|
HTTP通信 |
| Navigator API |
navigator, geolocation
|
navigator.userAgent, getCurrentPosition()
|
デバイス・環境情報 |
| Canvas API | CanvasRenderingContext2D |
fillRect(), beginPath(), stroke(), drawImage()
|
図形描画 |
| Web Audio API |
AudioContext, GainNode
|
createOscillator(), connect(), start()
|
音声生成・制御 |
| Performance API | performance |
now(), mark(), measure()
|
実行パフォーマンス測定 |
| WebRTC API | RTCPeerConnection |
createOffer(), setLocalDescription()
|
P2P通信制御 |
構造化オブジェクト(ES6以降)
ES2015(ES6)以降で導入された、モダン構造・非同期処理・メタプログラミングのためのオブジェクト群です。
| 子カテゴリ | 主なオブジェクト | 代表的メソッド | 用途 |
|---|---|---|---|
| コレクション系 |
Map, Set, WeakMap, WeakSet
|
set(), get(), has(), delete()
|
新しいキー・値コレクション |
| 非同期制御系 |
Promise, AsyncFunction
|
then(), catch(), finally()
|
非同期処理の連鎖 |
| メタプログラミング系 |
Proxy, Reflect, Symbol
|
Proxy(target, handler), Reflect.get(), Reflect.set()
|
言語動作の制御 |
| イテレーション系 |
Generator, Iterator
|
next(), return()
|
イテレータ制御 |
ユーザー定義オブジェクト(User-defined Objects)
開発者が定義する、アプリケーション固有のオブジェクト。
class・リテラル・関数コンストラクタなど、柔軟な構造を持ちます。
| 子カテゴリ | 主な構文 | 代表的メソッド例 | 用途 |
|---|---|---|---|
| オブジェクトリテラル | { key: value } |
Object.keys(user) |
簡易なデータ構造定義 |
| クラス構文 | class Car { drive() {} } |
constructor(), method()
|
再利用可能なオブジェクト設計 |
| 関数コンストラクタ | function Person(name) { this.name = name } |
prototype.method() |
クラス以前のオブジェクト定義方法 |
| モジュールオブジェクト |
export, import
|
export default, import * as
|
外部ファイルの共有 |
3. まとめ
| 親カテゴリ | 子階層の特徴 | メソッドの例 | 補足 |
|---|---|---|---|
| 組み込みオブジェクト | ECMAScript仕様に明確定義 |
map(), Math.random(), JSON.parse()
|
言語の標準要素 |
| ブラウザAPIオブジェクト | 環境依存・多層構造 |
fetch(), getElementById(), setItem()
|
ブラウザでのみ有効 |
| 構造化オブジェクト | 新機能群(ES6以降) |
Promise.then(), Map.set()
|
非同期・新データ構造 |
| ユーザー定義オブジェクト | 開発者が設計 | 任意メソッド | 設計自由度が高い |
💡 補足:
documentは「ブラウザAPIオブジェクト」の中の「DOM API」に属する。Object,Array,Mathなどは「組み込みオブジェクト」。- Node.jsでは
windowやdocumentは存在しないが、ObjectやArrayは共通。