JavaScript超入門コース#13 クラス

はじめに

こんにちは。キノコードです。
「JavaScript超入門コース#13 クラス」について説明します。

クラスとは?

クラスにはインスタンスやコンストラクタなどの概念がでてきます。
私自身、プログラミングを勉強し始めたときに、これを理解するのに時間がかかりました。
私が何冊も書籍を読んで、こういう順番であれば理解しやすいというプロセスで説明します。
クラスを理解できた感動をみなさんにもお届けできればと思い、説明していきます。
まずクラスについて説明します。
クラスとは、「データ」と「処理」をまとめたものになります。
JavaScriptでは、「データ」のことをプロパティといい、「処理」のことをメソッドといいます。

プロパティとメソッド

プロパティは、クラス内で定義された変数のことです。
プロパティは、変数と同じように、数値や文字列を代入したり、参照したりすることができます。
プロパティと変数の違いは、クラスの外にあるかクラスの中にあるかの違いです。
次にメソッドについて説明します。
前のレッスンで関数は、いろいろな「処理」をまとめて1つにしたものと説明しました。
メソッドも関数と同じで、いろいろな「処理」をまとめて1つにしたものです。
簡単にいうと、メソッドは、クラス内に定義された関数です。
まとめると、プロパティはクラス内の変数、メソッドはクラス内の関数ということになります。

クラスの定義

クラスを作ることをクラスを定義すると言います。
このレッスンでどんなクラスを定義するか説明します。
前のレッスンでは関数を定義する方法は、関数を宣言する方法と関数式で作る方法があり、それを紹介しました。
クラスを定義する方法は、関数と同様にクラス宣言とクラス式があります。
まず、クラス宣言から説明します。
クラス名はStudentとします。
次に、数学と英語の点数の平均を計算するavgというメソッドを定義します。
コードを書いていきましょう

class Student {

    avg() {
        console.log((80 + 70) / 2);
    }
}

まずclassと書いて、次にクラス名を書きます。
今回はStudentというクラス名なので、Student。
クラス名の最初の文字は小文字でも定義はできますが、最初の文字を大文字するのは、JavaScriptの慣習となっています。
したがって、クラス名の最初の文字は大文字にしましょう。
波括弧を書いて改行です。
次にメソッドを定義していきます。
数学と英語の点数の平均を計算するメソッドです。
メソッドは関数と違い、functionは書きません。
したがって、メソッドの定義では最初にメソッド名を記述します。
平均を計算するので、平均という意味のaverageを省略して、avgというメソッド名にします。
次に丸括弧を記述します。引数がある場合は、丸括弧内に引数を記述します。
引数は、関数と同じで引数がなくてもよいです。
また、複数の引数を定義してもよいです
今回はメソッドに渡す引数がないので、引数は記述しません。
丸括弧の次は、波括弧。改行です。
波括弧の中に、数学が80点と、英語が70点を取れたとして、それらを足して2で割ります。
表示させるためにconsole.logでくくりましょう。
これで、メソッドを含めたクラスを定義することができました。

クラスの使い方

クラスを実際に使ってみたいと思いますが、クラスはこのままでは使うことができません。
クラスは、クラスから作られたインスタンスを変数に代入してから使います。
クラスは、インスタンスになって初めて使えるようになります。
コードを書いて、クラスの使い方をみていきましょう。

class Student {

  avg() {
    console.log((80 + 70) / 2);
  }
}

var a001 = new Student();
a001.avg();

数学が80点、英語が70点という点数は、aという学級の出席番号001番の人がとったとします。
変数名をa001とします。
イコールを書いて、new、クラス名、丸括弧、セミコロンを書きます。
これで、クラスを使えるようになりました。
クラスを使えるような状態にすることを「インスタンス化」といいます。
インスタンスとは、実体という意味です。
なので、インスタンス化とは、実体化という意味です。
つまり、インスタンス化とは、クラスから、インスタンスという実際に使える「モノ」を作ることをいいます。
変数にインスタンスを代入して、インスタンスとして使えるようになったa001は、これからa001インスタンスと呼ぶことにします。
次にメソッドの実行方法についてです。
a001にドットをつけて、メソッド名です。
丸括弧とセミコロンも忘れないでください。
実行してみます。
平均点の75点が表示されました。

