メンバ変数とインスタンス変数って何が違うの？

同じです。

JavaScriptのgetter, setterを解説

この記事は、次の記事の続きです。
https://unico417.hatenablog.jp/entry/js/classes

クラスの復習

クラスは、構造のこと。
インスタンスは、その構造をしたデータのことでしたね。

// クラス
class Nafuda{
    
    constructor(){
        this.name = undefined;
        this.grade = undefined;
        this.classroom = undefined;
    }
}

// インスタンス
const nafuda = new Nafuda();

インスタンス変数に値を入れた時の処理

nafudaインスタンスの、学年や、組を書き換えることを想定します。

grade, classroomには数値が来るべきですよね。 文字列が来るべきではないです。

そのチェック機能を実装することを想定してみます。

setter

インスタンス変数に値を設定するときに、呼ばれるのはsetterといいます。
こんな場合ですね。

nafuda.grade = 2;

この場合、インスタンス内のthis.grade の値は直接書き変わってしまいます。
ここにsetterを実装します。

class Nafuda{
    
    constructor(){
        this.name = undefined;
        this._grade = undefined;
        this.classroom = undefined;
    }
    
    set grade(value){
        this._grade = value;
    }
}

メソッドを作るように記述しますが、その前にsetというのが付いています。
これがsetterです。

さらに、this.gradeがthis._gradeになっています。 これはgradeという名前はsetterによって使われてしまったためです。

ちなみに、慣習的に_から始まる変数名には直接アクセスしないことになっています。

その慣習からいくと、this._gradeの値を変えることしかできなくなってしまいました。
値を読み取る時の処理は、getterといいます。

getter

インスタンス変数から値を読み取る時に、呼ばれるのはgetterといいます。
次のようなときですね。

const value = nafuda.grade;

この時に「内部的に数値で管理しているけど、文字列で返してあげたい」などの機能を付けることができるのが、getterです。

まあ、setterのもらう版です。

class Nafuda{
    
    constructor(){
        this.name = undefined;
        this._grade = undefined;
        this.classroom = undefined;
    }
    
    set grade(value){
        this._grade = value;
    }
    
    get grade(){
        return this._grade;
    }
}

setterと同様、getが付きました。
returnされたものが、そのインスタンス変数を読み取った結果になります。

値を入れる時に数値だけ受け付けたい

本来の目的に戻ると、「学年」「組」は数値のみの変更を付け付けたいですね。
ついでに、1以上 6以下に限定します。

すると、処理は次の通りになります。

class Nafuda{
    
    constructor(){
        this.name = undefined;
        this._grade = undefined;
        this.classroom = undefined;
    }
    
    set grade(value){

        // 値が 整数でない -> エラー
        if (!Number.isInteger(value)){
            throw new Error('学年は 整数にしてください。');
        }

        // 値が、1～6の間でない -> エラー
        if (value < 1 || 6 < value){
            throw new Error('学年は 1～6の間にしてください。');
        }

        this._grade = value;
    }

    get grade(){
        return this._grade;
    }
}

急にNumber.isIntegerが出てきましたが、昨日は「整数ならTrue、じゃなければFalse」というだけです。
throw new Error()は、エラーを起こしてその時点でプログラムが止まります。

こんな風に、getter、setterを使うことで、インスタンス変数を読み書きするときに機能を付けることができます。

関数とメソッドって何が違うの？

処理をまとめたものは、関数です。

クラスの一機能として実装された関数は、メソッドです。

JavaScriptのクラスメソッドを解説

この記事は、次の記事の続きです。
https://unico417.hatenablog.jp/entry/js/classes

クラスの復習

クラスは、構造のこと。
インスタンスは、その構造をしたデータのことでしたね。

// クラス
class Nafuda{
    
    constructor(){
        this.name = undefined;
        this.grade = undefined;
        this.classroom = undefined;
    }
}

// インスタンス
const nafuda = new Nafuda();

クラスというのは、変数・関数をまとめて一つにしたものです。

クラスに機能をつける

クラスには、変数をまとめるほかに関数をまとめることもできます。 その場合は、constructor と同じように、別の関数名と引数を記述します。

class Nafuda{
    
    constructor(){
        this.name = undefined;
        this.grade = undefined;
        this.classroom = undefined;
    }
    
    // .changeName メソッドが追加された
    changeName(name){
        this.name = name;
    }
}

.changeName()というメソッドが追加されました。 中身は、this.nameを引数からもらったnameで上書きしています。

このメソッドは、インスタンスから呼び出すことができます。

// インスタンスを作成
const nafuda = new Nafuda();
nafuda.name = '鈴木 太郎';
nafuda.grade = 2;
nafuda.classroom = 3;

// chnageName メソッドを実行
nafuda.changeName('西田 花子');

// この時点での nafuda.name は '西田 花子'

nafuda.changeNameが実行された際の引数が、nafudaインスタンスのchangeName()のnameに代入されて、実行されます。
動きは、関数と同じですね。

JavaScript 講座一覧

JavaScript 基礎

• 変数 - var, let, const
• データ - Number, String
• データ構造 - Array, Object
• 関数 - function
• クラス - class
  • （おまけ）インスタンスの初期化
  • （おまけ）クラスメソッド
  • （おまけ）getterとsetter

JavaScriptのインスタンスの初期化を解説

この記事は、次の記事の続きです。
https://unico417.hatenablog.jp/entry/js/classes

