概要
オブジェクト設計とは、「この塊は何を表していて、何ができるのか」を言語化する行為である。
JavaScriptでは、関数・オブジェクト・クラス・プロトタイプと複数の表現手段があり、柔軟ゆえに混乱しやすい。
だからこそ、「構造」「振る舞い」「責務」を明確に分離・設計することが、メンテナブルなコードの前提となる。
1. POJO（Plain Old JavaScript Object）による構造設計
const user = {
id: 'u01',
name: 'Toto',
isAdmin: false
};
- ✅ シリアライズしやすく、状態のスナップショットとして機能
- ✅ 特に状態管理（Redux等）やAPI通信との親和性が高い
- ❌ 振る舞い（関数）を内包し始めると構造が曖昧に
2. クラス設計：意味のある「型」として構築する
class User {
constructor(id, name, isAdmin = false) {
this.id = id;
this.name = name;
this.isAdmin = isAdmin;
}
displayName() {
return `${this.isAdmin ? '[ADMIN] ' : ''}${this.name}`;
}
}
- ✅ データと振る舞いを一つの意味としてパッケージ化
- ✅ 再利用・拡張しやすく、テスト対象としても明確
- ❌ 状態と副作用を混在させると破綻しやすい
3. クラス vs ファクトリ関数：選定基準
✅ クラスで設計すべきケース
- “型”の意味が明確（User, CartItem, Timerなど）
- newによるインスタンス制御が自然
-
instanceofによる型判定を活用する場合
✅ ファクトリ関数で構築すべきケース
- 状態のみが必要で、プロトタイプ継承は不要
- データをベースに“加工”する関数が主
- インスタンスを隠蔽し、純粋関数として扱いたい場合
function createUser(id, name) {
return {
id,
name,
isAdmin: false,
displayName() {
return `${this.name}`;
}
};
}
4. 振る舞いを責務単位に分割する
class Cart {
constructor() {
this.items = [];
}
add(item) {
this.items.push(item);
}
total() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}
- ✅ データ保持（items）と操作（add/total）を意味ある単位で提供
- ✅ クラスが「文脈と機能の集合体」であることを明示する設計
5. 合成 vs 継承：再利用の構造的選択
❌ 継承を多用すると依存関係が崩壊しやすい
class AdminUser extends User {
deleteUser() { ... }
}
→ ✅ 再利用の基本は「合成（Composition）」による柔軟な設計
function withLogger(obj) {
return {
...obj,
log() {
console.log(`[${obj.name}]`);
}
};
}
6. 設計的判断のフレームワーク
| 目的 | 手法 |
|---|---|
| 状態だけを扱いたい | POJO |
| 意味ある型と動作を束ねたい | クラス or ファクトリ関数 |
| 動作を切り替え可能にしたい | Strategyパターン + 合成 |
| インスタンス制御したい | クラス構文 + instanceof
|
| 動作だけ再利用したい | 関数 or Mixin |
よくあるミスと対策
❌ オブジェクトに処理と状態が無秩序に混在
→ ✅ クラスを導入 or 関数を分離し、意味の単位で設計する
❌ 継承で「is-a」関係が破綻（例：AdminUser → GuestUser）
→ ✅ 共通機能は合成（has-a）で再利用
❌ どこからでも直接プロパティを参照してしまう
→ ✅ アクセサを導入し、内部構造を隠蔽
get isLoggedIn() {
return !!this.token;
}
結語
オブジェクトとは、データではなく「概念の実体化」である。
それは構造であり、振る舞いであり、意味を持った単位で再利用可能にする設計の中心である。
- POJOで構造を定義し
- クラスで意味を定義し
- 合成で振る舞いを再利用する
JavaScriptにおけるオブジェクト設計とは、
“意味と再利用を両立させるための、最小構成の建築技法”である。