引数ありメソッド

ここまでは、80点と70点を直接、メソッド内に記述していました。
これだと生徒が変わるごとにメソッドの書き換えが必要です。
引数で渡して計算できるようにしましょう。
そうすることで、クラスの書き換えは不要になり、クラスを使い回すことができます。

class Student {

  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.avg(80, 70);

クラス内に記述しているメソッドの1番目の引数をmathとします。
2番目の引数をenglishとします。
そのmathとenglishの引数を、console.logのところに記述します。
avgメソッドに80点と70点を渡して実行してみましょう。
75点となるはずです。
75が表示されました。

class Student {

  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.avg(30, 70);

メソッドに渡す引数を30点と70点にしてみましょう。
平均の50が表示されるはずです。
実行してみましょう。
50が表示されました。

プロパティ

class Student {

  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.name = "sato";
a001.avg(80, 70);

console.log(a001.name);

次にプロパティについてみていきましょう。
プロパティは、クラス内に定義された変数のことです。
a001にドット。プロパティを書いて、値を代入します。
値はsatoさんとしましょう。
これでプロパティの定義はおわりです。
console.logで表示させてみましょう。
実行してみましょう。
メソッドの結果の75とプロパティのsatoが表示されました。

class Student {

  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.name = "sato";
a001.avg(80, 70);

console.log(a001.name);
console.log(a001.gender);

仮に、性別という意味のgenderというまだ定義していないプロパティを表示させてみましょう。
定義していないので「undefined」と表示されます。
実行してみましょう。
「undefined」が表示されました。
このように未定義のプロパティは「undefined」が表示されます。

class Student {

  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.name = "sato";
a001.avg(80, 70);
console.log(a001.name);

var a002 = new Student();
console.log(a002.name);

また、a002というインスタンス名でインスタンス化をしたあとに、
nameのプロパティを表示させてみましょう。
実行してみましょう。
「undefined」が表示されました。
このようにプロパティは、インスタンスごとに存在します。
逆の言い方をすれば、インスタンスごとに、プロパティを定義しなければなりません。
つまり、インスタンスごとにプロパティが存在するので、新しいインスタンスを作るごとに、プロパティを定義する必要があります。
そのため、10個インスタンスを作ったとすると、インスタンスごとにプロパティを10個定義する記述をしなければなりません。
先ほどの例でいうと、「a001.name」のような記述をインスタンスごとに10個、記述しなければなりません。
その不便さを解消するものがコンストラクタです。
コンストラクタは、インスタンス化するときに呼び出されるメソッドのことです。
コンストラクタは、初期化メソッドともいいます。
初期化メソッドは、インスタンス化をすれば、必ず実行されるメソッドです。
そのため、あとから使うプロパティは、初期化メソッドで自動的に作っておけばよいのです。

コンストラクタ

class Student {
  constructor() {
    
  }
  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.name = "sato";
a001.avg(80, 70);
console.log(a001.name);

var a002 = new Student();
console.log(a002.name);

初期化メソッドの記述方法をみていきましょう。
まずconstructorと記述し、丸括弧の次に、波括弧。
これで初期化メソッドの記述は終わりです。

class Student {
  constructor() {
    this.name = "";
  }
  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.name = "sato";
a001.avg(80, 70);
console.log(a001.name);

var a002 = new Student();
console.log(a002.name);

佐藤さん、鈴木さんといったような名前を代入したいので、nameのプロパティを書きましょう。
波括弧の中に、this、ドット、nameを書きます。
thisというキーワードが出てきました。
thisと書くことで、thisにインスタンスが代入されます。
ここは難しい理屈なので、そういう仕組みになっているのだと思って覚えておきましょう。
ここでは、ダブルクオテーション2つで、空の値を代入させておきましょう。
では、インスタンス化をして、a001とa002のnameの中をみてみましょう。
avgメソッドの記述は消しておきます。

class Student {
  constructor() {
    this.name = "";
  }
  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.name = "sato";
console.log(a001.name);

var a002 = new Student();
a002.name = "tanaka";
console.log(a002.name);

a002にtanakaを代入してみましょう。
実行してみます。
satoとtanakaが表示されました。

class Student {
  constructor(name) {
    this.name = name;
  }
  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student();
a001.name = "sato";
console.log(a001.name);

var a002 = new Student();
a002.name = "tanaka";
console.log(a002.name);

プロパティは、インスタンス化と同時に代入することもできます。
初期化メソッドの第一引数にnameという引数を記述します。
ダブルクォーテーションで空を代入していたところに、nameを記述します。
イメージとしては、第一引数のnameを初期化メソッド内のnameが受けて、それをthis.nameに代入します。
では、a001にインスタンス化と同時に”sato”を渡してみましょう。
この記述(a001.name = “sato”;)は不要になります。
a002インスタンスにも”tanaka”を渡します。

class Student {
  constructor(name) {
    this.name = name;
  }
  avg(math, english) {
    console.log((math + english) / 2);
  }
}

var a001 = new Student("sato");
console.log(a001.name);

var a002 = new Student("tanaka");
console.log(a002.name);

表示させてみましょう。
satoさんとtanakaさんが表示されました。

クラス式

次に、クラス式でクラスを定義する方法を説明します。
変数を書いて、イコール。
class、波括弧を書きます。
クラス宣言でクラスを定義したときは、classの次にクラス名を書いていたと思います。
クラス式では、クラス名を省略することができます。
コンストラクタ、メソッドは、クラス宣言と同じで波括弧の中に書きます。
最後に、波括弧のあとにセミコロンをつけます。
クラス式の記述は以上です。
クラス宣言で使用したコードをクラス式に直してみましょう。

var Student = class {
  constructor(name) {
    this.name = name;
  }
  avg(math, english) {
    console.log((math + english) / 2);
  }
};

var a001 = new Student("sato");
console.log(a001.name);

var a002 = new Student("tanaka");
console.log(a002.name);

「class Student」の前に、変数Studentを書き、イコール。
「class Student」の「Student」を省略して、波括弧のあとにセミコロン。
これでクラス式になりました。
実行してみます。
satoさんとtanakaさんが表示されました。
以上がクラスの使い方です。
このクラスの便利なところはどんなところでしょうか?
クラスは一度、定義しておけば、あとからいくらでもインスタンスを作ることができます。
車を作る「設計図」がクラス、たい焼きを作る「金型」がクラスと表現したりもします。
もう1つ表現するなら、クラスは、パソコンで使うコピペです。
コピペでどんどんインスタンスを作ることができます。
もしクラスがなければ、生徒ひとりひとりのためにStudentクラスを書かなければいけないので面倒です。
しかしクラスがあるから、コピペのように各生徒のインスタンスを作ることができます。
クラスがあるから効率よくプログラミングすることができます。

KinoCode チャンネル

YouTubeで毎日動画配信しています。
動画は3分間なので、
 ・通勤時間
 ・お昼休み
 ・お手すきのとき
 ・寝る前
など手軽に視聴できます。
 
ちょっとしたインプットにどうぞ!
 
▼チャンネル登録はこちらからどうぞ。
【朝活もくもく会】
▼どんなもくもく会?
・平日5:30〜9:30、土日祝5:30〜9:30でやります。平日も休日も休まずやります。
・プログラミングを問わず、受験勉強、資格試験の勉強などなどペースメーカに活用ください。
・自宅で出来る「もくもく会」なので、パジャマのまま参加できます
▼ライブ配信の内容は?
・参加したら今日の目標をコメントをお願いします。
・終了5分前に私の成果報告をします。
・みなさんからも今日の成果についてチャットにて発表お願いできればと思います。