JavaScript のベストプラクティス

この記事では、JavaScript をコーディングする際の「良い習慣」について説明します。

1 — new Object()
の使用を避ける JavaScript では、新しいオブジェクトを使用するのは少し危険ですが、いくつかの理由からプリミティブを使用するほうが常に優れています。これについてさらに詳しく見てみましょう。

一般的に言うと
たとえば、"" はご存知のように文字列プリミティブを作成します。一方、 new String() は文字列オブジェクトを作成します。文字列オブジェクトはより複雑でメソッドがあるため、まさに比較や型強制に関して、予期せぬ動作を引き起こす可能性があります。

シンプルさ
プリミティブは使用方法が単純で単純です。プリミティブを使用すると不必要な複雑さが回避され、コードが読みやすく、保守しやすくなります。

パフォーマンス
プリミティブはメモリとパフォーマンスの点でより効率的です。オブジェクトの作成時には追加のオーバーヘッドが発生します。

混乱の可能性
JavaScript はオブジェクトとプリミティブを異なる方法で扱うため、new Object() を使用すると、意図せずにプリミティブではなくオブジェクトを扱うことになり、バグの巣窟に陥る可能性がある混乱した状況が発生する可能性があります。

ほとんどの場合、代わりにプリミティブを使用する方が良いでしょう。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

2 — 配列およびオブジェクトで let を使用しないようにします
まず最初に明確にしておきます…配列やオブジェクトで let を使用することには、本質的にはまったく問題はありません。ただし、場合によっては、それを回避する必要がある具体的な考慮事項がいくつかあります。

再割り当て vs.突然変異
ご存知のとおり、Let を使用すると変数自体を再割り当てできますが、これにより混乱やデータ損失が発生する可能性があります。オブジェクト/配列は、新しいデータセット全体 (新しいオブジェクト/新しい配列) で誤って再割り当てされる可能性があります。

代わりに const を使用すると、オブジェクト/配列への参照は変更されず、その内容は変更できることがより安全かつ明確になります。

不変性の意図
const を使用すると、一緒に作業する他の開発者に変数を再割り当てしてはならないことを知らせることができ、コードの可読性と保守性が向上します。

範囲
let にはブロック スコープがありますが、ループや条件文で予期しない動作が発生する可能性があります。 const を使用すると、変数は意図しない再代入のリスクなくスコープ内に残ります。

ベストプラクティス
多くのコーディング標準とベスト プラクティスは、再割り当ての必要のない変数に const を使用することを奨励し、よりクリーンで予測可能なコードを推進しています。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

3 — 自動型変換に注意してください
型強制とも呼ばれる、JavaScript では、言語が値をある型から別の型に自動的に変換するときに発生します。これはさまざまな状況で、特に異なるデータ型を伴う操作中に発生する可能性があります。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

数値には注意してください。誤って文字列または NaN に変換される可能性があります。したがって、機密性の高い操作の前に型テストを実装するか、安全な入力のために TypeScript を使用することを検討してください。

4 — 二重等価比較の使用を避ける
== と === は値を比較するために使用される比較演算子ですが、動作が異なります。

抽象的な平等
== を使用する場合、JavaScript は比較を行う前に値を共通の型に変換します

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

いつ使用するか?
値と型の両方が同じであることを確認する場合は、=== を使用します。これは、予期しない結果を避けるために一般に良い方法です。

値の型を考慮せずに値を比較する必要がある場合は == を使用しますが、これはバグを引き起こす可能性があるため、通常は推奨されません。

一般に、より予測可能で明確な比較を行うには、=== の使用を検討してください。

注: !== と !=

についても同じことが言えます。

5 — オブジェクト/配列の分割を使用する
JavaScript では、オブジェクトと配列で構造化手法を使用すると、いくつかの利点が得られます。

分割代入構文は、配列の値やオブジェクトのプロパティを個別の変数に解凍できるようにする JavaScript 式です。 MDN Web ドキュメントに記載されているとおりです。

簡潔さ
これにより、単一のステートメントでオブジェクトから複数のプロパティを抽出したり、配列から要素を抽出したりできるため、記述する必要のあるコードの量が削減されます。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

明瞭さ
分割すると、どのプロパティや要素を操作しているのかが明確に表示されるため、コードが読みやすくなります。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

デフォルト値
プロパティまたは要素が存在しない場合は、デフォルト値を簡単に割り当てることができます。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

ネストされた構造化
ネストされたオブジェクトまたは配列を構造解除すると、深くネストされたデータへのアクセスが簡素化されます。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

関数パラメータ
これは関数パラメータに便利で、値を直接解凍できます。

