第12回 クラスの利用TypeScriptで学ぶJavaScript入門(1/6 ページ)

プログラミング初心者向けのTypeScript入門連載。最終回はいよいよクラスの利用。クラスの基本や重要な考え方を詳しく解説する。TypeScriptでプログラミングへの理解を一歩深めよう。連載完結。

» 2015年07月16日 05時00分 公開
[羽山博]
TypeScriptで学ぶJavaScript入門
Insider.NET

 

「TypeScriptで学ぶJavaScript入門」のインデックス

連載目次

 前回は、TypeScriptの関数について、オプションの引数やオーバーロードなど、詳細な利用方法を見た。今回は、クラスを取り扱う。クラスの作り方、情報の隠蔽(いんぺい)、継承など、基本的な書き方と考え方を見ていく。

まずはオブジェクトについて知る

 プログラミングとは、要するに「世界にあるさまざまな物事を記述すること」と考えられる。仕事を効率化するとか、ゲームを楽しむといった目的は異なるかもしれないが、現実の世界や仮想的な世界をどう表現するか、ということ取りも直さずプログラミングだといっても過言ではない。そのために使う道具がプログラミング言語なわけだが、これまでに見てきた方法では、ちょっと不便なところがある。

 例えば、ペットの健康管理のプログラムを作るために「猫」という動物を表したいとき、これまでの知識を使うなら、以下のように、体長とか体重を表す変数を宣言することになる。ここでは、体長にlength、体重にweightという変数名を付けてみよう。

var length: number;
var weight: number;

変数を使って猫を表す(TypeScript)
猫の体長と体重を表す変数を宣言した。だが、これではひと目見ただけでは猫には見えない。

 健康管理ではなく、図鑑を作りたいとかゲームを作りたいといった目的であれば、異なる変数を宣言する必要があるが、いずれにせよ、これでは猫だということが分からない。むしろ、「猫というものには、身長と体重がある」というように、日常の感覚と同じように表す方が自然である。

図1 変数とオブジェクトのイメージ 図1 変数とオブジェクトのイメージ
左の図のようにばらばらに変数が宣言されていると、まるで猫っぽくないが、右の図のように猫の属性(体長や体重)をまとめてやれば、現実の猫を目的に合わせてそのまま表現できる。

 図を見れば、身長と体重をひとまとめにして「これは猫だ」と、まとめて表していることが分かる。このように、ある目的に従っていくつかの変数や関数をまとめたものを、単なる変数と区別してオブジェクトと呼ぶ(ここでは、変数をまとめただけだが、関数を含めることもできる)。

 JavaScriptでは、簡単な書き方でオブジェクトを作成できる。ただし、初めて学ぶ人にとっては、かえってTypeScriptのクラスの理解を妨げるかもしれないので、掲載はしておくが、さらっと読み飛ばしてもらって構わない。

var myCat = new Object();  // (1)
myCat.length = 45.0;  // (2)
myCat.weight = 4.0;  // (3)

myCatオブジェクトを作って、lengthプロパティとweightプロパティを設定する(JavaScript)
(1)でオブジェクトを作り、変数myCatで参照できるようにする。(2)(3)ではlengthプロパティとweightプロパティに値を代入している。プロパティはオブジェクトに含まれる変数(の値)と考えてよい。

 このコードを見れば、変数だけを使っていた場合に比べて、これは猫だ、ということが確かに分かりやすい。しかし、変数myCatが参照しているのは、汎用的に使われるObject型のオブジェクトであり、他のオブジェクトと区別せずに使うこともできてしまう。

 例えば、変数myDogの参照(他の目的で使うオブジェクトの参照)を代入できる。また、自分で好きなプロパティを作り、値を代入できることも分かる。これは、一見便利なようだが、思わぬ誤りを引き起こす原因にもなる。例えば「weight」のつづりを「Weight」のように大文字で始めたり、「wieght」のように間違って記述したりすると、別の新しいプロパティが作成されてしまう。

クラスを定義するには

 TypeScriptでは、より厳密、かつ柔軟にオブジェクトが取り扱えるようになっている。そのために使われるのがクラスである。クラスとは、個々のオブジェクトではなく、オブジェクトのひな型とでもいうべきものである。

 猫の例でいえば、「猫クラス」とは「一般的な猫」つまり、「猫ってこういうものだよ」という記述と考えていい。それに対して、個々の猫は猫クラスを基に作る。その個々のオブジェクトはインスタンス(実体)と呼ばれる。簡単にまとめると以下の図のようになる。

図2 オブジェクト、クラス、インスタンスの関係 図2 オブジェクト、クラス、インスタンスの関係
TypeScriptではクラスを使って、オブジェクトを柔軟に、分かりやすく扱えるようになっている。プログラミング言語によっては、インスタンスのことをオブジェクトと呼んでいる場合もある。

 とはいえ、これでは抽象的過ぎてピンとこない人が多いかもしれない。そこで、実際にクラスを定義し、インスタンスを作り、インスタンスを利用するという流れを一つずつ追いかけていき、この考え方を理解できるようにしよう。

 では、猫クラスを定義しよう。図1の猫(Cat)をそのままコードにしたようなイメージで書ける。

class Cat {
  length: number;
  weight: number;
}

クラスを使って猫を表す(TypeScript)
猫の身長と体重を表す変数を宣言し、猫クラスにまとめる。その際、変数の宣言に使っていたvarは書かなくていい。

 これが、私たちの「初めてのクラス」である。変数heightと変数weightを含むCatクラスを定義したということが簡単に見て取れるだろう。要するに、これまでと同じように変数を一通り宣言し(ただし、varは不要)、クラス名を使って一括りにしてやればよい。

 なお、クラスの中に含まれる変数はプロパティと呼ばれ、関数はメソッドと呼ばれる。メソッドについては後述するが、プロパティとメソッドを合わせてクラスのメンバーと呼ぶ。では、続けてこのクラスの利用方法を見ていこう。

       1|2|3|4|5|6 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。