TypeScriptでモジュール構文（import / export）を正しく使う方法をやさしく解説
生徒
「TypeScriptのコードって、ファイルが増えてくるとごちゃごちゃしませんか？」
先生
「その悩みを解決するのが、モジュール構文と呼ばれる仕組みです。importとexportを使います。」
生徒
「importとかexportって、英語で見ると難しそうです…」
先生
「大丈夫です。部屋の中を整理整頓する感覚で考えると、とてもわかりやすいですよ。」
1. TypeScriptのモジュール構文とは？
TypeScriptのモジュール構文とは、プログラムをファイルごとに分けて管理するための仕組みです。 プログラミングをしていない人でも、書類を一つの箱に全部入れるより、用途ごとにファイルを分けたほうが探しやすいと感じるはずです。 モジュール構文は、その「整理整頓」をコードで行う方法だと考えてください。
TypeScriptでは、ES6（エクマスクリプト6）で追加された
export と import を使ってモジュールを扱います。
ES6とは、JavaScriptの新しい書き方のルールがまとめられたバージョンの名前です。
2. exportとは何かをやさしく理解しよう
export（エクスポート）とは、「この部品は外から使っていいですよ」と公開するための合図です。 例えるなら、自分の家にある道具を「貸し出しOK」と書いて箱の外に置くようなイメージです。 exportを付けていないものは、他のファイルからは見えません。
export const message = "こんにちは";
この例では、messageという変数をexportしています。 これにより、別のTypeScriptファイルからこの変数を使えるようになります。 constは「中身が変わらない箱」という意味で、初心者の方は「固定の値」と覚えておけば十分です。
3. importの基本的な使い方
import（インポート）は、「他のファイルで公開されているものを使わせてもらう」ための書き方です。 先ほどの貸し出しOKの道具を、実際に借りて使う行為にあたります。 exportとimportは必ずセットで考えると理解しやすくなります。
import { message } from "./sample";
console.log(message);
"./sample" はファイルの場所を示しています。
「今いる場所から見て、sample.tsというファイルですよ」という意味です。
パソコンでフォルダをたどる感覚とほぼ同じなので、難しく考えなくて大丈夫です。
こんにちは
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でモジュールを使うのか
プログラミング未経験の方ほど、「最初から分ける必要があるの？」と感じるかもしれません。 しかし、コードが増えると、どこに何が書いてあるのかわからなくなりがちです。 モジュール構文を使うことで、役割ごとにファイルを分けられ、読みやすさと修正のしやすさが大きく向上します。
TypeScriptとES6のモジュール構文を正しく使えるようになると、 大きなアプリケーションでも迷子になりにくくなります。 これは仕事でも趣味でも、長く使える大切な考え方です。
