【TypeScript】staticっていったい何なんだ？？

takabee

TypeScriptの勉強でシングルトンを学んだときにstaticが出てきたので備忘録として書いておきます。

まず「シングルトン」とは、あるクラスのインスタンスが必ず1つのみしか生成できないようにすること。

シングルトンもstaticもべつにTypeScript特有の概念ではないんですが、学んどいて損はないってことで実際にシングルトン作りながらstaticも理解しちゃおうという魂胆です。

ネコ大先生

この記事は【約3分】で読めるニャ！

staticとは？

classを作ったら、普通は変数とかメソッドを呼び出すのにインスタンス作ってから呼び出しますよね？

staticは「インスタンス化しなくてもクラス自体から呼び出せる」ことを意味します。

static変数といったらクラス自体から呼び出せる変数、staticメソッドといったらクラス自体から呼び出せるメソッドのことです。

サンプルコードでも出してみましょう。まず普通のバージョンから。

class Person {
  printHello() {
    console.log('Hello!');
  }
}
const user = new Person();
user.printHello(); //出力：Hello!

Personクラスからuserインスタンス作ってから、printHello関数を呼び出してます。

逆にstatic使ったバージョン。

class Person {
  static printHello() {
    console.log('Hello!');
  }
}
Person.printHello(); //出力：Hello!

Personクラス作って、そのままprintHello関数（staticメソッド）を呼び出しちゃってます。

こんな感じでインスタンス化しなくても、バンバン使えちゃうわけですね。

どういうときにstatic使うの？使い方も教えて！

じゃあstaticどこで使うの？てことですが、これこそ初めに出てきたシングルトンを作るのに必須なんです。

まずは普通に同じクラスからインスタンス作ろうとしたら、いくらでも簡単に作れますよね。

普通にインスタンス作った時のサンプルコード

class Person {
  printHello() {
    console.log('Hello!');
  }
}
const user1 = new Person(); //こんな感じで、
const user2 = new Person(); //いくらでも、
const user3 = new Person(); //作れちゃいます！

でも同じクラスからインスタンスを「1つしか」作れないような設計にしたいときは、どんな感じで実装すればいいのか？

手順としては以下のかんたん2ステップ！

イメージしにくいかもなのでサンプルコード出してステップごとに解説しますね。

STEP1. constructorにprivateつけて、クラス外からインスタンスを作れなくしちゃう。

まずclass作って、constructorにprivateをつけちゃいます。

これでクラス外部からはインスタンス作れなくしてやったぜへっへっへ。

class Person {
  private constructor() {} //constructorに対してprivateを指定。
}

const user = new Person(); //「インスタンス作れませんよ」エラー。

STEP2. インスタンスを格納するprivateでstaticな変数を作って、インスタンスを返すstaticメソッドを作る

次にprivateでstaticな変数を作ります。

class Person {
  private static instance;
  private constructor() {}
}

privateをつけたのは、クラス外から直接instanceにアクセスするようなバカげた真似されるのを防ぐためです。

class Person {
  private static instance;
  private constructor() {}
}

Person.instance; //「クラス外から直接instance変数にアクセスできないよ」エラー。

最後にインスタンスを返すgetInstanceメソッドを追加すれば完成です。メソッド名はお任せで。

class Person {
  private static instance;
  private constructor() {}

  static getInstance() {
    if(!this.instance) { //this.instanceがない場合はインスタンスを作成。すでにある場合はそのままreturn。
      this.instance = new Person();
    }
    return this.instance //staticメソッド内ではthisはクラス自体を指すので、this.instanceはPerson.instance
  }
}

いくら外部からgetInstanceメソッドを呼びまくっても、呼ばれるのはいつも同じインスタンスです。

Person.getInstance(); //どれも、
Person.getInstance(); //同じ、
Person.getInstance(); //インスタンス！/

これでシングルトン完成です。

staticまとめ

以上がstaticの解説と、staticを使ったシングルトンの作成方法でした。

staticを使うか使わないかは場面それぞれで考えればいいので、いったんstaticの挙動だけ理解しておけばよさそうです。

自分で3回くらいコード書けば5分くらいで理解できると思うので、5分手を動かしてみましょう！

takabee

ではまた次の記事でお会いしましょう！

ネコ大先生

最後まで読んでくれてありがとうニャ！