const { height = 180 } = person; // uses default value if height is undefined

分割するとコードが合理化され、コードがクリーンになり、保守が容易になります。

6 — デフォルトパラメータ
デフォルトのパラメーターは、コードをより明確で読みやすく保つために採用すると良いテクニックです。

デフォルトの関数パラメータでは、値がないか未定義が渡された場合に、名前付きパラメータをデフォルト値で初期化できます。 MDN Web ドキュメントに記載されているとおりです。

単一パラメータ

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

複数のパラメータ
複数のパラメータのデフォルトを設定できます。

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

複数を渡すときは、指定されていないパラメータに注意してください。未定義または渡されていない可能性があるパラメータを最初のパラメータとして、または渡される他のパラメータの前に渡すことは避けてください。

パラメータ値が指定されていないか、未定義として渡される可能性があると思われる場合は、指定されていない複数のパラメータと同様に、その値を必ず最後の値として渡してください。

式をデフォルトとして使用する
式を使用してデフォルト値を計算できます。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

デフォルトの残りパラメータ
デフォルトパラメータと残りのパラメータを組み合わせることができます。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

メリット
読みやすさの向上: 引数が省略された場合に使用されるデフォルトが明確です。
ボイラープレートの削減: 関数本体内のデフォルト値を確認して割り当てる必要性が減ります。
柔軟性の強化: 関数は、より広範囲の入力をより適切に処理できます。
デフォルトのパラメーターは、関数の使いやすさを向上させ、コードをクリーンにする強力な機能です!

7 — スイッチのデフォルトを使用します
switch ステートメントをデフォルトのケースで終了することは、JavaScript では良い習慣です。デフォルトのケースは、指定されたケースが入力と一致しない場合にフォールバックとして機能します:

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

キャッチオール
これは、予期しない値を処理する方法を提供し、コードが黙って失敗しないようにします。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

可読性の向上
デフォルトのケースを含めることで、あらゆる可能性を考慮したことが他の開発者 (または自分自身) に明確になります。

エラー処理
これは、予期しない値が発生したときにログを記録したり、エラーをスローしたりするために使用できます。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

予期しない入力を受け取る可能性がある場合は、常にデフォルトのケースを含めてください。
特にデバッグ シナリオで役立つフィードバックやログを提供するには、デフォルトのケースを使用します。
該当する場合は、デフォルトのケースを使用してフォールバック値を設定することを検討してください。
switch ステートメントにデフォルトのケースを追加すると、コードの堅牢性と保守性が向上します。

8 — eval()
の使用を避ける eval() は、文字列を引数として受け取り、それを JavaScript コードとして評価する組み込みの JavaScript 関数です。これは、実行時に生成されるコードを動的に実行できることを意味します。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

JavaScript では eval() の使用を避けることが、いくつかの重要な理由により広く推奨されています。

セキュリティリスク
コードインジェクション: eval() は任意のコードを実行する可能性があり、アプリケーションがコードインジェクション攻撃に対して脆弱になります。ユーザー入力が評価されると、攻撃者は悪意のあるコードを挿入する可能性があります。

const { height = 180 } = person; // uses default value if height is undefined

パフォーマンスの問題
実行速度が遅い: eval() で実行されるコードは、JavaScript エンジンによる特定の最適化をバイパスして実行時に解釈する必要があるため、通常のコードよりも遅く実行されます。
デバッグの課題
デバッグが困難: eval() を使用すると、デバッグが困難になります。 eval() 内でスローされたエラーは、元のソースまで追跡するのが難しい場合があります。
代替案
eval() の代わりに、次のより安全な代替手段を検討してください:

JSON 解析: JSON データを扱う場合は、eval() の代わりに JSON.parse() を使用します。
const jsonString = '{"name": "アリス"}';
const obj = JSON.parse(jsonString); // JSON 文字列をオブジェクトに変換する安全な方法
関数コンストラクター: 関数を動的に作成する必要がある場合は、代わりに Function コンストラクターの使用を検討してください。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

要約すると、セキュリティ リスク、パフォーマンスの問題、デバッグの困難さのため、eval() の使用は避けてください。コードの整合性とパフォーマンスを損なうことなく目標を達成するには、より安全な代替手段を選択してください。

9 — 厳密モードを使用します
JavaScript の「厳密モード」は、言語の制限されたバリアントを選択する方法であり、一般的なコーディングの間違いや「安全でない」アクションを検出するのに役立ちます。これにより、コードがより予測可能になり、デバッグが容易になります。

厳密モードを有効にする
グローバル: 「use strict」を設定することによって。スクリプト ファイルの先頭にあります。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

