カプセル化とは、何かを隔離しておくことです。カプセルの中に何かを入れても、外界はそれを手に入れることができない。カプセル化は、複雑なコードを管理しやすくするため、オブジェクト指向プログラミングにおいて重要な概念です。

なぜ授業が必要なのか

例えば、何十万行ものコードがある動物園のアプリケーションがあるとします。さて、アプリケーション全体の中心にあるanimalという非常に重要なオブジェクトがあるとします。プログラムのすべての部分がanimalで、このオブジェクトにアクセスしたり変更したりできるとしたらどうでしょう？

無制限のアクセスは、多くの混乱を引き起こす可能性があります。子豚が動物を使ってパラメータを定義する場合、その動物が子豚のプロパティを持つことになります。さて、ヤギが自分のパラメータを動物で定義することにしたとする。

JavaScript/TypeScriptでは、以下のようになります。

var animal = {name: "piglet", legs: 4, color: "pink", decoration: "snout"}animal.name = "goat"animal.decoration = "horns"

気がつけば、ピンクのヤギや角の生えた子豚がいる。実行中のコードをTypeScriptサンドボックスで表示し、実行をクリックすると、コンソール出力が表示されます。

もしあなたがコードを学んでいて、ふれあい動物園を作る以上のインスピレーションが欲しいなら、さらに10のプロジェクトを紹介します。

コードベースは非常に巨大なので、子羊のラクダの首とアヒルの子の毛を与えるコードを見つけるのに、何百時間もかかることがあります。欠陥のあるコードを見つけたら、オブジェクト同士が干渉しないように、さらにスパゲッティ・コードを書かなければならない。もっといい方法があるはずだ。

オーバーラップ問題の解決策は、オブジェクトをクラスで定義することである。コードのどの部分でも、クラス定義に基づいたオブジェクトを作成することができます。一意のオブジェクトを作成することをインスタンス化と呼びます。作成された各オブジェクトが独自のプロパティを持つことを保証します。これらのオブジェクトは、偶然に干渉し合うことはありません。

クラスだけでは不十分で、オブジェクト変数もカプセル化する必要がある

そこで、それぞれの動物にターゲットを設定することにした。

class Animal { name: string; legs: number; color: string; decoration: string; c***tructor(name: string, legs: number, color: string, decoration: string) { this.name = name; this.legs = legs; this.color = color; this.decoration = decoration; }}

次に、動物のオブジェクトをいくつか作ってみましょう。

let babyDuck = new Animal("baby duck", 2, "yellow", "beak");let bunny = new Animal("bunny", 4, "gray", "floppy ears");

今までのコードで遊んでいました。

これで、変な突然変異を起こさずに、好きなだけ動物を追加できるようになりましたね。

ある夜、疲れたプログラマーがこの不気味なアプリの動物の一匹を編集するためにコードを書いたら、間違ってウサギを編集してしまったらどうなるでしょうか？

bunny.color = "black";bunny.legs = 8;

クモのようなウサギはクールではありません。 これは、コードをオブジェクトでラップしていないのと同じくらい悪いことです。

まず必要なのは、オブジェクトをプライベート化することです。つまり、変数を作成した後に、直接編集することはありません。以下のコードは、プライベート変数を変更するとエラーが発生することを示しています。

しかし、可変性が必要なのは確かで、そこで有能な2軍選手の出番となる。

ゲッターとセッターは、制御された方法で変数にアクセスし、変更するための関数です。設定者は、変更可能なデータに制限を設けることができる。また、ゲッターは取得したデータを変更することができます。

これは、足の数を制御するために get と set 関数を使用したクラスの様子です。

class Animal { private _name: string; private _legs: number; private _color: string; private _decoration: string; c***tructor(name: string, legs: number, color: string, decoration: string) { this._name = name; this._legs = legs; this._color = color; this._decoration = decoration; } get legs() { return this._legs; } set legs(legCount: number) { if(legCount > 1 && legCount < 5) { this._legs = legCount; } }}

カプセル化の学習とグローバル変数の回避

これが最終的なコードです。学習したことを再確認し、理解を深めます。

• 残りの変数にゲッターとセッターを追加します。
• 動物の名前をスパンタグとして返す: llama
• 装飾された変数を変更し、複数の装飾を可能にする。この変更を反映するために、適切なゲッターとセッターを作成する。

もし、あなたのコードをよく動く機械のように動かしたいのであれば、カプセル化を使用することが絶対に必要です。グローバル変数は絶対に避けてください。オブジェクト間で変数を共有する必要がある場合は、TypeScriptのドキュメントでクラス/静的変数の作成方法を確認してください。