TypeScriptのファイル分割とimport/exportの基本を徹底解説！初心者でも安心のやさしい入門

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

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

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

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

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

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

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

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

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で他のファイルから使う

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

importは、ほかのファイルでexportされた機能（関数・定数・クラスなど）を読み込むためのキーワードです。別ファイルに分けた処理を組み合わせて使うためには欠かせない仕組みで、ファイル分割のメリットがしっかり生きる部分でもあります。

たとえば、計算用の処理をまとめたcalc.tsから、実際にその関数を使いたいmain.ts側へ読み込むときは、次のように書きます。

main.tsファイル（必要な機能だけを取り込む例）:

// calc.ts の add関数 と PI定数 を読み込む
import { add, PI } from "./calc";

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

import { ... }の中には、使いたい名前をそのまま書きます。このとき、exportした名前と同じ名前を書く必要がある点に注意してください。必要なものだけ読み込めるため、コードの見通しもよくなります。

また、./calcのようなパス指定では、.tsを省略してOKです。初心者がつまずきやすいのは「パスの書き方」なので、./で同じフォルダ内を指すことを覚えておくと安心です。

// 別のファイルを読み込む例
import { subtract } from "./calc";

console.log(subtract(10, 4)); // 6

このように、importを使うことで「必要な処理を必要な場所へ読み込む」という流れが作れます。複数のファイルを組み合わせることで、TypeScriptのコードはより整理され、どんどん読みやすくなっていきます。

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

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を使うときの注意点

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

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

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

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

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

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

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

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

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

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

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

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

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

TypeScriptでファイル分割とは何ですか？初心者向けに教えてください

TypeScriptのファイル分割とは、長くなったコードを機能ごとに別のファイルに分ける方法です。これにより、コードが見やすくなり、管理や再利用がしやすくなります。importとexportを使って、他のファイルと機能を共有します。