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

生徒

「TypeScriptのコードが長くなってきたんですが、分ける方法ってあるんですか？」

先生

「はい、TypeScriptではファイルを分割してコードを整理することができます。import（インポート）とexport（エクスポート）という仕組みを使います。」

生徒

「ファイルを分けると、どう便利なんですか？」

先生

「ひとつのファイルに全部まとめると見づらくなりますが、機能ごとにファイルを分ければ、読みやすく管理もしやすくなるんですよ。」

生徒

「なるほど。じゃあ実際にどうやってやるのか、教えてください！」

先生

「もちろんです。まずはexportの使い方から見ていきましょう！」

1. TypeScriptのファイル分割とは？

TypeScriptでは、ひとつのファイルにコードを詰め込みすぎず、機能ごとに整理して複数ファイルへ分けることができます。この仕組みをモジュール化と呼び、規模が大きくなるほどその効果を実感できます。

たとえば、計算処理・メッセージ表示・データ管理といったように役割が異なるものを別々のファイルへ分けておくと、どこに何が書いてあるかが直感的に分かり、あとから見返すときも非常に読みやすくなります。

イメージとしては「引き出しを用途ごとに整理する」ようなもので、必要な処理がどこにあるのかすぐ見つけられるようになります。


// calc.ts（計算処理をまとめたファイル）
export function add(a: number, b: number): number {
    return a + b;
}

このように、別ファイルへ処理を分けたうえで、その内容を他のファイルから使いたい場合は、export（外部に公開する）、import（外部から取り込む）という仕組みが必要になります。ファイル分割を覚えることで、コードが格段に整理され、学習が進むほど便利さを感じられるようになります。

2. exportで関数や変数を外に出す

exportは「このファイルの外から使えるように公開しますよ」という意味を持つキーワードです。ファイルを分割したとき、外部に見せたい機能だけを選んで公開できるため、コードの整理にも役立ちます。

特に、計算処理や定数など「他の場所でも使い回したいもの」は、ひとつのファイルにまとめてexportしておくと便利です。必要な処理だけを適切に切り出すことで、プロジェクト全体の見通しが良くなります。

calc.tsファイル（計算用の関数をまとめた例）:


export function add(a: number, b: number): number {
    return a + b;
}

export const PI = 3.14;

// 他にも必要なら公開できる
export function subtract(a: number, b: number): number {
    return a - b;
}

上のコードでは、add関数・PI定数・subtract関数にexportを付けています。これらはすべて外部のファイルから自由に使えるようになります。

逆に、exportを付けないものはこのファイルの中だけで使われる「非公開の処理」になるため、誤って他の場所から触られてバグになるリスクを防ぐこともできます。初心者の方ほど、この“公開するものとしないものを分ける”意識が後々とても役に立ちます。

3. importで他のファイルから使う

importは、他のファイルでexportされた関数や定数などを使うためのキーワードです。

次の例は、main.tsというファイルで、先ほどのcalc.tsの内容を取り込むコードです。

main.tsファイル:


import { add, PI } from "./calc";

console.log(add(3, 5)); // 8
console.log(PI);        // 3.14

import { ... }という書き方で、必要なものだけを読み込むことができます。

./calcのように書くと、同じフォルダ内にあるcalc.tsというファイルを指定しています。拡張子.tsは省略してOKです。

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

TypeScriptでは、1つのファイルにメインの機能をdefaultとしてエクスポートすることもできます。

次の例を見てみましょう。

message.tsファイル:


export default function showMessage(name: string): void {
    console.log(`こんにちは、${name}さん！`);
}

export defaultで関数をエクスポートしています。この場合、インポート側では波かっこ（{}）なしで名前をつけて読み込めます。

main.tsファイル:


import showMessage from "./message";

showMessage("太郎");

5. import/exportを使うときの注意点

importとexportを使うには、TypeScriptの設定でモジュール対応が必要です。

通常、プロジェクトにあるtsconfig.jsonファイルで、次のように設定されていればOKです。


{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES6"
  }
}

