クリーンコードとは何か、そしてそれがなぜ重要なのか

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

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

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

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

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

であるコードを指します。

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. Always try to explain yourself in code.
2. Don't be redundant.
3. Don't add obvious noise.
4. Don't use closing brace comments.
5. Don't comment out code. Just remove.
6. Use as explanation of intent.
7. Use as clarification of code.
8. Use as warning of consequences.

Example

// 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

Here we can see comments are used to define steps which be easily understand by reading the code. This comments are unnecessary and making code cluttered. Let's see correct use of comments.

Improved code

/**
 * 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

In above example comments are used only where it is needed. This is good practice to make your code clean.

4. Write Functions That Do Only One Thing
When you write functions, don't add too many responsibilities to them. Follow the Single Responsibility Principle (SRP). This makes the function easier to understand and simplifies writing unit tests for it.

Functions rules

1. Keep it Small.
2. Do one thing.
3. Use descriptive names.
4. Prefer fewer arguments.
5. Split method into several independent methods that can be called from the client.

Example

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);

In the above example, we can see a function that fetches data using an API and processes it. This can be done by another function. Currently, the data processing function is very small, but in a production-level project, data processing can be very complex. At that time, it is not a good practice to keep this in the same function. This will make your code complex and hard to understand in one go.
Let's see the clean version of this.

Improved code

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);
    });

In the this example, the responsibilities are separated: the fetchData function handles the API call, and the processData function handles data processing. This makes the code easier to understand, maintain, and test.

5. Avoid Code Duplication (Follow DRY Principle - Don't Repeat Your Self)

To enhance code maintainability and cleanliness, strive to create reusable functions or reuse existing code whenever possible. For instance, if you are fetching data from an API to display on a page, you would write a function that retrieves the data and passes it to a renderer for UI display. If the same data needs to be shown on another page, instead of writing the same function again, you should move the function to a utility file. This allows you to import and use the function in both instances, promoting reusability and consistency across your codebase.

Other General Rules for writing Clean Code

• Follow standard conventions(For JavaScript Camel Case).
• Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
• Boy scout rule. Leave the campground cleaner than you found it.
• Always find root cause. Always look for the root cause of a problem.
• Write code which is easy to understand

Implement this Practices and Principles from today to write Clean Code.

以上がクリーンコードとは何か、そしてそれがなぜ重要なのかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。