一度だけ使用する必要があるコードは、好きなように記述できます。ただし、ほとんどの場合、ベスト プラクティスを遵守し、クリーンなコードを維持することが不可欠です。

覚えておいてください、あなたのコードは、後日、別の開発者、あるいはあなた自身によって読まれる可能性があります。その時には、コードは一目瞭然になるはずです。すべての変数、関数、コメントは正確で、クリーンで、理解しやすいものである必要があります。このアプローチにより、メンテナンスが容易になるだけでなく、開発チーム内のコラボレーションと効率も促進されます。

そのため、誰か (またはあなた) がコードを追加または変更するために戻ってきたときに、コードの各行が何を行うのかを簡単に理解できるようになります。そうしないと、ほとんどの時間はコードを理解することだけに費やされてしまいます。コードベースに取り組む新しい開発者にも同じ問題が発生します。コードがきれいでないと、彼らはコードを理解できません。したがって、きれいなコードを書くことが非常に重要です。

クリーンコードとは何ですか?

クリーンなコードとは、基本的に

1. わかりやすい
2. デバッグが簡単
3. メンテナンスが簡単
4. コメントはよく書かれており、短くてわかりやすい
5. 重複（冗長）コードはなく、KISS ルールに従います（シンプルにしてください、バカ！）

そのため、クリーンなコードを記述するためには、開発者はコードの一貫性を維持する必要があり、開発者は特定の言語のベスト プラクティスに従う必要があります。

クリーンなコードが重要な理由

チームがクリーンなコードの原則に従うと、コードベースが読みやすく、ナビゲートしやすくなります。これにより、開発者はコードをすぐに理解し、貢献を開始できるようになります。クリーンなコードが重要である理由をいくつか示します。

1.読みやすさとメンテナンス: コードが適切に記述され、適切なコメントがあり、ベスト プラクティスに従っている場合、コードは読みやすく、理解するのが簡単です。問題やバグが発生すると、どこで見つけられるかが正確にわかります。

2.デバッグ: クリーンなコードは明瞭かつ単純に設計されており、コードベースの特定のセクションを見つけて理解することが容易になります。明確な構造、意味のある変数名、明確に定義された関数により、問題の特定と解決が容易になります。

3.品質と信頼性の向上: クリーンなコードは、特定の言語のベスト プラクティスに従い、適切に構造化されたコードを優先します。品質が向上し、信頼性が向上します。したがって、バグのある非構造化コードが原因で発生する可能性のあるエラーが排除されます。

クリーンなコードが重要である理由が理解できたので、クリーンなコードを書くのに役立ついくつかのベスト プラクティスと原則を見ていきましょう。

クリーンコードの原則

優れたコードを作成するには、小さく明確に定義されたメソッドを使用するなど、クリーンなコードの原則と実践に従う必要があります。

詳しく見てみましょう。

1.ハードコードされた数字を避ける

値を直接使用する代わりに、定数を使用してその値を割り当てることができます。そのため、将来その値を更新する必要がある場合、1 つの場所でのみ更新する必要があります。

例

function getDate() {
  const date = new Date();
  return "Today's date: "   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return "Today's date: "   date;
}

このコードでは、ある時点で、「Today's date:」の代わりに「Date:」になる変更があります。これは、その文字列を 1 つの変数に割り当てることで改善できます。

改善されたコード:

const todaysDateLabel = "Today's date: ";

function getDate() {
  const date = new Date();
  return todaysDateLabel   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return todaysDateLabel   date;
}

上記のコードでは、必要に応じて日付文字列を簡単に変更できます。メンテナンス性が向上します。

2.意味がありわかりやすい名前を使用する
どこでも共通の変数名を使用する代わりに、自明のもう少しわかりやすい名前を使用できます。変数名自体はその使用法を定義する必要があります。

名前のルール

1. わかりやすい名前を選択してください。
2. 意味のある区別をしましょう。
3. 発音可能な名前を使用します。
4. 検索可能な名前を使用します。
5. マジックナンバーを名前付き定数に置き換えます。
6. エンコードを避けてください。プレフィックスや型情報を追加しないでください。

例

// Calculate the area of a rectangle
function calc(w, h) {
    return w * h;
}

const w = 5;
const h = 10;
const a = calc(w, h);
console.log(`Area: ${a}`);

ここでのコードは正しいですが、コードにいくつかのあいまいさがあります。わかりやすい名前が使用されているコードを見てみましょう。

コードを改善しました

// Calculate the area of a rectangle
function calculateRectangleArea(width, height) {
    return width * height;
}

const rectangleWidth = 5;
const rectangleHeight = 10;
const area = calculateRectangleArea(rectangleWidth, rectangleHeight);
console.log(`Area of the rectangle: ${area}`);

