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

生徒

「TypeScriptで作ったクラスを、別のファイルでも使えるようにしたいんですけど、どうしたらいいですか？」

先生

「とても大事なポイントですね。TypeScriptでは、クラスをモジュールとして切り分けることで、他のプログラムでも再利用できるようになります。」

生徒

「モジュールってなんですか？ちょっと難しそうです…」

先生

「モジュールというのは『便利な道具箱』みたいなものです。ひとつのクラスをファイルにまとめておけば、必要な場所で取り出して使えるようになります。では、基本から順番に見ていきましょう！」

1. クラスをモジュールとして使うとは？

TypeScriptでは、クラス（class）をモジュールとして切り分けて使うことができます。モジュールとは、プログラムを小さな部品に分けて管理する仕組みです。家を建てるときに部品ごとに分けて組み立てるのと同じで、クラスをモジュール化すると再利用や管理がとても簡単になります。

例えば「動物」というクラスを作って、それを別のプログラムでも呼び出せたら便利ですよね。そのために使うのが export と import です。これはそれぞれ「送り出す」「取り込む」という意味を持ちます。

2. クラスをエクスポート（export）する

まずは、クラスをモジュールとして外に出せるようにする必要があります。これをエクスポートと呼びます。エクスポートすると、他のファイルからそのクラスを自由に使えるようになります。

次のサンプルは、Animal.ts というファイルにクラスを定義して、それをエクスポートする例です。


export class Animal {
    name: string;

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

    speak() {
        console.log(this.name + "が鳴きました！");
    }
}

ここで export をつけることで、このクラスを他のファイルから使えるようになります。

3. クラスをインポート（import）する

次に、エクスポートしたクラスを別のファイルから呼び出す方法を紹介します。これをインポートと呼びます。

例えば、Main.ts というファイルで先ほどのクラスを使う場合は、次のように書きます。


import { Animal } from "./Animal";

const dog = new Animal("犬");
dog.speak();


犬が鳴きました！

このように、ファイルの冒頭で import を書くことで、別ファイルにあるクラスを呼び出すことができます。

4. デフォルトエクスポートと名前付きエクスポート

TypeScriptには、デフォルトエクスポートと名前付きエクスポートの2種類があります。

名前付きエクスポート：複数のクラスや関数をまとめて出せる
デフォルトエクスポート：1つのクラスをメインとして出せる

デフォルトエクスポートを使うと、インポートするときに中かっこが不要になります。


// Person.ts
export default class Person {
    constructor(public name: string) {}

    greet() {
        console.log("こんにちは、" + this.name + "です。");
    }
}


// Main.ts
import Person from "./Person";

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


こんにちは、太郎です。

このように、export default を使うと、インポート時にシンプルに書けるのがメリットです。

5. モジュール分割のメリット

クラスをモジュールとして切り分けることで、次のようなメリットがあります。

同じクラスを何度も書かなくて良い（再利用性）
コードが整理されて見やすくなる（保守性）
必要なときに必要な部品だけ取り出せる（効率性）

例えば大きなアプリケーションを作るときでも、クラスをファイルごとに分けることで道具箱のように整理整頓できるのです。まるで料理をするときに調味料や器具をきちんと並べておくような感覚です。

6. 実際の開発での使い方

実際のアプリケーション開発では、ユーザーを管理するクラスやデータベース操作のクラスなどをファイルごとにモジュール化します。例えば次のような構成が考えられます。


/project
 ├─ models/
 │   ├─ User.ts
 │   └─ Product.ts
 ├─ services/
 │   └─ Database.ts
 └─ Main.ts

このように整理しておけば、「ユーザー関連の処理はUser.ts」「データベース処理はDatabase.ts」というように一目でわかります。プログラミング未経験の人でも、モジュールを活用すれば自然と整理整頓された開発ができるようになります。

まとめ

