👩🏽‍🚀 👨🏼‍🎨 🧚🏻 表現力豊かなJavaScript：エラーの検出と処理 ✋🏻 🧗🏿 👨‍⚕️

内容

デバッグは、最初はコードを記述するよりも2倍困難です。 したがって、可能な限り単純なコードを記述した場合、定義上、デバッグすることはできません。

ブライアン・カーニハンとP.J.フラワー、プログラミングスタイルの基礎

Ewan-Maは、多くのグローバル変数とひどいハックを使用して小さなプログラムを作成しました。 プログラムを読んでいる生徒は彼に尋ねました。 「主人は答えた：「家が燃えていない場合、散水ホースを追いかける必要はありません。」

マスターユンマ、「プログラミングブック」。

プログラムは結晶化した思考です。時々、考えが混乱します。思考をプログラムにコードに変換すると、エラーが思考に変わることがあります。どちらの場合も、破損したプログラムが取得されます。

プログラムの欠点は通常、バグと呼ばれます。これらは、プログラマーのエラーまたはプログラムが対話するシステムの問題である可能性があります。明らかなエラーもあれば、微妙なエラーもあり、システム内に何年も隠れることがあります。

多くの場合、問題はプログラマーが予見しなかったような状況で発生します。これらの状況は避けられない場合があります。ユーザーが年齢を入力するように求められ、「オレンジ」を入力すると、プログラムは困難な状況に置かれます。これらの状況を予測し、何らかの方法で処理する必要があります。

プログラマーのエラー

プログラマーのエラーの場合、目標は明確です。それらを見つけて修正する必要があります。このようなエラーの範囲は、プログラムが表示されるとすぐにコンピューターが文句を言う単純なタイプミスから、特殊なケースで誤った結果につながるプログラムの動作の理解における隠れたエラーにまで及びます。後者の種類のエラーは、数週間にわたって探すことができます。

異なる言語は、さまざまな方法でエラーを見つけるのに役立ちます。残念ながら、JavaScriptはこのスケールの終わりにあり、「ほとんど助けにならない」というラベルが付けられています。一部の言語では、プログラムを開始する前にすべての変数と式の型を正確に知る必要があり、型が正しく使用されていない場合はすぐに通知されます。 JavaScriptは実行時に型のみを考慮しますが、それでも次のような苦情がなければあまり意味のないことを実行できます。

x = true * ""

JavaScriptはまだいくつかのことについて不平を言っています。構文的に正しくないプログラムを作成すると、すぐにエラーが発生します。関数ではない何かの呼び出しや未定義変数のプロパティへのアクセスなど、その他のエラーは、プログラムの実行中にこのような意味のない状況に遭遇すると発生します。

しかし、多くの場合、あなたの無意味な計算は単純にNaN（数ではない）または未定義を生成します。プログラムは、何か意味のあることを実行していることを確認して、楽しく続けます。このような架空の値がすでにいくつかの関数を通過している場合、エラーは後で現れます。エラーメッセージはまったく発生しない場合がありますが、実行結果が正しくない場合があります。そのような問題の原因を見つけることは難しい作業です。

プログラム内のバグを見つけるプロセスは、デバッグと呼ばれます。

厳格モード

JavaScriptを厳密モードにすると、JavaScriptをより厳密にできます。このために、「use strict」がファイルの先頭または関数の本体に書き込まれます。例：

 function canYouSpotTheProblem() { "use strict"; for (counter = 0; counter < 10; counter++) console.log("  "); } canYouSpotTheProblem(); // → ReferenceError: counter is not defined

通常、カウンタの前の例のように、変数の前にvarを記述するのを忘れると、JavaScriptは静かにグローバル変数を作成して使用します。厳格モードでは、エラーがスローされます。とても便利です。ただし、グローバル変数が既に存在する場合はエラーは発生しません-割り当てが新しい変数を作成する場合のみです。

