0
0

More than 3 years have passed since last update.

Javascriptの復習(4)

Last updated at Posted at 2020-06-10

この記事について

本記事はプログラミング初学者がアウトプットの場として書いたものです。初学者以外の方にとっては退屈な記事となると思いますのでスルーしてください。Rubyを学習した後なのでRubyと比較しつつ書いていこうと思います。

クラス

 オブジェクトを何度も作成する時、毎回オブジェクトを作成するコードを書いていると大変です。似たようなオブジェクトを効率よく作成する方法としてクラスがあります。クラスはオブジェクトを生成する方法をまとめておくもので、ここに値を与える事でオブジェクトを生成できます。クラスを設計図として例える説明が多いですが、私個人としてはオーダー用紙のようなイメージの方がしっくりきます(オーダー用紙の記入内容で作成されるものが少し変わってくるようなイメージ)。書き方こそ違えどRubyのクラスとほぼ同じです

 クラスは以下のように書きます。

script.js

class クラス名 {

}

クラスから実際にオブジェクトを生成する時は「newクラス名()」と書きます。
クラスから生成したオブジェクトはインスタンスと呼ばれます。

script.js

class Animal {

}
//new Animal();でインスタンスを生成して定数animalに代入している
const animal = new Animal();

では、実際にオーダー用紙のフォームとなるクラスの中身を書いていきます。

コンストラクタ

クラスにはコンストラクタと呼ばれる機能が用意されています。コンストラクタはインスタンスを生成する時に実行する処理を書くための場所で、クラス内に書きます。

script.js

class Animal {
//クラス内に書く
  constructor(){
  }
}

コンストラクタ内に書いた処理はインスタンスを生成した時に行われます

script.js

class Animal {
//クラス内に書く
  constructor(){
    console.log("インスタンスが生成されました。");
  }
}

const animal = new Animal();
//上のコードでインスタンスが生成されたら、コンソール上で"インスタンスが生成されました。"と表示される

コンストラクタ内で「this.プロパティ = 値」と書く事でインスタンス生成時にプロパティと値を追加できます

script.js

class Animal {
  constructor(){
    this.species = "ネコ";
  }
}

const animal = new Animal();
//"インスタンス名.プロパティ"とする事で、コンストラクタ内で設定したプロパティの値を引用できます
//引用する時のクラスの名前は小文字
console.log(animal.species);
//コンソール上で"ネコ"と表示される

この書き方ですと、どれだけ"new Animal();"と書いても全てプロパティ"species"の値が"ネコ"のインスタンスしか生成されないです。コンストラクタには引数を渡す事ができるので、引数を利用します。

script.js

class Animal {
  constructor(species){
    this.species = species;
  }
}
//"イヌ"を引数として渡す事で"species"の値が"イヌ"となります
const animal = new Animal("イヌ");

メソッド

コンストラクタはメソッドに加える情報だとすると、メソッドはインスタンスに加える処理です。
以下のようにクラス内に書きます。

script.js

class Animal {
//クラス内に書く
  constructor(){
  }
//この中に処理を書く
  メソッド名(){
  }
}

こんな感じで書きます。

script.js

class Animal {
//クラス内に書く
  constructor(species){
    this.species = species;
  }
//この中に処理を書く
  infomation(){
    console.log(`${this.species}はペットとして人気です`);
  }
}

const animal = new Animal("イヌ");

メソッドはインスタンスから呼び出します。

script.js

class Animal {
//クラス内に書く
  constructor(species){
    this.species = species;
  }
//この中に処理を書く
  infomation(){
    console.log(`${this.species}はペットとして人気です`);
  }
}

const animal = new Animal("イヌ");
animal.infomation();

メソッド内で他のメソッドを呼び出す事ができます。

script.js

class Animal {
//クラス内に書く
  constructor(species){
    this.species = species;
  }
//この中に処理を書く
  infomation(){
    console.log(`${this.species}はペットとして人気です`);
  }
  price(){
//上にあるinfomationメソッドを実行
    this.infomation();
    console.log("10万円以上します");
  }
}

const animal = new Animal("イヌ");
animal.infomation();

継承

Rubyと同様に継承という概念があります。継承しているクラスは継承元のクラスの情報を使えます。

script.js
//Animalクラスを継承したProfileクラスを作成
class Profile extends Animal {
}
//継承しているのでAnimalクラスのメソッドを使用できる
profile.infomation();

 オーバーライド

親クラスと子クラスの両方で同じ名前のメソッドが存在する時に以下のようにメソッドを呼び出すと子クラスのメソッドが呼び出されます。これはオーバーライドという現象で子クラスが親クラスを上書きしていることを指します。

script.js

class Animal {
  infomation(){
  }
}

class Profile extends Animal {
//こっちのメソッドが呼び出される。
  infomation(){
  }
}

profile.infomation();

コンストラクタも同様にオーバーライドさせる事ができます。

script.js

class Animal {
  constructor(species){
    this.species = species;
  }
}

class Profile extends Animal {
  constructor(species, name){
//super(引数)と書く事で親クラスのコンストラクタを実行する
    super(species);
//こちらは子クラス独自のコンストラクタ
    this.name = name;
  }
}

const pet = new Profile("イヌ", "ポチ");

感想

クラスやメソッド、継承は既にRubyでもやったのですんなり理解できたが、Rubyの書き方と混同してしまいそうである。
今はprogateで学習しているだけなので、実装の方にも挑戦したい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0