一般コーディング標準 JavaScript。

一般的なコーディング標準

1. 意味のある名前:
   • 意味があり説明的な変数名と関数名を使用します。
   • ループカウンターを除き、略語や 1 文字の名前は避けてください。

   // Good
   const userAge = 25;
   function calculateTotalPrice(items) { ... }

   // Bad
   const a = 25;
   function calc(items) { ... }

1. 一貫した命名規則:
   • 変数と関数にはキャメルケースを使用します。
   • クラス名には PascalCase を使用します。

   const userAge = 25;
   function calculateTotalPrice(items) { ... }
   class UserProfile { ... }

1. 繰り返しを避ける:
   • 繰り返されるコードを関数にカプセル化することで、DRY (Don'trepeat Yourself) 原則に従います。

   // Good
   function calculateDiscount(price, discount) { ... }
   const price1 = calculateDiscount(100, 10);
   const price2 = calculateDiscount(200, 20);

   // Bad
   const price1 = 100 - 10;
   const price2 = 200 - 20;

1. エラー処理:
   • API 呼び出しとその他の非同期操作を try-catch ブロックでラップします。

   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }

1. エッジケース:
   • 常にエッジケースを考慮し、入力を検証します。

   function getUserAge(user) {
     if (!user || !user.age) {
       return 'Age not available';
     }
     return user.age;
   }

1. 一貫したフォーマット:
   • 一貫したコードの書式設定スタイル (インデント、スペースなど) に従ってください。これを自動化するには、Prettier などのツールを使用します。

   if (condition) {
     doSomething();
   } else {
     doSomethingElse();
   }

コード構成

1. モジュール化:
   • コードを小さな再利用可能なモジュールまたは関数に分割します。

   // utils.js
   export function calculateDiscount(price, discount) { ... }

   // main.js
   import { calculateDiscount } from './utils.js';

1. 関心事の分離:
   • さまざまな関心事項 (UI ロジック、ビジネス ロジック、データ処理など) を別のファイルまたは関数に分割します。

   // ui.js
   function updateUI(data) { ... }

   // data.js
   async function fetchData() { ... }

   // main.js
   import { updateUI } from './ui.js';
   import { fetchData } from './data.js';

ベストプラクティス

1. 厳密モードを使用します:
   • 一般的なコーディング エラーを検出するには、常に厳密モードを有効にしてください。

   'use strict';

1. 定数を使用する:
   • 変化しない値には定数を使用します。

   const MAX_USERS = 100;

1. グローバル変数を避ける:
   • 競合や意図しない動作を避けるために、グローバル変数の使用を最小限に抑えます。

   // Good
   (function() {
     const localVariable = 'This is local';
   })();

   // Bad
   var globalVariable = 'This is global';

1. コメントとドキュメント:
   • コードの目的と機能を説明するコメントとドキュメントを作成します。

   /**
    * Calculates the total price after applying a discount.
    * @param {number} price - The original price.
    * @param {number} discount - The discount to apply.
    * @returns {number} - The total price after discount.
    */
   function calculateTotalPrice(price, discount) { ... }

1. エラー処理で Promise と Async/Await を使用する:
   • 非同期操作には Promise と async/await を使用し、エラー処理には Try-Catch ブロックでラップすることを好みます。

   // Good
   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }

   // Bad
   function fetchData(callback) {
     fetch('api/url')
       .then(response => response.json())
       .then(data => callback(data))
       .catch(error => console.error('Error fetching data:', error));
   }

1. オブジェクトの分割:
   • オブジェクトの分割を使用して、オブジェクトから複数のプロパティを簡潔な方法で抽出します。

   // Good
   const vehicle = { make: 'Toyota', model: 'Camry' };
   const { make, model } = vehicle;

   // Bad
   const vehicleMake = vehicle.make;
   const vehicleModel = vehicle.model;

これらの標準に従うことで、JavaScript コードがクリーンで、保守しやすく、効率的であることを保証できます。

以上が一般コーディング標準 JavaScript。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。