別の変更-このバインディングには、メソッドとしてではなく呼び出された関数に未定義が含まれています。非厳密モードで関数を呼び出すとき、これはグローバルスコープオブジェクトを指します。したがって、誤ってストリクトモードでメソッドを誤って呼び出した場合、JavaScriptから何かを読み取ろうとするとエラーがスローされ、グローバルオブジェクトでうまく動作しません。

たとえば、新しいキーワードなしでコンストラクターを呼び出すコードを考えます。この場合、作成されるオブジェクトを参照しません。

 function Person(name) { this.name = name; } var ferdinand = Person(""); // - console.log(name); // →

無効なPerson呼び出しは成功しますが、未定義として戻り、グローバル変数名を作成します。厳格モードでは、すべてが異なります。

 "use strict"; function Person(name) { this.name = name; } // ,    'new' var ferdinand = Person(" "); // → TypeError: Cannot set property 'name' of undefined

エラーについてすぐに通知されます。とても快適です。

厳密モードでは、他のことができます。同じ名前の複数のパラメーターを使用して関数を呼び出すことを禁止し、言語の潜在的に問題のあるプロパティをいくつか削除します（たとえば、withステートメントは、本書では説明していません。

要するに、プログラムテキストの前に厳密なラベルを使用すると、問題が発生することはほとんどありませんが、問題を確認するのに役立ちます。

テスト中

言語がエラーの発見に役立たない場合、プログラムを起動し、それが本来の方法で何かを行うかどうかを観察することにより、エラーを困難な方法で探す必要があります。

何度も何度も手動で行うことは、確実に夢中になる方法です。幸いなことに、多くの場合、メインプログラムの検証を自動化する別のプログラムを作成できます。

例として、再びベクタータイプを使用します。

 function Vector(x, y) { this.x = x; this.y = y; } Vector.prototype.plus = function(other) { return new Vector(this.x + other.x, this.y + other.y); };

ベクターの実装が正常に機能することを確認するプログラムを作成します。次に、実装を変更するたびに、テストプログラムを実行して、問題が発生しないことを確認します。ベクタータイプに機能（たとえば、新しいメソッド）を追加すると、この新しい機能のチェックが追加されます。

 function testVector() { var p1 = new Vector(10, 20); var p2 = new Vector(-10, 5); var p3 = p1.plus(p2); if (p1.x !== 10) return ": x property"; if (p1.y !== 20) return " : y property"; if (p2.x !== -10) return " : negative x property"; if (p3.x !== 0) return " : x from plus"; if (p3.y !== 25) return " : y from plus"; return " "; } console.log(testVector()); // →

このようなチェックを記述すると、コードが重複します。幸いなことに、小切手を書くために特別に調整された特別な言語を使用してテストスイートを書くのを助けるソフトウェア製品があります。それらはテストフレームワークと呼ばれます。

デバッグ

プログラムの問題に気づいたら-それは正しく動作せず、エラーを発行します-それは問題が何であるかを見つける時です。

時々これは明らかです。エラーメッセージはプログラムの特定の行につながります。エラーの説明とこの行を読むと、問題を見つけることができます。

しかし、常にではありません。エラーにつながる行は、他の場所で受け取った不正な値が誤って使用される最初の場所であることが判明する場合があります。エラーメッセージがまったく表示されない場合もあります-単に誤った結果が表示されるだけです。前の章の演習を行った場合、そのような状況にいることは間違いないでしょう。

次の例では、指定された番号システムの番号を文字列に変換し、最後の桁を取得して除算を行い、この番号を取り除きます。しかし、プログラムにエラーが存在することを示唆しているため、プログラムによって生成されるワイルドな結果です。

 function numberToString(n, base) { var result = "", sign = ""; if (n < 0) { sign = "-"; n = -n; } do { result = String(n % base) + result; n /= base; } while (n > 0); return sign + result; } console.log(numberToString(13, 10)); // → 1.5e-3231.3e-3221.3e-3211.3e-3201.3e-3191.3e-3181.3…

