JavaScriptにて使うクラスについて、自分用のメモとしてまとめてみました！
参考になれば幸いです。
目次
【解説】JavaScriptのクラスの使い方【基本】
JavaScriptのクラスの基本的な使い方がこちら↓
①：基本的な書き方
②：コンストラクタを定義
③：インスタンスを生成
順に解説してきます。
クラスの基本的な書き方がこちら。
classから始まり、クラス名は大文字から始まる事が多いです。
class クラス名 {
メソッド() {}
メソッド() {}
}基本的に省略記法のメソッドのみ書くことができます。
class Fruit {
testFun() {
//処理を書く
}
}実はクラスの中で使える特別なメソッドがあります。
それがコンストラクタです。
class クラス名 {
constructor() {
}
メソッド() {}
メソッド() {}
}コンストラクタはインスタンス化したとき（newで呼び出したとき）に呼び出される関数となります。
thisとかの設定が可能だよ。
class Fruit {
constructor(name, color) {
this.name = name;
this.color = color;
}
testFun() {
}
}クラスで定義したものを使用するために、インスタンスを生成します。
ようは複製して使うという感じですね。
class クラス名 {
constructor() {
}
メソッド() {}
メソッド() {}
}
const 変数名 = new クラス名();書き方は「new クラス名()」と記述します。
ここで生成したときに、先述したコンストラクタのメソッドが呼び出されるということですね。
実際にインスタンス生成して、使ってみた例がこちら。
class Fruit {
constructor(name, color) {
this.name = name;
this.color = color;
}
testFun() {
return `この果物の名前は${this.name}で、色は${this.color}です。`
}
}
const fruit01 = new Fruit('もも', 'ピンク');
console.log(fruit01.testFun()); //この果物の名前はももで、色はピンク色です。
const fruit02 = new Fruit('りんご', '赤色');
console.log(fruit02.testFun()); //この果物の名前はりんごで、色は赤色です。こんな感じで定義したものに沿って、オブジェクトで使用できるので便利ですよね。
【解説】JavaScriptのクラスのその他の機能【フィールド／static／extends／super】
クラスにはその他にも色々な使える機能があります。
・フィールド
・プライベートフィールド
・staticキーワード
・Getter／Setterの設定
・extends
・super()
・.super
・コンポジション
順に解説してきます。
クラスにはプロパティのようなものも記述することが可能です。
それが「フィールド」といいます。
「〇〇 = 〇〇;」という書き方で、「this. ~」に追加されます。
class Fruit {
num = 10;
constructor(name, color) {
console.log(this.num, this.field); // 10 'フィールドです'
this.name = name;
this.color = color;
}
field = 'フィールドです';
}ちなみに「フィールド（上から順）」⇒「コンストラクタ」の順番で実行されるのが特徴です。
先述したフィールドには、クラスの外部から直接アクセスできないようにする「プライベートフィールド」が存在します。
使い方はフィールドに「#」をつけるだけです。
class Fruit {
#num = 10;
testFun() {
return `個数は${this.#num}です。`
}
}
console.log(fruit01.testFun()); //個数は10です。
console.log(fruit01.#num); //Uncaught SyntaxError: Private field '#num' ~~クラス内部からのみアクセス可能なのが特徴です。
「staticキーワード」を使えば、クラス自体のメソッドやフィールドを定義することができます。
class Fruit {
~~
static num = 10;
static testFun01() {
return 'テスト';
}
}
console.log(Fruit.testFun01()); //テスト
console.log(Fruit.num); //10ちなみにインスタンスしたものからは、アクセスすることができません。
クラスにてGetter／Setterを設定するのは簡単で、メソッド前にget／setをつけるだけで可能です。
class クラス名 {
constructor() {
}
get メソッド() {}
set メソッド(パラメータ) {}
}
【解説】JavaScriptのGetter・Setterの使い方 実はクラスは継承して使うことができます。
使い方は「extends」を用いて、下記のように書きます。
class 子クラス（継承される） extends 親クラス（継承元） {
}例とする書き方がこちら。
class Food {
constructor(name) {
this.name = name;
}
testFun() {
return `食べもの名前は${this.name}です。`;
}
}
class Fruit extends Food {}
const fruit01 = new Fruit('りんご');
console.log(fruit01.testFun()); // 食べもの名前はりんごです。FruitがFoodクラスを継承したため、Fruitをインスタンス化してFood内のメソッドを実行することができました。
継承したクラスでコンストラクタを使う場合は「super()」を書く必要があります。
「super()」は親クラスのコンストラクタ関数を示します。
class Food {
constructor(name) {
this.name = name;
}
}
class Fruit extends Food {
constructor(name) {
super(name);
}
}子クラスの「constructor」と「super」のパラメータにnameを記述して引き継いでいます。
例となる書き方がこちら。
class Food {
constructor(name) {
this.name = name;
}
}
class Fruit extends Food {
constructor(name,num) {
super(name);
this.num = num;
}
testFun() {
return `果物の名前は${this.name}で、個数は${this.num}です。`
}
}
const fruit01 = new Fruit('みかん',10);
console.log(fruit01.testFun()); //果物の名前はみかんで、個数は10です。引き継ぐときはsuper()を使い、新たなthis.をつけたい場合は通常通り記述します。
ただ「super()」⇒「this.」の順番で記述する必要があるので注意です。
継承したクラスで親クラスのメソッドを引き継ぎつつ、拡張したいときは「super.」を使えば可能です。
class Food {
testFun() {
return `この食べ物は`;
}
}
class Fruit extends Food {
testFun() {
const superTest = super.testFun();
return `${superTest}果物です。`;
}
}
const fruit01 = new Fruit();
console.log(fruit01.testFun()); //この食べ物は果物です。【解説】JavaScriptのクラスの使い方【フィールド／static／extends／super】：まとめ
- classから始まり、クラス名は大文字から始まる事が多い
- コンストラクタはインスタンス化時に実行される関数
- インスタンス化は「new クラス名()」でする
JavaScriptのクラスを使う時はためしてみてね！
