カテゴリ: TypeScript 更新日: 2026/01/05

TypeScriptのクラス構文の基本と定義方法を徹底解説!初心者でもわかるオブジェクト指向入門

TypeScriptのクラス構文の基本と定義方法
TypeScriptのクラス構文の基本と定義方法

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptでクラスってよく聞きますけど、そもそもクラスって何なんですか?」

先生

「クラスは、プログラムで『設計図』のような役割を持つ仕組みです。人間に例えると、クラスが人間の設計図で、その設計図から作られる一人ひとりの人が『オブジェクト(実体)』なんです。」

生徒

「なるほど!つまりクラスを定義すると、そこから同じ仕組みを持ったオブジェクトをいくつでも作れるということですか?」

先生

「その通りです!では、TypeScriptでのクラス構文の基本と定義方法を実際に見てみましょう。」

1. クラスとは?初心者向けにイメージを理解しよう

1. クラスとは?初心者向けにイメージを理解しよう
1. クラスとは?初心者向けにイメージを理解しよう

TypeScriptのクラス(class)は、オブジェクト指向プログラミングの中心的な概念です。オブジェクト指向とは「現実世界の物や概念をプログラムとして表現する考え方」のことです。例えば「車」というクラスを作れば、その車の色や速度、走るという機能などをひとまとめにできます。そこから「赤い車」「青い車」など具体的な実体(オブジェクト)を作り出すことができるのです。

2. TypeScriptでクラスを定義する基本構文

2. TypeScriptでクラスを定義する基本構文
2. TypeScriptでクラスを定義する基本構文

TypeScriptでクラスを作るには、classキーワードを使います。クラスの中には「プロパティ(属性)」や「メソッド(機能)」を定義できます。以下はシンプルな例です。


class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`こんにちは、私は${this.name}で、${this.age}歳です。`);
    }
}

const taro = new Person("太郎", 20);
taro.greet();

この例では、Personというクラスを定義しました。constructorは特別なメソッドで、オブジェクトを作るときに自動的に呼び出されます。ここで名前や年齢を受け取り、それをクラスのプロパティに保存します。


こんにちは、私は太郎で、20歳です。

3. プロパティとメソッドの役割を理解しよう

3. プロパティとメソッドの役割を理解しよう
3. プロパティとメソッドの役割を理解しよう

プロパティとはオブジェクトの「情報」を表すものです。たとえば人間なら「名前」「年齢」が情報になります。
メソッドとはオブジェクトの「動作」を表すものです。人間でいえば「話す」「歩く」といった行動がメソッドにあたります。

プログラムの中では、このようにデータ(プロパティ)と処理(メソッド)をまとめて扱えるので、整理しやすく再利用しやすい仕組みになっています。

4. クラスからオブジェクトを作成する

4. クラスからオブジェクトを作成する
4. クラスからオブジェクトを作成する

クラスはあくまで「設計図」です。そこから実際に使える「オブジェクト」を作るには、newキーワードを使います。


const hanako = new Person("花子", 25);
hanako.greet();

こんにちは、私は花子で、25歳です。

このように同じクラスから複数のオブジェクトを作ることができます。つまり、設計図は1つでも、そこから「太郎」「花子」など個別の実体を自由に生み出せるわけです。

5. アクセス修飾子でクラスを安全に使う

5. アクセス修飾子でクラスを安全に使う
5. アクセス修飾子でクラスを安全に使う

TypeScriptのクラスではアクセス修飾子を使って、プロパティやメソッドの公開範囲を制御できます。

  • public:どこからでもアクセスできる(省略時はこれがデフォルト)。
  • private:クラスの内部からしかアクセスできない。
  • protected:クラス自身と継承した子クラスからアクセスできる。

class BankAccount {
    private balance: number;

    constructor(balance: number) {
        this.balance = balance;
    }

    deposit(amount: number) {
        this.balance += amount;
    }

    getBalance() {
        return this.balance;
    }
}

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500

この例ではbalanceprivateにしたので、外から直接書き換えることはできません。必ずdepositgetBalanceを通して操作する仕組みにすることで、安全にデータを扱えるようになります。

6. 実生活に例えて理解を深める

6. 実生活に例えて理解を深める
6. 実生活に例えて理解を深める

クラスを日常生活に置き換えると分かりやすいです。例えば「スマートフォン」というクラスを考えましょう。

  • プロパティ:色、モデル名、容量
  • メソッド:電話をかける、写真を撮る、音楽を再生する

同じ「スマートフォン」という設計図から、赤いスマホや黒いスマホなどを作ることができます。TypeScriptのクラスも全く同じイメージで動いています。

まとめ

まとめ
まとめ

