ESLint を使用した JavaScript および React プロジェクトでの安全でない呼び出しの回避

ESLint を使用した JavaScript および React プロジェクトでの安全でない呼び出しの回避

?✨ 最新の JavaScript および React アプリケーションでは、未定義または null 値のプロパティにアクセスしたり、未定義の配列またはオブジェクトのメソッドを呼び出したりすることによって発生するランタイム エラーが発生することがよくあります。これらの問題はユーザー エクスペリエンスを混乱させ、デバッグを悪夢のようなものにする可能性があります。この記事では、一般的な問題を特定し、それらを効果的に軽減するための ESLint 構成を提供します。 ??

?✨ React または React Native プロジェクトでは、TypeScript を使用していないため、安全なコードを書くことを忘れることがあります。これらの安全でないコードは、React Native アプリのクラッシュ、ユーザーのイライラ、メンテナンスの複雑化など、本番環境で多くの問題を引き起こす可能性があります。これらの一般的な問題とその解決方法について詳しく見ていきましょう。 ???

安全でない通話に関する一般的な問題

1. 未定義または null のプロパティにアクセスする ??✨

問題：

未定義または null のオブジェクトのプロパティにアクセスすると、実行時エラーが発生します:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

解決：

• 解決策 1: オプションのチェーン (?.) を使用します。

const name = user?.name;

• 解決策 2: デフォルトのフォールバックを採用します。

const name = user ? user.name : 'Default Name';

• 解決策 3: アクセスする前に必ず初期化を行ってください。

const user = { name: 'Default Name' };

2. 未定義または null でメソッドを呼び出す ✋??

問題：

未定義の配列に対して .map() や .filter() などのメソッドを呼び出すと、エラーがスローされます:

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

解決：

• 解決策 1: 変数が配列であることを確認します。

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

• 解決策 2: デフォルトの配列を指定します。

const items = someValue || [];
items.map(item => console.log(item));

• 解決策 3: ヌル合体演算子 (??) を使用します。

const items = possibleItems ?? [];

3. 未定義の関数を呼び出します ⚙️⚠️?

問題：

未定義の可能性がある関数を呼び出そうとしています:

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

解決：

• 解決策 1: 呼び出す前に存在を確認します。

if (typeof handler === 'function') {
  handler();
}

• 解決策 2: no-op のデフォルト関数を割り当てます。

const handler = passedHandler || (() => {});

4. 未定義または Null オブジェクトの構造解除 ?❌?

問題：

未定義のオブジェクトからプロパティを構造化すると、エラーが発生します:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

解決：

• 解決策 1: デフォルトでオプションのチェーンを使用します。

const name = user?.name;

• 解決策 2: 構造を解除する前に検証します。

const name = user ? user.name : 'Default Name';

5. 存在しない配列要素へのアクセス ???

問題：

未定義の配列の要素にアクセスするとエラーが発生します:

const user = { name: 'Default Name' };

解決：

• 解決策 1: デフォルトのフォールバックを提供します。

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

• 解決策 2: 配列を適切に初期化します。

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

6. 配列/関数の使用法が無効ですか??

問題：

未定義の値またはオブジェクトに対して .map() や .filter() などの配列メソッドを使用する:

const items = someValue || [];
items.map(item => console.log(item));

解決：

• 解決策 1: 配列関数の入力を常に検証します。

const items = possibleItems ?? [];

• 解決策 2: 入力が無効な場合は、安全な結果を返します。

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

7. 条件チェックが不十分ですか??

問題：

条件を厳密に検証しないと、偽の値に依存するなどのバグが発生する可能性があります。たとえば、ブール値を期待する条件が、未定義や 0 などの他の型を誤って評価する可能性がある場合:

if (typeof handler === 'function') {
  handler();
}

解決：

• 解決策 1: 厳密な等価比較を使用します。

const handler = passedHandler || (() => {});

• 解決策 2: 意図した動作に合わせて値を明示的に強制します。

const obj = undefined;
const { name } = obj; // ❌ Runtime Error: Cannot destructure property 'name' of undefined

• 解決策 3: コード内で明示的な条件を定義します。

const { name = 'Default Name' } = user || {};

---

ESLint を使用して安全でない呼び出しを回避する ??✅

開発中にこれらの問題を検出するには、特定のルールを備えた ESLint を活用できます。以下は、安全でない呼び出しにフラグを立てて修正を提案する ESLint 設定です。 ?️??

ESLint 構成 ???️

次のルールを .eslintrc.js または ESLint 構成ファイルに追加します。

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

ルールの説明 ?⚙️?

1. @typescript-eslint/no-unnecessary-condition: 不要な条件、または未処理の潜在的な未定義値または null 値にフラグを立てます。 ⚠️
2. no-unused-expressions: 明示的に必要でない限り、someObject && someObject.doSomething のような短絡ロジックが回避されるようにします。 ?
3. @typescript-eslint/no-unsafe-call: 非関数での安全でない関数呼び出しを防止します。 ❌
4. @typescript-eslint/no-unsafe-member-access: フラグは、未定義の可能性のある値のプロパティにアクセスしようとします。 ✋
5. consistent-return: 無効な値または未定義の値が返されるのを避けるために、関数内で一貫した戻り値の型を強制します。 ?
6. @typescript-eslint/strict-boolean-expressions: 暗黙的な強制を防止することで条件式を強化します。 ?
7. @typescript-eslint/no-non-null-assertion: 安全でない ! null/未定義チェックをバイパスするために使用される演算子。 ?

---

必要な依存関係をインストールしています ???

これらのルールを有効にするには、必要な ESLint プラグインとパーサーがインストールされていることを確認してください。

const name = user?.name;

---

ESLint と VSCode の統合 ?️??

1. ESLint 拡張機能をインストールします:

• VSCode マーケットプレイスで「ESLint」を検索し、インストールします。 ✨

2. 自動修正を有効にする:

次を settings.json に追加します:

const name = user ? user.name : 'Default Name';

3. ESLint を実行します:

ESLint を実行するための npm スクリプトを追加します:

const user = { name: 'Default Name' };

次に、npm run lint を実行して問題を検出します。 ?

---

結論 ？？？

上記の ESLint ルールとプラクティスを実装することで、安全でない呼び出しがランタイム エラーになる前に見つけて修正できます。 ??このアプローチにより、JavaScript および React プロジェクトの信頼性と保守性が向上します。 ?⚙️✨

---

以上がESLint を使用した JavaScript および React プロジェクトでの安全でない呼び出しの回避の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。