厳密モードを使用する利点
未宣言の変数の使用を防止します: 未宣言の変数に値を代入するとエラーがスローされます。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

この強制を排除します。厳密モードでは、明示的なコンテキストなしで呼び出される関数ではこれは未定義です。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

特定の構文を禁止します。問題がある、または混乱を招くと考えられる一部の構文は許可されません。
よくある落とし穴
アロー関数: アロー関数には独自の this がないため、Strict モードは同じように適用されないことに注意してください。
eval: eval ステートメント内で実行されるコードは、グローバル スコープではなくローカル スコープで実行されます。
一般に、厳密モードの使用は、よりクリーンで安全なコードを作成するのに役立つため、特に大規模なアプリケーションの場合、ベスト プラクティスと考えられています。

10 — コードをドライに保つ (同じことを繰り返さない)
DRY (Don'tRepeat Yourself) 原則は、コードの繰り返しを減らすことを目的としたソフトウェア開発における重要な概念です。すべての知識やロジックが 1 か所で表現されるようにすることで、コードの保守、理解、リファクタリングが容易になります。

機能
繰り返しロジックを関数にカプセル化します。こうすることで、同じコードを重複せずに再利用できます。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

モジュール
モジュールを使用してコードを整理します。これにより、関連する関数と変数をまとめて保持し、アプリケーションのさまざまな部分で再利用できるようになります。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

クラスとオブジェクト
クラスまたはオブジェクトを利用して、関連するデータと動作をグループ化します。このカプセル化は、同様のデータ構造を操作する際の繰り返しを避けるのに役立ちます。

const { height = 180 } = person; // uses default value if height is undefined

注: 日常のコーディングで「関数型プログラミング」パラダイムを採用している場合は、この「クラスとオブジェクト」以外のヒントを使用することを検討してください。

テンプレートとコンポーネント
Web 開発では、テンプレートまたはコンポーネント (React、Vue などのフレームワーク内) を使用して、再利用される UI ロジックとスタイルをカプセル化します。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

データ構造
データごとに個別の変数を作成するのではなく、配列またはオブジェクトを使用して関連データを保存します。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

DRY 原則を適用すると、コードがよりクリーンで保守しやすくなります。変更は 1 か所のみで行う必要があるため、バグのリスクを最小限に抑えることができ、乱雑さを軽減することで可読性が向上します。繰り返しを避けるのは重要ですが、バランスを取る必要があることを覚えておいてください。過度に抽象化すると複雑になる可能性があるため、これらの原則を適用する場合はご自身の判断で行ってください。

11 — 意味のある変数名と関数名を使用する
意味のある変数名と関数名を使用することは、明確で保守可能で理解しやすいコードを記述するために非常に重要です。

説明的であること
変数または関数の目的や値を明確に説明する名前を選択してください。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

機能にアクションワードを使用する
実行されるアクションを説明する動詞で関数を開始します。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

略語は避けてください
短い名前は便利そうに見えますが、混乱を招く可能性があります。広く理解されていない限り、略語は避けてください。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

一貫した命名規則を使用する
変数や関数にはキャメルケース、クラスにはパスカルケースなど、コードベース全体で一貫した命名規則を遵守してください。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

名前にデータ型または目的を示します
変数が特定の種類のデータを保持する場合、または特定の目的を果たす場合は、それを名前に含めます。

const { height = 180 } = person; // uses default value if height is undefined

コンテキスト情報を使用する
名前をより意味のあるものにするために、変数または関数が使用されるコンテキストを考慮してください。

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

簡潔かつ明確にしましょう
名前はわかりやすいものにする必要がありますが、長すぎてはいけません。明確さと簡潔さの間のバランスを目指してください。

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

ドメイン固有の言語を使用する
特定の分野 (金融、ヘルスケアなど) に取り組んでいる場合は、その分野に馴染みのある用語を使用してください。

金利 = 5.5 とします。 // 財務的な観点から明確です。

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

必要に応じてリファクタリングする
コードが進化するにつれて名前が適切でなくなったとわかった場合は、わかりやすくするために遠慮せずにリファクタリングしてください。

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

意味のある変数名と関数名により、コードの可読性と保守性が大幅に向上します。これにより、他の人 (そしてあなた自身) がコードの目的と機能を一目で理解できるようになり、共同作業とデバッグがはるかに容易になります。命名規則を明確にするよう常に努めてください。

12 — グローバル変数を避ける
グローバル変数を避けることは、JavaScript (およびプログラミング全般) において、クリーンでモジュール化された保守可能なコードを維持するための重要な習慣です。グローバル変数は、予期しない動作、名前の競合、デバッグの困難を引き起こす可能性があります。

関数スコープを使用する
関数内で変数を宣言してスコープを制限し、グローバルにアクセスできないようにします。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

let と const でブロック スコープを使用する
let と const を利用してブロック内 (ループや条件など) で変数を宣言し、そのブロックの外から変数にアクセスできないようにします。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

コードをモジュール化
コードをモジュールに整理します。 ES6 モジュールまたは IIFE (Immediately Invoked Function Expressions) を使用して変数をカプセル化します。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

オブジェクトにカプセル化:
グローバル スコープの汚染を避けるために、関連する変数と関数をオブジェクト内でグループ化します。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

ローカル ストレージを賢く使用する
データを永続化する必要がある場合は、グローバル変数の代わりにローカル ストレージ、セッション ストレージ、または IndexedDB の使用を検討してください。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

グローバルの使用を制限する
グローバル変数を使用する必要がある場合は、その使用を構成定数またはアプリケーション全体の設定に限定してください。グローバルな性質を示すために、それらに明確な名前を付けます。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

副作用を避ける
関数を設計するときは、グローバル変数を変更しないようにしてください。これにより、関数が予測可能になり、テストが容易になります。

const { height = 180 } = person; // uses default value if height is undefined

「これ」を賢く使用してください
オブジェクト指向プログラミングでは、グローバル変数に依存する代わりに、これを使用してインスタンス内の状態を管理します。

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

グローバル変数を回避することで、コードのモジュール性と保守性が向上します。これにより、名前の競合や意図しない副作用が防止され、コードがより予測可能になり、作業が容易になります。これらのベスト プラクティスに従うと、コードベースがよりクリーンで管理しやすくなります。

13 — 非同期コードに Promise と Async/Await を使用する
JavaScript で Promises と async/await を使用すると、非同期操作をより効果的に管理できるようになり、コードがすっきりして読みやすくなります。

約束を理解する
Promise は、非同期操作の最終的な完了 (または失敗) とその結果の値を表すオブジェクトです。

Promise コンストラクターを使用して Promise を作成できます。

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

約束を消費する
Promise の結果は、成功の場合は .then() を使用し、エラー処理の場合は .catch() を使用して処理できます。

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

約束の連鎖
Promise を使用して複数の非同期操作をチェーンできます。

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

非同期/待機の使用
async/await は、非同期コードを記述するためのより同期的な方法を提供し、読み取りと保守が容易になります。

非同期関数の宣言:
関数を非同期関数として定義するには、関数の前に async キーワードを使用します。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

非同期関数の呼び出し
非同期関数は、通常の関数と同じように呼び出すことができます。ただし、常に Promise が返されることに注意してください。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

複数の非同期操作の処理
Promise.all を使用すると、複数の Promise を並行して実行し、すべてが解決されるまで待つことができます。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

エラー処理
Promise と async/await は両方とも、エラーを適切に処理する方法を提供します。

Promise で .catch() を使用する:

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Async/Await での try/catch の使用:

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Promise と async/await を使用すると、JavaScript での非同期操作の処理がはるかに管理しやすくなります。これらはコールバック地獄を回避し、コードの可読性を向上させるのに役立ちます。これらのパターンを採用すると、よりクリーンで保守性が高く、エラーが発生しにくいコードが作成されます。

14 — コードを文書化する
コードを文書化することは、明確さを維持し、コラボレーションを支援し、長期的な保守性を確保するために不可欠です。

明確なコメントを使用する
「何を」ではなく「なぜ」を説明する: コードが何をするかではなく、なぜ何かをしたのかを説明することに重点を置きます。コード自体は、それが何をするのかを伝えるのに十分な可読性を備えている必要があります。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

複雑なロジックをコメントする: コードの複雑なセクションまたは明確ではないセクションについては、詳細な説明を提供します。

const { height = 180 } = person; // uses default value if height is undefined

Docstring スタイルのコメントを使用する
JavaScript では、特に JSDoc を使用する場合、構造化コメントを使用して関数、クラス、メソッドを文書化できます。

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

README ファイルを保守する
プロジェクトの場合は、概要、インストール手順、使用例、貢献ガイドラインを提供する README.md ファイルを管理します。

効果的なドキュメントはコードをより理解しやすく保守しやすくし、現在および将来の開発者 (あなた自身を含む) の効率的な作業に役立ちます。これらのプラクティスを開発ワークフローに組み込むことで、より良いコラボレーションが促進され、コードを操作する人の学習曲線が短縮されます。

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