TypeScriptのクラス構文は、初めて触れると少し難しく感じるかもしれませんが、実際には身近な物事と結びつけながら考えることで理解が一気に深まります。クラスは設計図であり、そこから生まれる実体であるオブジェクトが実際に動く存在であるという考え方は、多くのプログラミング学習者にとって理解を助ける大きなヒントになります。クラスの中にあるプロパティは情報を、メソッドは行動を表すという仕組みも、現実世界と対応させるととても自然に受け入れられます。特に、人間や車、スマートフォンなどの例を使えば、クラスの構造がどのように活用されるのかが明確になり、コードと現実世界が結びついて理解が進みやすくなります。

また、コンストラクタを使って初期値を設定し、オブジェクトごとに異なる値を持たせられるという概念も、初心者が最初に知っておくべき重要なポイントです。コンストラクタはオブジェクトが生まれる瞬間に呼び出される特別なメソッドであり、ここで適切な値を受け取り、プロパティに割り当てることで、オブジェクトごとに違った状態を持たせることができます。こうした仕組みを理解すると、クラスの設計がぐっと楽しくなり、自分の思い描く動きをプログラムとして形にする幅が広がります。

さらに、アクセス修飾子はクラスを安全に扱うために欠かせない仕組みです。特に、privateで内部の値を守り、外部から直接書き換えられないように制御する方法を身につけておくと、安全で壊れにくいプログラムを作る基礎が整います。クラスの内部にあるデータへどこからアクセスできるのかを慎重に考えることは、実際の開発現場でも非常に重要な習慣です。読み取り専用にしたい場合、変更を許したい場合、継承だけに許可したい場合など、使い分けを意識することで、設計力が自然と向上します。

そして、クラスから複数のオブジェクトを作り出して使い分けるという点は、TypeScriptの魅力のひとつです。同じクラスから複数の実体を生み出し、それらに異なる値を持たせて動かすという考え方は、オブジェクト指向の根本にある考えであり、さらに高度な継承やカプセル化といった概念へとつながっていきます。今回の内容をしっかり押さえておくことで、今後クラスを使った応用的なプログラムや、複雑なアプリケーション作成に挑戦する際の大きな支えになります。

サンプルプログラムで考え方を整理しよう

ここでは今回の学習内容をさらに深められるよう、クラスの基本構造やプロパティ、メソッド、アクセス修飾子をまとめて確認できるサンプルコードを紹介します。TypeScriptのクラスがどのように動くのか、自分の手で書き換えて試してみることで、理解がより確かなものになります。


class Smartphone {
    private model: string;
    private capacity: number;
    public color: string;

    constructor(model: string, capacity: number, color: string) {
        this.model = model;
        this.capacity = capacity;
        this.color = color;
    }

    describe() {
        console.log(`このスマートフォンは${this.model}で、容量は${this.capacity}GB、色は${this.color}です。`);
    }

    upgradeStorage(extra: number) {
        this.capacity += extra;
    }

    getInfo() {
        return this.capacity;
    }
}

const phone = new Smartphone("A-Phone X", 128, "ブラック");
phone.describe();
phone.upgradeStorage(64);
console.log(phone.getInfo());

このコードでは、モデル名や容量をprivateで守りつつ、外部からアクセスさせたい色だけをpublicとして扱っています。メソッドを通じて容量を変更したり、情報を得たりできる構造は、オブジェクト指向らしい安全な設計と言えます。同じパターンでクラスを複数作る練習をすれば、より複雑なクラス設計へとスムーズに進めるでしょう。

先生と生徒の振り返り会話

生徒

「クラスの使い方が最初は難しそうに見えたんですけど、実際には現実の物と対応していて分かりやすかったです!」

先生

「そうでしょう。設計図と実体の関係が理解できると、クラスの考え方がぐっと身近になりますよ。」

生徒

「コンストラクタで初期値を設定したり、アクセス修飾子で安全に扱う仕組みがあるのも納得しました!」

先生

「その理解はとても大事ですね。特に安全性を考えて設計すると、後々のトラブルも減らせます。」

生徒

「今回の内容を応用すれば、もっと複雑なプログラムにも挑戦できそうな気がします!」

先生

「ええ、クラスの基礎を押さえられたので次のステップにも進みやすくなりますよ。どんどん試して、理解を深めていきましょう。」

この記事を読んだ人からの質問

この記事を読んだ人からの質問
この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問/質問を解決します

TypeScriptでクラスって何ですか?初心者にもわかるように教えてください

TypeScriptのクラスとは、オブジェクトの設計図のようなもので、プロパティ(情報)とメソッド(機能)をひとつにまとめた構文です。たとえば「人」というクラスを作ると、その中に名前や年齢、あいさつする機能を持たせることができます。
関連記事:
カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう