本記事ではJavaScriptのクラスの書き方・使い方について解説しています。
クラスは多くのプログラミング言語で使われていたのですが、JavaScriptでは導入されておらず使用することができませんでした。しかしES6からクラスが導入されたので、他のプログラミングを使っていた人もJavaScriptで開発がしやすくなりました。
また、JavaScriptだけ触ってきた人もクラスの使い方を覚えることで他のプログラミング言語を学習する際に理解のスピードが格段に上がるので頑張って習得しましょう！
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
クラスの書き方
クラス宣言
クラスを使うためには関数と同じように宣言する必要があります。クラスを宣言する時の書き方は以下のとおりです。
class クラス名{
/* 後に追加していきます */
}クラス名は関数などと混ざらないように基本的に頭文字を大文字にします。例えば人の情報を扱うクラス(user)の場合はclass Userにします。
constructorで初期値を設定
constructorはインスタンス化(new クラス名();)した時に渡された値を引数に受け取り、その値を初期値として設定します。このconstructorはデフォルトで用意されているメソッドでクラス内で使用することができます。
class Animal{
constructor(name,height,weight){
this.name = name;
this.height = height;
this.weight = weight;
}
}インスタンスの生成
constructorで初期値を設定したら、インスタンスを生成して初期値を渡しましょう。「new クラス名」でインスタンスを生成することができます。
const dog = new Animal(dog,60,15);
const cat = new Animal(dog,45,5);メソッドを定義する
インスタンスされたものに対して何かしらの処理をするメソッドを定義してみましょう。
先ほどconstructorで初期値を設定したので、その初期値が正しく設定されているかの確認も兼ねて値をコンソールで表示させます。
class Animal {
constructor(name, height, weight) {
this.name = name;
this.height = height;
this.weight = weight;
}
info() {
console.log(
`動物：${this.name},体長：${this.height}cm,体重：${this.weight}kg`
);
}
}
const dog = new Animal("イヌ", 60, 15);
const cat = new Animal("ネコ", 45, 5);
dog.info(); // -> 動物：イヌ,体長：60cm,体重：15kg
cat.info(); // -> 動物：ネコ,体長：45cm,体重：5kg正しく名前・体長・体重が表示されていることが確認できました。上記のコードでは、インスタンスされた変数(オブジェクト)に対してメソッドを実行させる処理を記述しましたが、インスタンスされたものに対して必ず実行させたい処理がある場合、constructor内にメソッド名を記述して強制実行させることも可能です。
class Animal {
constructor(name, height, weight) {
this.name = name;
this.height = height;
this.weight = weight;
this.info(); // -> インスタンスが生成された時にinfo()を実行
}
info() {
console.log(
`動物：${this.name},体長：${this.height}cm,体重：${this.weight}kg`
);
}
}
const dog = new Animal("イヌ", 60, 15);
const cat = new Animal("ネコ", 45, 5);クラス継承
クラス継承とは、新しいクラスを作成する時に継承元のプロパティやメソッドなどを呼び出すことができます。
クラス継承を行うには、クラス宣言をする時に「新しいクラス名 extends 継承元クラス名」の形で記述します。続いて、super(スーパー)と呼ばれるものを使用します。
class Animal {
constructor(name, height, weight) {
this.name = name;
this.height = height;
this.weight = weight;
}
}
class JapaneseAnimal extends Animal { // -> Animalのクラスを継承
constructor(name, height, weight, habitat) {
super(name, height, weight); // -> Animalのプロパティを継承
this.habitat = habitat;
}
info() {
console.log(
`動物：${this.name},体長：${this.height}m,体重：${this.weight}kg,生息地：${this.habitat}`
);
}
}
const kiji = new JapaneseAnimal("キジ", 0.8, 1, "日本");
kiji.info(); // -> 動物：キジ,体長：0.8m,体重：1kg,生息地：日本今回の例では登場していませんが、継承元のメソッドを呼び出す場合「super.継承元のメソッド」で呼び出すことができます。
