TypeScriptで理解するclass構文(基本編)
対象
- JavaScriptの基本的な書き方を理解している
- Typescriptの基本的な書き方を理解している
- classの存在自体は知っているがあまりなじみがない。(私のような方)
JavaScriptにおけるクラスとは？
classはいわゆるオブジェクト指向プログラミング(OOP:Object Oriented Programming)と呼ばれる考え方に基づくもので現実にあることをコードで表現する事だそうです。
クラスというのはある事柄についての共通の部分をひとまとまりにした設計図のようなもの。この設計図であるクラスをもとにそれぞれの仕様を変更して１つ１つオリジナルの物をつくっていく。それがインスタンスというものになります。
このクラスとインスタンスという物を理解することが第一歩となります。
クラスはプロパティ(データ)とメソッド(処理)を持つことができます。
図のようにnameを出力するメソッドは共通としてclassが持ち、各インスタンスがそれぞれ違うプロパティ(name)を持っています。
そもそもclassを使う理由は？
理解しやすくするためにtwitterを想像してみましょう。
twitterでは色んな情報が流れてきますが、名前やアイコンなどのレイアウトは全て共通です。しかし投稿したアカウントやアイコン、投稿内容などは全く違うモノが生成されています。これら全てをひとつづつ作成しているのではなく、共通部分をclassとして作成してそれぞれ変更が加わる部分を独自に持ったインスタンスが多数存在しているわけです。そうすることで簡略化であったり思わぬエラーが発生するなどの不具合が生じる可能性が少なくなります。
早速書いてみる。
class Fruit {
name:string; //プロパティ
constructor(n:string) {
this.name = n;
} //初期化
callName(this: Fruit) {
console.log('フルーツの名前',this.name);
} //メソッド このオブジェクトのnameを出力する。
}
//インスタンス作成。
const apple = new Fruit("りんご"); //constructorの引数であるn(name)が入る
//インスタンスのメソッドを使用する。
apple.callName() //メソッドが呼ばれこのインスタンスのname(りんご)が出力される。
まずclass名を付け、classを作成します。頭文字を大文字にするのが習わしです。
今回は果物に関してのクラスを作成したかったのでFruitとしました。
classの中ではプロパティの定義、constructor関数の実行(初期化)、メソッドの定義が行われています。順番はどうでもいいです。
プロパティとしてname
コンストラクター関数を実行してこのオブジェクトのプロパティnameを実行時の引数nにするという意味になります。この時の引数はインスタンス作成時に入れる事になります。
メソッドとしてこのオブジェクトのnameを出力する。callName(this:Fruit)のthis.Fruitはthisが指し示しているのはFruitオブジェクトであることをTypeScriptが厳密にチェックするために指定していますが、なくても動きます。間違った使い方をしようとするとコンパイル時にエラーを出してくれるので分かりやすくなります。
classが完成したらインスタンスを作成します。インスタンスはnew [class]で作成しています。
今回はnameとしてりんごを持ちたかったのでこのようにしました。
apple.callName()でappleインスタンスが持つメソッドを使用すると
フルーツの名前 りんご
が出力されることになります。
同様にインスタンスを複数作ってみましょう。
const apple = new Fruit("りんご");
const orange = new Fruit("みかん");
const peach = new Fruit("もも");
apple.callName();
orange.callName();
peach.callName();
フルーツの名前 りんご
フルーツの名前 みかん
フルーツの名前 もも
が出力されます。
classについて
今回はとても簡単な例を挙げました。classはプロパティとして何を持つか、初期化したときに何を受け取るか、メソッドで何をするのか。まさに設計図のようなものです。
もっとたくさんの使い方があるのですが、先ずは基本的なクラスとインスタンスをしっかり理解していきましょう。
Discussion