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

生徒

「TypeScriptでプログラムを分けて書いていると、import（インポート）の行がぐちゃぐちゃになって読みにくいです。整理する方法はありますか？」

先生

「TypeScriptでは、モジュールという仕組みを使ってファイルを分割しますが、読み込みの順番や構成を整えることで、管理がずっと楽になりますよ。」

生徒

「どうすればきれいに整理できるんでしょうか？初心者の私でもできるコツを教えてください！」

先生

「もちろんです！まずはモジュールの基本から、きれいに整えるためのTips（秘訣）まで順番に見ていきましょう。」

1. モジュールとimportとは？

プログラミングを始めたばかりの方にとって、「モジュール」や「import（インポート）」という言葉は少し難しく感じるかもしれません。簡単に例えると、「モジュール」は「部品」、「import」は「部品を取り寄せること」です。

大きなプラモデルを作るとき、すべてのパーツが一つの袋に入っていたら大変ですよね。普通は「頭のパーツ」「体のパーツ」「足のパーツ」というように、袋が分かれています。プログラミングも同じで、一つのファイルに何千行もコードを書くと、どこに何があるか分からなくなります。そのため、機能ごとにファイルを分けて作成します。この分かれた一つ一つのファイルが「モジュール」です。

別のファイルにある機能を使いたいときは、「このファイルを使います！」と宣言する必要があります。それが「import」です。逆に、自分のファイルの中身を他で使わせてあげることを「export（エクスポート）」と言います。

2. なぜimportの順序を整える必要があるのか

プログラムが大きくなってくると、一つのファイルの冒頭に、何十行ものimport文が並ぶことがあります。バラバラな順番で並んでいると、次のような問題が発生します。

どこから読み込んでいるのか探しにくい： 外部のライブラリ（便利な道具セット）なのか、自分たちが作ったファイルなのか区別がつきません。
依存関係が不明確： どのファイルがどのファイルに頼っているのか、全体像が見えにくくなります。
複数人での開発で困る： 人によって書き方が違うと、コードを合体させたときに見た目がバラバラになり、修正ミスが起きやすくなります。

本棚の本を「あいうえお順」や「ジャンル別」に並べるのと同じように、プログラミングでもルールを決めて並べることが大切です。

3. おすすめのimport順序のルール

一般的に、美しく管理しやすいとされるimportの順序をご紹介します。基本的には、「遠くにあるものから近くにあるものへ」という順番で並べるとスッキリします。

① 外部ライブラリ（標準ライブラリ・npmパッケージ）

まずは、自分で作ったものではない、世の中で公開されている便利なツール（Reactやlodashなど）を一番上に書きます。これらは「npm（エヌピーエム）」という仕組みを使ってインストールしたものです。

② 絶対パス（エイリアス）を使った指定

プロジェクトの設定で、ファイルの場所をショートカット（例：@/components/...）で指定している場合に、中間に配置します。

③ 自分のプロジェクト内の相対パス

同じフォルダや、少し離れたフォルダにある「自分で作ったファイル」を読み込みます。 ./（今の場所）や../（一つ上の階層）で始まるものです。

④ スタイルシート（CSS）など

最後に、デザインに関するファイル（.cssや.scss）を読み込むことが多いです。


// 1. 外部ライブラリ
import React from 'react';
import { useState } from 'react';

// 2. 内部の絶対パス（エイリアス）
import { CommonButton } from '@/components/atoms/Button';

// 3. 内部の相対パス
import { formatDate } from './utils';
import { UserProfile } from '../models/User';

// 4. CSSファイル
import './styles.css';

4. 「名前空間（namespace）」と「モジュール」の使い分け

TypeScriptには、コードを整理する方法として「モジュール」の他に「名前空間（namespace）」というものもあります。初心者の方は、「基本的にはモジュールを使う」と覚えておけば間違いありません。

名前空間とは： 昔のTypeScriptでよく使われていた方法です。一つのファイルの中に、さらに小さな「箱」を作るイメージです。しかし、現代のプログラミング（ESモジュール）では、ファイルそのものが「箱」の役割を果たすため、名前空間を使う機会は減っています。

もし古いプロジェクトをメンテナンスする場合以外は、ファイルを分けてimportとexportを使う「モジュール」形式で設計しましょう。

5. 構成を整えるためのテクニック：Barrel（バレル）ファイル

「バレル（樽）」とは、複数のファイルを一つにまとめて、外から呼び出しやすくするためのテクニックです。例えば、componentsフォルダの中に10個のファイルがあったとき、一つずつimportするのは大変です。

そこで、フォルダの中にindex.tsという名前のファイルを作り、そこですべてのファイルを中継（再エクスポート）します。

フォルダ構造の例：


src/
  components/
    Button.ts
    Input.ts
    Card.ts
    index.ts  <-- これがバレルファイル

index.tsの中身：


export * from './Button';
export * from './Input';
export * from './Card';

こうすることで、使う側は一行でスッキリと書けるようになります。


// バレルファイルを使わない場合
import { Button } from './components/Button';
import { Input } from './components/Input';
import { Card } from './components/Card';

// バレルファイルを使う場合（一行で済む！）
import { Button, Input, Card } from './components';