クラスの復習

クラスは、構造のこと。
インスタンスは、その構造をしたデータのことでしたね。

// クラス
class Nafuda{
    
    constructor(){
        this.name = undefined;
        this.grade = undefined;
        this.classroom = undefined;
    }
}

// インスタンス
const nafuda = new Nafuda();

クラスというのは、変数・関数をまとめて一つにしたものです。

初期値を決めたい

constructorは、インスタンスを作成するときに、中身の構造を作成するために実行されるんでしたね。
前回の作成方法では、初期値はなくundefinedと記載していました。

でも、名札を作る時をイメージしてください。
誰が（名前）、何年、何組かなんてもう決まっていますよね。

そんな場合には、インスタンスを作る時にもうデータをもらうことができます。

初期値をもらう

インスタンスを作成する時には、constructorの()の中にもらったデータを入れる変数を作成します。

今回は、次の順番でデータが来ることを想定します。

1. 名前
2. 学年
3. 組

この順番で、constructorの()の中に変数を作成していきます。

class Nafuda{
    
    // もらった三つのデータを左から入れる
    constructor(value1, value2, value3){
        
        // もらったデータをインスタンスに保持する
        this.name = value1;
        this.grade = value2;
        this.classroom = value3;
    }
}

// インスタンス作成時に、データを渡す
// 渡すデータは、()の中に , 区切りで記述する
const suzuki = new Nafuda('鈴木 太郎', 2, 3);

この時、this.name、this.grade、this.classroomに付くthisは、作成されるインスタンス自身を表します。

インスタンス変数とローカル変数

this.で始まる変数は、インスタンス内にデータが保持されます。

逆に言うと、value1、value2、value3は、constructorの中の処理が終了後に破棄されてしまいます。

このように、インスタンス内部の変数をインスタンス変数といいます。
一定区間内で使う変数をローカル変数といいます。

ローカル変数とインスタンス変数は別物です。
なので、変数名を次の通りに書き換えても大丈夫です。

class Nafuda{
    
    // 変数名が valueX ではなくなった
    constructor(name, grade, classroom){
        
        // もらったデータをインスタンスに保持する
        this.name = name;
        this.grade = grade;
        this.classroom = classroom;
    }
}

// インスタンス作成時に、データを渡す
// 渡すデータは、()の中に , 区切りで記述する
const suzuki = new Nafuda('鈴木 太郎', 2, 3);

JavaScriptのクラスを解説

急いでいる方は･･･

• クラスは、変数・関数が一つにまとまったもの。
• クラスはデータの構造を表す。
• インスタンスは、その構造をしているデータが入ったもの。

JavaScript で使う クラス

クラスというのは、変数・関数をまとめて一つにしたものです。

クラスのイメージ

クラスのイメージは、名札をイメージすると簡単です。

名札は、次の３つの情報がある構造をしています。

• 名前
• 学年
• 組

このように、中身が違うけど、同じ構造の情報を複数扱う場合に良く用いられます。

クラスを作る

上記の名札と同じ構造のクラスを作ってみます。

ここで注意したいのが、クラスはあくまで構造を定義するものであり、データを持たせた実態は、別で作る必要があります。
詳しくは、次のインスタンスを作るの項で紹介します。

class Nafuda{
    
    constructor(){
        this.name = undefined;
        this.grade = undefined;
        this.classroom = undefined;
    }
}

1. class 名前{}で、クラスを作成します。

2. その中に、constructor(){}を書きます。
   constructorとは、このクラスの構造でデータを作成するときに、最初に呼び出される関数です。

3. constructorの中で、this.変数名と定義します。
   作成したのは、名札の情報として必要なname、grade、classroomです。
   ここで使われているundefinedは、「変数名は作っておくけど、中身は無いよ」というデータです。

これで、Nafudaという構造の内部には、name、grade、classroomという変数があるよ、ということを定義できました。

インスタンスを作る

先ほど作成した構造に、実際にデータを入れたものを作成します。
次の二人のデータを作ることを考えてみます。

• 一人目
  • 名前：　鈴木 太郎くん
  • 学年：　二年生
  • 組：　三組
• 二人目
  • 名前：　西田 花子さん
  • 学年：　四年生
  • 組：　一組

これらを、データが入った実体にしてみます。

// 一人目
const suzuki = new Nafuda();    // 名札 を作る
suzuki.name = '鈴木 太郎';      // 名前 を入れる
suzuki.grade = 2;               // 学年 を入れる
suzuki.classroom = 3;           // 組 を入れる

// 二人目
const nishida = new Nafuda();
nishida.name = '西田 花子';
nishida.grade = 4;
nishida.classroom = 1;

1. インスタンスを作成する

   new クラス名()で、クラスの構造をしたデータを作成します。
   これをインスタンスと呼びます。

   このインスタンスが作成されるときに、constructorが実行されて、構造が作成されます。
   作成されたインスタンスを、変数suzuki、nishidaに格納しています。

2. データを代入する

   作成されたインスタンスに、データを格納していきます。
   インスタンス内のデータは、.（ピリオド）で区切って、中身を読み書きできます。

   作成されたインスタンスは、それぞれ別物です。
   おなじNafudaクラスからインスタンスを作っていますが、一つ目のインスタンスと二つめのインスタンスは別のデータなので、読み書きしても双方に影響はありません。