ルール

避ける 過度に 大きすぎる ファイルサイズを小さくする。
大きな ファイル 複数の 複数の 担当
は 難しい 維持するのは難しい。 維持が難しい。

対応言語 45+

はじめに

数千行に及ぶファイルは、通常、無関係な複数の問題を扱い、特定の機能を見つけることを難しくしている。3000行の ユーティリティ バリデーション・ヘルパー、文字列フォーマット、日付操作、APIユーティリティを含むファイルは、開発者が必要なものを見つけるために無関係なコードをスクロールすることを強いる。また、大きなファイルは、複数の開発者が異なるセクションを同時に修正するため、マージの衝突を引き起こします。

なぜそれが重要なのか

コードの保守性：巨大なファイルには無関係な機能が混在しており、開発者は1つの関数を変更するために何百行もの無関係なコードを理解する必要がある。特定のロジックを見つけるには、適切な名前のファイルにナビゲートするのではなく、検索する必要があります。

バージョン管理のコンフリクト：複数の開発者が同じ大きなファイルで異なる機能を開発する場合、マージ・コンフリクトが頻繁に発生します。ファイルを小さくして集中させることで、各開発者が別々のファイルで作業するため、並行開発が可能になります。

コードレビューの効率化：大きなファイルの変更をレビューするには、より多くのコンテキストが必要になる。レビュアーは、変更が同じファイル内の他の無関係なコードにどのように影響するかを理解しなければならない。小さなファイルであれば、変更の範囲が明確になり、レビューのスピードが上がる。

コード例

非準拠：

// utils.js (1500行以上)
関数 バリデートEメール(メール) { /* ...*/}
関数 バリデートPhone(電話) { /* ...*/}
関数 フォーマット通貨(金額) { /* ...*/}
関数 フォーマット日付(日付) { /* ...*/}
関数 パースJSON(str) { /* ...*/}
関数 apiRequest(url) { /* ...*/}
関数 デバウンス(fn, delay) { /* ...*/}
関数 スロットル(fn, limit) { /* ...*/}
// ...100以上の無関係な関数

なぜそれが間違っているのか： 1つの巨大なファイルには、検証、フォーマット、解析、APIコール、パフォーマンス・ユーティリティが含まれている。検索 デバウンス() は、何百もの無関係な関数をスクロールする必要がある。複数のチームがこのファイルを修正すると、常にマージが衝突する。

✅ 準拠：

// validation/email.js
エクスポート 関数 バリデートEメール(メール) { /* ...*/}

// バリデーション/phone.js
エクスポート 関数 バリデートPhone(電話) { /* ...*/}

// フォーマット/通貨.js
エクスポート 関数 フォーマット通貨(金額) { /* ...*/}

// 書式設定/日付.js
エクスポート 関数 フォーマット日付(日付) { /* ...*/}

// api/request.js
エクスポート 関数 apiRequest(url) { /* ...*/}

// パフォーマンス/debounce.js
エクスポート 関数 デバウンス(fn, delay) { /* ...*/}

なぜこれが重要なのか： 各ユーティリティ機能は、分類されたディレクトリ内の専用ファイルにあります。検索 デバウンス() に移動することを意味する。 パフォーマンス/debounce.js 直接的に。異なるユーティリティに取り組んでいるチームは、別々のファイルにあるので衝突することはない。

結論

ファイルは可能な限り500行以内に収めること。500行を超える場合は、個別のモジュールに抽出できるような、明確な責任を持つファイルを探しましょう。関連するファイルをディレクトリで整理し、構造を維持しながら、個々のファイルに焦点を当て、保守しやすくする。