エラーが発生する前にエラーを阻止する

エラーが発生する前にエラーを阻止する: 安全な代入演算子 (?=) と Promise の適切な処理

JavaScript が進化するにつれて、コーディングをより効率的にし、エラーを防止することを目的として、新しい機能や提案が次々と導入されています。そのような機能の 1 つは、言語への追加が提案されている 安全な代入演算子 (?=) です。まだ正式リリースを待っているところですが、同様の機能を今日実装して、null や未定義の値などの一般的な問題からコードを保護できます。

この記事では、?= 演算子を調べ、既存の JavaScript を使用して独自のバージョンを構築し、非同期操作で Promise をより適切に処理する実用的な方法を紹介します。

安全な代入演算子 (?=) について理解する

?= 演算子とは何ですか?

安全な代入演算子 (?=) を使用すると、ターゲットが null または未定義の場合にのみ、開発者が変数に値を割り当てることができます。これは、「変数が空の場合はこの値を割り当てる」ということをより簡潔に表現したものです。

その仕組みは次のとおりです:

let username = null;
username ?= "Shahar"; 
console.log(username); // Output: "Shahar"

この場合、値が null だったため、変数 username には「Shahar」が割り当てられます。ユーザー名に既存の値がある場合、オペレーターは単に割り当てを渡します。

なぜ役に立つのか

?= 演算子は、明示的な if チェックや三項演算の必要性を減らしてコードを簡素化し、安全な代入を保証します。ただし、この演算子は ECMAScript 内でまだ提案段階にあり、JavaScript 言語の一部になる前に変更される可能性があります。ここで開発状況を追跡できます。

安全な代入関数の作成

ロールアウトセーフ割り当て

?= が正式になるのを待っている間に、safeAssign と呼ばれるカスタム ユーティリティ関数を使用してその動作を模倣することができます。この関数は、最新の環境ですでに広くサポートされているヌル合体演算子 (??) を使用します。

これがsafeAssign関数です:

function safeAssign(target, value) {
  return target ?? value;
}

実際の例

それがどのように機能するかを見てみましょう:

let username = undefined;
username = safeAssign(username, "Shahar");
console.log(username); // Output: "Shahar"

これは事実上、?= 演算子が行うことです。変数が null または未定義の場合は、値を割り当てます。それ以外の場合は、そのままにしておきます。

safeAssign の制限事項

safeAssign は ?= と同様の機能を提供しますが、次のような制限があります。

• 単純さ:safeAssign はユーティリティ関数であり、ネイティブの ?= 演算子と同じレベルの構文の優雅さを提供することはできません。カスタム関数を使いすぎると、コードがより冗長になる可能性があります。
• パフォーマンス: 小規模アプリケーションでは、safeAssign のパフォーマンスへの影響は無視できますが、大規模システムではエンジンの最適化により、?= などのネイティブ演算子の方が高速になる可能性があります。
• ブラウザのサポート:safeAssign で使用されるヌル合体演算子 (??) は、ほとんどの最新のブラウザと環境でサポートされていますが、古い環境ではポリフィルがないとサポートされない可能性があります。

他の言語との簡単な比較

他の多くの言語は、提案されている ?= 演算子と同様の機能を提供します。

• C# には null 合体代入演算子 (??=) があり、JavaScript の ?= 提案と同様に動作します。
• Python は、安全な代入に or キーワードを使用します。ここで、a = a or value は、a が偽の場合にのみ値を割り当てる一般的なパターンです。

これらの演算子により、空の可能性のある値の処理がより簡単になり、定型コードが削減されます。

safeAwait を使用した非同期操作の処理

safeAwait の導入

JavaScript で非同期操作を操作する場合、Promise の拒否や予期しない結果が発生しやすくなります。 .catch() を使用してすべての拒否を手動で処理する代わりに、safeAwait と呼ばれるカスタム関数を使用してプロセスを合理化できます。これは、Promise をよりクリーンで安全な構造でラップします。

safeAwait 関数は次のとおりです:

async function safeAwait(promise, errorHandler) {
  try {
    const data = await promise;
    return [null, data]; // Success: No error, return the data
  } catch (error) {
    if (errorHandler) errorHandler(error); // Optional error handler
    return [error, null]; // Error occurred, return error with null data
  }
}

例: エラー処理を使用したデータのフェッチ

safeAwait を使用して API からデータを取得し、潜在的なエラーを処理してみましょう:

async function getData() {
  const [error, response] = await safeAwait(
    fetch("https://api.example.com"),
    (err) => console.error("Request failed:", err)
  );

  if (error) return; // Exit if there's an error
  return response; // Return response if successful
}

この例では、safeAwait は成功とエラーの両方のケースを処理し、呼び出し側関数がより予測可能な方法で結果を処理できるようにします。

safeAwait のバリエーション

さまざまなユースケースに合わせて、safeAwait を拡張することもできます。たとえば、失敗する前に Promise を 1 回再試行するバージョンは次のとおりです。

async function safeAwaitWithRetry(promise, errorHandler, retries = 1) {
  let attempt = 0;
  while (attempt 



<p>このバリエーションでは、終了する前に、指定された回数まで Promise を再試行します。</p>

<h2>
  
  
  Best Practices for Error Handling in JavaScript
</h2>

<p>When working with asynchronous code, proper error handling is crucial. Here are some best practices:</p>

<ol>
<li>
<strong>Always handle rejected promises</strong>: Unhandled promise rejections can lead to crashes or undefined behavior. Use try/catch or .catch() to ensure promises are properly handled.</li>
<li>
<strong>Centralize error handling</strong>: Utility functions like safeAwait allow you to centralize error handling, making it easier to manage and debug your code.</li>
<li>
<strong>Graceful degradation</strong>: Ensure that your application can recover from errors gracefully without crashing or leaving the user in an undefined state.</li>
<li>
<strong>Use custom error messages</strong>: When throwing errors, provide meaningful error messages to help with debugging.</li>
</ol>

<h2>
  
  
  Before and After: Clean Code with safeAssign and safeAwait
</h2>

<p>Here’s a quick comparison of how these utilities can clean up your code.</p>

<h3>
  
  
  Without safeAssign:
</h3>



<pre class="brush:php;toolbar:false">if (user === null || user === undefined) {
  user = "Shahar";
}

With safeAssign:

user = safeAssign(user, "Shahar");

Without safeAwait:

try {
  const response = await fetch("https://api.example.com");
} catch (error) {
  console.error("Request failed:", error);
}

With safeAwait:

const [error, response] = await safeAwait(fetch("https://api.example.com"), (err) => console.error("Request failed:", err));

Conclusion

In summary, while the Safe Assignment Operator (?=) is still a proposal, we can replicate its behavior today using the safeAssign function for nullish values and safeAwait for more complex asynchronous operations. Both utilities simplify your code, making it more readable and maintainable.

Key Takeaways:

• The ?= operator simplifies safe assignments but is still in the proposal stage.
• You can replicate ?= functionality with safeAssign using the nullish coalescing operator (??), which is widely supported.
• For asynchronous operations, safeAwait provides a cleaner way to handle promise rejections and errors.
• Keep an eye on ECMAScript proposals for future updates.

By leveraging these patterns, you can handle errors like a pro and keep your code clean, readable, and safe.

以上がエラーが発生する前にエラーを阻止するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。