ここでは、すべての変数名は一目瞭然です。そのため、コードが理解しやすくなり、コードの品質が向上します。

3.必要な場合にのみコメントを使用してください
どこにでもコメントを書く必要はありません。必要なところだけ、短く分かりやすく書きましょう。コメントが多すぎると混乱が生じ、コードベースが乱雑になります。

コメントのルール

1. 常にコードで説明するようにしてください。
2. 冗長にならないでください。
3. 明らかなノイズを追加しないでください。
4. 閉じ中括弧コメントは使用しないでください。
5. コードをコメントアウトしないでください。削除するだけです。
6. 意図の説明として使用します。
7. コードを明確にするために使用します。
8. 結果の警告として使用します。

例

// Function to get the square of a number
function square(n) {
    // Multiply the number by itself
    var result = n * n; // Calculate square
    // Return the result
    return result; // Done
}

var num = 4; // Number to square
var squared = square(num); // Call function

// Output the result
console.log(squared); // Print squared number

ここでは、コードを読むことで簡単に理解できるステップを定義するためにコメントが使用されていることがわかります。このコメントは不要であり、コードが乱雑になります。コメントの正しい使い方を見てみましょう。

コードを改善しました

/**
 * Returns the square of a number.
 * @param {number} n - The number to be squared.
 * @return {number} The square of the input number.
 */
function square(n) {
    return n * n;
}

var num = 4;
var squared = square(num); // Get the square of num

console.log(squared); // Output the result

上記の例では、コメントは必要な場合にのみ使用されています。これは、コードをクリーンにするための良い習慣です。

4. 1 つのことだけを行う関数を作成する
関数を作成するときは、関数にあまり多くの責任を追加しないでください。単一責任原則 (SRP) に従ってください。これにより、関数が理解しやすくなり、単体テストの作成が簡素化されます。

関数ルール

1. 小さくしましょう。
2. 一つのことをしてください。
3. わかりやすい名前を使用します。
4. 引数は少ない方が良いです。
5. メソッドをクライアントから呼び出せるいくつかの独立したメソッドに分割します。

例

async function fetchDataAndProcess(url) {
    // Fetches data from an API and processes it in the same function
    try {
        const response = await fetch(url);
        const data = await response.json();

        // Process data (e.g., filter items with value greater than 10)
        const processedData = data.filter(item => item.value > 10);

        console.log(processedData);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Usage
const apiUrl = 'https://api.example.com/data';
fetchDataAndProcess(apiUrl);

上記の例では、API を使用してデータを取得し、それを処理する関数が表示されます。これは別の関数で実行できます。現在、データ処理機能は非常に小規模ですが、運用レベルのプロジェクトでは、データ処理が非常に複雑になる可能性があります。その際、これを同じ関数内に保持することはお勧めできません。これにより、コードが複雑になり、一度で理解するのが難しくなります。
これのクリーンバージョンを見てみましょう。

コードを改善しました

async function fetchData(url) {
    // Fetches data from an API
    try {
        const response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

function processData(data) {
    // Processes the fetched data (e.g., filter items with value greater than 10)
    return data.filter(item => item.value > 10);
}

// Usage
const apiUrl = 'https://api.example.com/data';

fetchData(apiUrl)
    .then(data => {
        const processedData = processData(data);
        console.log(processedData);
    })
    .catch(error => {
        console.error('Error:', error);
    });

この例では、役割が分離されています。fetchData 関数が API 呼び出しを処理し、processData 関数がデータ処理を処理します。これにより、コードの理解、保守、テストが容易になります。

5.コードの重複を避ける (DRY 原則に従う - 自分自身を繰り返さない)

コードの保守性とクリーンさを強化するには、可能な限り再利用可能な関数を作成するか、既存のコードを再利用するように努めてください。たとえば、API からデータを取得してページに表示する場合は、データを取得して UI 表示用のレンダラーに渡す関数を作成します。同じデータを別のページに表示する必要がある場合は、同じ関数を再度記述するのではなく、関数をユーティリティ ファイルに移動する必要があります。これにより、両方のインスタンスで関数をインポートして使用できるようになり、コードベース全体での再利用性と一貫性が促進されます。

クリーンなコードを記述するためのその他の一般ルール

• 標準の規則に従います (JavaScript キャメルケースの場合)。
• 単純にしてください、愚かです。シンプルであるほど常に優れています。可能な限り複雑さを軽減します。
• ボーイスカウトのルール。キャンプ場を思ったよりきれいにして帰りましょう。
• 常に根本原因を見つけます。問題の根本原因を常に探してください。
• わかりやすいコードを書く

今日からこのプラクティスと原則を実装して、クリーンなコードを作成してください。