TypeScriptとクラス構文（ES6）との整合性と拡張方法をやさしく解説
生徒
「TypeScriptでもJavaScriptみたいにクラスって使えるんですか？」
先生
「使えますよ。TypeScriptのクラスは、ES6のクラス構文をそのまま土台にしています」
生徒
「じゃあ、JavaScriptを知らなくても大丈夫ですか？」
先生
「大丈夫です。まずはクラスの考え方から、ゆっくり確認していきましょう」
1. クラスとは何か？プログラミング未経験でもわかる説明
クラスとは、「ものの設計図」のような存在です。たとえば、たい焼きを作るときの型を思い浮かべてください。 型そのものは食べられませんが、その型を使うことで、同じ形のたい焼きを何個も作れます。 この「型」がクラスで、「実際にできあがったたい焼き」がインスタンスと呼ばれるものです。
TypeScriptのクラス構文は、ES6（JavaScriptの新しい書き方）で追加されたクラス構文と完全に整合性があります。 つまり、JavaScriptのクラスを学んでおくと、TypeScriptでも同じ感覚で使えるということです。
2. ES6のクラス構文をTypeScriptで使う基本例
まずは、ES6のクラス構文をそのまま使ったTypeScriptの基本例を見てみましょう。 難しい文法に見えるかもしれませんが、「中に情報と動きをまとめている」と考えると理解しやすくなります。
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
greet(): void {
console.log("こんにちは、" + this.name + "です");
}
}
const user = new Person("たろう");
user.greet();
こんにちは、たろうです
classはクラスを定義するためのキーワードです。
constructorは「初期設定をする場所」で、クラスから新しいデータを作るときに自動で呼ばれます。
3. TypeScriptがES6クラスを拡張しているポイント
TypeScriptは、ES6のクラス構文に型という仕組みを追加しています。 型とは、「この箱には何が入るのか」をあらかじめ決めておくルールのようなものです。 これにより、間違った使い方をコンピュータが事前に教えてくれます。
上の例では、name: stringと書かれています。
これは「nameには文字だけが入る」と約束している状態です。
数字を入れようとすると、エラーとして教えてくれるため、ミスに気づきやすくなります。
4. アクセス修飾子で安全にクラスを使う
TypeScriptでは、クラスの中身をどこまで公開するかを決められます。 これをアクセス修飾子と呼びます。 難しい言葉ですが、「見せていい情報かどうかの仕切り」と考えると理解しやすいです。
class Account {
private balance: number = 0;
deposit(amount: number): void {
this.balance += amount;
}
getBalance(): number {
return this.balance;
}
}
privateが付いた変数は、クラスの外から直接触れません。
これにより、意図しない使われ方を防ぎ、安全なプログラムを書けるようになります。
5. クラスの継承で機能を広げる
ES6とTypeScriptでは、継承という仕組みを使えます。 継承とは、「元の設計図をもとに、少しだけ機能を追加した新しい設計図を作る」ことです。 たとえば、普通の人クラスをもとに、学生クラスを作るようなイメージです。
class Student extends Person {
study(): void {
console.log(this.name + "は勉強しています");
}
}
extendsを使うことで、元のクラスの機能を引き継ぎつつ、新しい動きを追加できます。
これはES6のクラス構文と完全に同じ書き方です。
6. TypeScriptとES6クラスを使うメリット
TypeScriptとES6クラス構文を組み合わせることで、コードが読みやすくなり、整理もしやすくなります。 特に初心者の方にとっては、「関係するものを一か所にまとめられる」点が大きなメリットです。
また、型チェックのおかげで、実行する前にミスに気づけるため、 プログラミングが初めてでも安心してコードを書き進められます。