TypeScriptでクラスをモジュール化して再利用する方法は、プログラムを整理しながら機能を拡張していく上で欠かせない考え方です。ここまでの内容を振り返ると、「クラスをファイルごとに分ける」「必要に応じてimportで読み込む」という、とてもシンプルな仕組みでありながら、アプリケーション全体の見通しを大きく良くしてくれることが分かります。特に大規模な開発や複数人での作業では、何がどこにあるのかを明確に分割しておくことが非常に重要で、クラスのモジュール化はその基盤となる技術です。また、exportには名前付きエクスポートとデフォルトエクスポートの2種類があり、目的に応じて選べる柔軟性があります。クラスを中心に構築されたアプリケーションでは、「importする側の書き心地」も重要で、どの書き方が最も自然かを意識すると、コード全体がより整理されていきます。こうしたモジュール化の考え方は、TypeScriptに限らず他の言語やフレームワークにも通ずるものがあり、長く活かせるスキルです。ファイルごとにクラスを分けておくと、再利用性の高いパーツが自然と蓄積され、後から新しいプログラムを作るときにも役立ちます。「道具箱」や「棚」に整理しておく感覚で、必要なときに必要なクラスだけを取り出せるため、プログラム全体の品質が安定しやすくなります。特に最初のうちは複雑に考えず、「1クラス1ファイル」「必要ならimport」という基本を繰り返していくことで、自然とモジュール化に慣れていくでしょう。

◆ クラスを使った再利用の具体例

実際の開発では、ユーザーを管理するUserクラスや、商品の情報をまとめたProductクラスなど、さまざまな場面でクラスが使われます。次のように複数のクラスを個別に分けておくと、アプリケーション全体が驚くほど読みやすく整理されます。


export class User {
    constructor(public name: string, public age: number) {}

    info() {
        return `${this.name}（${this.age}歳）`;
    }
}


import { User } from "./User";

const u = new User("太郎", 20);
console.log(u.info());

このように、クラスをモジュールとして切り分けておくと、後から別のファイルで簡単に呼び出して利用できます。プログラムが大きくなるほど、この分割の重要性が実感できるはずです。特に初心者の段階では、ファイルを整理していく習慣を早めにつけることで、後からの理解が格段に深まります。

◆ モジュール化で得られるメリット

・クラスの再利用が簡単になる
・プログラム全体が整理され、読みやすくなる
・追加機能を増やしやすく、構造が崩れにくい
・複数人での開発でも役割分担しやすい
・修正が必要なときに該当ファイルを見ればよいので作業が早い

モジュール化を進めると、コードの品質が自然と安定し、どんな規模の開発でも対応しやすくなります。あらかじめ部品を準備しておくことで、新たな機能を作るスピードが上がり、「使い回しやすいコード」が蓄積していきます。結果として、プログラム全体の効率が大きく高まるのです。

◆ 実際の現場でもよく使われる構成例


/src
 ├─ models/
 │   ├─ User.ts
 │   ├─ Product.ts
 │   └─ Animal.ts
 ├─ utils/
 │   └─ Logger.ts
 └─ main.ts

こうした構成はWeb開発でもバックエンドでも非常によく利用されており、モジュールの配置ルールを決めておくことで、他の開発者ともスムーズに連携できます。クラスをファイルに整理するだけで、プロジェクトの見通しが劇的に良くなるという点は、初心者が最初に覚えておくべき大きなポイントです。

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

生徒

「クラスをファイルに分けておくと、あとから必要なときにすぐ使えるっていうのがすごく便利ですね！」

先生

「そうですね。TypeScriptではこの仕組みが標準的で、アプリを大きくしたいときには必ず役に立ちます。」

生徒

「importとexportの使い分けも分かってきました。特にデフォルトエクスポートは書きやすくて覚えやすいです。」

先生

「その調子です。クラスを整理しておくと開発がとても楽になりますよ。これからも積極的にモジュール化してみてくださいね。」

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

TypeScriptでクラスをモジュールとして再利用する方法を徹底解説！初心者でも分かる入門ガイド