クリーンなコードを記述する方法 – 例を含む開発者向けのヒント-jsチュートリアル-php.cn

鍵が見つからないほど散らかった部屋を想像してみてください。いたるところに衣服があり、本が山積みされ、混沌が君臨しています。

How to Write Clean Code – Tips for Developers with Examples

ここで、乱雑なコードで作業しているところを想像してください。

同じ災害ですが、以外は、正気を失っているのはあなたの脳です。

How to Write Clean Code – Tips for Developers with Examples
一方、クリーンなコードは、汚れのない部屋に入るようなものです。すべてが正確にあるべき場所にあります。ストレスもありません。混乱はありません。ただの明瞭さ。

これが真実です。ソフトウェア開発で成功したいのであれば、クリーンなコードを書くことは必須ではありません。

乱雑なコードを書いてすべてのバグを修正するのに苦労する人になることもできますし、きれいなコードをマスターして、触れるすべてのプロジェクトを支配することもできます。

クリーンなコーダー vs. 乱雑なコーダー

絵を描かせてください。

これは、2 つのタイプ のプログラマーの軌跡を示すグラフです。

How to Write Clean Code – Tips for Developers with Examples

⚠️ 悪いコーダー (赤い線): 起動は速いですが、激しくクラッシュします。彼らが書く行が多ければ多いほど、より多くの問題が発生します。
⚡ クリーンなコード (青線): 起動は遅いですが、一貫性は維持されます。成長は止まらず、加速します。

次に、どのラインをフォローするかを決定します。

不正なコードのコスト

How to Write Clean Code – Tips for Developers with Examples

このグラフを示すと、開発の初期段階では、悪いコードはきれいなコードよりも変更コストがわずかに高くなります。

しかし、メンテナンスとリファクタリングのフェーズに移行すると、その差は大幅に広がり、悪いコードはクリーンなコードのほぼ2倍のコストがかかります。

レガシーフェーズまでに、不良コードは100%のコストに達し、現在は更新に非常にコストがかかりますが、クリーンなコードは依然として管理しやすい45%です。

間違いなく、ソフトウェア開発において悪いコードはコストのかかる問題です。

クリーンなコードを記述するための 10 の完全なルール

1.何か意味のある名前を使用してください

変数または関数に b または x という名前を付けることは犯罪です。それらを何と呼んでください。

// Weak and vague
let b = 5;

// Strong and clear
let numberOfUsers = 5;

ログイン後にコピー

不明瞭な名前を書く人は自分の間違いを認めたくない。 そんな人にはならないでください。

2.機能をレーザー重視型に維持 (SRP)

関数は 1 つのことを実行し、それを完璧に実行する必要があります。これは単一責任原則 (SRP) と呼ばれます。

良いコードはハンマーのようなものです。 10 ではなく、1 つの釘に当たります。

// Clean: One job, one focus
function calculateTotal(a, b) {
    return a + b;
}

function logTotal(user, total) {
    console.log(`User: ${user}, Total: ${total}`);
}

// Dirty: Trying to do EVERYTHING
function calculateAndLogTotal(a, b, user) {
    let total = a + b;
    console.log(`User: ${user}, Total: ${total}`);
}

ログイン後にコピー

タスクを混合すると、混乱と災害が混合することになります。

3.コメントを松葉杖として使用するのはやめてください

あなたは、誰かが部屋に入るたびにドアが何をするのか説明しません。コードも同じように動作するはずです。

// Clean: Self-explanatory
let userAge = 25;

// Messy: Needs an explanation
let a; // This means "age of the user"

ログイン後にコピー

コメントは悪くありませんが、コードが自立できない場合は、すでに失敗しています。

4.読みやすくする

あなたのコードを読んでいる人が謎を解いているように感じたら、あなたはすでにトラブルメーカーになっています。

// Clean: Reads like a story
if (isLoggedIn) {
    console.log("Welcome!");
} else {
    console.log("Please log in.");
}

// Messy: Feels like chaos
if(isLoggedIn){console.log("Welcome!");}else{console.log("Please log in.");}

ログイン後にコピー

読み取り可能なコードは他の人だけのものではありません。今から 6 か月後のあなたのものです。

5.書いたものをすべてテストしてください

