クラスを作ろう! (3/5)
作成:2016-08-06 08:57
更新:2016-08-06 08:57
更新:2016-08-06 08:57
■プロパティのアクセスについて
JavaScriptで本格開発をする場合の弱点として「変数の利用範囲が細かく設定できない」ということがあります。JavaScriptでは、変数は「関数外のものはどこでも全部使える(グローバル変数)、関数内のものはその関数内のどこでも全部使える」という、おおまかな2つの適用範囲しかありません。
TypeScriptでは、クラスに用意されるメンバ(プロパティやメソッド)がどの範囲で利用できるか、細かに制御できるようになっています。これは、以下のような修飾子を使って設定します。
public――どこからでもアクセス可能
private――クラス内でのみアクセス可能
protected――クラス内およびサブクラスからアクセス可能
これらは、変数名の前につけて利用します。たとえば、どこからでもアクセス可能なテキスト型プロパティabcならば、こんな感じになります。
プロパティは、単に利用範囲を設定するだけでなく、「どのようにアクセスされるか」を制御する必要もあります。たとえば、「整数の値を保管するプロパティ」があったとき、小数点以下の実数を設定されては困ります。
このような場合のために、「アクセサ」と呼ばれるものがTypeScriptには用意されています。これは、プロパティの値を取得したり設定したりする際の処理を用意するためのもので、以下のように記述します。
get, setの後に、プロパティ名の関数を記述したものと考えていいでしょう。getは引数なし、返値あり。setは引数あり、返値なし。という関数になります。
では、実際にこれらを利用した簡単なサンプルをあげておきましょう。これは先ほど作成したMyObjectクラスを更に拡張したものです。
ここでは、private age:numberというプロパティを用意してあります。これが、ageの値を保管する場所です。が、private指定してあるので外部からは呼び出されません。そしてこれとは別に、ageプロパティがsetter/getterを利用して用意されています。
このアクセサを利用する場合、「設定された値は、privateなプロパティに保管しておかないといけない」という点に注意したください。アクセサを用意すれば値は自動的に保管されるわけではありません。補間のためには、別途privateなプロパティを考える必要があります。
TypeScriptでは、クラスに用意されるメンバ(プロパティやメソッド)がどの範囲で利用できるか、細かに制御できるようになっています。これは、以下のような修飾子を使って設定します。
public――どこからでもアクセス可能
private――クラス内でのみアクセス可能
protected――クラス内およびサブクラスからアクセス可能
これらは、変数名の前につけて利用します。たとえば、どこからでもアクセス可能なテキスト型プロパティabcならば、こんな感じになります。
public abc:string;
■アクセサについて
プロパティは、単に利用範囲を設定するだけでなく、「どのようにアクセスされるか」を制御する必要もあります。たとえば、「整数の値を保管するプロパティ」があったとき、小数点以下の実数を設定されては困ります。
このような場合のために、「アクセサ」と呼ばれるものがTypeScriptには用意されています。これは、プロパティの値を取得したり設定したりする際の処理を用意するためのもので、以下のように記述します。
get プロパティ名(): 型名 { ……処理……}
set プロパティ名( 引数 ) {……処理……}
get, setの後に、プロパティ名の関数を記述したものと考えていいでしょう。getは引数なし、返値あり。setは引数あり、返値なし。という関数になります。
では、実際にこれらを利用した簡単なサンプルをあげておきましょう。これは先ほど作成したMyObjectクラスを更に拡張したものです。
ここでは、private age:numberというプロパティを用意してあります。これが、ageの値を保管する場所です。が、private指定してあるので外部からは呼び出されません。そしてこれとは別に、ageプロパティがsetter/getterを利用して用意されています。
このアクセサを利用する場合、「設定された値は、privateなプロパティに保管しておかないといけない」という点に注意したください。アクセサを用意すれば値は自動的に保管されるわけではありません。補間のためには、別途privateなプロパティを考える必要があります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
class MyObject { name:string; private _age:number; constructor(n:string){ this.name = n; } get age():number { return this._age; } set age(n:number) { this._age = n < 0 ? 0 : n; } print():string { let msg:string = '<h1>My name is ' + this.name + ". I'm." + this.age + " years old.</h1>" return msg; } } var obj: MyObject = new MyObject("Taro"); obj.age = 30; document.write(obj.print());
※関連コンテンツ