問題を見つけたとしても、まだ見つけていないふりをします。プログラムがクラッシュすることはわかっているので、その理由を調べる必要があります。

ここでは、コードにランダムな変更を加えるという衝動を克服する必要があります。代わりに考えてください。結果を分析し、これが起こる理論を考え出します。理論をテストするために追加の観察を行います—理論がない場合は、理論を発明するのに役立つ観察を行います。

複数のconsole.log呼び出しを戦略的な場所に配置することは、プログラムの機能に関する詳細情報を取得するための良い方法です。この場合、13、1、0の値を取るためにnが必要です。ループの先頭に値を出力しましょう。

 13 1.3 0.13 0.013 … 1.5e-323

うん。 13を10で除算しても整数は生成されません。 n / = baseの代わりに、n = Math.floor（n / base）が必要です。その場合、数値は右に正しく「シフト」されます。

console.logに加えて、ブラウザーでデバッガーを使用できます。最新のブラウザでは、選択したコード行にブレークポイントを配置できます。これにより、選択した行に到達するたびにプログラムが一時停止し、変数の内容を表示できます。プロセスはブラウザごとに異なるように構成されているため、プロセスの詳細については説明しません。ブラウザの「開発者ツール」、開発者ツールを探してください。ブレークポイントを設定するもう1つの方法は、デバッガーキーワードで構成されるコードにデバッガー命令を含めることです。開発者ツールがアクティブな場合、プログラムはこの指示で一時停止され、プログラムのステータスを調べることができます。

エラー伝播

残念ながら、プログラマはすべての問題の発生を防ぐことができません。プログラムが外部と通信する場合、誤った入力データを受信するか、対話しようとしているシステムが壊れているか、アクセスできない可能性があります。

単純なプログラム、またはあなたの監督の下で動作するプログラムは、そのような瞬間に単に「あきらめる」ことができます。問題を調査して、再試行できます。「実際の」アプリケーションは、単に「クラッシュ」するべきではありません。時には、誤った入力データを受け入れて、何らかの方法でそれらを操作する必要があります。それ以外の場合は、何かがうまくいかなかったことをユーザーに伝える必要があります-そして、あきらめます。いずれにせよ、プログラムは問題に対応して何かをしなければなりません。

整数を要求してそれを返すpromptInteger関数があるとします。ユーザーが「オレンジ」と入力した場合、彼女はどうすればよいですか？

1つのオプションは、特別な意味を返すことです。通常、これらの目的にはnullおよびundefinedが使用されます。

 function promptNumber(question) { var result = Number(prompt(question, "")); if (isNaN(result)) return null; else return result; } console.log(promptNumber("  ?"));

これは信頼できる戦略です。ここで、promptNumberを呼び出すコードは、番号が返されたかどうかを確認する必要があります。返されなかった場合は、どうにかして状況から抜け出します。もう一度尋ねるか、デフォルト値を設定します。または、呼び出した人に特別な意味を返し、失敗を報告します。

そのような多くの場合、エラーが頻繁に発生し、関数呼び出しコードがそれらを考慮する必要がある場合、エラーのインジケータとして特別な値を返すことは完全に受け入れられます。しかし、欠点もあります。まず、関数がとにかくどんなタイプの値も返すことができたらどうでしょうか？彼女が容認できる結果とは異なる特別な値を見つけることは困難です。

2番目の問題-特別な値を使用すると、コードが散らかることがあります。 promptNumber関数が10回呼び出された場合、10回チェックして、nullを返したかどうかを確認する必要があります。 nullに対する反応が、nullをより高いレベルに返すことである場合、このコードが呼び出された場所では、nullチェックを埋め込む必要もあります。

例外

関数が正常に動作しない場合、動作を停止し、そのようなエラーを処理できる場所にジャンプします。これは例外処理によって処理されます。

