はじめに
Node系フレームワークではコンポーネントやページの他に、再利用可能な関数をまとめた utils ディレクトリを用意することが一般的です。わかりやすい命名規則を採用すると、プロジェクトが大きくなってもファイルを見つけやすくなり、チーム開発の効率が向上します。
基本方針
-
camelCase を基本とし、
formatDate.tsやcalculateTotal.tsのように関数名と同じ形式でファイル名を付けます。 - React コンポーネントを
utilsに配置する場合は PascalCase を用い、ChartWrapper.tsxのようにします。ただし、コンポーネントは通常componentsフォルダに配置する方が望ましいため例外的なケースです。 - 単語数は必要最低限にとどめ、処理内容が推測できる名前を心掛けます。たとえば
convertCurrency.tsやuseLocalStorage.tsなどです。
よくあるアンチパターン
-
snake_caseや日本語を交えたファイル名は避けます。環境によっては扱いづらく、検索もしにくくなるためです。 - 役割が曖昧な名前 (
helpers.tsなど) に一括でまとめると、後々肥大化して管理しづらくなります。処理ごとに分割してファイル名を明確にしましょう。
例
utils/
├── calculateTax.ts
├── formatDate.ts
└── validateEmail.ts
上記のように機能ごとにファイルを分け、camelCase を基準とした名前付けを行うと、ユーティリティ関数を素早く見つけられるようになります。
まとめ
utils ディレクトリはプロジェクト全体で使い回す処理を集約する場所です。命名規則を統一することで、コードベースの見通しが良くなり、保守性も向上します。チームのガイドラインとして取り入れてみてください。