UnsplashのJason Ortegoが撮影した写真

はじめに

プログラミングを始めると、値を格納する「変数」と処理をまとめておける「関数」は必ず使うと思います。

しかし、変数や関数の量が増えてくると、グループ分けしたくなることもあるかと思います。

そこで活躍するのがクラスです。

クラスとは

まず、クラスとは何かについてご説明します。

　

プログラミングには、変数や関数がありますが、

大量の変数、関数を扱っているとだんだんと散らかってきて、いくつかの変数・関数をまとめておきたくなります。

この変数・関数をまとめる機能がクラスです。

　

参考ページ↓↓
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

クラスの定義方法は２種類ある

関数の定義方法に「関数式」、「関数宣言」があるのと同様に、

クラスの定義方法にも「クラス式」と「クラス宣言」の２つがあります。

　

今回は、よく使われる「クラス宣言」を使用します。

（私はクラス宣言しか使ったことが無く、クラス式が使われているのを見たことがありません。。）

クラスの使い方

クラス内に定義する変数をプロパティ、関数をメソッドと呼びます。

定義と呼び出しの概要

まずは、一般的な形でクラスの定義と使い方をご説明します。

■クラスの定義

クラスは以下のように定義します。

class クラス名{
  constructor(){
      ～プロパティの定義～
  }

  ～メソッドの定義～
}

　

■クラスを呼び出して使う

クラスを使うには「インスタンス化」が必要です。

なじみがないと不思議な感じがしますが、「クラスは変数に格納して使うんだな」ぐらいのイメージでとりあえずOKです。

let 変数名 = new クラス名();  //クラスをインスタンス化
変数名.プロパティ名 = 値;     //プロパティの呼び出し（値の再代入の例）
変数名.メソッド名();          //メソッドの呼び出し

定義と呼び出しの例

以下がクラスの定義と呼び出しの例です。

■クラスの定義

以下が、クラス定義の例です。クラス名は大文字で始めます。

class Sample{
  constructor(name, age){
    //プロパティの定義
    this.name = name;
    this.age = age;
  }

  //メソッドの定義
  sayhello(){
    console.log('hello' + this.name);
  }
}

「this.~」がプロパティで、上の例ではthis.nameプロパティとthis.ageプロパティを定義しています。

また、sayhello()メソッドを定義しています。

■クラスを呼び出して使う

let instance1 = new Sample('taro', 36);  //インスタンス化
instance1.name = 'taku';                 //プロパティの呼び出し（値の再代入の例）
instance1.sayhello();                    //メソッドの呼び出し

インスタンス化の際、「new クラス名(引数)」とすると、constructor()メソッドに引数を渡すことができます。

　

簡単にではありますが、できるだけシンプルにクラスをご紹介しました。

JavaScriptのクラスについては以上です。