実行時に問題が発生したコードは、特定の値である例外（例外の発生、例外のスロー）を発生（またはスロー）できます。例外の戻り値は、関数からの特定の「ポンプされた」戻り値に似ています。関数自体からだけでなく、それを呼び出したすべての関数から、実行が開始された場所にジャンプします。これは、スタックの巻き戻しと呼ばれます。第3章の関数スタックを覚えているかもしれません...例外は、スタックをすばやくスクロールダウンし、発生したすべての呼び出しコンテキストを破棄します。

例外がスタックの最下部にすぐに到達した場合、それらの利点はほとんどありません。プログラムを爆破する興味深い方法を提供するだけです。彼らの強みは、スタックの途中で、スタックに沿ってレースする例外をキャッチする「障害物」を置くことができることです。そして、これで何か有用なことができます。その後、プログラムは例外がキャッチされたポイントから実行を続けます。

例：

 function promptDirection(question) { var result = prompt(question, ""); if (result.toLowerCase() == "left") return "L"; if (result.toLowerCase() == "right") return "R"; throw new Error(" : " + result); } function look() { if (promptDirection("?") == "L") return ""; else return "  "; } try { console.log("  ", look()); } catch (error) { console.log("-  : " + error); }

throwキーワードは、例外をスローするために使用されます。 catchは、tryブロックにラップされたコードで、その後にcatchが続きます。 tryブロック内のコードが例外をスローすると、catchブロックが実行されます。括弧で示された変数は、例外の値にバインドされます。 catchブロックの実行が完了した後、またはtryブロックが問題なく実行された場合、実行はtry / catchステートメントの後にあるコードに進みます。

この場合、Errorコンストラクターを使用して例外を作成しました。これは、メッセージプロパティを持つオブジェクトを作成する標準コンストラクタです。最新のJavaScript環境では、このコンストラクターのインスタンスは、例外がスローされたときに蓄積された呼び出しスタックに関する情報、いわゆるスタックトレースも収集します。この情報はスタックプロパティに格納され、問題の解析に役立ちます。問題が発生した関数と、この呼び出しにつながった他の関数を報告します。

look関数は、promptDirectionの問題の可能性を完全に無視することに注意してください。これは例外の利点です。エラー処理コードは、エラーが発生し、処理される場所でのみ必要です。中間関数は単にそれに注意を払っていません。

まあ、ほとんど。

例外でクリーンアップ

次の状況を想像してください。withContext関数は、実行中に最上位の変数コンテキストが特別なコンテキスト値を受け取ることを確認したいと考えています。完了後、古い値を復元します。

var context = null;

 function withContext(newContext, body) { var oldContext = context; context = newContext; var result = body(); context = oldContext; return result; }

body関数が例外をスローした場合はどうなりますか？この場合、withContextの呼び出しはスタックからの例外によってスローされ、コンテキスト変数は元の値を返しません。

ただし、tryステートメントには別の機能があります。 catchの代わりに、またはcatchと一緒に、finallyブロックを続けることができます。 finallyブロックは、「tryブロックが実行された後でもコードを実行する」ことを意味します。関数をクリーンアップする必要がある場合は、クリーンアップコードをfinallyブロックに含める必要があります。

 function withContext(newContext, body) { var oldContext = context; context = newContext; try { return body(); } finally { context = oldContext; } }

bodyの呼び出し結果を返すために別の変数に格納する必要がなくなったことに注意してください。 tryブロックから戻っても、finallyブロックは実行されます。これで安全にこれを行うことができます：

 try { withContext(5, function() { if (context < 10) throw new Error("  !"); }); } catch (e) { console.log(": " + e); } // → : Error:   ! console.log(context); // → null

withContextから呼び出された関数が「壊れた」という事実にもかかわらず、withContext自体はコンテキスト変数の値をクリアします。

選択的例外キャッチ