また、Node.jsやブラウザで実行するには、バンドラー（例：Webpack、Viteなど）やトランスパイル（変換）が必要になることもあります。初心者の場合は、まずts-nodeやVisual Studio Codeで動作確認するのがオススメです。

6. よくあるエラーと対処法

初心者がimport/exportを使うときによく出るエラーを紹介します。

「Cannot find module」エラー
ファイルのパスが間違っているときに出ます。./を忘れていないか確認しましょう。
「Unexpected token export」エラー
Node.jsなどでTypeScriptを直接実行しようとすると出ることがあります。ts-nodeやビルドツールを使いましょう。
exportしたものがundefinedになる
exportとimportの名前が一致しているか確認してください。

7. importの別名（エイリアス）を使う

importした名前を変更したいときは、asを使って別名をつけることができます。


import { add as plus } from "./calc";

console.log(plus(2, 4)); // 6

このように書くことで、addという関数をplusという名前で使うことができます。

まとめ

TypeScript（タイプスクリプト）でコードを整理する上で、ファイル分割とimport/exportの活用は非常に大切なテクニックです。最初のうちは、すべてのコードを1つのファイルに書いてしまいがちですが、処理が複雑になるにつれて、役割ごとにファイルを分けて管理することが必要になってきます。

その際に使うのが、exportとimportという仕組みです。exportで公開したい関数や定数、クラスなどを外部に出し、importで必要なファイルに取り込むことで、機能を部品のように組み立てることができます。これは、まるでパズルのピースを組み合わせるような感覚で、モジュール化と呼ばれる手法です。

また、デフォルトエクスポートを使えば、1つのファイルからメインの機能をシンプルにインポートできるようになります。さらに、asを使って別名（エイリアス）をつけることで、同じ名前がかぶったときや、読みやすくしたいときに柔軟に対応できます。

サンプル：ファイル分割とインポートの実践例


// calc.ts
export function subtract(a: number, b: number): number {
    return a - b;
}
export const VERSION = "1.0";


// message.ts
export default function welcome(user: string): void {
    console.log(`ようこそ、${user}さん！`);
}


// main.ts
import { subtract as minus, VERSION } from "./calc";
import welcome from "./message";

welcome("さくら");
console.log("引き算の結果:", minus(10, 3));
console.log("バージョン:", VERSION);


ようこそ、さくらさん！
引き算の結果: 7
バージョン: 1.0

このように、TypeScriptのimport/export機能を使えば、コードの見通しがよくなり、チーム開発でも混乱が起きにくくなります。特にアプリケーションが大きくなると、構造化されたファイル設計が品質に直結します。

一方で、よくあるミスとしては、ファイルパスの書き間違いや、モジュールの読み込みエラーがあります。たとえば、./をつけ忘れてしまったり、拡張子.tsをつけてしまうなど、細かな点でつまずくことも少なくありません。そのため、tsconfig.jsonの設定や、モジュール対応の環境を正しく理解しておくことも大切です。

これから本格的なTypeScript開発を始める人にとって、モジュール化されたコード設計は避けて通れない道です。今回のような基本をしっかり身につけておくことで、将来的により大規模な開発や、再利用性の高いコードを書く力が自然と身についていくでしょう。

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

生徒

「先生、ファイルを分けて書くのって、最初はちょっと面倒かと思ったけど、やってみたらすごくスッキリしました！」

先生

「そうですね。特にimport/exportを使えば、処理ごとに役割をはっきりさせながらコードが書けるので、見やすさもアップしますよ。」

生徒

「最初はファイル間のやり取りでエラーが出たりもしましたけど、exportとimportの使い方をしっかり覚えたら、安心して分けられるようになりました。」

先生

「素晴らしいですね。分けたコードを組み合わせることで、再利用もしやすくなりますし、大きなプロジェクトでも柔軟に対応できますよ。」

生徒

「デフォルトエクスポートと名前付きエクスポートの違いも分かってきました。チームで作業するときにも使い分けられそうです！」

先生