👏
ファイル名を 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文がスッキリします。
Discussion