【JavaScript】クラスを作ろう【基本講座】

JavaScriptはオブジェクト指向言語です。そのためクラスの概念があります。クラスを使うことで散らかっていた変数がスッキリとまとまり使いやすくなります。また、再利用などいろいろ便利なのでぜひマスターしましょう。

クラスの基本

クラスのの定義とプロパティの設定

クラスの定義の仕方から学んでいきましょう。
class 【クラス名】と記述して｛｝でブロックを囲います。
クラス名はどのような名前でもいいのですが、どのようなクラスか分かるような名前を付ける方が、後々のためにもいいと思います。

そして、コンストラクタなどプロパティの設定をしていきます。
まずは、簡単なクラスの構造を書いてみましょう。

class HogeHoge {
   constructor(id, name, password) {
      this.id = -1;
      this.name = "";
      this.password = ""
   }
}

class HogeHoge {

constructor(id, name, password) {

this.id = -1;

this.name = "";

this.password = ""

}

constructorブロック内には、以下のようにプロパティ設定をすることが決まっています。

this.【プロパティ名】= 初期値;

thisは自分自身のオブジェクトを指します。

また、constructor()に引数を取ることもできます。引数をとれば、オブジェクトを生成した時に値を代入することができます。

オブジェクトの生成方法

クラスを定義したら、それを使うためにはどうしたらいいのでしょうか？

オブジェクトを生成することで、クラス内のプロパティを使うことができます。

let hoge = new HogeHoge();

hoge.id = 1;
hoge.name = "tester";
hoge.password = "abc123"

let hoge = new HogeHoge();

hoge.id = 1;

hoge.name = "tester";

hoge.password = "abc123"

オブジェクトの生成もイデオムのごとく覚えておきましょう。
そして各プロパティ名に「.」でつなげばよいのです。

よくクラスはクッキーの型という表現をされますが、このオブジェクトの生成をもって、クッキーの実態を作るというイメージを持てばよいわけです。

先ほども触れましたが、コンストラクタに引数をつければ、HogeHoge()にリテラルを入れることもできます。

メソッドについて

クラス内では、コンストラクタ以外、記述できないのかというとそうではありません。クラス内で処理をすることもできます。それをメソッドと言います。
プロパティとメソッドを合わせて、メンバと言います。
メソッドはちょうど関数を書く感じでクラス内に記述します。

class HogeHoge {
   constructor(id, name, password) {
      this.id = -1;
      this.name = "";
      this.password = ""
   }

   printID() {
      console.log(this.id + "は" + this.name + "さん")
   }
}

class HogeHoge {

constructor(id, name, password) {

this.id = -1;

this.name = "";

this.password = ""

}

printID() {

console.log(this.id + "は" + this.name + "さん")

}

ただプロパティ名を表示するだけのメソッドですが、このような感じで記述できます。関数と同じですね。

JavaScriptおすすめ書籍

JavaScriptの入門書は、「これから学ぶ～」が分かりやすいです。その次に「Good Parts」をやることをおススメします。これは、JavaScriptのテクニック的な参考書で実践に使えます。他、有名なサイの本もありますが、これは、そこまで必須ではないかもしれません。「The Good Parts」で良いかなと思える感じです。主に初学者用にチョイスしました。良かったら読んで見てください。