クリーンで保守可能な JavaScript コードを記述するためのベスト プラクティス

1.意味のある変数名と関数名:
ヒント: 変数または関数の目的を明確に示すわかりやすい名前を使用してください。
例:

Copy code
// Bad
const x = calculate(5);

// Good
const totalPrice = calculatePrice(5);

2.説明コメント:
ヒント: 複雑なロジックや意図を説明するには、簡潔だが意味のあるコメントを作成してください。コメントでは、何が行われているかではなく、なぜ何かが行われるかを明確にする必要があります (これはコード自体から明らかである必要があります)。
例:

// Bad
// Loops through the array
array.forEach(item => doSomething(item));

// Good
// Process each item to filter out non-active users
array.forEach(item => filterActiveUsers(item));

3.単一責任の原則:
ヒント: 関数とメソッドが 1 つの特定のタスクを実行するようにして、再利用可能でデバッグを容易にします。
例:

// Bad
function handleUserLoginAndDisplayUserProfile() { /* multiple tasks */ }

// Good
function handleUserLogin() { /* one task */ }
function displayUserProfile() { /* one task */ }

4.一貫した書式設定とスタイル:
ヒント: 一貫したコード形式 (インデント、スペース) を使用し、スタイル ガイドライン (変数には CamelCase、クラスには PascalCase など) に従ってください。
例:

js
Copy code
// Bad
function fetchData(){return 'data'}

// Good
function fetchData() {
  return 'data';
}

5.マジックナンバーと文字列は避けてください:
ヒント: 数値や文字列をハードコーディングする代わりに名前付き定数を使用すると、コードが読みやすく、保守しやすくなります。
例:

// Bad
const discount = total * 0.1;

// Good
const DISCOUNT_RATE = 0.1;
const discount = total * DISCOUNT_RATE;

6.モジュラー コードを作成します:
ヒント: コードをより小さな再利用可能なモジュールまたは関数に分割します。これにより、再利用性と保守性が向上します。
例:

// Bad
function processOrder(order) { /* many tasks */ }

// Good
function validateOrder(order) { /* one task */ }
function calculateTotal(order) { /* one task */ }

7.意味のあるエラー処理を使用する:
ヒント: エラーを適切に捕捉して処理し、開発者やユーザーに有意義なフィードバックを提供します。
例:

// Bad
try {
  processOrder(order);
} catch (e) {
  console.log(e);
}

// Good
try {
  processOrder(order);
} catch (error) {
  console.error(`Failed to process order: ${error.message}`);
}

8. DRY 原則 (同じことを繰り返さない):
ヒント: 共通のロジックを関数またはモジュールにリファクタリングすることで、コードの重複を避けます。
例:

// Bad
const userAge = getUserAge();
const userName = getUserName();

// Good
function getUserDetails() {
  return {
    age: getUserAge(),
    name: getUserName(),
  };
}

以上がクリーンで保守可能な JavaScript コードを記述するためのベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。