この記事のポイント
Classを学ぶことで、効率的なコード設計と再利用可能なプログラムの作成が可能になります。
- オブジェクト指向プログラミングの基本概念と実装方法の習得
- constructorメソッドを使ったインスタンス生成の仕組みの理解
- 継承機能を活用したコードの再利用性向上とメンテナンス効率化
これらのポイントを押さえることで、より洗練されたJavaScriptプログラミングができるようになります。
Classとは？
Classは、オブジェクト指向プログラミングを実現するための機能です。
クラスとは、同じ性質を持つオブジェクトの設計図のような役割を果たします。例えば「イヌ」というクラスを作成すれば、「ポチ」や「タロウ」といった個別のイヌのインスタンスを作ることができます。
ES6から正式に導入されたこの機能により、従来のプロトタイプベースの書き方よりも直感的で理解しやすいコードが書けるようになりました。クラスを使うことで、コードの再利用性が高まり、大規模なプログラム開発においても保守性の高い設計が可能になります。
【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング
基本構文
Classの基本的な書き方は、classキーワードを使って大文字から始まるクラス名を定義し、その中にコンストラクターやメソッドを記述します。
コンストラクターはnewキーワードでインスタンスを作成する際に自動的に実行される特別なメソッドです。以下の例では、最もシンプルなクラスの定義方法を示しています。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name}が鳴いています`);
}
}
※出力結果は何も表示されません。インスタンス作成時にコンストラクターが実行されます
class Cat {
constructor(name, color) {
this.name = name;
this.color = color;
}
introduce() {
return `私は${this.color}の${this.name}です`;
}
}
const myCat = new Cat("ミケ", "三毛");
console.log(myCat.introduce());
出力結果
私は三毛のミケです
実用例
ここからは、Classの具体的な使用方法を実践的なコード例とともに詳しく解説していきます。各サンプルコードでは、動物をテーマにしたわかりやすい例を使って、クラスの機能を段階的に学んでいきます。基本的なクラス作成から始まり、継承、プライベートフィールド、静的メソッドなど、実際のプログラム開発で頻繁に使用される重要な機能まで幅広くカバーしています。
基本的なクラス
最も基本的なクラスの作成方法の例です。コンストラクターでプロパティを初期化し、メソッドで動作を定義します。
class Dog {
constructor(name, breed) {
this.name = name;
this.breed = breed;
}
bark() {
return `${this.name}がワンワンと吠えました`;
}
}
const myDog = new Dog("ポチ", "柴犬");
console.log(myDog.bark());
出力結果
ポチがワンワンと吠えました
コンストラクターを使った初期化
コンストラクターでは複数のプロパティを設定でき、デフォルト値も指定可能です。適切な初期化により安全なインスタンス作成ができます。インスタンス生成時の第二引数に「undefined」を入力すると、speciesのデフォルト値である「不明」が出力されます。
class Bird {
constructor(name, species = "不明", canFly = true) {
this.name = name;
this.species = species;
this.canFly = canFly;
}
getInfo() {
return `${this.name}は${this.species}で、飛行能力：${this.canFly ? "あり" : "なし"}`;
}
}
const penguin = new Bird("ペン太", "ペンギン", false);
console.log(penguin.getInfo());
出力結果
ペン太はペンギンで、飛行能力：なし
メソッドの定義と使用
クラス内でメソッドを定義することで、インスタンスごとに異なる動作を実現できます。メソッド内ではthisキーワードでプロパティにアクセスします。
class Fish {
constructor(name, habitat) {
this.name = name;
this.habitat = habitat;
}
swim() {
return `${this.name}が${this.habitat}を泳いでいます`;
}
dive(depth) {
return `${this.name}が${depth}mの深さまで潜りました`;
}
}
const goldfish = new Fish("キンちゃん", "金魚鉢");
console.log(goldfish.swim());
console.log(goldfish.dive(2));
出力結果
キンちゃんが金魚鉢を泳いでいます
キンちゃんが2mの深さまで潜りました
プロパティのアクセス制御
プロパティの値を取得・設定する際の制御方法の例です。直接アクセスを制限することで、データの整合性を保つことができます。以下のケースでは年齢にマイナス値による不正な値が直接代入されない様にsetterを設けてアクセスの制御を行っています。
class Rabbit {
constructor(name, age) {
this.name = name;
this._age = age; // プライベート風プロパティ
}
getAge() {
return this._age;
}
setAge(newAge) {
if (newAge > 0) {
this._age = newAge;
}
}
hop() {
return `${this.name}がピョンピョン跳ねています`;
}
}
const bunny = new Rabbit("ミミ", 2);
console.log(bunny.hop());
出力結果
ミミがピョンピョン跳ねています
静的メソッドの活用
staticキーワードで定義されたメソッドは、インスタンスを作成せずにクラス名で直接呼び出せます。ユーティリティ機能に適しています。
class Lion {
constructor(name, pride) {
this.name = name;
this.pride = pride;
}
static getSpeciesInfo() {
return "ライオンは百獣の王と呼ばれています";
}
roar() {
return `${this.name}がガオーと吠えました`;
}
}
console.log(Lion.getSpeciesInfo());
const simba = new Lion("シンバ", "プライドロック");
console.log(simba.roar());
出力結果
ライオンは百獣の王と呼ばれています
シンバがガオーと吠えました
継承を使ったクラス拡張
extendsキーワードを使って既存のクラスを拡張できます。親クラスの機能を引き継ぎながら、新しい機能を追加することが可能です。
class Mammal {
constructor(name) {
this.name = name;
this.type = "哺乳類";
}
breathe() {
return `${this.name}が呼吸しています`;
}
}
class Elephant extends Mammal {
trumpet() {
return `${this.name}がパオーンと鳴きました`;
}
}
const dumbo = new Elephant("ダンボ");
console.log(dumbo.breathe());
console.log(dumbo.trumpet());
出力結果
ダンボが呼吸しています
ダンボがパオーンと鳴きました
ゲッターとセッターの実装
get/setキーワードを使用してプロパティのように扱えるメソッドを定義できます。値の検証や計算処理を透過的に実行できます。
class Horse {
constructor(name, speed) {
this.name = name;
this._speed = speed;
}
get speed() {
return `${this._speed} km/h`;
}
set speed(newSpeed) {
if (newSpeed >= 0) {
this._speed = newSpeed;
}
}
gallop() {
return `${this.name}が駆けています`;
}
}
const stallion = new Horse("サンダー", 60);
console.log(stallion.speed);
出力結果
60 km/h
プライベートフィールドの使用
#を先頭に付けることで真のプライベートフィールドを作成できます。外部からは一切アクセスできない完全に隔離されたデータです。試しにconsole.log(bengal.patrol())の下にconsole.log(bengal.#markTerritory())を追記して出力結果を確認してみて下さい。エラーが表示されるはずです。
class Tiger {
#territory;
constructor(name, territory) {
this.name = name;
this.#territory = territory;
}
#markTerritory() {
return `縄張りをマーキングしています`;
}
patrol() {
return `${this.name}が${this.#territory}を見回っています`;
}
}
const bengal = new Tiger("ベンガル", "ジャングル");
console.log(bengal.patrol());
出力結果
ベンガルがジャングルを見回っています
まとめ
Classはプログラム開発において欠かせない重要な機能として位置づけられています。オブジェクト指向プログラミングの概念を実現することで、より構造化された保守性の高いコードが書けるようになります。基本的な構文から継承、プライベートフィールドまでさまざまな機能を理解することで、効率的なプログラム設計が可能になります。
Classの活躍する場面
- ウェブアプリケーションのコンポーネント設計において再利用可能な部品作成
- ゲーム開発でのキャラクターやアイテムの管理システム構築
- データベース操作やAPI通信を行うモデルクラスの実装
重要なポイント
- constructorメソッドによる適切な初期化処理の実装が安全性向上の鍵
- 継承機能を活用することでコードの重複を避け開発効率を大幅改善
- プライベートフィールドでデータの整合性とセキュリティを確保
これらの知識を身につけることで、JavaScriptプログラミングのスキルが格段に向上し、より複雑で実用的なアプリケーション開発に取り組むことができるようになります。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ
