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

生徒

「TypeScriptでプログラムが長くなってきたとき、どうすれば整理整頓できますか？」

先生

「TypeScriptでは、モジュールや名前空間という仕組みを使って、ファイルを小分けに分割して管理することができますよ。」

生徒

「ファイルを分けると、後で使い回すのも楽になりそうですね！具体的にはどう分けるんですか？」

先生

「良い視点です！今回は、大規模な開発でも迷わないためのファイル分割と再利用の設計方法を詳しく解説します。」

1. モジュールと名前空間とは？

プログラミングを始めたばかりの頃は、一つのファイルに全ての命令を書いてしまいがちです。しかし、アプリが大きくなると、何千行ものコードから目的の場所を探すのは至難の業になります。そこで重要になるのが、「モジュール（Module）」と「名前空間（Namespace）」という考え方です。

例えるなら、一つの大きな箱に全ての文房具を詰め込むのではなく、「ペン専用の筆箱」「ハサミ専用の引き出し」というように、役割ごとに場所を分けるイメージです。これにより、どこに何があるか一目で分かり、中身を別の場所で再利用することも簡単になります。

用語解説：モジュール
プログラムの部品（関数や変数、クラスなど）を、ファイル単位で独立させたものです。

用語解説：名前空間
同じ名前のプログラムが衝突しないように、名前の「グループ」を作って囲いを作る仕組みです。

2. なぜファイルを分割するのか？（メリットと重要性）

パソコンを触り始めたばかりの方にとって、「なぜわざわざファイルをバラバラにするの？」と疑問に思うかもしれません。主な理由は3つあります。

保守性（メンテナンスのしやすさ）： 修正したい場所がすぐに見つかります。
再利用性： 便利な機能を一度作れば、他のプロジェクトでも「コピー＆ペースト」ではなく「呼び出し」だけで使えます。
名前の衝突防止： 複数人で開発しているとき、誰かが使った名前（例えば userName など）と同じ名前を使っても、ファイルが分かれていればエラーになりません。

3. exportとimportの基本：機能を書き出す・読み込む

TypeScriptのモジュールシステムで最も大切なキーワードが export（エクスポート）と import（インポート）です。これは「出荷」と「輸入」のような関係です。

export（機能を公開する）

別のファイルで使いたい変数や関数の前に export を付けます。これにより、その機能がファイルの「外」から見えるようになります。


// mathUtils.ts という名前のファイル
export const PI = 3.14;

export function calculateCircleArea(radius: number) {
    return radius * radius * PI;
}

import（機能を取り込む）

他のファイルで作った機能を使いたいときは、import を使って呼び出します。


// main.ts という名前のファイル
import { PI, calculateCircleArea } from "./mathUtils";

console.log(PI); // 3.14
const area = calculateCircleArea(10);
console.log(area); // 314


3.14
314

4. デフォルトエクスポート（Default Export）の使い方

一つのファイルから「これがメインの機能です！」と一つだけ指定して書き出す方法を default export と呼びます。これを使うと、読み込む側で名前を自由につけることができ、記述もシンプルになります。


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


// app.ts
import MyUserClass from "./User"; // 名前を自由に決められる

const user = new MyUserClass("たろう");
console.log(user.name);


たろう

5. 名前空間（Namespace）による整理術

モジュールは「ファイル単位」の区切りですが、一つのファイル内や、より大きなグループで名前を整理したい場合に namespace を使うことがあります。最近の開発ではモジュールが主流ですが、古いプログラムの整理や特定のライブラリ設計では今でも使われます。


namespace Validation {
    export const isString = (value: any) => typeof value === "string";
    
    export class NumberValidator {
        isValid(value: number) {
            return value > 0;
        }
    }
}

// 使うときは「名前空間名.機能名」で呼び出す
const myString = "こんにちは";
console.log(Validation.isString(myString));


true

これは、大きな図書館の中で「歴史」「科学」というラベルが貼られた棚に本を並べるようなイメージです。「名前空間」という棚があるおかげで、中身が整理されます。

6. ファイル分割のベストプラクティス：再利用しやすい設計

ただファイルを分ければ良いというわけではありません。初心者の方が意識すべき「再利用しやすい設計」のコツをいくつか紹介します。

1. 一つのファイルには一つの役割（単一責任の原則）

「計算用ファイル」「画面表示用ファイル」「データ保存用ファイル」というように、役割をはっきり分けることが大切です。一つのファイルにあれもこれも詰め込むと、結局再利用しにくくなります。

2. フォルダ構造を意識する

ファイルの数が増えてきたら、フォルダ（ディレクトリ）を使って階層を作りましょう。例えば、以下のような構造が一般的です。

src/components/：ボタンや入力欄などの見た目に関する部品
src/utils/：計算や日付変換などの便利な共通ツール
src/models/：データの形（クラスや型）を定義したもの

3. インデックスファイル（index.ts）の活用

フォルダ内の機能をまとめて公開するために index.ts を使うテクニックがあります。これにより、読み込み側のコードをスッキリさせることができます。


// src/utils/index.ts
export * from "./math";
export * from "./string";
export * from "./date";

こうすることで、使う側は一つひとつのファイルを指定せず、フォルダ名を指定するだけで済むようになります。

7. 初心者がハマりやすいポイントと対策

ファイルを分割し始めると、いくつかの壁にぶつかることがあります。事前に知っておけば怖くありません。

循環参照（しゅんかんさんしょう）に注意！

ファイルAがファイルBを読み込み、同時にファイルBもファイルAを読み込んでいる状態です。これは「卵が先か鶏が先か」のような状態で、パソコンが混乱してエラーになります。設計の段階で、「一方通行」の読み込みになるように意識しましょう。

拡張子の省略

TypeScriptで import を書くとき、基本的には .ts という拡張子は書きません。開発ツールが自動的にファイルを探してくれるからです。しかし、最新のJavaScriptの設定によっては .js と書かなければならない場合もあります。まずは「拡張子なし」で試してみるのが基本です。

知っておきたい！コンパイル後の姿

TypeScriptで書かれたモジュールは、最終的にブラウザなどが読み込めるJavaScriptに変換（コンパイル）されます。その際、import や export の書き方は設定によって少し変化しますが、TypeScriptを書いている間はその違いをあまり意識しなくても大丈夫です。便利な機能を使って、人間にとって読みやすいコードを書くことに集中しましょう。

8. 実際に設計してみよう：小さなプロジェクト例

例えば、簡単な「お買い物計算アプリ」を設計する場合、以下のようにファイルを分けます。

ファイル名	役割（責任）
`TaxCalculator.ts`	消費税の計算ロジックだけを持つ
`Product.ts`	商品の名前や価格のデータを管理する
`Cart.ts`	買い物かごの中身を合計する機能を持つ
`main.ts`	上記を全て読み込んで、画面に結果を表示する