22.
ユーザ定義オブジェクト
ユーザ定義オブジェクト
ユーザ定義オブジェクトとは
ユーザ定義オブジェクトは、開発者が独自に定義したオブジェクトのことで、プログラムに組み込まれているデータ型（string, int, arrayなど）だけでなく、アプリケーションに応じてカスタムのデータ型や構造を定義します。
「クラス型」と「関数型」
JSのユーザ定義オブジェクトは、オブジェクトリテラル、クラス型オブジェクト、関数型オブジェクトの３つがあり、クラス型と関数型はインスタンスを生成するとオブジェクトとなります。
- 関数型とクラス型は同時に定義できないので注意
アローメソッドスコープ
アロー関数内では、thisは関数の親のスコープを引き継ぎます。
オブジェクトリテラル
ファイル構成
basic/
├── js/
│ └── person.js
└── person.html
person.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ユーザ定義オブジェクト</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex justify-center">
<main class="bg-white shadow-md rounded-lg p-6 w-full max-w-2xl mx-auto">
<h1 class="font-bold text-2xl text-center mb-6">ユーザ定義オブジェクト</h1>
<div class="p-6">
<h2 class="font-bold text-xl mb-4">オブジェクトリテラル</h2>
<div id="object-literal" class="p-4 bg-gray-50 rounded-md shadow-sm"></div>
</div>
<div class="p-6">
<h2 class="font-bold text-xl mb-4">数型またはクラス型</h2>
<div id="instance-object" class="p-4 bg-gray-50 rounded-md shadow-sm"></div>
</div>
</main>
<!-- 外部JavaScriptファイルの読み込み -->
<script src="js/person.js" defer></script>
</body>
</html>
オブジェクトリテラルとは
オブジェクトリテラルはこれまで学習したオブジェクトで、 {} を使って定義します。小規模でシンプルなオブジェクト定義に適しています。
プロパティ定義
「person」オブジェクトに、「name」「age」プロパティを設定した例です。
js/person.js
const person = {
name: "Alice",
age: 30,
};
関数定義（メソッド）
オブジェクトに関数定義（メソッド定義） することで、オブジェクト経由で関数を実行できます。関数は、無名関数またはアロー関数で定義します。
js/person.js
const person = {
name: "Alice",
age: 30,
// メソッド定義
greet: function() {
// 処理
}
};
関数の中で this を使う
オブジェクトの関数から、自分のオブジェクトのプロパティにアクセスする時に、thisを使います。
js/person.js
const person = {
name: "Alice",
age: 30,
greet: function() {
// this.name、 this.age で自分のプロパティにアクセス
return `I'm ${this.name}. ${this.age} years old.`;
}
// オブジェクトリテラルで処理
// name
document.getElementById('object-name').innerHTML = person.name;
// age
document.getElementById('object-age').innerHTML = person.age;
// greet()
document.getElementById('object-greet').innerHTML = person.greet();
};
ブラウザ
関数の実行
オブジェクトの関数を実行します。
js/person.js
// オブジェクトリテラル
const person = {
name: "Alice",
age: 30,
greet: function () {
return `I'm ${this.name}. ${this.age} years old.`;
}
};
// オブジェクトリテラルで処理
document.getElementById('object-literal').innerHTML = person.greet();
関数型オブジェクト
関数型オブジェクトとは
関数型オブジェクトは、関数そのものを扱うことに重点を置いた設計です。状態を持たず、データ操作に特化した関数の組み合わせが必要な場合によく使われます。
Person定義
関数型オブジェクトで、Personを定義します。
js/person.js
// 関数型
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function () {
return `I'm ${this.name}. ${this.age} years old.`;
};
}
インスタンス生成
Person のインスタンスを生成します。
js/person.js
// 関数型でインスタンス生成
const person1 = new Person("Alice", 30);
インスタンスメソッド実行
インスタンスで、name、age、greet() の結果をブラウザに表示します。
js/person.js
const person1 = new Person("Alice", 30);
// name
document.getElementById('person-name').innerHTML = person1.name;
// age
document.getElementById('person-age').innerHTML = person1.age;
// greet()
document.getElementById('person-greet').innerHTML = person1.greet();
ブラウザに、オブジェクトの結果が表示されました。
ブラウザ
クラス型オブジェクト
クラス型オブジェクトとは
クラス型オブジェクトは、クラスから生成されたインスタンスで、データ（プロパティ）とメソッド（関数）で設計します。OOP（オブジェクト指向プログラミング）の基本概念で、データカプセル化や関連動作と一緒に扱うことができます。
js/person.js
// クラス型
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `I'm ${this.name}. ${this.age} years old.`;
}
}
- クラス型と関数型オブジェクトは、同じ名前で同時に定義できません
- 関数型オブジェクトはコメントアウトまたは削除してください
インスタンス生成
Person のインスタンスを生成します。
js/person.js
// 関数型でインスタンス生成
const person1 = new Person("Alice", 30);
インスタンスメソッド実行
生成したPersonインスタンスで、greet() を実行して、ブラウザに結果を表示します。
js/person.js
const person1 = new Person("Alice", 30);
// ブラウザに greet() の結果を表示
document.getElementById('instance-object').innerHTML = person.greet();
ブラウザに、オブジェクトの結果が表示されました。
ブラウザ
ソース
js/person.js
// オブジェクトリテラル
const person = {
name: "Alice",
age: 30,
greet: function () {
return `I'm ${this.name}. ${this.age} years old.`;
}
};
// 関数型
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function () {
return `I'm ${this.name}. ${this.age} years old.`;
};
}
// クラス型
// class Person {
// constructor(name, age) {
// this.name = name;
// this.age = age;
// }
// greet() {
// return `I'm ${this.name}. ${this.age} years old.`;
// }
// }
// オブジェクトリテラルで処理
// name
document.getElementById('object-name').innerHTML = person.name;
// age
document.getElementById('object-age').innerHTML = person.age;
// greet()
document.getElementById('object-greet').innerHTML = person.greet();
// 関数型またはクラス型で、インスタンス生成
const person1 = new Person("Alice", 30);
// name
document.getElementById('person-name').innerHTML = person1.name;
// age
document.getElementById('person-age').innerHTML = person1.age;
// greet()
document.getElementById('person-greet').innerHTML = person1.greet();