例外がスタックの最下部に到達し、誰もキャッチしていない場合、環境はそれを処理します。正確に-特定の環境に依存します。ブラウザーでは、エラーの説明がコンソールに表示されます（通常は[ツール]または[開発]メニューで利用できます）。

プログラムが原則として処理できないエラーまたは問題について話している場合は、そのようなエラーを単にスキップしてもかまいません。未処理の例外は、プログラムの問題を報告するための合理的な方法です。最新のブラウザーのコンソールは、問題が発生した時点でスタックにあった関数呼び出しに関する必要な情報を提供します。

問題の発生が予測可能な場合、プログラムは未処理の例外でクラッシュすることはありません-これは非常にユーザーフレンドリーではありません。

許容されない言語の使用—存在しない変数への参照、nullに等しい変数のプロパティのクエリ、または関数ではない何かの呼び出しも例外をスローします。このような例外は、独自の例外と同じ方法でキャッチできます。

catchブロックに入ると、tryブロック内の何かが例外を引き起こしたことがわかるだけです。何が正確に、どのような例外が発生したのかはわかりません。

JavaScript（露骨な省略）は、例外を選択的にキャッチするための直接的なサポートを提供しません：すべてをキャッチするか、まったくキャッチしません。このため、人々はしばしば、発生した例外がcatchブロックがまさに書かれたものであると仮定します。

