注目キーワード
  1. DMM WEBCAMP

Javascript【クラス】とは?初心者向け

  • 2020年5月17日
  • 2020年5月20日
  • Javascript
  • 20回
  • 0件

Javascriptの「クラス」
JavaScript(ES6)から実装されました。

「クラス」かぁ・・・。
覚えるの面倒だな・・・。

私も説明するのが面倒です。
なんちゃって。
Javascriptの「クラス」
1つ1つ丁寧に説明していきます。

Javascript「クラス」ってなに?

以下のように記述します。

class クラス名{ }

始まりにclassを記述します。これは決まった型です。

クラス名は自分できます。
決め事として「クラス名」の頭文字は大文字にします。
後で見て、これだクラスだと判断がつくようにです。
例)Animal Man

Javascript「クラス」何に使うの?

Javascriptでたくさんのデータを管理しなければならないとしましょう。
何千、何万人という個人のデータを管理しなければならないとしましょう。

しかも個人のデータというのは、色々な種類があります。
その人の身長、体重、年齢、職業、家族構成などなどです。
毎回毎回、そのデータを作成するのは面倒です。

ざっくり言うと、class クラス名{ }ではデータのひな型を作成することが出来ます。重要なことが伝わりますでしょう。

class クラス名{ }
後ろには何の記号もつきません。

Javascript「クラス」に中身を設定

Javascript「クラス」に中身を設定します。

クラスの中にデータを設定する。これは決まった形があります。
constructor(){ }
constructor意味:建設者

class Human {

 constructor() {

 }

}

実際にコードを書いてみましょう。

class Human{

 constructor(){

  console.log("おはよう");

 }

}

クラスはコードを書いただけでは実行はされません。

関数もそうでした。
関数の場合は「関数の呼び出し」をかく必要がありました。


const introduction = function() {

 console.log(“おはよう”);

};

introduction();

クラスの場合は、クラス独自のインスタンスを記述する必要があります。

Javascript「クラス」のインスタンスとは?

先ほどのコードなら、

class Human{

 constructor() {

  console.log(“おはよう”);

 }

}

new Human();

new Human();がインスタンスになります。
そして今回なら、Humanインスタンスと呼ばれます。

「new クラス名()」
newは決まった単語です。

「class」を使うなら「new」をつくる。
セットで考えて下さい。

クラスはインスタンスがあることで初めて処理が実行されます。

クラスの中にデータを入れる

class Human{

 constructor(){

  データを入れる。

 }

}

new Human();

class Human{

 constructor(){

  this.name = “太郎”;

 }

}

new Human();

const human = new Human();

console.log(human.name);

実際にコードを書いてみましょう

class Human{

 constructor(){

  this.name = "太郎";

 }

}


new Human();

const human = new Human();

console.log(human.name);

ディスプレイに

太郎

が、出力されます。

補足

new Human();

const human = new Human();

console.log(human.name);

↓説明のため2行にわけました。慣れてきたら1行でかいたほうがシンプルです。

const human = new Human();

console.log(human.name);

クラスにデータを入れるには、constructor(コンストラクタ)の中で「this.プロパティ = 値」と記述します。
name太郎がクラスHumanのデータに入ります。

console.log(human.name);
そしてname内のデータの指定方法です。
「human.name」
プロパティを指定します。

現段階でクラスの便利さのイメージがわかないと思います。
どう便利なのか考えてみましょう。

Javascript「クラス」便利なの?

class Human{

 constructor(name,age){

  this.name = name;
  this.name = age;
  this.hobby = hobby;

 }

}

const human = new Human("太郎",25,"読書");

console.log(`${human.name}です。`);
console.log(`${human.age}歳です。`);
console.log(`趣味は${human.age}です。`);

引数をかえれば出力される記述を変えることができます。

Javascriptのクラス「メソッド」とは?

メソッドとは、そのインスタンスの「動作」のようなものです。
「メソッド名() { }」とすることでメソッドは定義できます。
メソッド名は自分でつけます。

メソッドは関数と似たようなもので、中括弧「{ }」の中にそのメソッドで行いたい処理を記述します。

メソッドは「そのクラス」から生成したインスタンスに対して呼び出します。
インスタンス.メソッド名( )」でメソッドを呼び出して処理を実行します。

先ほどのコードを使って実際に記述してみます。

class Human{

 constructor(name,age){

  this.name = name;
  this.name = age;
  this.hobby = hobby;

 }


 greet(){

  console.log("こんにちは")

 }

}


const human = new Human("太郎",25,"読書");

console.log(`${human.name}です。`);
console.log(`${human.age}歳です。`);
console.log(`趣味は${human.age}です。`);


human.greet();

メソッド内で値を使う場合

メソッド内でインスタンスの値を使用するには「this」という値を使います。
this.プロパティ名」記述します。

class Human{

 constructor(name,age){

   this.name = name;
   this.name = age;
   this.hobby = hobby;

 }

 greet(){

   console.log(`はじめまして${this.name}です。`)

 }

}


const human = new Human("太郎",25,"読書");

console.log(`${human.name}です。`);
console.log(`${human.age}歳です。`);
console.log(`趣味は${human.age}です。`);


human.greet();

Javascriptのクラス「継承」とは?

すでにある「クラス」をもとにして、新しく「クラス」を作成する方法のことです。全ての機能を引き継ぐことができます。

クラスHuman から、新しいクラスManに機能を引き継ぐとします。
また、「継承」では元となるクラスを親クラス(今回はHumanクラス)、
新しく作成するクラスを子クラス(今回はManクラス)と呼びます。

継承するコードの記述です。

class Man extends Human {

}

※extends意味:拡張する 拡大する

class Human {
 constructor(name, age) {
 this.name = name;
 this.age = age;
}

greet() {
 this.greet();
 console.log(名前は${this.name}です);
 console.log(${this.age}歳です);
 }
}

class Man extends Human {
}

「Manクラス」はHumanクラスのすべての機能を引き継いでいます。
greeメソッドを使用することができます。
「class Man」の「new Man」を作成します。

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  
  greet() {
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}


class Man extends Human {
}

const man = new Man("次郎",23);

man.greet();

ディスプレイには

名前は次郎です
23歳です

が、出力されます。