050-3138-2770
プログラミングの世界では、オブジェクト指向の概念は欠かせません。その中心となるのが「クラス」です。
JavaScriptでもこのクラスを利用することができ、これを使うことでより効率的で見通しの良いコードを書くことが可能となります。
しかし、その使い方や書き方を初めて学ぶときはなかなか難しく感じるかもしれません。
そこでこの記事では、JavaScriptのクラスの基本的な使い方や書き方、そしてさらに具体的な利用法までを分かりやすく解説します。
本記事を読むことで、JavaScriptのクラスを効果的に使いこなすための基礎知識を身につけることができます。
サンプルコードも紹介するので、JavaScriptの記法についてある程度理解している方なら、内容が理解できるはずです。
ぜひ参考にしてみてください。
JavaScriptのClass（クラス）とは？
JavaScriptのクラスとは、オブジェクト指向プログラミングの核心をなす概念で、データとそれを操作する手段を一つにまとめた設計図のようなものです。
こちらを活用することで、同じ性質を持つ異なるオブジェクトを効率的に生成できます。
たとえば、ゲーム内のキャラクターを作成する際、それぞれのキャラクターは異なる名前や能力値を持つかもしれませんが、攻撃する、防御するといった基本的な動作は共通しています。
クラスを使うことで、これらの共通動作を一度定義しておき、各キャラクターの特有の情報だけを個別に設定することができるのです。
このようにクラスを活用することで、プログラムを再利用しやすくなりますし、プログラムが読みやすくなります。開発の効率化はもちろん、チームでの作業がスムーズに行えるようになるわけです。
JavaScript Classの基本構文
JavaScriptのクラスの基本構文は、オブジェクト指向プログラミングにおける設計図を作る際に、非常に簡潔で便利です。
具体的には、classキーワードを使ってクラスを定義し、その中にコンストラクタ（オブジェクトを生成する際に自動的に呼び出される特別なメソッド）やその他のメソッドを記述します。
たとえば、学校の生徒を表すクラスを作る場合、生徒ごとに名前や学年といった属性（プロパティ）があり、勉強する、試験を受けるといった動作（メソッド）を共通して持つとします。この場合、クラスの定義は次の通りです。
class Student {
constructor(name, grade) {
this.name = name; // 生徒の名前
this.grade = grade; // 学年
}
study() {
console.log(`${this.name}は勉強している。`);
}
takeExam() {
console.log(`${this.name}は試験を受けている。`);
}
}
このStudentクラスを使って、特定の生徒を表すオブジェクトを生成するには、newキーワードを用いて、new Student(‘太郎’, 3);のように書きます。こうして定義したメソッドは、生成したオブジェクトに対して太郎.study();のように呼び出すことができます。
Classの定義方法と基本的な構造
クラスの定義方法とその基本的な構造は、プログラミングにおいてオブジェクト指向の設計を行う上で欠かせない要素です。クラスを定義するには、classキーワードを使用し、その後にクラス名を記述します。
クラスの中では、データの構造を定義するプロパティと、データを操作するメソッドを定義できます。特に重要なのが、オブジェクトの初期化を担当するコンストラクタメソッドです。
たとえば、動物園の動物を管理するためのAnimalクラスを定義する場合を考えてみましょう。このクラスでは、動物の種類と名前をプロパティとして持ち、それらをコンストラクタで初期化します。また、動物が鳴く動作を表すメソッドも定義することができます。以下はその具体例です。
class Animal {
constructor(type, name) {
this.type = type; // 動物の種類
this.name = name; // 動物の名前
}
makeSound() {
console.log(`${this.name}が鳴いている。`);
}
}
このAnimalクラスを使用して、特定の動物のオブジェクトを生成することができます。例えば、let myPet = new Animal(‘犬’, ‘ポチ’);のように記述することで、ポチという名前の犬を表すオブジェクトを生成できます。そして、myPet.makeSound();を呼び出すことで、ポチが鳴いている様子をコンソールに表示させることができます。
Classメンバーの追加と削除方法
JavaScriptのクラスでは、一度定義されたクラスの構造自体を動的に変更する、つまりメンバー（プロパティやメソッド）を直接追加したり削除したりする機能は、言語の仕様として直接サポートされていません。
クラスの定義は静的であり、インスタンス化された後のオブジェクトに対して動的にメンバーを追加することはできますが、クラス定義自体を変更することはできないのです。しかし、インスタンスレベルでは、オブジェクトに新しいプロパティやメソッドを追加したり、既存のものを削除することが可能です。
たとえば、先ほど定義したAnimalクラスのインスタンスに新しいプロパティを追加するには、以下のようにします。
et myPet = new Animal(‘犬’, ‘ポチ’);
myPet.age = 5; // myPetオブジェクトに「age」という新しいプロパティを追加
また、インスタンスからプロパティやメソッドを削除するには、deleteオペレータを使用します。
delete myPet.age; // myPetオブジェクトから「age」プロパティを削除
これらの操作により、特定のインスタンスに対してのみカスタマイズを加えることができますが、クラス定義自体や、既に存在する他のインスタンスには影響を与えません。
クラスレベルでの動的な変更が必要な場合は、プロトタイプを直接操作するか、ファクトリ関数のような別のアプローチを検討する必要があります。
このように、JavaScriptではインスタンスレベルでの動的な変更は比較的自由に行うことができますが、クラスの静的な定義を後から変更することは想定されていません。
JavaScript Classの使い方と書き方の基礎
JavaScriptのクラスは、オブジェクト指向プログラミングの強力な機能を提供し、コードの再利用性、保守性、そして読みやすさを大幅に向上させます。
クラスは、関連するデータとメソッドをまとめるための「設計図」と考えることが可能です。クラスの基本的な書き方には、クラスの宣言、コンストラクタの定義、メソッドの追加が含まれます。
ここでは、JavaScript Classの使い方と書き方について解説します。
Classのインスタンスの作成と利用方法
JavaScriptのクラスからインスタンスを作成し利用する過程は、簡潔なコードで表現できます。例として、Personクラスを定義し、そのインスタンスを作成してみましょう。このPersonクラスは、人の名前を管理し、挨拶をする機能を持っています。
まず、Personクラスを以下のように定義します。
class Person {
constructor(name) {
this.name = name; // 名前プロパティを初期化
}
greet() {
console.log(`こんにちは、${this.name}です。`); // 挨拶メソッド
}
}
次に、このクラスのインスタンスを作成します。newキーワードを使用して、Personクラスからperson1という名前のインスタンスを生成し、その名前を’太郎’と設定します。
let person1 = new Person(‘太郎’);
最後に、person1インスタンスのgreetメソッドを呼び出します。これにより、コンソールに挨拶のメッセージが表示されます。
person1.greet(); // 出力: こんにちは、太郎です。
このプロセスにより、Personクラスからperson1というインスタンスを作成し、そのインスタンスが持つメソッドを利用することができました。このようにして、クラスの概念を用いることで、コードの再利用性と整理が促進され、大きなプロジェクトでも管理しやすくなります。
Classメンバーの変更と継承方法
JavaScriptのクラスでは、メンバー（プロパティやメソッド）の変更はインスタンスレベルで行われます。クラス定義自体の変更は、クラスを継承して新しいサブクラスを作ることによって実現されます。これにより、既存のクラスの機能を拡張し、新しい機能を追加することが可能です。
Classメンバーは、インスタンスが生成された後、そのインスタンスに対して直接プロパティやメソッドを追加したり、変更したりすることができます。
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`こんにちは、${this.name}です。`);
}
}
let person1 = new Person(‘太郎’);
person1.age = 30; // インスタンスに新しいプロパティを追加
person1.greet = function() { // greetメソッドを変更
console.log(`やあ、${this.name}だよ。`);
};
また、継承を用いることで、既存のクラス（親クラス）の機能を受け継いだ新しいクラス（子クラス）を定義することができます。extendsキーワードを使用して継承を実現します。
class Employee extends Person { // Personクラスを継承
constructor(name, position) {
super(name); // 親クラスのコンストラクタを呼び出し
this.position = position; // 新しいプロパティを追加
}
work() {
console.log(`${this.name}は${this.position}として働いています。`);
}
}
let employee1 = new Employee(‘花子’, ‘エンジニア’);
employee1.greet(); // 継承したメソッドを呼び出し
employee1.work(); // 新しいメソッドを呼び出し
この例では、PersonクラスからEmployeeクラスを継承しています。そして、EmployeeクラスはPersonの全てのプロパティとメソッドを受け継ぎつつ、新しいプロパティpositionと新しいメソッドworkを追加しています。
JavaScriptのクラス継承を使うことで、コードの再利用性を高め、より複雑な構造もシンプルに表現することが可能です。
JavaScript Classの継承方法
JavaScriptクラスの継承は、既存のクラスから新しいクラスを作成するときに利用されます。継承を用いることで、既存のクラスのコードを再利用し、新しいクラスに追加の特性を与えることができます。これは、コードの効率性と整理を向上させ、大規模なプログラムの管理を容易にするための重要な概念です。
ここでは、JavaScript Classの継承方法について詳しく解説します。
Classの継承と親子関係の定義方法
JavaScriptでクラスの継承を用いると、あるクラス（親クラスまたはスーパークラスとも呼ばれます）のプロパティやメソッドを別のクラス（子クラスまたはサブクラスとも）に引き継がせることができます。
これにより、コードの再利用性が向上し、様々なオブジェクト間で共通の振る舞いを簡単に共有することができます。
まず、親クラスを定義します。たとえば、一般的なVehicle（乗り物）クラスを作成してみましょう。
class Vehicle {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
displayInfo() {
console.log(`この乗り物は${this.brand}の${this.model}です。`);
}
}
次に、Vehicleクラスを継承するCarクラスを定義します。子クラスでは、extendsキーワードを用いて継承を行います。また、子クラスのコンストラクタ内でsuperを呼び出すことにより、親クラスのコンストラクタを実行し、親クラスで定義されたプロパティを初期化できます。
class Car extends Vehicle {
constructor(brand, model, doorCount) {
super(brand, model); // 親クラスのコンストラクタを呼び出し
this.doorCount = doorCount; // 新しいプロパティを追加
}
displayCarInfo() {
console.log(`この車は${this.brand}の${this.model}で、ドアは${this.doorCount}つあります。`);
}
}
最後に、子クラスからインスタンスを作成し、そのインスタンスを介してメソッドを呼び出します。
let myCar = new Car(‘トヨタ’, ‘プリウス’, 4);
myCar.displayInfo(); // 親クラスのメソッドを呼び出し
myCar.displayCarInfo(); // 子クラスで定義したメソッドを呼び出し
上記の例では、CarクラスがVehicleクラスからbrandとmodelプロパティを継承しており、さらに独自のプロパティであるdoorCountを追加しています。
また、Carクラスは親クラスのdisplayInfoメソッドに加え、独自のdisplayCarInfoメソッドも持っています。
クラスの継承を使うことで、JavaScriptにおいて効率的かつ整理された方法でオブジェクトの階層を構築することが可能です。
親クラスから子クラスへのメソッドやプロパティの継承方法
JavaScriptにおける親クラスから子クラスへのメソッドやプロパティの継承は、オブジェクト指向プログラミングの中心的な概念です。これにより、共通の機能やデータを異なるクラス間で効率的に共有することができます。継承を実現するには、extendsキーワードを使用して親クラスを子クラスが拡張する形を取ります。
親クラスのメソッドやプロパティを子クラスが受け継ぐことで、基本的な機能を再定義することなく、追加や拡張を行うことができます。
コンストラクタメソッド内でsuperキーワードを用いることで、親クラスのコンストラクタを呼び出し、必要な初期化処理を行うことが可能です。
例えば、Animalクラスが親クラスであり、動物の基本的な特性を持つとします。これを継承して、Dogクラスを作成する場合、DogクラスはAnimalの特性に加えて、犬特有の特性を持つことになります。
// 親クラスの定義
class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
console.log(`${this.name} makes a sound.`);
}
}
// 子クラスの定義
class Dog extends Animal {
constructor(name, breed) {
super(name); // 親クラスのコンストラクタを呼び出し
this.breed = breed; // 犬種のプロパティを追加
}
bark() {
console.log(`${this.name} barks.`);
}
}
// 子クラスのインスタンスを作成し、メソッドを呼び出す
let myDog = new Dog(‘Max’, ‘Labrador’);
myDog.makeSound(); // 親クラスのメソッドを呼び出す
myDog.bark(); // 子クラスで定義したメソッドを呼び出す
上記のように、DogクラスがAnimalクラスからnameプロパティとmakeSoundメソッドを継承しています。加えて、Dogクラスでは犬種を表すbreedプロパティと、犬が吠える動作を表すbarkメソッドが追加されています。
このようにして、JavaScriptではextendsキーワードとsuperキーワードを用いることで、親クラスのプロパティやメソッドを子クラスが継承し、それらを基にした拡張やカスタマイズを行うことができます。
JavaScript Classの具体的な使い方
JavaScriptのクラスは非常に視認しやすく、さまざまなカスタマイズができます。ここでは、JavaScrip classの具体的な使い方について詳しく解説します。
JavaScript Classのプライベートメンバーの定義方法
ここでは、JavaScript Classのプライベートメンバーの定義方法について解説します。
Class内でのプライベートメンバーの定義と利用方法
JavaScriptのクラスでは、プライベートメンバー（プライベートプロパティやプライベートメソッド）を定義することで、クラスの外部からのアクセスを制限し、カプセル化を実現することができます。
プライベートメンバーは、その名前の前に#記号を付けることで定義されます。この機能は、特定のデータやメソッドをクラス内部でのみ使用し、外部からは隠蔽する場合に便利です。
まず、プライベートプロパティの定義と利用をする場合には、以下のように作成しましょう。
class Person {
#name; // プライベートプロパティの定義
constructor(name) {
this.#name = name; // プライベートプロパティへの値の設定
}
getName() {
return this.#name; // プライベートプロパティの値を外部に公開するメソッド
}
}
let person = new Person(‘太郎’);
console.log(person.getName()); // “太郎”、プライベートプロパティにアクセス
// console.log(person.#name); // これはエラーになる、プライベートプロパティへの直接アクセスは不可
続いて、プライベートメソッドの定義と利用方法です。
class Person {
#name;
#sayName() { // プライベートメソッドの定義
console.log(`My name is ${this.#name}.`);
}
constructor(name) {
this.#name = name;
}
introduceSelf() {
this.#sayName(); // プライベートメソッドの呼び出し
}
}
let person = new Person(‘太郎’);
person.introduceSelf(); // “My name is 太郎”、プライベートメソッドを間接的に呼び出し
// person.#sayName(); // これはエラーになる、プライベートメソッドへの直接アクセスは不可
プライベートメンバーを利用することで、クラスの実装の詳細を隠蔽し、クラスの公開インターフェース（公開メソッドやプロパティ）を明確に制御することが可能になります。
これは、クラスの使用方法をシンプルに保ち、誤った利用を防ぐのに役立ちます。また、クラスの内部実装が外部のコードに影響を与えることなく変更できるため、メンテナンス性も非常に高いです。
プライベートメンバーの外部からのアクセス制限方法
JavaScriptのクラスでプライベートメンバー（プロパティやメソッド）への外部からのアクセスを制限する主な方法は、プライベートフィールドの宣言です。プライベートフィールドは、フィールド名の前に#をつけることで定義されます。
この#は、フィールドがクラスの外部からアクセスできないことを意味し、クラスの内部からのみアクセス可能になります。
まずは、プライベートプロパティの例についてコードを紹介します。
class MyClass {
#privateProperty; // プライベートプロパティの定義
constructor(value) {
this.#privateProperty = value;
}
getPrivateProperty() {
return this.#privateProperty; // プライベートプロパティへのアクセス
}
}
const myInstance = new MyClass(‘秘密の値’);
console.log(myInstance.getPrivateProperty()); // ‘秘密の値’ を出力
// console.log(myInstance.#privateProperty); // シンタックスエラー、外部からのアクセスは不可
続いて、プライベートメソッドも同様に、メソッド名の前に#をつけることで定義します。これにより、メソッドはクラスの内部からのみ呼び出せるようになります。
class MyClass {
#privateMethod() {
return ‘プライベートメソッドの値’;
}
callPrivateMethod() {
return this.#privateMethod(); // プライベートメソッドをクラス内で呼び出し
}
}
const myInstance = new MyClass();
console.log(myInstance.callPrivateMethod()); // ‘プライベートメソッドの値’ を出力
// myInstance.#privateMethod(); // シンタックスエラー、外部からのアクセスは不可
プライベートメンバーはクラスのカプセル化を強化し、内部状態や振る舞いを外部から隠蔽することで、クラスの安全性と整合性を保ちます。
クラスの使用者は公開インターフェースを通じてのみクラスとやり取りすることになり、クラスの内部実装に依存することなく、より安全にクラスを利用可能です。
JavaScript Classの子要素の取得と操作方法
次に、JavaScriptクラスの中で子要素を取得し操作する方法について学びます。これはDOM操作など、Web開発において頻繁に行われる作業で、クラスを使って効率的に行うことができます。
適切な方法で子要素を取得し、それらを操作することで、ウェブアプリケーションの動的な振る舞いを制御し、ユーザー体験を向上させることが可能となります。
Class内の要素のリスト化と取得方法
JavaScriptのクラス内の要素（プロパティやメソッド）をリスト化し、取得する方法は直接的にはサポートされていませんが、いくつかの間接的な方法を用いて実現できます。
特に、公開プロパティやメソッドに関してはリフレクション（実行時にオブジェクトの構造を調べること）を利用することで、その情報を取得することが可能です。プライベートメンバーについては、外部からのアクセスが制限されているため、これらの手法では取得できません。
そのため、以下の方法を用いる必要があります。
まず、オブジェクトの公開プロパティ名を取得するには、Object.keys()やObject.getOwnPropertyNames()メソッドが利用できます。
class MyClass {
constructor() {
this.publicProperty1 = ‘value1’;
this.publicProperty2 = ‘value2’;
}
publicMethod() {
// メソッドの内容
}
}
const myInstance = new MyClass();
console.log(Object.keys(myInstance)); // [“publicProperty1”, “publicProperty2”]
console.log(Object.getOwnPropertyNames(myInstance)); // [“publicProperty1”, “publicProperty2”]
続いて、オブジェクトのメソッド名を含め、継承されたメソッドも含めて取得するには、オブジェクトのプロトタイプチェーンを辿る必要があります。
Object.getPrototypeOf()メソッドとObject.getOwnPropertyNames()メソッドを組み合わせることで、クラスのメソッド名を取得できます。
const methodNames = Object.getOwnPropertyNames(Object.getPrototypeOf(myInstance))
.filter(prop => typeof myInstance[prop] === ‘function’);
console.log(methodNames); // [“constructor”, “publicMethod”]
ただし、この方法では、コンストラクタもメソッドの1つとしてリストされる点に注意が必要です。
Classメンバーの追加や削除、変更方法
JavaScriptのクラスメンバー（プロパティやメソッド）は、クラス定義時に静的に定義されますが、インスタンスレベルで動的に追加、削除、変更することが可能です。
ただし、クラス定義自体を動的に変更することはできません。ここでは、インスタンスレベルでの操作に焦点を当てて説明します。
まず、メンバーを追加するには、直接インスタンスに対して設定します。
class MyClass {
constructor(name) {
this.name = name;
}
}
const myInstance = new MyClass(‘Example’);
myInstance.newProperty = ‘New Property’; // 新しいプロパティを追加
myInstance.newMethod = function() { // 新しいメソッドを追加
console.log(‘This is a new method.’);
};
console.log(myInstance.newProperty); // ‘New Property’
myInstance.newMethod(); // ‘This is a new method.’
メンバーは、delete演算子を使うことで削除可能です。
delete myInstance.newProperty; // プロパティを削除
delete myInstance.newMethod; // メソッドを削除
console.log(myInstance.newProperty); // undefined
インスタンスの既存のプロパティやメソッドを変更するには、新しい値や関数で上書きします。
myInstance.name = ‘New Name’; // 既存のプロパティを変更
myInstance.newMethod = function() { // 既存のメソッドを変更
console.log(‘This method has been changed.’);
};
console.log(myInstance.name); // ‘New Name’
myInstance.newMethod(); // ‘This method has been changed.’
これらの操作により、インスタンスに対して柔軟にメンバーを追加、削除、または変更することができますが、クラス定義自体に影響を与えるわけではないため、新しく作成されるインスタンスには適用されません。
ちなみに、プライベートフィールドやプライベートメソッドは、クラスの外部からは操作できないため、この方法で追加、削除、変更することはできません。
JavaScript Classのスタイルの適用と変更方法
JavaScriptのクラスにスタイルを適用したり変更することで、ウェブページの見た目を動的に制御することが可能となります。
これにより、動的なレイアウトや、アニメーションなどの視覚的な効果を実装することができます。
ここでは、JavaScript Classにスタイルの適用方法と変更方法について紹介します。
Classにスタイルを追加・削除する方法
JavaScriptのクラスにスタイルを追加や削除する手法は、動的なウェブページ制作において非常に重要な技術です。
この技術により、ユーザーの操作に応じてページの見た目を変更することが可能になります。たとえば、ユーザーがあるボタンをクリックした時に、特定の要素の背景色を変更することができます。
具体的には、JavaScriptにおいて**classListプロパティを使用することで、クラスの追加や削除、切り替えが簡単に行えます。例えば、ある<div>要素にactiveというクラスを追加する場合、element.classList.add(‘active’)というコードを書きます。また、このクラスを削除したい場合は、element.classList.remove(‘active’)を使用します。さらに、activeクラスがすでにあるかどうかを判定し、あれば削除、なければ追加するような動作は、element.classList.toggle(‘active’)**で実現できます。
このような手法を活用することで、例えばユーザーが商品を「お気に入り」に追加したことを示すために、星のアイコンの色を黄色に変更したり、メニューバーをクリックすることでナビゲーションの表示・非表示を切り替えるなど、直感的かつ動的なインターフェイスを実現することができます。
たとえば、上記の例をコードとして入力する場合、次のようになります。
HTML部分
<div id=”favoriteIcon” class=”star-icon”>★</div>
CSS部分
.star-icon {
color: grey; /* デフォルトの色 */
cursor: pointer;
}
.favorite {
color: yellow; /* お気に入りに追加された時の色 */
}
JavaScript部分
document.getElementById(‘favoriteIcon’).addEventListener(‘click’, function() {
this.classList.toggle(‘favorite’);
});
このコードは、<div>要素に対してクリックイベントリスナーを追加し、クリックされるたびにfavoriteクラスを追加または削除します。このfavoriteクラスがある場合は星のアイコンの色が黄色に変わり、なければグレーのままです。
Classのスタイルを動的に変更する方法
クラスのスタイルを動的に変更することで、ユーザーの操作に応じて、要素の見た目や振る舞いをリアルタイムで変更できます。
例えば、あるイベントが発生した際に、特定のHTML要素に新しいスタイルを適用したり、既存のスタイルを削除することができます。
たとえば、ユーザーがボタンをクリックすることで、メッセージ表示部分の背景色を変更したい場合があります。これを実現するには、まずHTMLでボタンとメッセージ表示部分を定義します。
<button id="changeColorButton">色を変える</button> <div id="message">ここは背景色が変わります</div> 次に、CSSで背景色を変更するためのクラスを定義します。
.bg-blue { background-color: blue; color: white; }
そして、JavaScriptでボタンのクリックイベントに応じて、メッセージ表示部分の背景色を変更するロジックを実装します。
document.getElementById('changeColorButton').addEventListener('click', function() {
var messageElement = document.getElementById('message');
messageElement.classList.toggle('bg-blue');
});
このコードでは、toggleメソッドを使用しています。これにより、bg-blueクラスがmessage要素にすでに存在する場合はそれを削除し、存在しない場合は追加します。結果として、ボタンをクリックするたびに背景色が切り替わります。
JavaScript Classの応用
最後に、JavaScript Classの応用方法について見ていきます。各項目について、サンプルコードも紹介するので、ぜひ参考にして見てください。
JavaScript Classのイベントの追加と取得方法
まずは、JavaScript Classのイベントの追加と取得方法について見ていきます。
Class内にイベントを追加し、取得する方法
JavaScriptでクラス内にイベントを追加し、取得することで、コードが再利用しやすくなり、管理が容易になります。具体的には、クラスのメソッドとしてイベントリスナーを定義し、インスタンスが生成された際にイベントリスナーを自動的に要素に追加することができます。
たとえば、ユーザーのクリック操作に応じてメッセージを表示するシンプルなUIコンポーネントをJavaScriptのクラスを使って実装する方法を考えてみましょう。以下にそのサンプルコードを示します。
まずは、HTMLでクリックイベントを受け取るためのボタンを用意します。
<button id=”clickMeButton”>クリックしてね</button>
<div id=”messageArea”></div>
次に、クリックイベントを処理するためのJavaScriptクラスを定義します。
class ClickHandler {
constructor(buttonId, messageAreaId) {
this.button = document.getElementById(buttonId);
this.messageArea = document.getElementById(messageAreaId);
this.init();
}
init() {
this.button.addEventListener(‘click’, () => this.displayMessage());
}
displayMessage() {
this.messageArea.textContent = ‘ボタンがクリックされました！’;
}
}
このクラスでは、コンストラクタにボタンとメッセージを表示する領域のIDを受け取り、それらの要素にアクセスします。initメソッドでは、ボタンのクリックイベントリスナーを追加し、そのイベントが発生した際にdisplayMessageメソッドを呼び出してメッセージを表示します。
最後に、このクラスのインスタンスを作成してイベントリスナーを有効化します。
new ClickHandler(‘clickMeButton’, ‘messageArea’);
このコードは、ClickHandlerクラスのインスタンスを生成し、その過程でclickMeButtonボタンに対してクリックイベントリスナーが追加されます。ボタンがクリックされると、messageArea内にメッセージが表示されます。
この方法により、イベントリスナーの追加とイベントの取得処理をクラス内にカプセル化することができ、コードの構造が明確になり、再利用しやすくなります。
クリックやホバーなどのイベントのトリガー設定方法
クリックやホバーといったイベントのトリガー設定は、ウェブページやアプリケーションのUIを向上させるために役立つ方法です。
まずは、クリックしたタイミングでイベントが実行されるような設定を行う必要があります。
このイベントを設定するには、目的の要素に対してaddEventListenerメソッドを使用してクリックイベントリスナーを追加します。
javascriptCopy code
document.getElementById(‘clickButton’).addEventListener(‘click’, function() {
alert(‘ボタンがクリックされました！’);
});
上記のコードでは、IDがclickButtonの要素がクリックされたときにアラートを表示されるようになっています。
ホバーイベントは、マウスカーソルが要素の上に移動したとき（mouseenter）や要素から離れたときに発生するという内容です。マウスオーバー時の動作を定義できるので、ユーザーがマウスオーバーしているのかを視覚的にわかりやすくする効果があります。
javascriptCopy code
const hoverElement = document.getElementById(‘hoverElement’);
hoverElement.addEventListener(‘mouseenter’, function() {
hoverElement.style.backgroundColor = ‘lightblue’;
});
hoverElement.addEventListener(‘mouseleave’, function() {
hoverElement.style.backgroundColor = ”;
});
このコードでは、IDがhoverElementの要素の上にマウスカーソルが移動すると背景色がライトブルーに変わり、カーソルが要素から離れると背景色が元に戻ります。
JavaScript Classのアニメーションの追加と制御方法
続いて、JavaScript Classのアニメーションの追加と制御方法について解説します。
Class内にアニメーションを追加し、制御する方法
クラスを用いてアニメーションを追加し、制御する方法は、モダンなウェブ開発において重要な技術です。JavaScriptのクラス機能を使用して、アニメーションの動作をカプセル化し、簡単に再利用可能なコンポーネントを作成できます。以下では、基本的なアニメーションをクラス内で管理するサンプルを紹介します。
ここでは、HTML要素のオパシティを時間経過と共に変化させる簡単なフェードイン・フェードアウトアニメーションを実装します。このアニメーションは、指定された要素に対して透明度を変更することで、フェードインまたはフェードアウトの効果を実現します。
HTML
<div id=”animatedElement” style=”opacity: 0;”>こんにちは、世界！</div>
<button id=”fadeInButton”>フェードイン</button>
<button id=”fadeOutButton”>フェードアウト</button>
JavaScript
class FadeAnimation {
constructor(elementId) {
this.element = document.getElementById(elementId);
}
fadeIn(duration = 1000) {
this.element.style.transition = `opacity ${duration}ms`;
this.element.style.opacity = 1;
}
fadeOut(duration = 1000) {
this.element.style.transition = `opacity ${duration}ms`;
this.element.style.opacity = 0;
}
}
// インスタンスの作成とイベントリスナーの設定
const animatedElement = new FadeAnimation(‘animatedElement’);
document.getElementById(‘fadeInButton’).addEventListener(‘click’, () => animatedElement.fadeIn());
document.getElementById(‘fadeOutButton’).addEventListener(‘click’, () => animatedElement.fadeOut());
この例では、FadeAnimationクラス内にfadeInとfadeOutメソッドを定義しています。これらのメソッドは、それぞれ要素の透明度を1（不透明）と0（透明）に変更し、CSSのtransitionプロパティを使用して変更の際にアニメーションを適用します。durationパラメーターはアニメーションの持続時間をミリ秒単位で指定します。
アニメーションの速度や方向の変更方法
アニメーションの速度や方向を変更するには、JavaScriptを使用して、アニメーションのキーフレーム、持続時間、イージング関数（速度の変化を制御する関数）を調整します。（CSSで調整もできますが、ここでは割愛します。）
JavaScriptを使用すると、より動的にアニメーションを制御できます。requestAnimationFrameを利用することで、アニメーションの各フレームを細かく管理し、速度や方向をリアルタイムで調整できます。
let position = 0;
const element = document.getElementById(‘animatedElement’);
function animate() {
position += 2; // 速度の調整
element.style.transform = `translateX(${position}px)`;
if (position < 100) { // 移動距離の制御
requestAnimationFrame(animate);
}
}
animate();
このスクリプトでは、要素が右に100px移動するまで、2pxずつ位置を更新しています。
速度を変更するには、position += 2;の数値を調整します。方向を変更するには、translateXをtranslateYに変更するか、移動量を負の値にしましょう。
JavaScript Classのデータの取得と処理方法
それでは続いて、JavaScript Classのデータの取得と処理方法について詳しく解説します。
Class内でのデータのリスト化と取得方法
クラス内でデータのリストを管理し、それを取得する方法は、データの整理とアクセスを効率化する上で重要です。
オブジェクト指向プログラミングの原則を利用することで、データをカプセル化し、外部から簡単にアクセスできるようにします。以下では、JavaScriptを使用してクラス内でデータリストを管理し、それを取得する基本的な例を示すことが可能です。
まず、特定のデータ型（この場合は単純な文字列のリストを想定）を管理するクラスを定義します。
このクラスでは、データのリストをプライベートプロパティとして持ち、リストへのアイテム追加やリスト全体の取得などの操作をメソッドで提供します。
class DataList {
#items;
constructor() {
this.#items = [];
}
addItem(item) {
this.#items.push(item);
}
getItems() {
return this.#items;
}
}
このDataListクラスには、#itemsというプライベートプロパティがあり、クラスの外部から直接アクセスすることはできません。addItemメソッドを使ってリストに新しいアイテムを追加し、getItemsメソッドでリスト全体を取得できます。
次に、このクラスを使用してデータのリストを管理し、取得する方法を示します。
const dataList = new DataList(); // DataListクラスのインスタンスを作成
// リストにアイテムを追加
dataList.addItem(“Apple”);
dataList.addItem(“Banana”);
dataList.addItem(“Cherry”);
// リスト全体を取得してコンソールに表示
console.log(dataList.getItems()); // [“Apple”, “Banana”, “Cherry”]
この例では、DataListクラスのインスタンスを作成し、addItemメソッドを使用して3つのフルーツの名前をリストに追加しています。その後、getItemsメソッドを呼び出してリスト全体を取得し、コンソールに表示しています。
取得したデータの加工や処理方法
取得したデータの加工や処理は、ウェブアプリケーションやデータ分析において非常に重要です。データを有効に活用するためには、その構造を理解し、目的に応じて適切な加工や処理を施す必要があります。JavaScriptには、配列やオブジェクトを効率的に操作するための多くのメソッドが用意されており、これらを利用することでデータを柔軟に扱うことが可能です。
- データのフィルタリング
filterメソッドを使用して、特定の条件に一致する要素のみを含む新しい配列を作成することができます。たとえば、年齢が18歳以上のユーザーのみを抽出したい場合は以下のようにします。
const users = [
{ name: “Alice”, age: 25 },
{ name: “Bob”, age: 16 },
{ name: “Charlie”, age: 30 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: “Alice”, age: 25 }, { name: “Charlie”, age: 30 }]
- データのマッピング
mapメソッドを使って、配列の各要素に対して関数を実行し、その結果からなる新しい配列を生成することができます。例えば、ユーザーの名前のみを抽出したい場合は以下のようにします。
const userNames = users.map(user => user.name);
console.log(userNames); // [“Alice”, “Bob”, “Charlie”]
- データの集約
reduceメソッドを利用すると、配列の各要素に対して関数を実行し、単一の結果に集約することができます。たとえば、ユーザーの平均年齢を計算したい場合は以下のようにします。
const averageAge = users.reduce((sum, user) => sum + user.age, 0) / users.length;
console.log(averageAge); // 23.666666666666668
- データのソート
sortメソッドを使用して、配列の要素を特定の基準に従って並び替えることができます。たとえば、ユーザーを年齢順にソートしたい場合は以下のようにします。
const sortedUsers = users.sort((a, b) => a.age – b.age);
console.log(sortedUsers); // [{ name: “Bob”, age: 16 }, { name: “Alice”, age: 25 }, { name: “Charlie”, age: 30 }]
- データの検索
findメソッドを使用すると、指定した条件に一致する最初の要素を返します。特定の名前を持つユーザーを検索したい場合は以下のようにします。
const charlie = users.find(user => user.name === “Charlie”);
console.log(charlie); // { name: “Charlie”, age: 30 }
これらのメソッドを組み合わせることで、複雑なデータ処理も柔軟に行うことができます。データの加工や処理を適切に行うことで、情報の価値を最大限に引き出し、ユーザーにとって有意義な形で提供することが可能になります。
JavaScriptのClass（クラス）のまとめ
この記事では、JavaScriptのClass（クラス）の使用方法について詳しく解説しました。
今回ご紹介した知識を用いることで、より効率的にコードを書くことができます。
JavaScriptで開発を行う方には、Classは、ぜひ知ってもらいたい内容です。一度読んでわからなかった方は、何度か読み直して、内容を理解してみてください。
また、株式会社Jiteraでは、要件定義を書くだけでAIが生成するツールで、アプリ・システム開発を行っています。
制作している途中で要件が変更になっても柔軟に修正しながら開発できるので、JavaScript関係のアプリ開発・システム開発のご相談があればお気軽に相談ください。
メールマガジン登録