しかし、異なる場合があります。違反は別の場所で発生したか、エラーがプログラムに侵入しました。有効な回答が得られるまでpromptDirectionを呼び出そうとする例を次に示します。

 for (;;) { try { var dir = promtDirection("?"); // ← ! console.log("  ", dir); break; } catch (e) { console.log(" .   ."); } }

for（;;）コンストラクトは、無限ループを配置する方法です。許容できる方向に到達した場合にのみ脱落します。しかし、promptDirectionという名前のスペルを間違えました。これにより、「undefined variable」というエラーが発生します。また、catchブロックは例外eの値を無視するため、別の問題を処理していると仮定して、スローされた例外は誤った入力の結果であると見なします。これにより、無限ループが発生し、無効な変数名に関する有用なエラーメッセージが非表示になります。

原則として、どこかにリダイレクトするという目標がない限り、このような例外をキャッチしないでください。たとえば、ネットワークを介して、プログラムのクラッシュについて別のシステムに通知します。さらに、重要な情報が隠されているかどうかを注意深く確認してください。

そのため、特定の例外をキャッチする必要があります。 catchブロックで、発生した例外が関心のある例外であるかどうかを確認し、そうでない場合は再度スローします。しかし、どのように例外を認識するのでしょうか？

もちろん、メッセージプロパティを、待機しているエラーメッセージと比較できます。しかし、これはコードを記述するための信頼性の低い方法です-ソフトウェア意思決定を行うために人（メッセージ）を対象とした情報を使用します。誰かがこのメッセージを変更または翻訳するとすぐに、コードは機能しなくなります。

新しいタイプのエラーを定義し、instanceofを使用して認識してみましょう。

 function InputError(message) { this.message = message; this.stack = (new Error()).stack; } InputError.prototype = Object.create(Error.prototype); InputError.prototype.name = "InputError";

プロトタイプはError.prototypeを継承しているため、InputErrorタイプのオブジェクトに対してinstanceof Errorも実行されます。そして、他の標準タイプのエラー（Error、SyntaxError、ReferenceErrorなど）と同様に、nameプロパティが割り当てられます。

スタックプロパティを割り当てると、Errorオブジェクトを作成し、そのスタックを使用することにより、それをサポートするプラットフォームで、このオブジェクトにスタックトラッキングを渡そうとします。

現在、promptDirectionはこのようなエラーを作成できます。

 function promptDirection(question) { var result = prompt(question, ""); if (result.toLowerCase() == "left") return "L"; if (result.toLowerCase() == "right") return "R"; throw new InputError("Invalid direction: " + result); }       . for (;;) { try { var dir = promptDirection("?"); console.log(" ", dir); break; } catch (e) { if (e instanceof InputError) console.log(" .   ."); else throw e; } }

このコードはInputErrorインスタンスのみをキャッチし、他の例外をスキップします。同じタイプミスを再度行うと、未定義の変数に関するメッセージが正しく表示されます。

アサーション

クレームは、単純なエラーチェックのためのツールです。ヘルパー関数のアサートを検討してください。

 function AssertionFailed(message) { this.message = message; } AssertionFailed.prototype = Object.create(Error.prototype); function assert(test, message) { if (!test) throw new AssertionFailed(message); } function lastElement(array) { assert(array.length > 0, "   lastElement"); return array[array.length - 1]; }

これは、値の要件を厳しくするコンパクトな方法で、指定された条件が満たされない場合に例外をスローします。たとえば、配列の最後の要素を取得するlastElement関数は、アサーションを使用しなかった場合、空の配列に対してundefinedを返します。空の配列の最後の要素を取得しても意味がありません。これは明らかにプログラマーのエラーになります。

ステートメントは、エラーがコミットされた場所でプログラムの中断を引き起こすことを確認する方法であり、システムを介して送信され、これに関連しない他の場所で問題を引き起こすだけでなく、奇妙な量を与えます。

まとめ

エラーと無効な入力は人生で起こります。プログラムのエラーを探して修正する必要があります。自動検証システムを使用して、プログラムにステートメントを追加することで、簡単に見つけることができます。

あなたのプログラムにない何かによって引き起こされた問題は、尊厳をもって扱われなければなりません。問題がローカルで解決できる場合、そのようなケースを追跡するために特別な値を返すことが許可される場合があります。他の場合には、例外を使用することが望ましいです。

例外をスローすると、try / catchブロックが検出されるまで、またはスタックの一番下に達するまでスタックが巻き戻されます。例外の値は、catchブロックに渡されます。これにより、この例外が実際に待機しているものであることを確認して処理できます。プログラムストリーム内の予測不可能なイベントを処理するには、finallyブロックを使用して、コードの特定の部分がどのような場合でも実行されるようにします。

演習

リプレイ

50％の場合に2つの数値を乗算し、他の場合にはMultiplicatorUnitFailure型の例外をスローする関数primitiveMultiplyがあるとします。これをラップする関数を作成し、成功する結果が得られるまで単純に呼び出します。

必要な例外のみを処理するようにしてください。

 function MultiplicatorUnitFailure() {} function primitiveMultiply(a, b) { if (Math.random() < 0.5) return a * b; else throw new MultiplicatorUnitFailure(); } function reliableMultiply(a, b) { //   } console.log(reliableMultiply(8, 8)); // → 64

ロックボックス

そのようなかなり不自然なオブジェクトを考えてみましょう：

 var box = { locked: true, unlock: function() { this.locked = false; }, lock: function() { this.locked = true; }, _content: [], get content() { if (this.locked) throw new Error("!"); return this._content; } };

これはロック付きの箱です。内部には配列がありますが、ボックスがロックされていない場合にのみ到達できます。_contentプロパティに直接アクセスすることはできません。

ボックスのロックを解除し、機能を実行し、終了する前にボックスを再度ロックする関数を引数として取る関数withBoxUnlockedを記述します。渡された関数が正しく実行されたか例外をスローしたかは関係ありません。

 function withBoxUnlocked(body) { //   } withBoxUnlocked(function() { box.content.push(""); }); try { withBoxUnlocked(function() { throw new Error("  ! !"); }); } catch (e) { console.log(" :", e); } console.log(box.locked); // → true

ボーナスゲームとして、withBoxUnlockedを呼び出すとき、ボックスがロックされていないときは、ボックスがロックされていないことを確認してください。

表現力豊かなJavaScript：エラーの検出と処理

内容