最新の JavaScript のベスト プラクティス - パート 1

JavaScript は間違いなく世界で最も使用されているプログラミング言語であり、私たちの日常生活で最も重要なテクノロジーの 1 つであるインターネットに多大な影響を与えています。この権限には大きな責任が伴い、JavaScript エコシステムは急速に進化しているため、ベスト プラクティスに従うことが困難になっています。

この記事では、よりクリーンで保守しやすく効率的なコードを作成するための最新の JavaScript のトップ ベスト プラクティスをいくつか紹介します。

1. プロジェクトのルールが最も重要です

各プロジェクトには、コードの一貫性を維持するための特定のルールがある場合があります。これらのルールは、この記事の推奨事項を含む外部の推奨事項よりも常に優先されます。プロジェクトにプラクティスを実装する前に、それが確立されたルールに従っていること、およびチーム メンバー全員が同意していることを確認してください。

2. 更新されたJavaScriptを使用する

JavaScript は 1995 年の誕生以来、目覚ましい進化を遂げてきました。インターネット上で見かける古い慣例の多くは時代遅れになっている可能性があります。手法を実装する前に、その手法が言語の現在のバージョンと互換性があることを確認してください。

3. var の代わりに let と const を使用します

var はまだ有効ですが、その使用は時代遅れとみなされており、多くの場合、その機能範囲により追跡が困難なバグが発生する可能性があります。一方、 let と const は、宣言されているブロックに限定され、より予測可能で安全 スコープを提供します。

let をいつ使用するか、const をいつ使用するか?

• 変数の参照や値が変更されない場合は常に、const を使用します。これにより、不変の値が保護されるため、コードが理解しやすくなり、エラーが減ります。
• 将来変数の値を再割り当てする必要がある場合は、必要な場合にのみ let を使用します。

黄金律: デフォルトでは const を使用します。後で値を変更する必要がある場合は、let に切り替えます。

実践例

1. 定数値の場合は const:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

1. 値を変更してみましょう:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

1. スコープの比較 (let vs var):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

1. ループとコールバックの問題を回避します:

var を使用すると、ループ、特に非同期関数で予期しない動作が発生する可能性があります。

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

let はこれを修正します:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

var を let と const に置き換えることは良い習慣であるだけでなく、コードをより安全に、より読みやすく、デバッグを容易にするにも役立ちます。ありがとうの未来を作りましょう。

4. クラスを選ぶ: JavaScript のシンプルさ

JavaScript でのオブジェクト指向プログラミングに Function.prototype を使用するのは、古く、エラーが発生しやすいアプローチです。それどころか、ES6 で導入された クラス は、他のオブジェクト指向言語に近い、より直観的な構文を提供し、コードの読みやすさとメンテナンスを容易にします。

クラスを使用した例 (モダンで明確):

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Function.prototype との比較 (複雑で直感的ではありません):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

ご覧のとおり、プロトタイプベースのアプローチでは、メソッドを定義するためにより多くの手順が必要となり、経験の浅い開発者にとってはさらに混乱する可能性があります。クラスが読みやすいだけでなく、よりクリーンでモジュール化されたコードも促進されます。

クラスを使用する理由

• 読みやすくなり、エラーが発生しにくくなります。
• これらは、extends と super の使用による継承を容易にします。
• 最新のツールおよび ES6 標準との互換性が向上しました。

5. JavaScript で実際のプライベート フィールドを使用する

長い間、JavaScript 開発者はアンダースコア (_) などの規則を使用して、クラス内のプライベート フィールドをシミュレートしていました。ただし、プロパティはクラスの外部からアクセスできるため、これは単なる視覚的な慣例でした。 本当のプライベート フィールド のおかげで、特定のプロパティが外部から完全にアクセスできないことを保証できます。

⚠️ 注意: この機能は、一部のブラウザのコンソールでは利用できない場合があります。

なぜ実際のプライベートフィールドを使用するのでしょうか?

1. Authentic Encapsulation: データを保護し、クラスのコンテキスト外でデータにアクセスしたり変更したりできないようにします。
2. 可読性: # プレフィックスを使用すると、どのプロパティがプライベートであるかが明確になり、コードの理解が向上します。
3. データ セキュリティ: 偶発的なエラーや内部プロパティへの意図しないアクセスを防ぎます。

基本的な例:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

高度な例: 保護されたカウンター

ページへの訪問数を記録するクラスを作成したいが、誰もそのカウンターを直接操作できないようにしたいと想像してください。

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

この場合、#visits カウンターは外部アクセスから完全に保護されており、その値が不正に操作されないことが保証されます。

考慮事項

• プライベートフィールドにはサブクラスからもアクセスできません。
• 継承でプライベート データを操作する必要がある場合は、プライベート フィールドの代わりに保護されたメソッドの使用を検討してください。

6. アロー関数を使用する

アロー関数 は、JavaScript で関数を記述するための最新かつエレガントな方法です。これらはより短い構文を提供し、従来の関数とは異なり、 は this のコンテキストを自動的に継承するため、オブジェクト指向プログラミングでよくある問題を回避できます。

これらは、関数を引数として渡す必要がある、map、filter、reduce などの高階関数で特に役立ちます。

アロー関数を使用する理由

1. 短くてすっきりした構文: コードを読みやすくするのに最適です。
2. この自動のコンテキスト: コールバックまたはメソッドのエラーを回避するのに最適です。
3. インライン関数での理想的な使用法: マップ、フィルター、イベントで使用するものと同様です。

実践例

1. 配列を変換するマップを使用する

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

2.フィルターエレメント間フィルター付き

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

3. Reduce を使用して値を追加する

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

4. DOM イベント内 (コンテキストに注意してください!)

イベントでアロー関数を使用する場合、this コンテキストは変更されないため、便利です:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

ヒント: 使用すべきではない場合

矢印関数は優れていますが、すべてに最適なわけではありません。動的 this を使用する関数や、プロトタイプにメソッドを記述する必要がある場合など、関数コンテキスト自体にアクセスする必要がある場合は、これらを避けてください。

通常の関数の方が優れている例:

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  obtenerNombre() {
    return this.nombre;
  }
}

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

print をアロー関数に変更すると、このコンテキストが失われます。

そのセクションを改善しましょう!より完全で有用なものにするために、いくつかのコンテキスト、より明確な説明、およびいくつかの追加の例を追加しました。

7. ヌル合体オペレーター (??)

null 合体演算子 (??) は、論理演算子 || のより正確な代替手段です。デフォルト値を割り当てます。一方 || "falsy" を 0、false、または "" などの値とみなし、演算子 ?? ヌルまたは未定義のみを「欠損」値として評価します。 これにより、多くの場合、より安全でより具体的なオプションになります。

重要な違いは何ですか?

|| を使用すると、「falsy」値はデフォルト値に置き換えられます。

?? を使用すると、のみ が null または未定義の値を置き換えます。これにより、コンテキスト内で有効であれば、0 や "" などの「偽」の値を保持することができます。

基本的な例:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

一方、 || の場合:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

??を伴う実際のケース

• 有効な値を上書きせずにデフォルト値を設定します:

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

• オプションの構成を検証します:

オプションをカスタマイズできるシステムがあるとします。

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

• オプションのプロパティを使用する際のエラーを回避します:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

以上が最新の JavaScript のベスト プラクティス - パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。