コードをコピーして貼り付けるだけではなく、再利用可能にしましょう

背景

インターネットからコードをコピーして貼り付けるのはごく普通のことです。実際、バグ、スタイルの問題、プレーンな CSS での洗練されたページ ローダーの必要性など、私たちが直面するコーディングの問題のほとんどは、オンラインで解決できることが多いです。私たちは答えを探しますが、インターネットには豊富なコード スニペットやガイドが提供されています。もちろん、これらのソリューションが私たちのニーズに適切に適合していることを確認するには、これらのソリューションをフィルタリングして検証することが不可欠です。

コードを作成するとき、コードをコピーして貼り付ける便利さに夢中になってしまいがちです。ただし、時間が経つにつれて、コードが乱雑になり、保守が難しくなっていることに気づき始める場合があります。パターンは次のようになります:

1. 問題が発生しました。
2. オンラインで解決策を検索します。
3. 見つかったコードをコピーします。
4. コードベースに貼り付けます。
5. 次に進みます。

前述したように、最終的には同じ問題に再び直面する可能性が十分にあります。このサイクルが繰り返され、私たちは解決策を真に統合したり理解したりすることなく、ソリューションを再検討したり、コピーしたりすることになります (他の人が直面した課題が、今では私たち自身の問題になっています?)。したがって、ステップ 1: 問題に遭遇するに戻り、サイクルが継続します。

解決

この地獄の循環を回避するには、DRY 原則が解決策になる可能性があります。 DRY 原則は「Don'trepeat Yourself」の略で、コードの重複と反復パターンを減らすことを目的としたソフトウェア開発原則です。コードに DRY 原則を適用すると、反復的なコードとロジックがモジュール化された参照可能なコードに置き換えられます。または、この記事では、同じ問題でステップ 5 からステップ 1 に戻るのを避けるためのものです。

これらの例を見てみましょう:

関数を使用して繰り返しを避ける

関数は繰り返しコードを解決するために来ます。関数を作成したにもかかわらず、コードベースに繰り返しコードが残っている場合は、明らかに間違っています。

同様のロジック ブロックが繰り返されているのを見つけた場合は、それらを再利用可能な関数にリファクタリングします。

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

面積計算用の汎用関数を作成します。

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

ユーティリティ関数の作成

私はまだ関数について話しています。ユーティリティ関数を作成することは、クリーンなコードを実現する方法の 1 つです。たとえば、コードの複数の部分が文字列をタイトルケースに変換する場合、それをユーティリティ関数に抽出します。

// before

let title1 = "hello world".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
let title2 = "good morning".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');

この問題を処理する関数の作成を検討してください。

// after
function toTitleCase(input: string): string {
    return input.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
}

let title1 = toTitleCase("hello world");
let title2 = toTitleCase("good morning");

共通の値の定数

同じエンドポイントを持つ API を何回呼び出しますか?それは一度ではないと思います。

URL や構成オプションなどの特定の値がアプリ全体で使用されている場合は、それらを定数として一度定義します。

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

バックエンドが URL を変更したらどうなるでしょうか?上記の例のようにこのコードをまだ作成している場合は、URL を含むすべてのコードを変更することになります。エンドポイントを定数に移動すると、一度変更すれば、作成した定数に従うため、すべての API 呼び出しが引き続き機能するのが賢明です。

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

別のアイデアがありますか?

これらの例は、コードのポイントを維持し、繰り返しコードを繰り返さないことがいかに重要であるかを説明するためのほんの一部です。あなたの考えの下にあるコメントボックスでお気軽に共有してください。

まとめ

DRY (Don'trepeat Yourself) 原則は、開発者が可能な限りコードを再利用して冗長性を避けることを奨励する基本的なコーディング慣行です。 DRY 原則を適用すると、更新が必要なときに変更が必要な箇所の数が最小限に抑えられるため、コードベース全体の保守性、可読性、効率が大幅に向上します。 DRY 原則は、再利用可能で保守可能なコードを作成することです。関数、ジェネリック、インターフェイス、列挙型などの TypeScript の機能を活用することで、コードベースをクリーンな状態に保ち、冗長性を減らすことができます。

以上がコードをコピーして貼り付けるだけではなく、再利用可能にしましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。