Node.jsやJavaScriptビルドツールのインポートパスの仕組み：index.tsxなどを使った簡略化

アジェンダ

JavaScriptやTypeScriptを使ってプロジェクトを開発する際、import { Test } from "../test";のように相対パスでフォルダを指定すると、そのフォルダ直下にあるindex.js、index.jsx、index.ts、index.tsxが特別扱いされ、なぜファイル名を指定せずにインポートできるのか、その仕組みについて簡単にまとめます。

デフォルトファイルの読み込み

Node.jsや多くのJavaScriptビルドツール（Webpack、Babelなど）では、フォルダを指定してインポートした場合、そのフォルダの直下にあるindexファイルを自動的に探しに行くという規約があります。具体的には、../testと指定すると、自動的に../test/index.js、../test/index.jsx、../test/index.ts、../test/index.tsxなどを探し、見つけた場合はそれをインポートします。

モジュールのエクスポートとインポートの簡略化

index.tsxをフォルダのエントリーポイントとして利用することで、そのフォルダ内の他のファイルやコンポーネントを統合的に管理できます。これにより、インポート文が簡略化され、コードの可読性が向上します。

具体例

例えば、以下のようなディレクトリ構造があるとします：

project
├── test
│   ├── index.tsx
│   └── otherComponent.tsx
└── types
    └── index.ts

index.tsxファイルの内容が以下のようになっているとします：

index.tsx

import { FunctionComponent } from "react";
import { Type } from "../../types/index";

type TestProps = {
    value: Type;
}

export const Test: FunctionComponent<TestProps> = ({ value }: TestProps) => {
    return (
        <>
            <div className="test">
                {value}
            </div>
        </>
    );
}

この場合、index.tsxをimport { Test } from "../test";でインポートできる理由は、testフォルダのエントリーポイントとしてindex.tsxが利用されるためです。この規約により、開発者はファイル名を指定せずに簡潔にインポートを記述できます。

まとめ

import { Test } from "../test";のようにフォルダ名だけを指定することで、フォルダのエントリーポイントであるindex.tsxやindex.jsなどを自動的にインポートできるのは、Node.jsやJavaScriptのモジュールシステムにおける一般的な規約に基づく動作です。この仕組みを利用することで、コードの可読性とメンテナンス性が向上させることができます。