TypeScriptでモジュール構文（import / export）を正しく使う方法をやさしく解説

1. TypeScriptのモジュール構文とは？

1. TypeScriptのモジュール構文とは？

TypeScriptのモジュール構文とは、プログラムをファイルごとに分けて管理するための仕組みです。 プログラミングをしていない人でも、書類を一つの箱に全部入れるより、用途ごとにファイルを分けたほうが探しやすいと感じるはずです。 モジュール構文は、その「整理整頓」をコードで行う方法だと考えてください。

TypeScriptでは、ES6（エクマスクリプト6）で追加された export と import を使ってモジュールを扱います。 ES6とは、JavaScriptの新しい書き方のルールがまとめられたバージョンの名前です。

2. exportとは何かをやさしく理解しよう

2. exportとは何かをやさしく理解しよう

export（エクスポート）とは、「この部品は外から使っていいですよ」と公開するための合図です。 例えるなら、自分の家にある道具を「貸し出しOK」と書いて箱の外に置くようなイメージです。 exportを付けていないものは、他のファイルからは見えません。

export const message = "こんにちは";

この例では、messageという変数をexportしています。 これにより、別のTypeScriptファイルからこの変数を使えるようになります。 constは「中身が変わらない箱」という意味で、初心者の方は「固定の値」と覚えておけば十分です。

3. importの基本的な使い方

3. importの基本的な使い方

import（インポート）は、「他のファイルで公開されているものを使わせてもらう」ための書き方です。 先ほどの貸し出しOKの道具を、実際に借りて使う行為にあたります。 exportとimportは必ずセットで考えると理解しやすくなります。

import { message } from "./sample";
console.log(message);

"./sample" はファイルの場所を示しています。 「今いる場所から見て、sample.tsというファイルですよ」という意味です。 パソコンでフォルダをたどる感覚とほぼ同じなので、難しく考えなくて大丈夫です。

こんにちは

4. default exportの考え方

4. default exportの考え方

TypeScriptには default export という特別なexport方法があります。 これは「このファイルの主役はこれです」と決めるような書き方です。 お店で言えば、一番おすすめの商品に「看板商品」と書くイメージです。

const userName = "太郎";
export default userName;

default exportされたものは、importするときに名前を自由に決められます。 名前を合わせなければいけない通常のexportより、少しだけ柔軟です。

import name from "./user";
console.log(name);

5. なぜTypeScriptでモジュールを使うのか

5. なぜTypeScriptでモジュールを使うのか

プログラミング未経験の方ほど、「最初から分ける必要があるの？」と感じるかもしれません。 しかし、コードが増えると、どこに何が書いてあるのかわからなくなりがちです。 モジュール構文を使うことで、役割ごとにファイルを分けられ、読みやすさと修正のしやすさが大きく向上します。

TypeScriptとES6のモジュール構文を正しく使えるようになると、 大きなアプリケーションでも迷子になりにくくなります。 これは仕事でも趣味でも、長く使える大切な考え方です。