ファイル名を index.〇〇にすると何が良いのか

はじめに

プログラミングを学習していると、index.〇〇というファイル名が当たり前のように出てきますが、改めて何が良いのかを調べてみました。以下では、React + TypeScript で使用する tsx 拡張子を例に説明します。

import 文がスッキリする

index.tsx ファイルがあるディレクトリを指定するだけで、そのディレクトリの index.tsx ファイルがインポートされるため、インポート文が短くなり、コードがスッキリします。

// Headerというディレクトリの index.tsx を指定
import Header from './components/Header';

// Headerというディレクトリの Header.tsx を指定
import Header from './components/Header/Header';

エントリポイントを統一することで、エクスポートをまとめられる

ディレクトリ内のエントリポイントとして index.tsx を使うことで、そのディレクトリ内の主要なエクスポートをまとめて管理できます。
例えば以下のようなディレクトリ構成だったとします

my-nextjs-app/
├── components/
│   ├── Header/
│   │   ├── Header.tsx
│   │   ├── Header.module.css
│   │   ├── Logo.tsx
│   │   └── index.tsx
├── pages/
│   ├── index.tsx

この時、components/Header/index.tsx　で次のように記述し、

export { default as Header } from './Header';
export { default as Logo } from './Logo';

pages/index.tsx で importすると

import { Header, Logo } from '../components/Header';

このようにまとめて一つのファイルから受け取ることができるため、import文がスッキリします。