テストを書くのが面倒なら、コードが壊れても文句を言わないでください。

class Calculator {
    add(a, b) { return a + b; }
    subtract(a, b) { return a - b; }
}

// Test it (Unit Test)
const calculator = new Calculator();
console.assert(calculator.add(2, 3) === 5, "Addition failed");
console.assert(calculator.subtract(5, 3) === 2, "Subtraction failed");

ログイン後にコピー

検査はあなたの保険です。それらを無視すれば、あなたは自分の時間を賭けていることになります。

6.依存関係に注意してください

依存関係は取引のようなものです。正しいものを手に入れれば、勝ちです。選択を誤ると、後悔することになる閉じ込めになります。

// Dependency: Sending emails with Nodemailer
const nodemailer = require('nodemailer');
function sendEmail(to, subject, message) {
    const transporter = nodemailer.createTransport({ /* config */ });
    return transporter.sendMail({ from: "you@example.com", to, subject, text: message });
}

ログイン後にコピー

依存関係のハードコーディングを避けてください。安全なメンテナンスのために、抽象化 または 構成ファイル を使用します。

これはほんの一例です。開発者は、何百ものライブラリまたは依存関係を使用する可能性があります。

私はそれらに頼るべきではないと言っているのではありません、今日ではそれらを避けるのは難しいです。ただし、コーディングプロジェクトにインストールする前に、十分に注意する必要があります。

組織のソフトウェアシステムのセキュリティ、パフォーマンス、品質、または機能をチェックする必要があります。なぜなら、プロジェクト全体を台無しにするリスクが含まれる場合があるからです。

常に自分のツールをコントロールし、ツールに自分をコントロールさせないでください。

7.上司のようにプロジェクトを組織する

よく組織されたプロジェクトは、ガレージセールと高級ブティックのの違いです。

myProject
├── src
│   ├── components
│   ├── services
│   ├── utils
└── tests

ログイン後にコピー

このプロジェクトの各フォルダーをどのように編成するかは次のとおりです:

How to Write Clean Code – Tips for Developers with Examples

あなたのコードベースがジャンク引き出しのように見える場合、あなたはすでに未来の自分への敬意を失っています。

メールアプリの強固なプロジェクト構造:
ユーザーに電子メールを送信するアプリケーションを構築しているとします。上司のような堅固な SOLID プロジェクト構造は次のようになります:

How to Write Clean Code – Tips for Developers with Examples

8.フォーマットに一貫性を持たせる

10 の個性を持つ人のようにコーディングしないでください。フォーマットに一貫性を持たせてください。

Prettier や ESLint などのツールを使用して、一貫したスタイルを強制します。すべてのファイルが異なって見える場合、誰も修正したくない混乱が生じています。

フォーマットの一貫性は読みやすさを保証するため、クリーンなコードの基本原則であると言えます。

見てください...

How to Write Clean Code – Tips for Developers with Examples

コードベース全体で一貫して、インデントには 2 個または 4 個のスペースを使用します。異なるエディタ間で均一性を維持するには、タブを使用しないでください。

水平スクロールを防ぎ、読みやすさを向上させるため、行数は最大 100 ～ 120 文字に抑えてください。

関連ロジックをグループ化 まとめて、空白行を使用してコードのブロックを分離して、その目的を強調します。

最後に、コードの過度の整列は避けてください。代わりに、インデント によってロジックの流れを自然に導きます。

9.値のハードコーディングを停止

ハードコーディングは、努力を装った怠惰です。ご覧ください:

// Weak and vague
let b = 5;

// Strong and clear
let numberOfUsers = 5;

ログイン後にコピー

つまり、ハードコーディングは崖から落ちる近道です。

10.関数は短くしてください

関数が 20 行を超えている場合は、おそらくやりすぎています。分解してください。

// Clean: One job, one focus
function calculateTotal(a, b) {
    return a + b;
}

function logTotal(user, total) {
    console.log(`User: ${user}, Total: ${total}`);
}

// Dirty: Trying to do EVERYTHING
function calculateAndLogTotal(a, b, user) {
    let total = a + b;
    console.log(`User: ${user}, Total: ${total}`);
}

ログイン後にコピー

ショート関数は シャープ 関数です。 彼らは毎回目標を達成しました。