【TypeScript】3つのアクセス修飾子について簡単に解説【public/private/protected】

今回は3つのアクセス修飾子「public」「private」「protected」について簡単に解説したいと思います。これらを使いこなすことでより安全なプログラムを書くことができるようになります。ぜひこの機会にマスターしましょう。

大規模開発の際はアクセスを限定的にすることで安全なプログラムを書くことができるね。

この記事の内容

アクセス修飾子とは
public
private
protected
まとめ
参考

アクセス修飾子とは

アクセス修飾子とは、メンバのアクセス範囲を限定的にすることができる機能です。

アクセス修飾子にはpublic/private/protectedの3つがあり、それぞれのアクセス修飾子を使い分けることでより安全なプログラムを書くことができます。

メンバとはクラス内に定義されている変数やメソッドの総称です。

以下のコードでは、変数fruitsnameとsay()メソッドがFruitsクラスのメンバということになります。

class Fruits {
  fruitsname: string;

  constructor(fruitsname: string) {
    this.fruitsname = fruitsname;
  }

  say(): void {
    console.log("私は" + this.fruitsname + "を食べたい")；
  }
}

public

publicはクラス外からのアクセスを許可します。つまり、全てのアクセスを許可するということと同じ意味合いになります。

またデフォルトはpublicになっているため、アクセス修飾子の記述を省略した場合はpublicと認識される点に注意しておきましょう。

では、publicを省略しない場合の記述を見ていきます。

class Fruits {
  public fruitsname: string;

  constructor(fruitsname: string) {
    this.fruitsname = fruitsname;
  }

  public say(): void {
    console.log("私は" + this.fruitsname + "を食べたい")；
  }
}

【TypeScript】基本となるTypeScriptのクラス宣言について解説TypeScriptのクラス宣言について簡単に解説しています。型を定義するということ以外、基本的にはJavaScriptと変わりませんが改めてみていきましょう。...

上記はFruitsクラスを定義したコードになります。そこにpublicな変数fruitsnameとメソッドsay()を定義しています。

このように記述することでクラス外からの呼び出しも可能になります。

publicを省略した記述は以下になります。

class Fruits {
  fruitsname: string;

  constructor(fruitsname: string) {
    this.fruitsname = fruitsname;
  }

  say(): void {
    console.log("私は" + this.fruitsname + "を食べたい")；
  }
}

private

privateはクラス内でのアクセスのみ許可します。

実際のコードで見てみましょう。以下はアクセス修飾子はpublicで定義しているため、クラス外部からの呼び出しに成功しています。

class Fruits {
  constructor(public fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this.fruitsname + "です。")
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite.fruitsname);
=> ぶどう

【TypeScript】ゲッター(getter)とセッター(setter)についての理解を深めるTypeScriptにおけるゲッター(getter)とセッター(setter)について解説しています。アクセス修飾子「privare」を付与した場合、外部から値を呼び出すことや取得することができなくなります。しかし、そういった時にゲッターとセッターを定義することで呼び出しと取得が可能になります。...

では、publicではなくprivate変数に修正してみましょう。すると以下のようなエラーが出力され、クラス外部からのアクセスができなくなっていますね。

class Fruits {
  constructor(private _fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this._fruitsname + "です。")
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite._fruitsname);
=> error TS2341: Property '_fruitsname' is private and only accessible within class 'Fruits'.

private変数は変数名の直前に「_」を付ける決まりがあります。

protected

protectedは継承されたクラス内でのみアクセスを許可します。

同様にコードで見ていきましょう。以下のように、Fruitsクラスを継承したAnotherFruitsクラスが定義されているとします。

class Fruits {
  constructor(private _fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this._fruitsname + "です。")
  }
}

class AnotherFruits extends Fruits {
  private _color: string;

  constructor(_fruitsname: string, _color: string) {
    super(_fruitsname);
    this._color = _color
  }

  say(): void {
    super.say();
    console.log("その色は" + this._color + "です。")
  }
}

【TypeScript】クラスの継承とその記述方法について初心者向けにまとめてみたTypeScriptのにおけるクラスの継承とその記述方法について解説しています。クラスの継承をうまく使うことで同じコードをいくつも書く必要がなく新しいクラスを定義することが可能です。クラスの継承はチーム開発をする際に特に重要な概念になってくるので、この機会に理解を深めていきましょう。...

Fruitsクラス内に定義されている「_fruitsname」はprivate変数であるため、以下のように継承クラス内で呼び出そうとしてもエラーになってしまいます。

class Fruits {
  ↓ _fruitsnameはprivate変数である
  constructor(private _fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this._fruitsname + "です。")
  }
}

class AnotherFruits extends Fruits {
  private _color: string;

  constructor(_fruitsname: string, _color: string) {
    super(_fruitsname);
    this._color = _color
  }

  say(): void {
    super.say();
    
    ↓ このように親クラスのprivate変数を呼び出そうとするがエラーになる。(error TS2341: Property '_fruitsname' is private and only accessible within class 'Fruits'.)
    console.log("本当に" + this._fruitsname + "が食べたい。")
    console.log("その色は" + this._color + "です。")
  }
}

「error TS2341: Property ‘_fruitsname’ is private and only accessible within class ‘Fruits’.」というエラーが出力されます。

ここで活躍するのがアクセス修飾子の「protected」です。前述した通り、protectedは継承されたクラス内でのみアクセスを許可するので、今回のケースでは使用することができます。

class Fruits {
  ↓ protectedに変更
  constructor(protected _fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this._fruitsname + "です。")
  }
}

class AnotherFruits extends Fruits {
  private _color: string;

  constructor(_fruitsname: string, _color: string) {
    super(_fruitsname);
    this._color = _color
  }

  say(): void {
    super.say();
    console.log("本当に" + this._fruitsname + "が食べたい。")
    console.log("その色は" + this._color + "です。")
  }
}