より少ないファイル、より多くの行 vs. より多くのファイル、より少ないコード行

ああ、古典的な開発者の議論: **「より少ない行でより少ないファイル」対「より少ない行でより多くのファイル」。それはピザのトッピングを選ぶようなものです。人それぞれ好みがあり、完全に満足する人はいません。

プル リクエスト (PR) のコードを整理するとき、コードを 1 か所にまとめておくシンプルさを好む人もいますが、コードをより小さく、焦点を絞ったファイルに分割することを好む人もいます。

最終的には、これはあなただけの問題ではなく、将来のあなたとあなたのチームを、後で混乱したコードベースを解くことから救うことです。

実際的なシナリオを詳しく見てみましょう。開発者がダッシュボード ページにウィジェットのリストをレンダリングするという任務を負っていると想像してください。最初の実装は次のとおりです:

// Dashboard.js
export default function Dashboard() {
 const widgets = getWidgets();

  // Handles widget deletion
  const handleDelete = (id) => {};

  // Handles widget title update
  const handleUpdate = (id, newTitle) => {};

  return (
    <div>
      <h1>Dashboard</h1>
      <div className="widget-container">
        {widgets.map((widget) => (
          <div className="widget">
                  <h2>{widget.title}</h2>
                  <p>{widget.description}</p>
                  <span onClick={handleDelete}>?️</span>
                  <span onClick={handleUpdate}>✎</span>
          </div>
        ))}
      </div>
    </div>
  );
}

レビュー中に、誰かが個々のウィジェットをレンダリングするロジックを独自のコンポーネントに分離することを提案しました。開発者はコードを次のようにリファクタリングします。

// Dashboard.js
export default function Dashboard() {
  const widgets = getWidgets();

  // Handles widget deletion
  const handleDelete = (id) => {};

  // Handles widget title update
  const handleUpdate = (id, newTitle) => {};

  return (
    <div>
      <h1>Dashboard</h1>
      <div className="widget-container">
        {widgets.map((widget) => (
          <Widget
            key={widget.id}
            widget={widget}
            onDelete={handleDelete}
            onUpdate={handleUpdate}
          />
        ))}
      </div>
    </div>
  );
}

// Widget component for individual widget
function Widget({ widget, onDelete, onUpdate }) {
  return (
    <div className="widget">
      <h2>{widget.title}</h2>
      <p>{widget.description}</p>
      <button onClick={() => onDelete(widget.id)}>?️</button>
      <button onClick={() => onUpdate(widget.id, "New Title")}>✏️</button>
    </div>
  );
}

// Can be even further moved to a separate file
// Widget.js
export default function Widget({ widget, onDelete, onUpdate }) {
  return (
    <div className="widget">
      <h2>{widget.title}</h2>
      <p>{widget.description}</p>
      <button onClick={() => onDelete(widget.id)}>?️</button>
      <button onClick={() => onUpdate(widget.id, "New Title")}>✏️</button>
    </div>
  );
}

最初の実装は、特に追加ロジック (分析処理など) がウィジェットに密接に結び付けられており、props やコンテキストの切り替えが増加する場合に、よりシンプルで簡単に思えませんでしたか? ?これにより、ダッシュボード コンポーネントはどのアプローチを取るべきかという重要な疑問が生じます。インライン実装を維持するべきでしょうか、リファクタリングされた構造を採用するべきですか、あるいはハイブリッドアプローチを選択するべきでしょうか? ?

---

コンポーネントを同じファイルに保存する場合

1. 小規模プロジェクトまたは単一責任:
   • DashBoard コンポーネントが Widget コンポーネントと緊密に結合されており、プロジェクトが小さい場合は、それらを一緒にしておくと不必要な複雑さが軽減されます。
2. 再利用可能性は低い:
   • ウィジェット コンポーネントが他の場所で再利用されない場合、それを分離してもほとんどメリットはありません。
3. 可読性:
   • 小さなコンポーネントの場合、単一のファイルを使用すると、コンテキストを切り替えることなくコンポーネント間の関係を理解し​​やすくなります。
4. オーバーヘッドの回避:
   • インライン コンポーネントにより、追加のインポート/エクスポート ステートメントが不要になり、シンプルなセットアップで定型コードが削減されます。

---

個別のファイルを使用する場合

1. 再利用性:
   • ウィジェット コンポーネントが他の場所で使用される可能性がある場合は、別のファイルを使用するとアクセスしやすく、管理しやすくなります。
2. コードの可読性と構成:
   • ファイルが大きくなるにつれて、ファイルをより小さな論理的な部分に分割すると、ナビゲーションが向上し、特に大規模なプロジェクトでの認知負荷が軽減されます。
3. テストとメンテナンス:
   • コンポーネントを個別のファイルに分離すると、単体テストが容易になり、テスト カバレッジと保守性が向上します。
4. 関心事の分離:
   • 単一責任の原則に従って、個別のファイルにより、各コンポーネントが明確で明確な目的を持つことが保証されます。これは、長期的な保守性にとって重要です。
5. スケーラビリティ:
   • コンポーネントを個別のファイルに分割すると、プロジェクトが成長してもコードベースが管理しやすくなり、既存の機能を中断することなく新しい機能をシームレスに追加できます

---

決定を下す

このダッシュボードの例では、選択はプロジェクトの規模とコンポーネントの意図された役割によって異なります。これはウィジェットが再利用されない小さな例であるため、単一のファイルが適切に機能します:

// Dashboard.js
export default function Dashboard() {
 const widgets = getWidgets();

  // Handles widget deletion
  const handleDelete = (id) => {};

  // Handles widget title update
  const handleUpdate = (id, newTitle) => {};

  return (
    <div>
      <h1>Dashboard</h1>
      <div className="widget-container">
        {widgets.map((widget) => (
          <div className="widget">
                  <h2>{widget.title}</h2>
                  <p>{widget.description}</p>
                  <span onClick={handleDelete}>?️</span>
                  <span onClick={handleUpdate}>✎</span>
          </div>
        ))}
      </div>
    </div>
  );
}

大規模なプロジェクトや成長中のプロジェクトの場合、ウィジェットを分離することは柔軟性と保守性の点で有益です

重要なポイント

「1 つのファイルにより多くの行を」と「より少ない行でより多くのファイルを」のバランスは、プロジェクトの範囲、チームの規模、成長の軌道によって異なります。決定する際は次の点を考慮してください:

• コンポーネントは再利用される可能性がありますか?
• 親ファイルはどれくらい複雑ですか?
• プロジェクトは規約または特定のデザインパターンに従っていますか?
• コードベースは時間の経過とともに大幅に拡張されますか?

PR レビュー中にコンポーネントを別のファイルに移動するよう誰かが提案した場合は、メリットがこれらの考慮事項と一致しているかどうかを再確認してください。

以上がより少ないファイル、より多くの行 vs. より多くのファイル、より少ないコード行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。